/* ===== Pegasus Copilot Dashboard v7 — Ultra-Premium Luxury Edition ===== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* ======== FONT IMPORTS (Mitarbeiter-Liste V4) ======== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== CSS VARIABLES — Theme System ===== */ /* ── Theme: Default (Ultra-Premium Luxury) ── */ :root { --bg-base: #FAF6EF; --bg-elevated: #FFFFFF; --bg-hover: #F5F1EA; --border: rgba(197,165,90,0.12); --border-strong: rgba(197,165,90,0.22); --text-primary: #0F1B2D; --text-muted: #8B7E74; --text-subtle: #A89E94; --accent: #C5A55A; --accent-hover: #B8943F; --accent-subtle: rgba(197,165,90,0.08); --success: #3D7A5A; --success-bg: rgba(61,122,90,0.06); --warning: #C5A55A; --warning-bg: rgba(197,165,90,0.06); --danger: #9B3B3B; --danger-bg: rgba(155,59,59,0.06); --homeoffice: #7B6BAA; --homeoffice-bg: rgba(123,107,170,0.06); --bg-card: #FFFFFF; --bg: #FAF6EF; --text-secondary:#8B7E74; /* Luxury Shadows */ --shadow: 0 1px 3px rgba(15,27,45,0.04), 0 1px 2px rgba(197,165,90,0.03); --shadow-md: 0 4px 16px rgba(15,27,45,0.06), 0 1px 3px rgba(197,165,90,0.04); --shadow-lg: 0 12px 40px rgba(15,27,45,0.08), 0 2px 8px rgba(197,165,90,0.04); --shadow-card: 0 2px 16px rgba(197,165,90,0.05), 0 1px 3px rgba(0,0,0,0.03); --radius: 14px; --radius-lg: 18px; --transition: 280ms cubic-bezier(0.4, 0, 0.2, 1); --sidebar-w: 260px; --sidebar-w-collapsed: 68px; /* Sidebar — premium clean white */ --sidebar-bg: #FFFFFF; --sidebar-border:rgba(197,165,90,0.10); --header-bg: #FFFFFF; --card-bg: #FFFFFF; /* Fonts */ --font-display: 'Outfit', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; /* Micro-detail tokens */ --glow-accent: 0 0 0 1px rgba(197,165,90,0.10), 0 2px 12px rgba(197,165,90,0.06); --inner-shadow: inset 0 1px 0 rgba(255,255,255,0.8); --card-hover-glow: 0 0 0 1px rgba(197,165,90,0.14), 0 8px 24px rgba(197,165,90,0.06), 0 2px 6px rgba(15,27,45,0.03); } /* ── Theme: Dark (Rich Charcoal + Gold) ─────────────────── */ body.theme-dark { --bg-base: #111113; --bg-elevated: #1A1A1F; --bg-hover: #222228; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --text-primary: #F5F1EA; --text-muted: #9A9AA0; --text-subtle: #6B6B73; --accent: #C5A55A; --accent-hover: #D4B46A; --accent-subtle: rgba(197,165,90,0.1); --success: #4ADE80; --success-bg: rgba(74,222,128,0.1); --warning: #FBBF24; --warning-bg: rgba(251,191,36,0.1); --danger: #F87171; --danger-bg: rgba(248,113,113,0.1); --homeoffice: #A78BFA; --homeoffice-bg: rgba(167,139,250,0.1); --bg-card: #1A1A1F; --bg: #111113; --text-secondary:#9A9AA0; --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card: 0 1px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06); --sidebar-bg: #111113; --sidebar-border:rgba(255,255,255,0.06); --header-bg: #111113; --card-bg: #1A1A1F; --glow-accent: 0 0 0 1px rgba(197,165,90,0.12), 0 2px 12px rgba(197,165,90,0.08); --card-hover-glow: 0 0 0 1px rgba(197,165,90,0.16), 0 8px 24px rgba(0,0,0,0.3); } /* ── Theme: Light (Ultra-Premium Warm Ivory) ──────────────────── */ body.theme-light, body.light-mode { --bg-base: #FAF6EF; --bg-elevated: #FFFFFF; --bg-hover: #F5F1EA; --border: rgba(197,165,90,0.12); --border-strong: rgba(197,165,90,0.22); --text-primary: #0F1B2D; --text-muted: #8B7E74; --text-subtle: #A89E94; --accent: #C5A55A; --accent-hover: #B8943F; --accent-subtle: rgba(197,165,90,0.06); --success-bg: rgba(61,122,90,0.06); --warning-bg: rgba(197,165,90,0.06); --danger-bg: rgba(155,59,59,0.06); --homeoffice: #7B6BAA; --homeoffice-bg: rgba(123,107,170,0.06); --bg-card: #FFFFFF; --bg: #FAF6EF; --text-secondary:#8B7E74; --shadow: 0 1px 3px rgba(15,27,45,0.04), 0 1px 2px rgba(197,165,90,0.03); --shadow-md: 0 4px 16px rgba(15,27,45,0.06), 0 1px 3px rgba(197,165,90,0.04); --shadow-lg: 0 12px 40px rgba(15,27,45,0.08), 0 2px 8px rgba(197,165,90,0.04); --shadow-card: 0 2px 16px rgba(197,165,90,0.05), 0 1px 3px rgba(0,0,0,0.03); --sidebar-bg: #FFFFFF; --sidebar-border:rgba(197,165,90,0.10); --header-bg: #FFFFFF; --card-bg: #FFFFFF; } /* ── Theme: Modern (Clean Flat Slate + Gold-Akzent — Linear/Vercel-Vibe) ── */ body.theme-modern { --bg-base: #F6F7F9; --bg-elevated: #FFFFFF; --bg-hover: #EEF1F4; --border: rgba(15,23,42,0.08); --border-strong: rgba(15,23,42,0.14); --text-primary: #0F172A; --text-muted: #64748B; --text-subtle: #94A3B8; --accent: #C5A55A; --accent-hover: #B8943F; --accent-subtle: rgba(197,165,90,0.08); --success: #16A34A; --success-bg: rgba(22,163,74,0.10); --warning: #D97706; --warning-bg: rgba(217,119,6,0.10); --danger: #DC2626; --danger-bg: rgba(220,38,38,0.10); --homeoffice: #6366F1; --homeoffice-bg: rgba(99,102,241,0.10); --bg-card: #FFFFFF; --bg: #F6F7F9; --text-secondary:#64748B; --shadow: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 14px rgba(15,23,42,0.08); --shadow-lg: 0 14px 36px rgba(15,23,42,0.10); --shadow-card: 0 1px 3px rgba(15,23,42,0.06); --sidebar-bg: #FFFFFF; --sidebar-border:rgba(15,23,42,0.07); --header-bg: #FFFFFF; --card-bg: #FFFFFF; --glow-accent: 0 0 0 1px rgba(197,165,90,0.10), 0 2px 12px rgba(197,165,90,0.05); --card-hover-glow: 0 0 0 1px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.06); --inner-shadow: inset 0 1px 0 rgba(255,255,255,0.9); } /* ── Theme: Cream (Pegasus Copilot — Ultra-Premium Luxury) ──────────────── */ body.theme-cream { --bg-base: #FAF6EF; --bg-elevated: #FFFFFF; --bg-hover: #F5F1EA; --border: rgba(197,165,90,0.12); --border-strong: rgba(197,165,90,0.22); --text-primary: #0F1B2D; --text-muted: #8B7E74; --text-subtle: #A89E94; --accent: #C5A55A; --accent-hover: #B8943F; --accent-subtle: rgba(197,165,90,0.06); --success: #3D7A5A; --success-bg: rgba(61,122,90,0.06); --warning: #C5A55A; --warning-bg: rgba(197,165,90,0.06); --danger: #9B3B3B; --danger-bg: rgba(155,59,59,0.06); --homeoffice: #7B6BAA; --homeoffice-bg: rgba(123,107,170,0.06); --bg-card: #FFFFFF; --bg: #FAF6EF; --text-secondary:#8B7E74; --shadow: 0 1px 3px rgba(15,27,45,0.04), 0 1px 2px rgba(197,165,90,0.03); --shadow-md: 0 4px 16px rgba(15,27,45,0.06), 0 1px 3px rgba(197,165,90,0.04); --shadow-lg: 0 12px 40px rgba(15,27,45,0.08), 0 2px 8px rgba(197,165,90,0.04); --shadow-card: 0 2px 16px rgba(197,165,90,0.05), 0 1px 3px rgba(0,0,0,0.03); --sidebar-bg: rgba(255,255,255,0.97); --sidebar-border:rgba(197,165,90,0.10); --header-bg: rgba(255,255,255,0.96); --card-bg: #FFFFFF; --glow-accent: 0 0 0 1px rgba(197,165,90,0.10), 0 2px 12px rgba(197,165,90,0.06); --card-hover-glow: 0 0 0 1px rgba(197,165,90,0.14), 0 8px 24px rgba(197,165,90,0.06), 0 2px 6px rgba(15,27,45,0.03); } /* Cream-specific component tweaks — warm premium feel */ body.theme-cream input, body.theme-cream textarea, body.theme-cream select { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } body.theme-cream .modal-overlay { background: rgba(15,27,45,0.25); } body.theme-cream .toast { box-shadow: 0 8px 24px rgba(15,27,45,0.1); } body.theme-cream .portal-hero { background: linear-gradient(135deg, rgba(197,165,90,0.08) 0%, rgba(197,165,90,0.04) 100%); border-color: rgba(197,165,90,0.18); } body.theme-cream .shift-dropdown-menu { background: var(--bg-elevated); border-color: var(--border); box-shadow: 0 8px 24px rgba(15,27,45,0.1); } body.theme-cream tbody tr:nth-child(even) { background: rgba(197,165,90,0.025); } body.theme-cream .cal-view-btn { color: var(--text-muted); } body.theme-cream .cal-view-btn.active { background: var(--accent-subtle); color: var(--accent); } /* ── Theme-specific component overrides ────────────── */ /* Cards / widgets — ensure CSS vars propagate */ .db-kpi-card { background: var(--card-bg); border-color: var(--border); } .db-section { background: var(--card-bg); border-color: var(--border); } .widget { background: var(--card-bg); border-color: var(--border); } .db-action-btn { border-color: var(--border); } .db-highlight { background: var(--bg-elevated); border-color: var(--border); } /* Inputs */ body.theme-light input, body.theme-light textarea, body.theme-light select, body.light-mode input, body.light-mode textarea, body.light-mode select { background: var(--bg-elevated); } /* Modals */ .modal-content { background: var(--bg-elevated); border-color: var(--border); } .modal-overlay { background: rgba(0,0,0,.55); } body.theme-light .modal-overlay, body.light-mode .modal-overlay { background: rgba(15,27,45,.35); } /* Toasts */ body.theme-light .toast, body.light-mode .toast { box-shadow: 0 8px 24px rgba(15,27,45,0.12); } /* Portal hero */ body.theme-light .portal-hero, body.light-mode .portal-hero { background: linear-gradient(135deg,rgba(197,165,90,.06) 0%,rgba(197,165,90,.03) 100%); border-color: rgba(197,165,90,0.15); } body.theme-blue .portal-hero { background: linear-gradient(135deg,rgba(197,165,90,.12) 0%,rgba(197,165,90,.08) 100%); border-color: rgba(197,165,90,0.25); } /* Notification panel */ .notif-panel { background: var(--bg-elevated); border-color: var(--border); } /* Cal buttons light */ body.theme-light .cal-view-btn, body.light-mode .cal-view-btn { color: #8B7E74; } body.theme-light .cal-view-btn.active, body.light-mode .cal-view-btn.active { background: var(--accent-subtle, rgba(197,165,90,0.12)); color: var(--accent); } /* List items */ .vacation-item { border-color: var(--border); } .approval-widget-item { border-color: var(--border); } /* Dropdown shift menu light */ body.theme-light .shift-dropdown-menu, body.light-mode .shift-dropdown-menu { background: #FFFFFF; border-color: rgba(197,165,90,0.12); box-shadow: 0 8px 24px rgba(15,27,45,0.1); } /* Table rows */ body.theme-light tbody tr:nth-child(even), body.light-mode tbody tr:nth-child(even) { background: rgba(197,165,90,0.025); } body.theme-blue tbody tr:nth-child(even) { background: rgba(197,165,90,0.06); } html, body { height: 100%; } body { font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); background: var(--bg-base); color: var(--text-primary); font-size: 14px; line-height: 1.5; transition: background 0.35s ease, color 0.35s ease; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Headings use display font */ h1, h2, h3, h4, .header-title, .page-head-title, .db-kpi-val, .exec-title, .wizard-title, .modal-title, .sidebar-brand-name { font-family: var(--font-display, 'Outfit', system-ui, sans-serif); } /* Global luxury scrollbar — thin, gold-tinted */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(197,165,90,0.15); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(197,165,90,0.28); } * { scrollbar-width: thin; scrollbar-color: rgba(197,165,90,0.15) transparent; } /* Selection color */ ::selection { background: rgba(197,165,90,0.2); color: var(--text-primary); } /* ===== LOGIN PAGE ===== */ .login-page { position: fixed; inset: 0; background: var(--bg-base); display: flex; align-items: center; justify-content: center; z-index: 100; } .login-page.hidden { display: none; } .login-box { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; width: 100%; max-width: 400px; box-shadow: 0 24px 64px rgba(0,0,0,0.3); } .login-header { text-align: center; margin-bottom: 32px; } .login-header img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 14px; } .login-header h1 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .login-header p { color: var(--text-muted); font-size: 13px; } /* ===== FORMS ===== */ .form-group { margin-bottom: 16px; } .form-group-full { grid-column: 1 / -1; } label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; } input, textarea, select { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; background: var(--bg-base); color: var(--text-primary); font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } input::placeholder, textarea::placeholder { color: var(--text-subtle); opacity: 0.7; } body.light-mode input, body.light-mode textarea, body.light-mode select { background: var(--bg-elevated); } input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(197,165,90,0.35); box-shadow: 0 0 0 3px rgba(197,165,90,0.06), 0 2px 8px rgba(197,165,90,0.04); background: var(--bg-elevated); } textarea { resize: vertical; min-height: 80px; } select option { background: var(--bg-elevated); } /* ===== BUTTONS — Refined ===== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; text-decoration: none; border: none; transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, var(--accent), #B8943F); color: #fff; box-shadow: 0 1px 3px rgba(197,165,90,0.3), 0 1px 2px rgba(0,0,0,0.1); } .btn-primary:hover { background: linear-gradient(135deg, #B8943F, #A8843A); box-shadow: 0 4px 14px rgba(197,165,90,0.25), 0 1px 3px rgba(0,0,0,0.1); transform: translateY(-1px); } .btn-secondary { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); } .btn-ghost { background: transparent; color: var(--text-muted); border: none; } .btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); } .doc-scope-btn.active { background: var(--accent); color: #fff; } .doc-scope-btn:not(.active) { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); } .doc-scope-btn:not(.active):hover { color: var(--text-primary); background: var(--bg-hover); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #2D6B48; } .btn-danger { background: rgba(155,59,59,0.12); color: var(--danger); } .btn-danger:hover { background: rgba(155,59,59,0.22); } .btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 7px; } /* ── Loading State ────────────────────────────────── */ .btn-loading { pointer-events: none; opacity: 0.8; position: relative; padding-right: 36px !important; } .btn-loading::after { content: ''; position: absolute; right: 10px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: btnSpin .55s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } } .btn-loading.btn-secondary::after, .btn-loading.btn-ghost::after { border-color: rgba(197,165,90,0.25); border-top-color: var(--accent); } /* ── Input Error State ────────────────────────────── */ .input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(155,59,59,0.12) !important; } .field-error-msg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--danger); margin-top: 5px; font-weight: 500; } /* ── Bulk Action Bar ──────────────────────────────── */ .bulk-action-bar { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent-subtle); border: 1px solid rgba(197,165,90,0.2); border-radius: 10px; margin-bottom: 12px; animation: dbFadeUp .2s ease both; } .bulk-action-bar.visible { display: flex; } .bulk-action-bar-count { font-size: 13px; font-weight: 600; color: var(--accent); } .bulk-select-all-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; margin-right: 4px; } .bulk-select-all-label input { cursor: pointer; } /* ══════════════════════════════════════════════════════ APPROVAL LIST — Mitarbeiterliste-Style (ml-row clone) ══════════════════════════════════════════════════════ */ /* Filter row */ .apv-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .apv-filter-search { display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-base); flex: 1; min-width: 200px; max-width: 340px; transition: border-color 0.2s; } .apv-filter-search:focus-within { border-color: var(--accent); } .apv-filter-search svg { color: var(--text-muted); flex-shrink: 0; opacity: 0.4; } .apv-filter-search input { border: none; background: none; padding: 12px 0; width: 100%; font-size: 14px; color: var(--text-primary); outline: none; font-family: var(--font-body); } .apv-filter-search input::placeholder { color: var(--text-subtle); } .apv-filter-row select { padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-base); color: var(--text-primary); font-size: 13px; font-family: var(--font-body); outline: none; cursor: pointer; } .apv-filter-row select:focus { border-color: var(--accent); } /* List container */ .apv-list { margin-top: 0; } /* Empty state */ .apv-empty { padding: 64px 24px; text-align: center; } .apv-empty-check { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; background: var(--success-bg); display: flex; align-items: center; justify-content: center; } .apv-empty-check svg { color: var(--success); } .apv-empty-title { font-size: 16px; font-weight: 700; color: var(--text-primary); font-family: var(--font-display); margin-bottom: 6px; } .apv-empty-sub { font-size: 13px; color: var(--text-muted); max-width: 320px; margin: 0 auto; } /* Row approval animation */ .apv-row.apv-removing { animation: apvRowRemove 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes apvRowRemove { 0% { opacity: 1; max-height: 80px; transform: translateX(0); } 40% { opacity: 0.5; transform: translateX(20px); } 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transform: translateX(40px); } } /* Row enter animation removed — Discord-style instant rendering */ @keyframes apvRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Stagger rows */ .apv-row:nth-child(2) { animation-delay: 20ms; } .apv-row:nth-child(3) { animation-delay: 40ms; } .apv-row:nth-child(4) { animation-delay: 60ms; } .apv-row:nth-child(5) { animation-delay: 80ms; } .apv-row:nth-child(6) { animation-delay: 100ms; } .apv-row:nth-child(7) { animation-delay: 120ms; } .apv-row:nth-child(8) { animation-delay: 140ms; } .apv-row:nth-child(9) { animation-delay: 160ms; } .apv-row:nth-child(10) { animation-delay: 180ms; } /* Action buttons — bigger on desktop, always visible */ .apv-btn { min-height: 32px; min-width: 32px; justify-content: center; } @media (hover: hover) { .apv-actions-cell .apv-btn { opacity: 0; transition: opacity 0.15s; } .apv-row:hover .apv-actions-cell .apv-btn { opacity: 1; } } /* Header row — like ml-list-header */ .apv-list-header { display: grid; grid-template-columns: 38px 3px 1fr 120px 80px 120px 160px; gap: 18px; padding: 12px 20px 12px 22px; align-items: center; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-weight: 700; } /* Row — like ml-row */ .apv-row { display: grid; grid-template-columns: 38px 3px 1fr 120px 80px 120px 160px; gap: 18px; padding: 14px 20px 14px 22px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); position: relative; cursor: default; transition: background 0.15s; contain: layout style; } .apv-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity 0.15s; } .apv-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--bg-hover)); } .apv-row:hover::before { opacity: 0.55; } .apv-row:last-child { border-bottom: none; } .apv-row.selected { background: color-mix(in srgb, var(--accent) 6%, transparent); } .apv-row.selected::before { opacity: 1; } /* Marker (index / checkbox) — like ml-marker */ .apv-row-marker { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; } .apv-row-idx { font-size: 11px; font-weight: 500; color: var(--text-subtle); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; transition: opacity 0.15s; } .apv-row-cb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; } .apv-row:hover .apv-row-idx { opacity: 0; } .apv-row:hover .apv-row-cb { opacity: 1; } .apv-row.selected .apv-row-idx { opacity: 0; } .apv-row.selected .apv-row-cb { opacity: 1; } .apv-row-cb-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--bg-base); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; } .apv-row-cb-box svg { display: none; } .apv-row.selected .apv-row-cb-box { background: var(--accent); border-color: var(--accent); } .apv-row.selected .apv-row-cb-box svg { display: block; } .apv-row-cb-box:hover { border-color: var(--accent); } /* Life bar — like ml-life */ .apv-life { width: 3px; height: 32px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 30%, transparent); } .apv-life.pending { background: var(--accent); } .apv-life.approved { background: var(--success); box-shadow: 0 0 10px color-mix(in srgb, var(--success) 35%, transparent); } .apv-life.rejected { background: var(--danger); } /* Name cell — like ml-name-cell */ .apv-name-cell { display: flex; align-items: center; gap: 14px; min-width: 0; } .apv-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 13px; color: #0a0d18; flex-shrink: 0; letter-spacing: -0.02em; } .apv-name-info { min-width: 0; flex: 1; } .apv-name { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .apv-dept { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; letter-spacing: -0.005em; } /* Date cell */ .apv-date { font-size: 12px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; } /* Days cell */ .apv-days { font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .apv-days-vacation { color: var(--accent); } .apv-days-sick { color: var(--danger); } /* Status — like ml-status */ .apv-status { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; } .apv-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .apv-status.pending { color: var(--accent); } .apv-status.pending .apv-status-dot { background: var(--accent); box-shadow: 0 0 6px rgba(197,165,90,0.4); } .apv-status.approved { color: var(--success); } .apv-status.approved .apv-status-dot { background: var(--success); box-shadow: 0 0 6px color-mix(in srgb, var(--success) 40%, transparent); } .apv-status.rejected { color: var(--danger); } .apv-status.rejected .apv-status-dot { background: var(--danger); } /* Actions — right side */ .apv-actions-cell { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .apv-reviewed { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .apv-au { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; background: var(--success-bg); border: 1px solid rgba(61,122,90,0.15); color: var(--success); cursor: pointer; text-transform: uppercase; } /* Responsive */ @media (max-width: 1024px) { .apv-list-header { display: none; } .apv-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; grid-template-columns: none; } .apv-row-marker { display: none; } .apv-life { display: none; } .apv-name-cell { flex: 1; min-width: 160px; } .apv-actions-cell { margin-left: auto; } } /* Reviewed by label */ .kb-reviewed { font-size: 10px; color: var(--text-muted); margin-top: 6px; } /* Responsive */ @media (max-width: 1024px) { .kb-board { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .kb-board { grid-template-columns: 1fr; } .kb-col { max-height: none; } .kb-search-wrap { max-width: 100%; } } /* Keep apv-btn for reuse */ .apv-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 8px; border: 1.5px solid transparent; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; font-family: var(--font-body); line-height: 1; } .apv-btn-approve { background: rgba(61,122,90,0.08); color: var(--success); border-color: rgba(61,122,90,0.18); } .apv-btn-approve:hover { background: var(--success); color: #fff; border-color: var(--success); } .apv-btn-reject { background: rgba(155,59,59,0.06); color: var(--danger); border-color: rgba(155,59,59,0.12); } .apv-btn-reject:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .apv-btn-ghost { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border); } .apv-btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); } .login-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; font-family: inherit; transition: background var(--transition), transform 0.1s ease; } .login-btn:hover { background: var(--accent-hover); } .login-btn:active { transform: scale(0.98); } /* ===== LAYOUT ===== */ .container { display: flex; min-height: 100vh; } /* ===== SIDEBAR — Floating Collapsible ===== */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid rgba(197,165,90,0.08); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow: hidden; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); z-index: 60; box-shadow: 1px 0 8px rgba(197,165,90,0.03); } /* Collapsed state */ .sidebar.collapsed { width: var(--sidebar-w-collapsed); } .sidebar.collapsed .sidebar-brand-name, .sidebar.collapsed .user-info-text, .sidebar.collapsed .menu-section-title, .sidebar.collapsed .menu-item-left span, .sidebar.collapsed .menu-count, .sidebar.collapsed .badge-new, .sidebar.collapsed .plan-lock-icon, .sidebar.collapsed .menu-group-header span, .sidebar.collapsed .menu-group-chevron, .sidebar.collapsed .btn-logout { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; transition: opacity 0.2s ease, width 0.2s ease; } .sidebar.collapsed .sidebar-header { padding: 16px 10px 14px; } .sidebar.collapsed .sidebar-brand { justify-content: center; margin-bottom: 10px; } .sidebar.collapsed .user-info { padding: 8px; justify-content: center; } .sidebar.collapsed .sidebar-menu { padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .sidebar.collapsed .menu-item { padding: 0; justify-content: center; border-radius: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .sidebar.collapsed .menu-item-left { gap: 0; justify-content: center; width: 100%; display: flex; align-items: center; justify-content: center; } .sidebar.collapsed .menu-item svg { margin: 0; width: 18px; height: 18px; } .sidebar.collapsed .menu-group { display: flex; flex-direction: column; align-items: center; gap: 1px; } .sidebar.collapsed .menu-group-header { padding: 0; justify-content: center; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .sidebar.collapsed .menu-group-header svg { margin: 0; width: 18px; height: 18px; } .sidebar.collapsed .menu-group-items { padding-left: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; } .sidebar.collapsed .menu-group-items .menu-item { padding: 0; width: 40px; height: 40px; } .sidebar.collapsed .sidebar-footer { justify-content: center; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .sidebar.collapsed .sidebar-footer .menu-item { width: 40px; height: 40px; } .sidebar.collapsed .sidebar-footer .footer-text, .sidebar.collapsed .sidebar-footer .sidebar-version { display: none; } /* Sidebar toggle button */ .sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; margin-left: auto; } .sidebar-toggle-btn:hover { background: var(--accent-subtle); border-color: rgba(197,165,90,0.2); color: var(--text-primary); } .sidebar-toggle-btn svg { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .sidebar.collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); } .sidebar.collapsed .sidebar-toggle-btn { margin-left: 0; } .sidebar-header { padding: 16px 14px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .sidebar-brand-name { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; transition: opacity 0.2s ease, width 0.2s ease; white-space: nowrap; overflow: hidden; } .user-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-subtle); border: 1px solid rgba(197,165,90,0.06); transition: all 0.25s ease; box-shadow: var(--inner-shadow); } .user-info:hover { background: rgba(197,165,90,0.1); border-color: rgba(197,165,90,0.12); } .user-info-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .user-info-text { flex: 1; min-width: 0; transition: opacity 0.2s ease, width 0.2s ease; } .user-name { font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { color: var(--text-muted); font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== SIDEBAR NAV ===== */ .sidebar-menu { flex: 1; padding: 10px 8px; overflow-y: auto; } .sidebar-menu::-webkit-scrollbar { width: 3px; } .sidebar-menu::-webkit-scrollbar-track { background: transparent; } .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(197,165,90,0.12); border-radius: 3px; } .menu-section { margin-bottom: 20px; } .menu-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); padding: 0 8px; margin-bottom: 4px; transition: opacity 0.2s ease, height 0.25s ease, margin 0.25s ease; overflow: hidden; white-space: nowrap; } .sidebar.collapsed .menu-section-title { height: 0; margin: 0; padding: 0; } /* Collapsed sidebar tooltips */ .sidebar.collapsed .menu-item { position: relative; } .sidebar.collapsed .menu-item::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .sidebar.collapsed .menu-item:hover::after { opacity: 1; } .menu-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-muted); border-left: none; margin-bottom: 2px; transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .menu-item-left { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; white-space: nowrap; } .menu-item-left span { transition: opacity 0.2s ease; } .menu-item svg { flex-shrink: 0; opacity: 0.7; transition: opacity var(--transition); } .menu-item:hover { background: var(--accent-subtle); color: var(--text-primary); } .menu-item:hover svg { opacity: 1; } .menu-item.active { background: var(--accent-subtle); color: var(--accent); font-weight: 600; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); } .menu-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2.5px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--accent), var(--accent-hover)); animation: sidebarPill 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes sidebarPill { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .menu-item.active svg { opacity: 1; color: var(--accent); } /* Plan-locked sidebar items */ .menu-item.plan-locked { opacity: 0.45; cursor: pointer; pointer-events: auto; } .menu-item.plan-locked:hover { background: var(--bg-hover); color: var(--text-muted); } .plan-lock-icon { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; } /* Upgrade modal */ .upgrade-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 5000; align-items: center; justify-content: center; } .upgrade-modal-overlay.open { display: flex; } .upgrade-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 36px 40px; max-width: 420px; width: 90%; text-align: center; position: relative; } .upgrade-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; line-height: 1; } .upgrade-modal h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; } .upgrade-modal p { font-size: .875rem; color: var(--text-secondary); margin: 0 0 24px; line-height: 1.6; } .upgrade-modal .upgrade-badge { display: inline-block; background: rgba(197,165,90,.15); color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; margin-bottom: 16px; text-transform: uppercase; } /* Sidebar count badge */ .menu-count { background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; flex-shrink: 0; line-height: 16px; } .menu-count.hidden { display: none; } .menu-count.count-warning { background: var(--warning); } /* NEU badge */ .badge-new { background: rgba(16,185,129,0.15); color: var(--success); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; } /* ===== COLLAPSIBLE SIDEBAR GROUP ===== */ .menu-group-header { display: flex; align-items: center; padding: 8px 10px; margin-top: 4px; border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 1px; transition: background var(--transition), color var(--transition); border-left: 3px solid transparent; gap: 9px; } .menu-group-header:hover { background: var(--bg-hover); color: var(--text-primary); } .menu-group-header svg { flex-shrink: 0; opacity: 0.7; } .menu-group-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: auto; animation: badgePulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .menu-group-badge.hidden { display: none !important; } /* Badge verstecken wenn Gruppe offen ist (Badges in Items sind dann sichtbar) */ .menu-group-header.open .menu-group-badge { display: none; } .menu-group-chevron { margin-left: 6px; transition: transform 0.2s ease; opacity: 0.4; flex-shrink: 0; } .menu-group-header.open .menu-group-chevron { transform: rotate(90deg); } .menu-group-items { padding-left: 22px; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .menu-group-items.open { max-height: 400px; } /* ===== SIDEBAR FOOTER ===== */ .sidebar-footer { padding: 10px; border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .btn-logout { flex: 1; padding: 8px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .btn-logout:hover { background: var(--danger-bg); color: var(--danger); } /* ===== MAIN CONTENT ===== */ .main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; min-width: 0; background: var(--bg-base); } @media (prefers-reduced-motion: reduce) { .main-content { scroll-behavior: auto; } } .main-content::-webkit-scrollbar { width: 4px; } .main-content::-webkit-scrollbar-track { background: transparent; } .main-content::-webkit-scrollbar-thumb { background: rgba(197,165,90,0.12); border-radius: 4px; } .main-content::-webkit-scrollbar-thumb:hover { background: rgba(197,165,90,0.22); } .header { background: var(--header-bg); border-bottom: 1px solid rgba(197,165,90,0.06); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 4px rgba(197,165,90,0.03); } .header-left { display: flex; align-items: center; gap: 12px; } .header-title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .header-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .header-actions { display: flex; gap: 8px; } .content { flex: 1; padding: 24px 28px; } /* ===== PAGE HEADER ===== */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg); position: relative; overflow: hidden; } .page-head::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), #C5A55A); } .page-head-left { display: flex; align-items: center; gap: 14px; } .page-head-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-subtle); border: 1px solid rgba(197,165,90,0.18); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .page-head-title { font-size: 20px; font-weight: 800; font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.2; } .page-head-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; font-weight: 400; } .page-head-actions { display: flex; gap: 8px; align-items: center; } /* ===== STAT SECTION LABEL ===== */ .stat-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 6px 0 10px; display: flex; align-items: center; gap: 10px; } /* Trend chart type toggle */ .trend-chart-toggle { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .trend-chart-toggle:hover { border-color: var(--accent); color: var(--text-primary); } .trend-chart-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; } .trend-chart-toggle.active:hover { opacity: 0.9; } .stat-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Mobile sidebar toggle button */ .mobile-menu-btn { display: none; padding: 8px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-primary); align-items: center; justify-content: center; flex-shrink: 0; } /* ===== PAGES — Instant switching (Discord-style) ===== */ .page { display: none; } .page.active { display: block; animation: pageFadeIn 0.12s ease-out; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Staggered list item entrance */ .list-item-enter { animation: listItemEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes listItemEnter { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } /* ===== PREMIUM TABLE ROW ANIMATIONS ===== */ tbody tr { animation: rowSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; transition: background 0.2s ease, box-shadow 0.2s ease; } tbody tr:nth-child(1) { animation-delay: 0s; } tbody tr:nth-child(2) { animation-delay: 0.03s; } tbody tr:nth-child(3) { animation-delay: 0.06s; } tbody tr:nth-child(4) { animation-delay: 0.09s; } tbody tr:nth-child(5) { animation-delay: 0.12s; } tbody tr:nth-child(6) { animation-delay: 0.15s; } tbody tr:nth-child(7) { animation-delay: 0.18s; } tbody tr:nth-child(8) { animation-delay: 0.21s; } tbody tr:nth-child(9) { animation-delay: 0.24s; } tbody tr:nth-child(10) { animation-delay: 0.27s; } @keyframes rowSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } tbody tr:hover { background: rgba(197,165,90,0.04) !important; } /* ===== FLOATING LABELS ===== */ .float-label { position: relative; margin-bottom: 16px; } .float-label input, .float-label textarea, .float-label select { width: 100%; padding: 16px 14px 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); font-size: 14px; font-family: inherit; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .float-label label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-muted); pointer-events: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .float-label textarea ~ label { top: 16px; transform: none; } .float-label input:focus, .float-label textarea:focus, .float-label select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,0.12); outline: none; } .float-label input:focus ~ label, .float-label input:not(:placeholder-shown) ~ label, .float-label textarea:focus ~ label, .float-label textarea:not(:placeholder-shown) ~ label, .float-label select:focus ~ label, .float-label select:valid ~ label { top: 4px; transform: none; font-size: 10px; font-weight: 600; color: var(--accent); letter-spacing: 0.5px; text-transform: uppercase; } /* ===== PREMIUM BUTTON PRESS EFFECT ===== */ .btn:active { transform: scale(0.97); transition: transform 0.08s ease; } /* ===== CARD HOVER LIFT ===== */ .card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-color: var(--border-strong); } /* ===== SKELETON LOADING ===== */ .skeleton { background: var(--bg-hover); border-radius: 8px; opacity: 0.6; } /* ===== USER FILTER CHIPS ===== */ .user-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .user-filter-chip:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } .user-filter-chip.active { background: rgba(197,165,90,0.1); color: var(--accent); border-color: rgba(197,165,90,0.3); } .user-filter-select { padding: 5px 24px 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-primary); font-size: .78rem; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6578' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; transition: border-color 0.15s; } .user-filter-select:focus { border-color: var(--accent); outline: none; } /* ===== MODERN RANGE SLIDER ===== */ /* Old slider styles removed - using .wiz-range below */ /* ===== BADGE PULSE FOR COUNTS ===== */ @keyframes badgePulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } .badge-new { animation: badgePulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ===== MODAL PREMIUM ENTRANCE ===== */ .modal-box { animation: modalSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modalSpring { 0% { opacity: 0; transform: scale(0.95) translateY(12px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* ===== FOCUS RING ===== */ input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 1.5px solid rgba(197,165,90,0.4); outline-offset: 2px; } /* Submit success flash — toned down */ @keyframes submitFlash { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.3); } 50% { box-shadow: 0 0 0 4px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } /* ===== APPLE-STYLE MICRO ANIMATIONS ===== */ /* Smooth fade-up for cards, stats, widgets */ @keyframes smoothUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes smoothScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes gentlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* shimmerSlide removed — no shimmer effects */ /* Cards get staggered entrance */ .card { animation: smoothUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .card:nth-child(2) { animation-delay: 0.05s; } .card:nth-child(3) { animation-delay: 0.1s; } .card:nth-child(4) { animation-delay: 0.15s; } /* KPI/Stat cards spring in */ .kpi-card, .stat-card, .db-kpi-card { animation: smoothUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .kpi-card:nth-child(1), .stat-card:nth-child(1), .db-kpi-card:nth-child(1) { animation-delay: 0s; } .kpi-card:nth-child(2), .stat-card:nth-child(2), .db-kpi-card:nth-child(2) { animation-delay: 0.06s; } .kpi-card:nth-child(3), .stat-card:nth-child(3), .db-kpi-card:nth-child(3) { animation-delay: 0.12s; } .kpi-card:nth-child(4), .stat-card:nth-child(4), .db-kpi-card:nth-child(4) { animation-delay: 0.18s; } .kpi-card:nth-child(5), .stat-card:nth-child(5), .db-kpi-card:nth-child(5) { animation-delay: 0.24s; } /* Smooth hover lifts (Apple-style) */ .kpi-card, .stat-card, .db-kpi-card, .portal-action-btn, .dept-card-v2 { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.2s ease; } .kpi-card:hover, .stat-card:hover, .db-kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* Buttons: subtle press effect */ .btn { transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn:active { transform: scale(0.95); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.96) translateY(0); } /* Portal action buttons: spring hover */ .portal-action-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .portal-action-btn:active { transform: translateY(-1px) scale(0.98); } /* Smooth tab switching */ .tab-btn, .filter-btn, .seg-btn { padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; font-family: var(--font-body, inherit); color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; position: relative; } .tab-btn:hover, .filter-btn:hover, .seg-btn:hover { color: var(--text-primary); background: var(--bg-hover); } .tab-btn.active, .filter-btn.active, .seg-btn.active { color: var(--accent); background: var(--accent-subtle, rgba(197,165,90,0.12)); font-weight: 700; } /* Tab bar container */ .tab-bar, .seg-group, .filter-bar { display: flex; gap: 4px; padding: 3px; background: var(--bg-hover); border-radius: 10px; border: 1px solid var(--border); } /* Table rows: subtle hover slide */ tbody tr { transition: background 0.15s ease, transform 0.15s ease; } tbody tr:hover { background: rgba(197,165,90,0.03); } /* Sidebar menu items: smooth feedback */ .menu-item { transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Badge count animation */ .badge-count, .notif-count { animation: smoothScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Vacation items: staggered entrance */ .vacation-item { animation: smoothUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .vacation-item:nth-child(1) { animation-delay: 0s; } .vacation-item:nth-child(2) { animation-delay: 0.04s; } .vacation-item:nth-child(3) { animation-delay: 0.08s; } .vacation-item:nth-child(4) { animation-delay: 0.12s; } .vacation-item:nth-child(5) { animation-delay: 0.16s; } /* Shift blocks: pop in */ .shift-block { animation: smoothScale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Modal: Apple-style spring entrance */ .modal-content { animation: modalSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modalSpring { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Toast: slide + spring */ .toast { animation: toastSpring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes toastSpring { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Greeting section fade in */ .db-greeting { animation: smoothUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Portal hero: gentle entrance */ .portal-hero { animation: smoothUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Skeleton loading states — static, no shimmer */ .skeleton-shimmer { background: var(--bg-elevated); border-radius: var(--radius); opacity: 0.6; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .submit-flash { animation: submitFlash 0.7s ease; border-radius: var(--radius); } /* Button loading state */ .btn.loading { position: relative; color: transparent !important; pointer-events: none; } .btn.loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: btnSpin 0.7s linear infinite; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes btnSpin { to { transform: translate(-50%,-50%) rotate(360deg); } } /* ===== CARDS ===== */ .card { background: var(--card-bg); border: none; border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .card:hover { box-shadow: var(--shadow-md); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } /* ===== STATS (legacy, still used on sub-pages) ===== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; } .stat-card { background: var(--bg-elevated); border: 1px solid var(--border); padding: 20px; border-radius: 14px; transition: box-shadow 0.2s ease, transform 0.2s ease; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); border-radius: 14px 14px 0 0; } .stat-card:nth-child(2)::before { background: var(--success); } .stat-card:nth-child(3)::before { background: var(--warning); } .stat-card:nth-child(4)::before { background: var(--danger); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .stat-value { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; line-height: 1; } .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .stat-card-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex-shrink: 0; } .stat-card-icon.purple { background: var(--accent-subtle); color: var(--accent); } .stat-card-icon.green { background: var(--success-bg); color: var(--success); } .stat-card-icon.yellow { background: var(--warning-bg); color: var(--warning); } .stat-card-icon.red { background: var(--danger-bg); color: var(--danger); } .stat-card-icon.blue { background: rgba(197,165,90,0.1); color: #C5A55A; } .stat-card-icon.teal { background: rgba(20,184,166,0.1); color: #14b8a6; } /* ===== KPI CARDS (Dashboard) ===== */ .kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; } .kpi-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1); cursor: default; box-shadow: 0 2px 16px rgba(197,165,90,0.05), 0 1px 3px rgba(0,0,0,0.03); position: relative; } .kpi-card:nth-child(1) { animation: cardEnter 0.4s 0.05s cubic-bezier(0.22,1,0.36,1) both; } .kpi-card:nth-child(2) { animation: cardEnter 0.4s 0.10s cubic-bezier(0.22,1,0.36,1) both; } .kpi-card:nth-child(3) { animation: cardEnter 0.4s 0.15s cubic-bezier(0.22,1,0.36,1) both; } .kpi-card:nth-child(4) { animation: cardEnter 0.4s 0.20s cubic-bezier(0.22,1,0.36,1) both; } .kpi-card:nth-child(5) { animation: cardEnter 0.4s 0.25s cubic-bezier(0.22,1,0.36,1) both; } @keyframes cardEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .kpi-card:hover { box-shadow: 0 8px 24px rgba(197,165,90,0.08), 0 2px 6px rgba(0,0,0,0.04); transform: translateY(-3px); } .kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 17px; } .kpi-value { font-size: 30px; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 5px; } .kpi-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .kpi-trend { font-size: 11px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 3px; } .kpi-trend.danger { color: var(--danger); } .kpi-trend.success { color: var(--success); } .kpi-trend.neutral { color: var(--text-muted); } .kpi-trend.up { color: var(--danger); } .kpi-trend.down { color: var(--success); } /* KPI color variants — luxury gold top-line accent */ .kpi-card.kpi-accent { border-top: 2.5px solid var(--accent); } .kpi-card.kpi-accent .kpi-icon { background: rgba(197,165,90,0.10); color: var(--accent); } .kpi-card.kpi-success { border-top: 2.5px solid var(--success); } .kpi-card.kpi-success .kpi-icon { background: rgba(61,122,90,0.08); color: var(--success); } .kpi-card.kpi-warning { border-top: 2.5px solid var(--warning); } .kpi-card.kpi-warning .kpi-icon { background: rgba(197,165,90,0.08); color: var(--warning); } .kpi-card.kpi-danger { border-top: 2.5px solid var(--danger); } .kpi-card.kpi-danger .kpi-icon { background: rgba(155,59,59,0.06); color: var(--danger); } .kpi-card.kpi-neutral { border-top: 2.5px solid rgba(197,165,90,0.18); } .kpi-card.kpi-neutral .kpi-icon { background: var(--bg-hover); color: var(--text-muted); } /* ===== DASHBOARD WIDGET GRID ===== */ .dashboard-grid { display: grid; gap: 16px; margin-bottom: 16px; } .dashboard-grid-2 { grid-template-columns: 3fr 2fr; } .dashboard-grid-eq { grid-template-columns: 1fr 1fr; } /* ===== WIDGET ===== */ .widget { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease; } .widget:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .widget-title { font-size: 14px; font-weight: 700; color: var(--text-primary); } .widget-link { font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 500; background: none; border: none; font-family: inherit; } .widget-link:hover { text-decoration: underline; } .widget-body { flex: 1; } .widget-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0; text-align: center; color: var(--text-muted); } .widget-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; display: flex; align-items: center; justify-content: center; } .widget-empty-text { font-size: 12px; } .widget-empty-action { margin-top: 10px; font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 600; background: none; border: none; font-family: inherit; } /* ===== APPROVAL WIDGET ITEMS ===== */ .approval-widget-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); border-radius: 8px; transition: background .15s; } .approval-widget-item:hover { background: var(--bg-hover); } .approval-widget-item:last-child { border-bottom: none; } .approval-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(197,165,90,0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .approval-info { flex: 1; min-width: 0; } .approval-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .approval-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .approval-actions { display: flex; gap: 4px; flex-shrink: 0; } .btn-inline-approve, .btn-inline-reject { width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transition: background var(--transition); } .btn-inline-approve { background: var(--success-bg); color: var(--success); } .btn-inline-approve:hover { background: var(--success); color: #fff; } .btn-inline-reject { background: var(--danger-bg); color: var(--danger); } .btn-inline-reject:hover { background: var(--danger); color: #fff; } /* ===== WEEK PREVIEW WIDGET ===== */ .week-day-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .week-day-item:last-child { border-bottom: none; } .week-day-label { width: 28px; font-weight: 700; font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .week-day-label.today { color: var(--accent); } .week-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } .week-chip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; } .week-chip.vacation { background: rgba(197,165,90,0.15); color: var(--accent); } .week-chip.sick { background: var(--warning-bg); color: var(--warning); } .week-chip.homeoffice { background: var(--success-bg); color: var(--success); } .week-chip.empty { color: var(--text-muted); font-style: italic; font-weight: 400; } /* ===== REMINDER WIDGET ===== */ .reminder-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .reminder-item:last-child { border-bottom: none; } .reminder-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .reminder-dot.warning { background: var(--warning); } .reminder-dot.danger { background: var(--danger); } .reminder-dot.info { background: var(--accent); } .reminder-text { font-size: 12px; color: var(--text-primary); line-height: 1.5; } .reminder-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ===== QUICK ACTIONS ===== */ .quick-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .quick-action-btn { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-primary); font-family: inherit; transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); text-align: left; } .quick-action-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } .qa-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(197,165,90,0.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } /* ===== PROGRESS BAR ===== */ .progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .progress-row:last-child { margin-bottom: 0; } .progress-label { font-size: 12px; color: var(--text-muted); width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .progress-bar-wrap { background: var(--bg-hover); border-radius: 4px; height: 6px; overflow: hidden; flex: 1; } .progress-bar-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.6s ease; } .progress-value { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 28px; text-align: right; flex-shrink: 0; } /* ===== TABLES ===== */ .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { padding: 10px 14px; text-align: left; font-weight: 700; font-size: 10.5px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-elevated); } td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.15s ease; position: relative; } tbody tr:hover td { background: rgba(197,165,90,0.03); } tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); } /* ===== BADGES ===== */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; font-family: var(--font-body); gap: 4px; } .badge-pending { background: var(--warning-bg); color: var(--warning); } .badge-approved { background: var(--success-bg); color: var(--success); } .badge-rejected { background: var(--danger-bg); color: var(--danger); } .badge-cancelled { background: rgba(100,116,139,.1); color: #94a3b8; text-decoration: line-through; } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-active { background: var(--success-bg); color: var(--success); } .badge-inactive { background: var(--danger-bg); color: var(--danger); } .badge-completed { background: var(--success-bg); color: var(--success); } /* ===== REP-TABLE BADGES ===== */ .rep-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } .rep-badge-sick { background: rgba(155,59,59,.08); color: var(--danger); border-color: rgba(155,59,59,.2); } .rep-badge-ho { background: rgba(197,165,90,.08); color: var(--accent); border-color: rgba(197,165,90,.2); } .rep-badge-su { background: rgba(245,158,11,.08); color: var(--warning); border-color: rgba(245,158,11,.2); } .rep-badge-fb { background: rgba(16,185,129,.08); color: var(--success); border-color: rgba(16,185,129,.2); } .rep-badge-ez { background: rgba(197,165,90,.08); color: #C5A55A; border-color: rgba(197,165,90,.2); } .rep-emp-table td { padding: 10px 14px; vertical-align: middle; } .rep-emp-table th { padding: 10px 14px; } .rep-emp-table tbody tr:hover td { background: var(--bg-secondary); } /* ===== FORM GRID ===== */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ===== ALERTS ===== */ .alert { display: none; padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; font-weight: 500; } .alert.show { display: block; } .alert-success { background: var(--success-bg); color: var(--success); border-left: 3px solid var(--success); } .alert-error { background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger); } /* ===== MODAL ===== */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px) saturate(110%); -webkit-backdrop-filter: blur(6px) saturate(110%); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { background: var(--bg-elevated); border: 1px solid rgba(197,165,90,0.10); border-radius: 22px; padding: 32px; max-width: 480px; width: 90%; box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 8px 24px rgba(197,165,90,0.05), 0 0 0 1px rgba(197,165,90,0.06); animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { font-size: 17px; font-weight: 700; margin-bottom: 14px; color: var(--text-primary); } .modal-content p { color: var(--text-muted); } .modal-footer { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; } /* ===== VACATION LIST ===== */ .vacations-list { display: grid; gap: 10px; } .vacation-item { background: var(--bg-hover); border: 1px solid var(--border); padding: 14px 16px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: border-color 0.15s ease; } .vacation-item:hover { border-color: rgba(197,165,90,0.25); } .vacation-info { flex: 1; } .vacation-dates { font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* ===== WELCOME CARD (legacy) ===== */ .welcome-card { text-align: center; padding: 40px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 24px; } .welcome-card h1 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .welcome-card p { font-size: 14px; color: var(--text-muted); } /* ===== COMPACT MODE ===== */ body.compact-mode .card { padding: 14px 16px; } body.compact-mode .card-header { margin-bottom: 12px; padding-bottom: 10px; } body.compact-mode .menu-item { padding: 7px 10px; font-size: 12.5px; } body.compact-mode .db-kpi-card { padding: 14px 16px; } body.compact-mode .db-kpi-value { font-size: 24px; } body.compact-mode .db-section { padding: 14px 16px; } body.compact-mode table th, body.compact-mode table td { padding: 8px 12px; font-size: 12.5px; } body.compact-mode .vacation-item { padding: 10px 12px; } body.compact-mode .stat-card { padding: 14px; } body.compact-mode .stat-value { font-size: 22px; } body.compact-mode .notif-item { padding: 9px 14px; } body.compact-mode input, body.compact-mode select, body.compact-mode textarea { padding: 8px 12px; font-size: 13px; } body.compact-mode .btn { padding: 7px 16px; font-size: 12.5px; } body.compact-mode .btn-sm { padding: 4px 10px; font-size: 11px; } /* ===== THEME TRANSITION ===== */ /* Applied briefly by JS during theme switch for smooth flash */ body.theme-switching *, body.theme-switching *::before, body.theme-switching *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease !important; } /* ===== NEW DASHBOARD v4 — Apple-Style ===== */ @keyframes dbFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes dbScaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ═══ Hero Section ═══ */ .db-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 30px 34px; background: var(--card-bg); border: 1px solid rgba(197,165,90,0.08); border-radius: var(--radius-lg); margin-bottom: 20px; position: relative; overflow: hidden; box-shadow: 0 2px 20px rgba(197,165,90,0.04), 0 1px 4px rgba(0,0,0,0.02); } .db-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, var(--accent), #D4BC72, rgba(197,165,90,0.3)); } .db-hero-left { flex: 1; } .db-hero h1 { font-size: 28px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.035em; line-height: 1.15; margin: 0; } .db-hero-date { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .db-hero-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .db-hero-highlights:empty { margin-top: 0; } /* Legacy compat */ .db-greeting { margin-bottom: 28px; } .db-greeting h1 { font-size: 30px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.035em; line-height: 1.15; } .db-date { font-size: 13px; color: var(--text-muted); margin-top: 6px; } .db-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .db-highlights:empty { display: none; } .db-highlight { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-elevated); animation: dbFadeUp .5s cubic-bezier(0.16, 1, 0.3, 1) both; transition: transform 0.2s ease, box-shadow 0.2s ease; } .db-highlight:hover { transform: translateY(-1px); } .db-highlight .hl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .db-highlight.hl-danger { border-color: rgba(155,59,59,0.15); background: rgba(155,59,59,0.06); color: var(--danger); } .db-highlight.hl-danger .hl-dot { background: var(--danger); box-shadow: 0 0 8px rgba(155,59,59,0.4); } .db-highlight.hl-warning { border-color: rgba(245,158,11,0.15); background: rgba(245,158,11,0.06); color: var(--warning); } .db-highlight.hl-warning .hl-dot { background: var(--warning); box-shadow: 0 0 8px rgba(245,158,11,0.4); } .db-highlight.hl-success { border-color: rgba(16,185,129,0.15); background: rgba(16,185,129,0.06); color: var(--success); } .db-highlight.hl-success .hl-dot { background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.4); } .db-highlight.hl-info { border-color: rgba(197,165,90,0.15); background: rgba(197,165,90,0.06); color: var(--accent); } .db-highlight.hl-info .hl-dot { background: var(--accent); box-shadow: 0 0 8px rgba(197,165,90,0.4); } /* ═══ Bento KPI Grid ═══ */ .db-kpi-bento { display: grid; grid-template-columns: 1fr 2.2fr; gap: 14px; margin-bottom: 20px; align-items: stretch; } .db-kpi-featured { padding: 28px 24px !important; justify-content: center; min-height: 100%; } .db-kpi-featured .db-kpi-val { font-size: 48px !important; } .db-kpi-featured .db-kpi-icon { width: 48px; height: 48px; border-radius: 14px; } .db-kpi-featured .db-kpi-lbl { font-size: 12px; } .db-kpi-quad { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; } .kpi-trend { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 4px; } /* Legacy */ .db-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; } .db-kpi-card { background: var(--card-bg); border: 1px solid rgba(197,165,90,0.08); border-radius: var(--radius-lg); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 16px rgba(197,165,90,0.05), 0 1px 3px rgba(0,0,0,0.03); transition: all .35s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden; } .db-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0.6; transition: opacity .3s ease; background: linear-gradient(90deg, rgba(197,165,90,0.3), rgba(197,165,90,0.08)); } .db-kpi-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s ease; } .db-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(197,165,90,0.08), 0 2px 8px rgba(0,0,0,0.04); border-color: rgba(197,165,90,0.14); } .db-kpi-card:hover::before { opacity: 1; } .db-kpi-accent::before { background: linear-gradient(90deg, var(--accent), #C5A55A); } .db-kpi-accent::after { background: radial-gradient(circle, rgba(197,165,90,0.06), transparent); } .db-kpi-green::before { background: linear-gradient(90deg, var(--success), #3D7A5A); } .db-kpi-green::after { background: radial-gradient(circle, rgba(16,185,129,0.06), transparent); } .db-kpi-orange::before { background: linear-gradient(90deg, var(--warning), #C5A55A); } .db-kpi-orange::after { background: radial-gradient(circle, rgba(245,158,11,0.06), transparent); } .db-kpi-blue::before { background: linear-gradient(90deg, #C5A55A, #C5A55A); } .db-kpi-blue::after { background: radial-gradient(circle, rgba(197,165,90,0.06), transparent); } .db-kpi-purple::before { background: linear-gradient(90deg, #a78bfa, #8B6FC0); } .db-kpi-purple::after { background: radial-gradient(circle, rgba(167,139,250,0.06), transparent); } .db-kpi-card:hover::after { opacity: 1; } .db-kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .db-kpi-card:hover .db-kpi-icon { transform: scale(1.08); } .db-kpi-accent .db-kpi-icon { background: rgba(197,165,90,.1); color: var(--accent); } .db-kpi-green .db-kpi-icon { background: rgba(16,185,129,0.08); color: var(--success); } .db-kpi-orange .db-kpi-icon { background: rgba(245,158,11,0.08); color: var(--warning); } .db-kpi-blue .db-kpi-icon { background: rgba(197,165,90,.08); color: #C5A55A; } .db-kpi-purple .db-kpi-icon { background: rgba(167,139,250,.08); color: #a78bfa; } .db-kpi-val { font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; } .db-kpi-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } /* ═══ Content Grid (Anträge breit + Sidebar) ═══ */ /* Echtes 2×2 Grid — 4 db-section direkt als Grid-Items. Row-first DOM-Reihenfolge: [Offene Anträge | Diese Woche] / [Morgen zurück | Erinnerungen] align-items: stretch (default) sorgt dafür, dass Widgets derselben Reihe automatisch gleich hoch sind. Kein Versatz mehr zwischen linker und rechter Spalte. */ .db-content-grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-auto-rows: auto; gap: 20px; align-items: stretch; } .db-section-subtle { background: transparent !important; border: 1px dashed var(--border) !important; } /* Legacy */ .db-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .db-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .db-main-grid > .db-section { min-height: 0; } .db-col { display: flex; flex-direction: column; gap: 20px; } /* Sections */ .db-section { background: var(--card-bg); border: 1px solid rgba(197,165,90,0.06); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: 0 2px 16px rgba(197,165,90,0.04), 0 1px 3px rgba(0,0,0,0.02); transition: box-shadow .35s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .35s ease; position: relative; } .db-section:hover { box-shadow: 0 6px 24px rgba(197,165,90,0.06), 0 2px 6px rgba(0,0,0,0.03); transform: translateY(-1px); border-color: rgba(197,165,90,0.10); } .db-section-compact { padding: 14px 16px; border-radius: 14px; } .db-section-compact .db-section-head { margin-bottom: 10px; } .db-section-compact .db-section-title { font-size: 12px; } .db-section-compact .widget-empty-sm { padding: 16px 8px; } .db-section-compact .widget-empty-sm .empty-icon { width: 28px; height: 28px; } .db-section-compact .widget-empty-sm .empty-icon svg { width: 14px; height: 14px; } .db-section-compact .widget-empty-sm .empty-text { font-size: 10.5px; } .db-section-compact .sparkline-chart { height: 56px; } .db-section-compact .sparkline-summary .big-num { font-size: 20px; } .db-section-compact .trend-chart { height: 56px; } .db-section-compact .wlist-item { padding: 6px 8px; gap: 8px; } .db-section-compact .wlist-avatar { width: 26px; height: 26px; font-size: 9px; border-radius: 8px; } .db-section-compact .wlist-name { font-size: 11px; } .db-section-compact .wlist-meta { font-size: 9.5px; } .db-section-compact .wlist-badge { font-size: 9px; padding: 2px 7px; } .db-section-compact .activity-item { padding: 4px 0 8px; } .db-section-compact .activity-action { font-size: 11px; } .db-section-compact .activity-desc { font-size: 10px; } .db-section-compact .activity-time { font-size: 9px; } .db-section-compact .donut-svg { width: 80px; height: 80px; } .db-section-compact .donut-wrap { gap: 14px; } .db-section-compact .donut-legend-item { font-size: 10.5px; } .db-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .db-section-title { font-size: 14px; font-weight: 700; font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.02em; } .db-section-link { font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; transition: opacity .2s; } .db-section-link:hover { opacity: .7; } .db-section-sub { font-size: 10px; font-weight: 500; color: var(--text-muted); opacity: 0.6; padding: 2px 8px; background: var(--bg-hover); border-radius: 6px; letter-spacing: 0.02em; } /* Quick Actions Grid */ .db-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .db-action-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; background: var(--bg-elevated); border: 1px solid rgba(197,165,90,0.08); border-radius: var(--radius-lg); cursor: pointer; font-family: inherit; transition: all .35s cubic-bezier(.16,1,.3,1); text-align: center; box-shadow: 0 2px 12px rgba(197,165,90,0.04), 0 1px 2px rgba(0,0,0,0.02); } .db-action-btn svg { color: var(--accent); opacity: .6; transition: all .3s ease; } .db-action-btn span { font-size: 11px; font-weight: 600; font-family: var(--font-body); color: var(--text-muted); transition: color .2s; } .db-action-btn:hover { background: rgba(197,165,90,.04); border-color: rgba(197,165,90,.14); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(197,165,90,0.07), 0 2px 6px rgba(0,0,0,0.03); } .db-action-btn:hover svg { opacity: 1; transform: scale(1.1); } .db-action-btn:hover span { color: var(--text-primary); } /* ===== MANAGEMENT ANALYTICS WIDGETS ===== */ /* Executive Status Card */ .db-exec-status { padding: 28px 32px !important; position: relative; overflow: hidden; } .db-exec-status::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; transition: background 0.4s; } .db-exec-status.status-green::before { background: linear-gradient(90deg, #3D7A5A, #3D7A5A); } .db-exec-status.status-yellow::before { background: linear-gradient(90deg, #C5A55A, #C5A55A); } .db-exec-status.status-red::before { background: linear-gradient(90deg, #9B3B3B, #9B3B3B); } .exec-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .exec-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; animation: execPulse 2s ease-in-out infinite; } .exec-status-dot.dot-green { background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.4); } .exec-status-dot.dot-yellow { background: var(--warning); box-shadow: 0 0 8px rgba(245,158,11,0.4); } .exec-status-dot.dot-red { background: var(--danger); box-shadow: 0 0 8px rgba(155,59,59,0.4); } @keyframes execPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } .exec-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .exec-subtitle { font-size: 11.5px; color: var(--text-muted); opacity: 0.7; margin-top: 1px; } .exec-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .exec-metric { text-align: center; padding: 14px 8px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.2s, background 0.2s; } .exec-metric:hover { border-color: var(--border-strong); background: var(--bg-elevated); } .exec-metric-val { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; } .exec-metric-val.val-green { color: var(--success); } .exec-metric-val.val-red { color: var(--danger); } .exec-metric-val.val-yellow { color: #C5A55A; } .exec-metric-val.val-blue { color: #C5A55A; } .exec-metric-lbl { font-size: 10px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; } /* Collapsible Expanded Section */ .db-expand-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); letter-spacing: 0.01em; } .db-expand-toggle:hover { background: var(--accent-subtle); border-color: rgba(197,165,90,0.2); color: var(--text-primary); } .db-expand-toggle svg { color: var(--accent); opacity: 0.6; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .db-expand-toggle.expanded svg { transform: rotate(45deg); } .db-expand-count { margin-left: auto; font-size: 10px; font-weight: 500; padding: 2px 8px; background: var(--accent-subtle); color: var(--accent); border-radius: 6px; } .db-expanded-section { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.3s; margin-top: 0; } .db-expanded-section.open { max-height: 2000px; opacity: 1; margin-top: 20px; } /* Row group titles */ .db-widget-row-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px; padding-left: 2px; display: flex; align-items: center; gap: 6px; opacity: 0; animation: dbWidgetFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .db-widget-row-title svg { width: 14px; height: 14px; opacity: 0.5; } /* Widget row stagger animation */ .db-widget-row { margin-top: 28px; } .db-widget-row:first-child { margin-top: 24px; } .db-widget-row .db-section { opacity: 0; transform: translateY(16px); animation: dbWidgetFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .db-widget-row:nth-child(2) .db-section { animation-delay: 0.06s; } .db-widget-row:nth-child(3) .db-section { animation-delay: 0.1s; } .db-widget-row:nth-child(4) .db-section { animation-delay: 0.14s; } .db-widget-row:nth-child(5) .db-section { animation-delay: 0.18s; } .db-widget-row:nth-child(6) .db-section { animation-delay: 0.22s; } .db-widget-row:nth-child(7) .db-section { animation-delay: 0.26s; } .db-widget-row:nth-child(8) .db-section { animation-delay: 0.30s; } .db-widget-row .db-grid .db-section:nth-child(2) { animation-delay: calc(var(--row-base, 0s) + 0.06s); } .db-widget-row .db-grid .db-section:nth-child(3) { animation-delay: calc(var(--row-base, 0s) + 0.1s); } .db-widget-row .db-grid .db-section:nth-child(4) { animation-delay: calc(var(--row-base, 0s) + 0.14s); } .db-widget-row .db-grid .db-section:nth-child(5) { animation-delay: calc(var(--row-base, 0s) + 0.18s); } .db-widget-row .db-grid .db-section:nth-child(6) { animation-delay: calc(var(--row-base, 0s) + 0.22s); } @keyframes dbWidgetFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Sparkline chart */ .sparkline-chart { display: flex; align-items: flex-end; gap: 4px; height: 72px; padding: 12px 4px 0; } .sparkline-bar { flex: 1; min-width: 4px; max-width: 12px; border-radius: 4px 4px 1px 1px; transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; position: relative; cursor: default; opacity: 0.85; } .sparkline-bar.bar-sick { background: linear-gradient(180deg, rgba(155,59,59,0.9) 0%, rgba(155,59,59,0.7) 100%); } .sparkline-bar.bar-attend { background: linear-gradient(180deg, rgba(61,122,90,0.9) 0%, rgba(16,185,129,0.7) 100%); } .sparkline-bar:hover { opacity: 1; transform: scaleY(1.04); transform-origin: bottom; } .sparkline-bar::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(15,27,45,0.92); backdrop-filter: blur(8px); color: #f1f5f9; font-size: 10px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .sparkline-bar:hover::after { opacity: 1; } .sparkline-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .sparkline-summary .big-num { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .sparkline-summary .big-num.sick { color: #9B3B3B; } .sparkline-summary .big-num.attend { color: #3D7A5A; } .sparkline-summary .sub-text { color: var(--text-muted); font-size: 11px; line-height: 1.5; opacity: 0.7; } /* Donut Chart */ .donut-wrap { display: flex; align-items: center; gap: 24px; padding: 8px 0; } .donut-svg { width: 110px; height: 110px; flex-shrink: 0; } .donut-svg circle { fill: none; stroke-width: 7; stroke-linecap: round; } .donut-bg { stroke: var(--border); } .donut-seg { transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15)); } .donut-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; } .donut-legend-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-secondary); } .donut-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .donut-legend-val { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--text-primary); } .donut-center-text { font-size: 10px; fill: var(--text-muted); text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.03em; text-transform: uppercase; } .donut-center-num { font-size: 20px; font-weight: 800; fill: var(--text-primary); text-anchor: middle; dominant-baseline: middle; } /* Bar Chart (Dept Vacation) */ .dept-bar-chart { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .dept-bar-row { display: flex; align-items: center; gap: 12px; font-size: 12px; } .dept-bar-label { width: 80px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; font-size: 11px; font-weight: 500; } .dept-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,0.6); border-radius: 5px; overflow: hidden; } .dept-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, rgba(197,165,90,0.7), rgba(197,165,90,0.9)); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .dept-bar-val { width: 24px; text-align: right; font-weight: 700; color: var(--text-primary); font-size: 12px; } /* Heatmap */ .heatmap-wrap { overflow-x: auto; padding: 4px 0; scrollbar-width: none; } .heatmap-wrap::-webkit-scrollbar { display: none; } .heatmap-header { display: flex; gap: 4px; margin-bottom: 6px; padding-left: 82px; } .heatmap-header span { width: 22px; text-align: center; font-size: 9px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; } .heatmap-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; } .heatmap-name { width: 78px; font-size: 10px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .heatmap-cell { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s; cursor: default; } .heatmap-cell:hover { transform: scale(1.25); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .hm-present { background: rgba(16,185,129,0.14); } .hm-vac { background: rgba(197,165,90,0.3); } .hm-sick { background: rgba(155,59,59,0.3); } .hm-leave { background: rgba(245,158,11,0.25); } .hm-empty { background: rgba(15,27,45,0.03); } .hm-weekend { background: rgba(255,255,255,0.012); } .heatmap-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 10px; color: var(--text-muted); } .heatmap-legend-item { display: flex; align-items: center; gap: 5px; } .heatmap-legend-box { width: 10px; height: 10px; border-radius: 3px; } /* Widget Lists */ .wlist { display: flex; flex-direction: column; gap: 1px; } .wlist-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .wlist-item:hover { background: rgba(255,255,255,0.035); } .wlist-avatar { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -0.01em; } .wlist-av-vac { background: linear-gradient(135deg, rgba(197,165,90,0.8), rgba(197,165,90,0.9)); } .wlist-av-sick { background: linear-gradient(135deg, rgba(155,59,59,0.8), rgba(155,59,59,0.9)); } .wlist-av-leave { background: linear-gradient(135deg, rgba(245,158,11,0.8), rgba(197,165,90,0.9)); } .wlist-av-default { background: linear-gradient(135deg, rgba(107,114,128,0.6), rgba(156,163,175,0.7)); } .wlist-info { flex: 1; min-width: 0; } .wlist-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .wlist-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; opacity: 0.8; } .wlist-badge { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 8px; white-space: nowrap; letter-spacing: 0.01em; } .wlist-badge-vac { background: rgba(197,165,90,0.08); color: #B8943F; } .wlist-badge-sick { background: rgba(155,59,59,0.07); color: #9B3B3B; } .wlist-badge-leave { background: rgba(197,165,90,0.07); color: #B8943F; } .wlist-badge-pending { background: rgba(197,165,90,0.07); color: #B8943F; } .wlist-badge-danger { background: rgba(155,59,59,0.06); color: #9B3B3B; } .wlist-badge-warn { background: rgba(197,165,90,0.06); color: #B8943F; } .wlist-more { text-align: center; padding: 8px; font-size: 11px; color: var(--text-muted); opacity: 0.6; } /* Activity Feed Timeline */ .activity-feed { position: relative; padding-left: 24px; } .activity-feed::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1.5px; background: linear-gradient(180deg, rgba(15,27,45,0.08) 0%, rgba(15,27,45,0.03) 100%); border-radius: 1px; } .activity-item { position: relative; padding: 8px 0 12px; } .activity-dot { position: absolute; left: -24px; top: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-elevated); box-shadow: 0 0 0 2px rgba(255,255,255,0.6); } .activity-dot-user { background: var(--accent); } .activity-dot-leave { background: #3D7A5A; } .activity-dot-sick { background: #9B3B3B; } .activity-dot-default { background: rgba(107,114,128,0.6); } .activity-action { font-size: 12px; color: var(--text-primary); font-weight: 600; letter-spacing: -0.01em; } .activity-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; } .activity-time { font-size: 10px; color: var(--text-muted); opacity: 0.45; margin-top: 3px; } /* Insight Cards */ .insights-list { display: flex; flex-direction: column; gap: 8px; } .insight-card { padding: 12px 16px; border-radius: 12px; border-left: 3px solid; font-size: 12px; line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; transition: transform 0.2s, box-shadow 0.2s; } .insight-card:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .insight-card .insight-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; } .insight-card .insight-text { color: var(--text-secondary); font-weight: 450; } .insight-danger { border-color: #9B3B3B; background: rgba(155,59,59,0.05); } .insight-warning { border-color: #C5A55A; background: rgba(245,158,11,0.05); } .insight-success { border-color: #3D7A5A; background: rgba(16,185,129,0.05); } .insight-info { border-color: #C5A55A; background: rgba(197,165,90,0.05); } .insight-danger .insight-icon { color: #C27070; } .insight-warning .insight-icon { color: #C5A55A; } .insight-success .insight-icon { color: #6ee7b7; } .insight-info .insight-icon { color: #E8C56A; } /* Absence Trend (6-month grouped bar) */ .trend-chart { display: flex; align-items: flex-end; gap: 12px; height: 80px; padding: 8px 4px 0; } .trend-group { display: flex; gap: 3px; align-items: flex-end; flex: 1; } .trend-bar { flex: 1; border-radius: 4px 4px 1px 1px; min-height: 2px; transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0.85; } .trend-bar:hover { opacity: 1; } .trend-bar-vac { background: linear-gradient(180deg, rgba(197,165,90,0.9), rgba(197,165,90,0.7)); } .trend-bar-sick { background: linear-gradient(180deg, rgba(155,59,59,0.9), rgba(155,59,59,0.7)); } .trend-labels { display: flex; justify-content: space-around; font-size: 10px; font-weight: 500; color: var(--text-muted); margin-top: 8px; opacity: 0.7; } .trend-legend { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-muted); } .trend-legend-item { display: flex; align-items: center; gap: 5px; } .trend-legend-dot { width: 8px; height: 8px; border-radius: 3px; } /* Birthday widget */ .birthday-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; transition: background 0.2s; } .birthday-item:hover { background: rgba(255,255,255,0.6); } .birthday-emoji { font-size: 20px; } .birthday-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .birthday-age { font-size: 11px; color: var(--text-muted); margin-left: auto; opacity: 0.7; } /* Widget empty state */ .widget-empty-sm { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 12px; gap: 6px; } .widget-empty-sm .empty-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .widget-empty-sm .empty-icon svg { width: 18px; height: 18px; opacity: 0.3; } .widget-empty-sm .empty-text { opacity: 0.5; font-size: 11.5px; } /* ===== EMPTY STATE ===== */ .widget-empty-sm, .widget-empty { opacity: 0.5; } /* Light mode overrides for analytics widgets */ body.theme-light .sparkline-bar.bar-sick, body.light-mode .sparkline-bar.bar-sick { background: linear-gradient(180deg, rgba(252,165,165,0.9), rgba(155,59,59,0.7)); } body.theme-light .sparkline-bar.bar-attend, body.light-mode .sparkline-bar.bar-attend { background: linear-gradient(180deg, rgba(110,231,183,0.9), rgba(16,185,129,0.7)); } body.theme-light .sparkline-bar::after, body.light-mode .sparkline-bar::after { background: rgba(15,27,45,0.9); color: #FAF6EF; } body.theme-light .sparkline-summary, body.light-mode .sparkline-summary { border-top-color: rgba(0,0,0,0.06); } body.theme-light .donut-bg, body.light-mode .donut-bg { stroke: rgba(0,0,0,0.05); } body.theme-light .dept-bar-track, body.light-mode .dept-bar-track { background: rgba(0,0,0,0.04); } body.theme-light .dept-bar-fill, body.light-mode .dept-bar-fill { background: linear-gradient(90deg, rgba(197,165,90,0.6), rgba(197,165,90,0.8)); } body.theme-light .hm-present, body.light-mode .hm-present { background: rgba(16,185,129,0.12); } body.theme-light .hm-vac, body.light-mode .hm-vac { background: rgba(197,165,90,0.18); } body.theme-light .hm-sick, body.light-mode .hm-sick { background: rgba(155,59,59,0.18); } body.theme-light .hm-leave, body.light-mode .hm-leave { background: rgba(245,158,11,0.15); } body.theme-light .hm-empty, body.light-mode .hm-empty { background: rgba(0,0,0,0.02); } body.theme-light .hm-weekend, body.light-mode .hm-weekend { background: rgba(0,0,0,0.01); } body.theme-light .wlist-item:hover, body.light-mode .wlist-item:hover { background: rgba(0,0,0,0.025); } body.light-mode .wlist-avatar { opacity: 0.9; } body.light-mode .activity-feed::before { background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); } body.light-mode .insight-danger { background: rgba(155,59,59,0.04); } body.light-mode .insight-warning { background: rgba(245,158,11,0.04); } body.light-mode .insight-success { background: rgba(16,185,129,0.04); } body.light-mode .insight-info { background: rgba(197,165,90,0.04); } body.light-mode .trend-legend { border-top-color: rgba(0,0,0,0.06); } body.light-mode .widget-empty-sm .empty-icon { background: rgba(0,0,0,0.03); } /* legacy compat */ .dash-hero, .kpi-strip, .dash-main-grid, .dash-quick-grid, .dash-greeting { display: none; } /* ===== SUCCESS OVERLAY ===== */ .success-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); animation: soFadeIn .3s ease both; } @keyframes soFadeIn { from { opacity:0; } to { opacity:1; } } .success-overlay-box { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 20px; padding: 40px 48px; text-align: center; animation: soSlideUp .4s cubic-bezier(.22,1,.36,1) both; box-shadow: 0 24px 64px rgba(0,0,0,.4); } @keyframes soSlideUp { from { opacity:0; transform:translateY(30px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } } .success-check-ring { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px; background: var(--success-bg); display: flex; align-items: center; justify-content: center; animation: soRingPop .5s .2s cubic-bezier(.22,1,.36,1) both; } @keyframes soRingPop { from { transform: scale(0); } to { transform: scale(1); } } .success-check-ring svg { color: var(--success); animation: soCheck .4s .5s ease both; } @keyframes soCheck { from { opacity:0; stroke-dashoffset:30; } to { opacity:1; stroke-dashoffset:0; } } .success-overlay-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; } .success-overlay-sub { font-size: 13px; color: var(--text-muted); } /* ===== SETTINGS TABS ===== */ /* ===== DOCUMENT UPLOAD ZONE ===== */ .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 40px; text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition); margin-bottom: 20px; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: rgba(197,165,90,0.04); } .upload-zone-icon { font-size: 36px; margin-bottom: 10px; } .upload-zone-text { font-size: 14px; color: var(--text-muted); font-weight: 500; } .upload-zone-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* ===== SECURITY / 2FA ===== */ .security-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border); gap: 24px; } .security-item:last-child { border-bottom: none; } .security-item-info { flex: 1; } .security-item-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .security-item-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; } /* Toggle Switch */ .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; margin-top: 2px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 12px; cursor: pointer; transition: background var(--transition); } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform var(--transition); } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } /* ===== REMINDER SETTINGS ===== */ .reminder-toggle-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); gap: 20px; } .reminder-toggle-item:last-child { border-bottom: none; } .reminder-toggle-info { flex: 1; } .reminder-toggle-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; } .reminder-toggle-desc { font-size: 12px; color: var(--text-muted); } /* ===== DEPARTMENT CARDS ===== */ .dept-grid { display: grid; grid-template-columns: repeat(var(--dept-cols, 3), 1fr); gap: 18px; margin-bottom: 20px; } .dept-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); } .dept-card:hover { box-shadow: var(--shadow-lg); } .dept-card-top { padding: 18px 18px 14px; border-left: 4px solid var(--accent); } .dept-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .dept-card-title { display: flex; align-items: center; gap: 10px; } .dept-color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; opacity: 0.7; } .dept-name { font-size: 15px; font-weight: 700; color: var(--text-primary); } .dept-card-actions { display: flex; gap: 6px; flex-shrink: 0; } .dept-action-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: .75rem; cursor: pointer; color: var(--text-muted); transition: all .15s; } .dept-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .dept-action-btn.danger:hover { background: #fef2f2; border-color: var(--danger); color: var(--danger); } .dept-leader-row { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-muted); margin-bottom: 12px; } .dept-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0; } .dept-stat { text-align: center; padding: 10px 8px; background: var(--bg-hover); border-radius: 8px; } .dept-stat-value { font-size: 20px; font-weight: 800; color: var(--text-primary); } .dept-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; } .dept-card-footer { padding: 10px 18px; border-top: 1px solid var(--border); background: var(--bg-hover); } .dept-members-preview { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .dept-member-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 20px; padding: 3px 8px; font-size: .75rem; color: var(--text-primary); } .dept-member-chip-more { font-size: .75rem; color: var(--text-muted); cursor: pointer; text-decoration: underline; } /* Member-list inside modal */ .dept-member-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); } .dept-member-row:last-child { border-bottom: none; } .dept-member-info { display: flex; flex-direction: column; gap: 2px; } .dept-member-name { font-size: .9rem; font-weight: 600; } .dept-member-role { font-size: .75rem; color: var(--text-muted); } /* ===== ANNOUNCEMENT BANNER ===== */ .ann-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; margin-bottom: 12px; animation: annBannerIn .3s ease; transition: opacity .2s, transform .2s; } @keyframes annBannerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .ann-banner-info { background: rgba(197,165,90,.15); border: 1px solid rgba(197,165,90,.35); border-left: 4px solid #C5A55A; } .ann-banner-warning { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.35); border-left: 4px solid #C5A55A; } .ann-banner-critical { background: rgba(155,59,59,.15); border: 1px solid rgba(155,59,59,.35); border-left: 4px solid #9B3B3B; } .ann-banner-icon { flex-shrink: 0; margin-top: 2px; } .ann-banner-info .ann-banner-icon { color: #C5A55A; } .ann-banner-warning .ann-banner-icon { color: #C5A55A; } .ann-banner-critical .ann-banner-icon { color: #9B3B3B; } .ann-banner-content { flex: 1; min-width: 0; } .ann-banner-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .ann-banner-msg { font-size: .82rem; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; } .ann-banner-dismiss { flex-shrink: 0; background: none; border: none; font-size: 1.3rem; color: var(--text-muted); cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 4px; transition: color .12s; } .ann-banner-dismiss:hover { color: var(--text-primary); } .ann-severity-badge { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; margin-right: 8px; vertical-align: middle; position: relative; top: -1px; } .ann-sev-info { background: rgba(197,165,90,.2); color: #C5A55A; } .ann-sev-warning { background: rgba(245,158,11,.2); color: #C5A55A; } .ann-sev-critical { background: rgba(155,59,59,.2); color: #9B3B3B; } /* ===== POSTEINGANG ===== */ .posteingang-list { display: flex; flex-direction: column; gap: 12px; } .posteingang-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; transition: box-shadow .15s, opacity .2s; } .posteingang-item.unread { background: rgba(197,165,90,.03); border-color: rgba(197,165,90,.15); } .posteingang-item.read { opacity: .75; } .posteingang-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); opacity: 1; } .posteingang-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 6px rgba(197,165,90,.4); } .posteingang-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .posteingang-severity { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 5px; } .posteingang-date { font-size: .78rem; color: var(--text-muted); margin-left: 8px; } .posteingang-from { font-size: .78rem; font-weight: 600; color: var(--accent); } .posteingang-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .posteingang-body { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; } /* Badge count for sidebar */ .badge-count { background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: auto; } /* ===== DEPT V2 — Stats Bar, Cards, Avatars ===== */ .dept-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .dept-stat-item { display: flex; align-items: center; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; transition: box-shadow .15s, transform .15s; } .dept-stat-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); } .dept-stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dept-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; } .dept-stat-txt { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 1px; } /* Filter bar */ .dept-filter-bar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; } .dept-search-wrap { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 12px; padding: 0 18px; color: var(--text-muted); transition: border-color .15s, box-shadow .15s; } .dept-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,0.1); } .dept-search-wrap svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .6; } .dept-search-wrap:focus-within svg { opacity: 1; color: var(--accent); } .dept-search-wrap input { border: none; background: transparent; padding: 14px 0; font-size: 1rem; color: var(--text-primary); outline: none; width: 100%; font-weight: 500; } .dept-search-wrap input::placeholder { color: var(--text-muted); font-weight: 400; } .dept-filter-bar select { padding: 14px 18px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-elevated); color: var(--text-primary); font-size: .9rem; font-weight: 500; cursor: pointer; outline: none; min-width: 180px; transition: border-color .15s; } .dept-filter-bar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,0.1); } .dept-filter-bar select:focus { border-color: var(--accent); } /* Card V2 */ .dept-card-v2 { background: var(--card-bg); border: none; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; display: flex; flex-direction: column; animation: smoothUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; position: relative; cursor: pointer; } .dept-card-v2::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--dept-color, var(--accent)); opacity: 0.6; transition: opacity 0.2s, width 0.2s; border-radius: 0 2px 2px 0; } .dept-card-v2:hover::before { opacity: 1; width: 4px; } .dept-card-v2:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .dept-card-v2:nth-child(1) { animation-delay: 0s; } .dept-card-v2:nth-child(2) { animation-delay: 0.06s; } .dept-card-v2:nth-child(3) { animation-delay: 0.08s; } .dept-card-v2:nth-child(4) { animation-delay: 0.1s; } .dept-card-v2:nth-child(5) { animation-delay: 0.12s; } .dept-card-v2:nth-child(6) { animation-delay: 0.14s; } .dept-card-v2-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .dept-card-v2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .dept-card-v2-title-wrap { min-width: 0; flex: 1; } .dept-card-v2-title { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dept-card-v2-leader { margin-top: 4px; } .dept-leader-label { font-size: .82rem; color: var(--text-muted); } .dept-leader-label strong { color: var(--text-primary); } /* Badge */ .dept-badge-warn { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 6px; background: rgba(155,59,59,.12); color: #9B3B3B; border: 1px solid rgba(155,59,59,.25); white-space: nowrap; } /* Stats row inside card */ .dept-card-v2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; } .dept-mini-stat { text-align: center; padding: 12px 8px; background: var(--card-bg); transition: background 0.15s; } .dept-mini-stat:first-child { border-radius: 10px 0 0 10px; } .dept-mini-stat:last-child { border-radius: 0 10px 10px 0; } .dept-mini-stat-val { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.2; } .dept-mini-stat-lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-top: 3px; } /* Attendance bar */ .dept-attendance-bar-wrap { display: flex; flex-direction: column; gap: 5px; } .dept-attendance-bar-header { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); } .dept-attendance-track { height: 4px; background: rgba(15,27,45,0.04); border-radius: 2px; overflow: hidden; } .dept-attendance-fill { height: 100%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.8; } /* Avatar stack */ /* ── Department Member Status List (Employee/Leadership View) ── */ .dept-member-status-list { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; } .dept-member-status-header { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 8px; } .dept-member-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.03); } .dept-member-status-row:last-child { border-bottom: none; } .dept-member-status-info { display: flex; align-items: center; gap: 8px; min-width: 0; } .dept-member-status-name { font-size: .82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dept-member-status-role { font-size: .7rem; color: var(--text-muted); } .dept-member-status-badge { font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; } .dept-avatar-section { display: flex; align-items: center; min-height: 32px; } .dept-avatar-stack { display: flex; align-items: center; } .dept-avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card-bg); margin-left: -6px; display: inline-flex; align-items: center; justify-content: center; object-fit: cover; font-size: .6rem; font-weight: 700; flex-shrink: 0; transition: transform .15s; letter-spacing: .02em; opacity: 0.85; } .dept-avatar:first-child { margin-left: 0; } .dept-avatar:hover { transform: scale(1.15); z-index: 2; } .dept-avatar-more { background: var(--bg-hover); color: var(--text-muted); font-size: .7rem; font-weight: 700; cursor: pointer; border: 2px solid var(--bg-elevated); } .dept-avatar-more:hover { background: var(--accent); color: #fff; } /* Footer button */ /* Card clickable */ .dept-card-v2 { cursor: pointer; } .dept-card-v2:hover { border-color: rgba(197,165,90,.3); background: rgba(197,165,90,.03); } /* Absence pills */ .dept-absence-pills { display: flex; flex-wrap: wrap; gap: 6px; } .dept-absence-pill { font-size: .68rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; animation: smoothScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; transition: transform 0.15s ease; } .dept-absence-pill:hover { transform: scale(1.05); } .dept-pill-sick { background: rgba(155,59,59,.1); color: #9B3B3B; } .dept-pill-vacation { background: rgba(197,165,90,.1); color: #C5A55A; } .dept-pill-homeoffice { background: rgba(197,165,90,.1); color: #C5A55A; } .dept-pill-leave { background: rgba(245,158,11,.1); color: #C5A55A; } /* Leader row v2 */ .dept-leader-row-v2 { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-muted); margin-top: 4px; } .dept-leader-row-v2 .dept-avatar { margin-left: 0; } .dept-leader-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 4px; background: rgba(197,165,90,.1); color: var(--accent); margin-left: 4px; } /* Quick actions dropdown */ .dept-quick-actions { position: relative; flex-shrink: 0; } .dept-quick-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; transition: all .15s; } .dept-quick-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .dept-quick-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2); z-index: 100; min-width: 160px; padding: 4px; overflow: hidden; } .dept-quick-menu.open { display: block; } .dept-quick-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; color: var(--text-primary); font-size: .82rem; cursor: pointer; border-radius: 6px; transition: background .12s; } .dept-quick-menu button:hover { background: var(--bg-hover); } .dept-quick-menu button.danger { color: #9B3B3B; } .dept-quick-menu button.danger:hover { background: rgba(155,59,59,.08); } /* Drag & drop */ .dept-card-v2.dept-drag-over { box-shadow: 0 0 0 3px var(--accent), 0 8px 32px rgba(197,165,90,.3); transform: translateY(-2px); } .dept-drawer-member.dragging { opacity: .4; } .dept-drawer-member[draggable="true"] { cursor: grab; } .dept-drawer-member[draggable="true"]:active { cursor: grabbing; } /* Bulk actions bar */ .dept-bulk-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(197,165,90,.08); border: 1px solid rgba(197,165,90,.2); border-radius: 10px; margin-bottom: 12px; flex-wrap: wrap; } .dept-bulk-bar span:first-child { font-size: .85rem; font-weight: 600; color: var(--accent); margin-right: auto; } .dept-bulk-bar select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: .8rem; background: var(--bg-base); color: var(--text-primary); } .dept-bulk-cb { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; } /* ===== DEPARTMENT DRAWER — Fullscreen Modal ===== */ .dept-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,27,45,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; align-items: center; justify-content: center; padding: 32px; } .dept-drawer-overlay.open { display: flex; animation: deptOverlayIn .2s ease; } @keyframes deptOverlayIn { from { opacity: 0; } to { opacity: 1; } } .dept-drawer { width: 100%; max-width: 860px; height: 100%; max-height: 90vh; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; display: flex; flex-direction: column; animation: deptDrawerScale .3s cubic-bezier(0.22,1,0.36,1); overflow: hidden; box-shadow: 0 24px 80px rgba(15,27,45,0.2), 0 0 0 1px rgba(197,165,90,0.06); } @keyframes deptDrawerScale { from { transform: scale(0.95) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .dept-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; border-bottom: none; background: var(--bg-hover); position: relative; } .dept-drawer-header::after { content: ''; position: absolute; bottom: 0; left: 32px; right: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .dept-drawer-title { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; font-family: var(--font-display); } .dept-drawer-subtitle { font-size: .82rem; color: var(--text-muted); margin-top: 3px; } .dept-drawer-close { width: 36px; height: 36px; background: var(--bg-base); border: 1px solid var(--border); font-size: 1.2rem; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; line-height: 1; border-radius: 10px; transition: all .15s; } .dept-drawer-close:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } .dept-drawer-tabs { display: flex; gap: 4px; padding: 12px 32px; border-bottom: 1px solid var(--border); background: var(--bg-hover); } .dept-drawer-tab { padding: 8px 18px; border: 1px solid transparent; background: none; font-size: .82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 8px; transition: all .15s; font-family: var(--font-body); } .dept-drawer-tab.active { color: var(--accent); background: var(--accent-subtle); border-color: rgba(197,165,90,0.15); } .dept-drawer-tab:hover:not(.active) { color: var(--text-primary); background: var(--bg-base); } .dept-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .dept-drawer-body::-webkit-scrollbar { width: 5px; } .dept-drawer-body::-webkit-scrollbar-track { background: transparent; } .dept-drawer-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } /* Drawer search */ .dept-drawer-search { margin-bottom: 12px; } .dept-drawer-search input { width: 100%; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-base); color: var(--text-primary); font-size: .85rem; outline: none; box-sizing: border-box; } .dept-drawer-search input:focus { border-color: var(--accent); } /* Drawer member rows */ .dept-drawer-member { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; transition: border-color .15s, background .15s; background: var(--bg-elevated); } .dept-drawer-member:hover { border-color: var(--border-strong); background: var(--bg-hover); } .dept-drawer-member:last-child { margin-bottom: 0; } .dept-drawer-member-avatar .dept-avatar { margin-left: 0; } .dept-drawer-member-info { flex: 1; min-width: 0; } .dept-drawer-member-name { font-size: .88rem; font-weight: 600; color: var(--text-primary); } .dept-drawer-member-role { font-size: .75rem; color: var(--text-muted); margin-top: 1px; } /* Drawer absence summary */ .dept-drawer-absence-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dept-drawer-absence-card { padding: 14px; background: var(--bg-hover); border-radius: 10px; text-align: center; } .dept-drawer-absence-num { font-size: 1.6rem; font-weight: 800; line-height: 1.2; } .dept-drawer-absence-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin-top: 2px; } /* Absence breakdown bars */ .dept-absence-breakdown { display: flex; flex-direction: column; gap: 10px; } .dept-breakdown-row { display: flex; align-items: center; gap: 10px; } .dept-breakdown-label { width: 80px; font-size: .8rem; color: var(--text-muted); flex-shrink: 0; } .dept-breakdown-track { flex: 1; height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; } .dept-breakdown-fill { height: 100%; border-radius: 3px; transition: width .5s ease; } .dept-breakdown-val { width: 28px; text-align: right; font-weight: 700; font-size: .8rem; color: var(--text-secondary); } /* Drawer stats */ .dept-drawer-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dept-drawer-stat-card { padding: 16px; background: var(--bg-hover); border-radius: 10px; text-align: center; } .dept-drawer-stat-num { font-size: 1.8rem; font-weight: 800; line-height: 1.1; } .dept-drawer-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin-top: 4px; } /* Donut chart */ .dept-donut-wrap { width: 80px; height: 80px; flex-shrink: 0; } .dept-donut { width: 100%; height: 100%; } .dept-donut-text { fill: var(--text-primary); font-size: 8px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } /* ===== REPORTING ===== */ .report-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; position: relative; } .report-filters::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), #C5A55A); border-radius: 16px 16px 0 0; } .report-filters select, .report-filters input[type="date"] { width: auto; min-width: 140px; padding: 8px 12px; border-radius: 10px; font-weight: 600; } /* ── Export Builder ── */ .export-check-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); transition: all .15s; } .export-check-item:hover { border-color: var(--accent); } .export-check-item input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } .export-check-item input:checked + span { color: var(--accent); } .export-format-btn { display: inline-flex; cursor: pointer; } .export-format-btn input { display: none; } .export-format-btn span { padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-muted); transition: all .15s; } .export-format-btn input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; } /* ── Report KPI Trend Badges ── */ .report-kpi-trend { font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; } .report-kpi-trend.up { background: rgba(16,185,129,0.1); color: #3D7A5A; } .report-kpi-trend.down { background: rgba(244,63,94,0.1); color: #f43f5e; } .report-kpi-trend.neutral { background: var(--bg-hover); color: var(--text-muted); } .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .report-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; padding: 24px; transition: border-color .3s ease, box-shadow .3s ease; } .report-card:hover { border-color: rgba(197,165,90,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .report-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .report-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .report-card-title::before { content: ''; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; flex-shrink: 0; } .report-card-header .report-card-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* Sort toggle buttons — pill style */ .report-sort-toggle { display: flex; gap: 2px; background: var(--bg-hover); border-radius: 10px; padding: 3px; } .report-sort-btn { padding: 6px 14px; font-size: 11px; font-weight: 600; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .2s ease; } .report-sort-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(197,165,90,0.25); } .report-sort-btn:hover:not(.active) { color: var(--text-primary); background: var(--bg-elevated); } /* ===== LEAVE TYPE CHART (donut + bar) ===== */ /* Donut */ .lct-donut-wrap { display: flex; align-items: center; justify-content: center; padding: 16px 0 8px; } .lct-donut-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; } .ld-legend { display: flex; flex-direction: column; gap: 12px; min-width: 140px; } .ld-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .ld-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .ld-lbl { flex: 1; color: var(--text-primary); font-weight: 500; } .ld-val { color: var(--text-muted); font-weight: 700; font-size: 12px; min-width: 22px; text-align: right; } .ld-seg { cursor: default; } .ld-seg:hover { opacity: 0.8; } /* Bar chart */ .lct-bar-chart { display: flex; flex-direction: column; gap: 16px; padding: 12px 0 4px; } .lct-bar-row { display: flex; flex-direction: column; gap: 7px; } .lct-bar-top { display: flex; align-items: center; justify-content: space-between; } .lct-bar-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-primary); } .lct-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .lct-bar-right { display: flex; align-items: center; gap: 10px; } .lct-bar-pct { font-size: 12px; font-weight: 800; } .lct-bar-days { font-size: 12px; font-weight: 600; color: var(--text-muted); } .lct-bar-track { height: 8px; background: var(--bg-hover); border-radius: 99px; overflow: hidden; } .lct-bar-fill { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(0.16,1,0.3,1); } .bar-chart { display: flex; flex-direction: column; gap: 8px; } .bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; } .bar-label { width: 100px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; font-size: 13px; } .bar-wrap { flex: 1; background: var(--bg-hover); border-radius: 3px; height: 8px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .bar-val { width: 20px; color: var(--text-muted); font-weight: 600; text-align: right; flex-shrink: 0; } /* ── Line Chart (SVG-based) ── */ .line-chart-wrap { position: relative; width: 100%; height: 220px; } .line-chart-wrap svg { width: 100%; height: 100%; overflow: visible; } .line-chart-wrap .lc-grid { stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 4 3; } .line-chart-wrap .lc-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); } .line-chart-wrap .lc-area { opacity: 1; } .line-chart-wrap .lc-dot { stroke: var(--bg-elevated); stroke-width: 2.5; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2)); transition: r 0.15s ease; } .line-chart-wrap .lc-dot:hover { r: 6; } .line-chart-wrap .lc-label { font-size: 11px; fill: var(--text-muted); font-weight: 600; text-anchor: middle; } .line-chart-wrap .lc-val { font-size: 10px; fill: var(--text-primary); font-weight: 700; text-anchor: middle; } .line-chart-wrap .lc-axis-label { font-size: 9px; fill: var(--text-muted); font-weight: 600; text-anchor: end; } /* ── Department ranking rows ── */ .dept-rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .dept-rank-row:last-child { border-bottom: none; } .dept-rank-pos { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } .dept-rank-pos.gold { background: rgba(245,158,11,.15); color: #C5A55A; } .dept-rank-pos.silver { background: rgba(148,163,184,.15); color: #94a3b8; } .dept-rank-pos.bronze { background: rgba(180,130,80,.15); color: #b4824f; } .dept-rank-pos.normal { background: var(--bg-hover); color: var(--text-muted); } .dept-rank-name { flex: 1; font-weight: 600; color: var(--text-primary); } .dept-rank-bar { flex: 2; height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; } .dept-rank-bar-fill { height: 100%; border-radius: 3px; transition: width .5s ease; } .dept-rank-val { width: 50px; text-align: right; font-weight: 700; color: var(--text-secondary); font-size: 12px; } /* ===== CALENDAR ===== */ /* ===== CALENDAR — Full-Size Monthly View ===== */ .calendar { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); padding: 24px; width: 100%; box-sizing: border-box; } /* Full-width pages */ .page#calendar, .page#abteilungen { margin: -24px -28px; padding: 24px 28px; width: calc(100% + 56px); } .page#calendar .calendar { border-radius: 0; border-left: none; border-right: none; margin-left: -28px; margin-right: -28px; padding: 24px 28px; width: calc(100% + 56px) !important; max-width: none !important; box-sizing: border-box; } .page#abteilungen .dept-grid { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; width: calc(100% + 56px); } .calendar-legend { display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; padding: 0 4px; align-items: center; } .legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary, var(--text-muted)); } .legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .calendar-filters { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; background: var(--bg-hover); padding: 3px; border-radius: 10px; width: fit-content; border: 1px solid var(--border); } .cal-view-btn { padding: 7px 16px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; } .cal-view-btn:hover { color: var(--text-primary); background: rgba(197,165,90,0.06); } .cal-view-btn.active { background: var(--accent-subtle, rgba(197,165,90,0.12)); color: var(--accent); font-weight: 700; box-shadow: none; } .cal-filter-btn { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer; font-weight: 600; transition: all .2s ease; } .cal-filter-btn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-strong, var(--border)); } .cal-filter-btn.active { background: var(--accent-subtle, rgba(197,165,90,0.12)); color: var(--accent); border-color: rgba(197,165,90,0.3); box-shadow: none; } .calendar-grid { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 1px; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--border); width: 100%; } .kw-cell { background: var(--bg-elevated); padding: 8px 4px; border-radius: 0; font-weight: 800; font-size: 10px; text-align: center; color: var(--text-muted); opacity: .5; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; } .day-header { background: var(--bg-elevated); padding: 12px 4px; border-radius: 0; font-weight: 700; font-size: 12px; text-align: center; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Weekend day headers slightly dimmed */ .day-header.weekend { color: var(--text-muted); opacity: 0.6; } .day { background: var(--bg-elevated); border: none; padding: 8px 8px 6px; border-radius: 0; min-height: 100px; display: flex; flex-direction: column; gap: 3px; transition: background .15s; cursor: default; } .day:hover { background: var(--bg-hover); } /* Weekend day cells slightly dimmed */ .day.weekend { background: var(--bg-elevated); opacity: 1; position: relative; } .day.weekend::after { content: ''; position: absolute; inset: 0; background: rgba(128,128,128,0.04); pointer-events: none; z-index: 0; } .day.weekend:hover { background: var(--bg-hover); } /* Today: prominent highlight */ .day.today { box-shadow: inset 0 0 0 2.5px var(--accent); background: rgba(197,165,90,0.06) !important; } .day.today .date-num { color: #fff; background: var(--accent); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 800; } .date-num { font-weight: 700; font-size: 14px; color: var(--text-primary, var(--text-muted)); margin-bottom: 4px; line-height: 1; font-family: var(--font-display, inherit); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } /* Weekend date numbers dimmed */ .day.weekend .date-num { opacity: 0.55; } /* Event pills/badges */ .event { color: white; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; line-height: 1.4; margin-bottom: 2px; transition: all .15s ease; letter-spacing: 0.01em; } .event:hover { opacity: .85; transform: translateX(1px); } .event-more { font-size: 11px; color: var(--accent); padding: 2px 4px; font-weight: 700; font-style: normal; cursor: pointer; } .event-more:hover { text-decoration: underline; } /* Event type colors — distinct per category */ .event.vacation { background: #3b82f6; } /* Blue — Urlaub */ .event.sick { background: #9B3B3B; color: #fff; } /* Red — Krank */ .event.homeoffice { background: #C5A55A; color: #1a1a1a; } /* Orange — Homeoffice */ .event.sonderurlaub { background: #B87A3D; } /* Dark orange — Sonderurlaub */ .event.fortbildung { background: #8b5cf6; } /* Purple — Fortbildung */ .event.elternzeit { background: #3D7A5A; } /* Green — Elternzeit */ .event.holiday { background: #9B3B3B; font-weight: 700; } /* Red — Feiertag */ .day.holiday-day { background: rgba(220,38,38,0.04); box-shadow: inset 0 0 0 1px rgba(220,38,38,0.2); } .day.holiday-day .date-num { color: #9B3B3B; font-weight: 800; } /* ═══ Modernere Cards global ═══ */ .page > .card, .page > .card:first-of-type { border-radius: 18px; position: relative; overflow: hidden; } .page > .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), #C5A55A); z-index: 1; } .list-card { border-radius: 18px !important; } .list-card .card-header { padding-bottom: 16px; border-bottom: 1px solid var(--border); } /* ═══ Request Form Redesign ═══ */ /* ═══════════════════════════════════════════════════════════ REQUEST FORMS — Urlaub beantragen, Krankmeldung Designed to feel like BambooHR/Personio: structured, substantial, warm precision. Not cold developer forms. ═══════════════════════════════════════════════════════════ */ /* ── Container: focused card with breathing room ── */ .req-form-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 48px 52px; position: relative; overflow: hidden; margin-bottom: 16px; max-width: 100%; box-shadow: 0 2px 8px rgba(0,0,20,0.15), 0 0 0 1px rgba(197,165,90,0.04), inset 0 1px 0 rgba(15,27,45,0.03); } .req-form-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(197,165,90,0.2) 60%, transparent); } /* ── Header: icon + title + separator ── */ .req-form-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .req-form-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .req-form-title { font-size: 20px; font-weight: 800; font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.03em; margin: 0; line-height: 1.2; } .req-form-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } /* ── Form grid: generous spacing ── */ .req-form-wrap .form { gap: 24px; } .req-form-wrap .form-group { margin-bottom: 0; } /* ── Labels: readable, not screaming uppercase ── */ .req-form-wrap .form-group label, .req-form-wrap .form-group-full label { font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 0; } .req-form-wrap .form-group label svg { opacity: 0.4; flex-shrink: 0; } /* ── Inputs: substantial, tactile feel ── */ .req-form-wrap input, .req-form-wrap select, .req-form-wrap textarea { padding: 16px 20px; border-radius: 12px; font-size: 15px; font-family: var(--font-body); border: 1.5px solid var(--border); background: var(--bg-base); color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .req-form-wrap input:hover, .req-form-wrap select:hover, .req-form-wrap textarea:hover { border-color: var(--border-strong); } .req-form-wrap input:focus, .req-form-wrap select:focus, .req-form-wrap textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,0.1); background: var(--bg-elevated); outline: none; } .req-form-wrap input::placeholder, .req-form-wrap textarea::placeholder { color: var(--text-subtle); opacity: 0.6; } /* Date inputs: taller for touch */ .req-form-wrap input[type="date"] { min-height: 54px; font-variant-numeric: tabular-nums; } /* ── Days Display: the HERO number ── */ .req-days-display { font-weight: 900 !important; font-size: 36px !important; font-family: var(--font-display) !important; color: var(--accent) !important; text-align: center; background: rgba(197,165,90,0.06) !important; border: 1.5px solid rgba(197,165,90,0.2) !important; border-radius: 14px !important; min-height: 64px; letter-spacing: -0.02em; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); } .req-days-display:not([value=""]):not([value="0"]) { background: rgba(197,165,90,0.1) !important; border-color: rgba(197,165,90,0.3) !important; box-shadow: 0 0 16px rgba(197,165,90,0.08); } /* ── Select: custom dropdown feel ── */ .req-form-wrap .form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236878b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; min-height: 54px; } .req-form-wrap .form select:hover { border-color: var(--accent); } /* ── Textarea: comfortable writing area ── */ .req-form-wrap textarea { min-height: 100px; resize: vertical; line-height: 1.6; } /* ── Submit Button: the confident handshake ── */ .req-submit-btn { width: 100%; justify-content: center; min-height: 56px; padding: 16px 32px !important; font-size: 16px !important; font-weight: 700 !important; font-family: var(--font-body) !important; border-radius: 12px !important; gap: 8px; letter-spacing: -0.01em; box-shadow: 0 1px 4px rgba(0,0,0,0.15); transition: all 0.25s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; } .req-submit-btn::after { display: none; } .req-submit-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); transform: translateY(-1px); } .req-submit-btn:active { transform: scale(0.98) translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } /* ── File Upload: native drag-and-drop feel ── */ .req-file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 44px 28px; border: 2px dashed rgba(197,165,90,0.15); border-radius: 14px; cursor: pointer; text-align: center; transition: all 0.25s ease; color: var(--text-muted); background: rgba(197,165,90,0.02); position: relative; } .req-file-drop:hover { border-color: var(--accent); background: rgba(197,165,90,0.06); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(197,165,90,0.06); } .req-file-drop:active { transform: scale(0.99); border-color: var(--accent); background: rgba(197,165,90,0.08); } .req-file-drop svg { opacity: 0.25; transition: opacity 0.2s; } .req-file-drop:hover svg { opacity: 0.5; } .req-file-drop span { font-size: 13px; font-weight: 600; color: var(--text-primary); } .req-file-drop small { font-size: 11px; color: var(--text-subtle); opacity: 0.7; } /* ── Info Bar (vacation days summary) ── */ .req-info-bar { display: flex; gap: 16px; margin-bottom: 28px; padding: 16px 20px; background: rgba(197,165,90,0.03); border: 1px solid rgba(197,165,90,0.08); border-radius: 14px; } /* ── Alert Messages ── */ .req-form-wrap .alert { border-radius: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.5; } .req-form-wrap .alert-success { background: rgba(61,122,90,0.06); border-left: 3px solid var(--success); color: var(--success); } .req-form-wrap .alert-error { background: rgba(155,59,59,0.06); border-left: 3px solid var(--danger); color: var(--danger); } /* ── Responsive ── */ @media (max-width: 640px) { .req-form-wrap { padding: 24px 20px; border-radius: 16px; } .req-form-header { gap: 12px; margin-bottom: 20px; padding-bottom: 16px; } .req-form-icon { width: 38px; height: 38px; border-radius: 10px; } .req-form-title { font-size: 17px; } .req-days-display { font-size: 24px !important; min-height: 48px; } .req-submit-btn { min-height: 46px; font-size: 14px !important; } .req-file-drop { padding: 28px 16px; } } /* ═══ Profile Page ═══ */ .prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .prof-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 700; margin-bottom: 14px; } .prof-field { background: var(--bg-hover); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 10px; } .prof-field label { margin-bottom: 2px; } .prof-val { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-top: 4px; } .prof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .prof-stat { padding: 16px; border-radius: 12px; text-align: center; } .prof-stat-val { font-size: 24px; font-weight: 800; line-height: 1; } .prof-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .prof-stat-green { background: rgba(16,185,129,0.06); border-left: 3px solid var(--success); } .prof-stat-green .prof-stat-val { color: var(--success); } .prof-stat-blue { background: rgba(197,165,90,0.06); border-left: 3px solid var(--accent); } .prof-stat-blue .prof-stat-val { color: var(--accent); } .prof-stat-amber { background: rgba(245,158,11,0.06); border-left: 3px solid var(--warning); } .prof-stat-amber .prof-stat-val { color: var(--warning); } @media (max-width: 640px) { .prof-grid { grid-template-columns: 1fr; } .req-form-wrap { padding: 20px !important; } } /* ═══ User Cards (Mitarbeiter-Liste) ═══ */ .uc { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: transparent; border-bottom: 1px solid var(--border); transition: background .1s; } .uc:last-child { border-bottom: none; } .uc:hover { background: var(--bg-hover); } .uc.uc-locked { background: rgba(155,59,59,0.02); } .uc-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .uc-avatar-init { color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; } .uc-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .uc-row-top { display: flex; align-items: center; gap: 5px; min-width: 160px; } .uc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } .uc-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .uc-status-dot.uc-active { background: #3D7A5A; } .uc-status-dot.uc-locked { background: #9B3B3B; box-shadow: 0 0 6px rgba(155,59,59,0.4); } .uc-status-dot.uc-inactive { background: #8B7E74; } .uc-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .uc-username { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .uc-role-tag { font-size: 10px; padding: 1px 7px; border-radius: 5px; background: var(--bg-hover); color: var(--text-secondary); font-weight: 600; white-space: nowrap; } .uc-level { font-size: 10px; padding: 1px 7px; border-radius: 5px; font-weight: 700; white-space: nowrap; } .uc-actions { display: flex; gap: 3px; flex-shrink: 0; opacity: 0; transition: opacity .15s; } .uc:hover .uc-actions { opacity: 1; } .uc-act-btn { padding: 4px 7px !important; } .uc-unlock-btn { background: rgba(16,185,129,0.12) !important; color: #3D7A5A !important; border: 1px solid rgba(16,185,129,0.25) !important; font-weight: 700 !important; } /* ===== CUSTOM DATEPICKER ===== */ .mdp-wrapper { position: relative; display: block; } .mdp-display { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-primary); font-size: .9rem; cursor: pointer; user-select: none; transition: border-color .15s; min-height: 42px; } .mdp-display:hover, .mdp-display.open { border-color: var(--accent); } .mdp-display::after { content: '▾'; margin-left: auto; font-size: .8rem; color: var(--text-muted); } .mdp-display.placeholder { color: var(--text-muted); } .mdp-popup { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1100; background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.25); animation: mdpFadeIn .12s ease; } @keyframes mdpFadeIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: none; } } .mdp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mdp-nav-btn { width: 28px; height: 28px; border: none; background: var(--bg-hover); border-radius: 6px; cursor: pointer; color: var(--text-primary); font-size: 14px; display: flex; align-items: center; justify-content: center; } .mdp-nav-btn:hover { background: var(--accent); color: white; } .mdp-month-label { font-weight: 700; font-size: .9rem; color: var(--text-primary); } .mdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .mdp-wday { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-muted); padding: 4px 0; } .mdp-day { text-align: center; padding: 6px 4px; border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--text-primary); border: 1.5px solid transparent; transition: all .1s; } .mdp-day:hover:not(.mdp-day-disabled):not(.mdp-day-empty) { background: rgba(197,165,90,0.15); border-color: var(--accent); } .mdp-day.mdp-day-today { font-weight: 800; color: var(--accent); } .mdp-day.mdp-day-selected { background: var(--accent); color: white; font-weight: 700; } .mdp-day.mdp-day-disabled { color: var(--text-muted); opacity: .4; cursor: not-allowed; } .mdp-day.mdp-day-empty { cursor: default; } /* ===== TOAST NOTIFICATIONS ===== */ #toast-container { position: fixed; top: 24px; right: 24px; z-index: 5001; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(197,165,90,0.06), 0 0 0 1px rgba(197,165,90,0.06); font-size: 13px; font-weight: 500; color: var(--text-primary); pointer-events: all; max-width: 400px; min-width: 300px; border-left: 2.5px solid var(--accent); animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } /* Progress bar auto-dismiss */ .toast::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent); animation: toastProgress 4s linear forwards; opacity: 0.5; } .toast.toast-success::after { background: var(--success); } .toast.toast-error::after { background: var(--danger); } .toast.toast-warning::after { background: var(--warning); } /* Stacking: each toast slightly smaller/behind */ .toast:nth-child(2) { transform: scale(0.97); opacity: 0.9; } .toast:nth-child(3) { transform: scale(0.94); opacity: 0.8; } .toast:nth-child(n+4) { display: none; } @keyframes toastProgress { from { width: 100%; } to { width: 0%; } } .toast.toast-success { border-left-color: var(--success); } .toast.toast-error { border-left-color: var(--danger); } .toast.toast-warning { border-left-color: var(--warning); } .toast.removing { animation: toastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes toastSlideIn { 0% { opacity: 0; transform: translateY(-12px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastSlideOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-8px) scale(0.97); } } /* ===== SIDEBAR OVERLAY (mobile) ===== */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 299; backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* ===== MOBILE BOTTOM NAV ===== */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-elevated); border-top: 1px solid var(--border); z-index: 200; padding: 6px 0 8px; } .mobile-bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; cursor: pointer; border-radius: var(--radius); color: var(--text-muted); font-size: 10px; font-weight: 600; min-width: 52px; transition: color var(--transition); background: none; border: none; font-family: inherit; } .mobile-nav-item.active { color: var(--accent); } .mobile-nav-item svg { width: 22px; height: 22px; } /* ===== SETUP WIZARD — BASE ===== */ .setup-wizard { position: fixed; inset: 0; background: var(--bg-base); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; } .setup-wizard.hidden { display: none; } /* Global button reset for wizard, tour, first-login */ .setup-wizard button, .tour-welcome-modal button, .tour-card button, .fl-overlay button, #maflOverlay button { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; } /* Top progress bar */ .wiz-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 550; height: 3px; background: #0c1428; } .wiz-topbar-fill { height: 100%; background: #C5A55A; transition: width .5s ease; } /* Card */ .wiz-card { width: 100%; max-width: 740px; background: #0c1428; border-radius: 24px; padding: 48px; position: relative; box-shadow: 0 24px 80px rgba(0,0,0,.5); } /* Screen transitions */ .wizard-content { display: none; } .wizard-content.active { display: block; animation: wizSlideIn .35s ease; } @keyframes wizSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Screen header */ .wiz-screen-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; position: relative; } .wiz-back-btn { display: flex; align-items: center; gap: 8px; color: #94a3b8; background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; transition: color .2s; } .wiz-back-btn:hover { color: #fff; } .wiz-step-label { font-size: 14px; color: #8B7E74; } /* Step dots */ .wiz-dots { display: flex; align-items: center; gap: 6px; } /* Titles */ .wiz-title { font-size: 30px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.2; } .wiz-subtitle { font-size: 16px; color: #94a3b8; margin: 0; line-height: 1.5; } /* CTA button */ .wiz-cta-btn { width: 100%; background: #C5A55A; color: #fff; padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: background .2s; } .wiz-cta-btn:hover { background: #B8943F; } .wiz-cta-btn:disabled { opacity: .5; cursor: not-allowed; } /* DSGVO badge */ .wiz-dsgvo-badge { display: flex; align-items: center; gap: 8px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); border-radius: 999px; padding: 6px 16px; margin-bottom: 24px; } .wiz-dsgvo-badge span { font-size: 12px; color: #3D7A5A; } /* Feature grid (screen 1) */ .wiz-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; margin-bottom: 40px; } .wiz-feature-card { background: var(--bg-base); border: 1px solid var(--border); border-radius: 16px; padding: 16px; text-align: left; } .wiz-feature-icon { width: 32px; height: 32px; background: rgba(197,165,90,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: #C5A55A; } .wiz-feature-label { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; } .wiz-feature-desc { font-size: 12px; color: #8B7E74; } /* ===== WIZARD — PLANS (screen 2) ===== */ .wiz-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; align-items: stretch; } .wiz-plan-card { display: flex; flex-direction: column; text-align: left; background: var(--bg-base); border: 2px solid var(--border); border-radius: 18px; padding: 22px; cursor: pointer; transition: border-color .2s; position: relative; font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; outline: none; } .wiz-plan-card.selected { border-color: #C5A55A; } .wiz-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #C5A55A; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } .wiz-plan-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; } .wiz-plan-tag { font-size: 11px; font-weight: 600; color: #8B7E74; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .wiz-plan-name { font-size: 17px; font-weight: 700; color: #fff; } .wiz-plan-check { width: 20px; height: 20px; background: #C5A55A; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 4px; } .wiz-plan-desc { font-size: 12px; color: #8B7E74; margin-bottom: 16px; line-height: 1.4; } .wiz-plan-price { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 2px; } .wiz-plan-price-sub { font-size: 12px; color: #8B7E74; } .wiz-plan-price-vat { font-size: 11px; color: #8B7E74; margin-bottom: 20px; } .wiz-plan-features { flex: 1; border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 12px; } .wiz-plan-list { list-style: none; padding: 0; margin: 0; } .wiz-plan-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #94a3b8; margin-bottom: 8px; } .wiz-plan-list li svg { flex-shrink: 0; margin-top: 2px; } .wiz-plan-list-bold { font-weight: 600; } .wiz-plan-list-included li { color: #94a3b8; } .wiz-plan-list-locked li { color: #8B7E74; } .wiz-plan-locked { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 20px; } .wiz-plan-locked-title { font-size: 10px; color: #8B7E74; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .wiz-plan-cta { text-align: center; padding: 10px; border-radius: 12px; font-size: 13px; font-weight: 600; background: rgba(197,165,90,0.1); color: #C5A55A; border: 1px solid rgba(197,165,90,0.2); margin-top: auto; } .wiz-plan-cta-active { background: #C5A55A; color: #fff; border: none; } .wiz-plan-trial { text-align: center; font-size: 11px; color: #8B7E74; margin-top: 8px; } /* Info bar */ .wiz-info-bar { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; } .wiz-info-bar span { font-size: 12px; color: #8B7E74; } .wiz-info-dot { width: 8px; height: 8px; border-radius: 50%; background: #3D7A5A; flex-shrink: 0; margin-top: 2px; } /* ===== WIZARD — COMPANY (screen 3) ===== */ .wiz-input-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #94a3b8; margin-bottom: 8px; } .wiz-input { width: 100%; background: var(--bg-base); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; color: #fff; font-size: 14px; outline: none; transition: border-color .2s; font-family: inherit; box-sizing: border-box; } .wiz-input::placeholder { color: #8B7E74; } .wiz-input:focus { border-color: #C5A55A; } .wiz-position-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .wiz-chip-btn { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: #8B7E74; cursor: pointer; transition: all .2s; font-family: inherit; } .wiz-chip-btn:hover { border-color: rgba(197,165,90,0.5); color: #94a3b8; } .wiz-chip-btn.active { border-color: #C5A55A; background: rgba(197,165,90,0.1); color: #fff; } .wiz-teamsize-box { background: var(--bg-base); border: 1px solid var(--border); border-radius: 12px; padding: 24px; } .wiz-team-avatars { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 20px; pointer-events: none; } /* Fix: Preisrechner-Slider muss greifbar/ziehbar sein (nichts darf ihn überlagern) */ .wiz-range { position: relative; z-index: 3; } /* Fix: Rollenkarten im Setup-Wizard nicht durchsichtig (solider Hintergrund). Auf der Cream-Setup-Seite überschreibt setup-wizard-cream.css dies auf #fff. */ .wiz-role-card { background: #0c1428 !important; } .wiz-team-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(197,165,90,0.2); border: 1px solid rgba(197,165,90,0.4); display: flex; align-items: center; justify-content: center; } .wiz-team-avatar svg { width: 12px; height: 12px; color: #C5A55A; } .wiz-team-avatar-extra { background: var(--border); border-color: var(--border); } .wiz-team-avatar-extra span { font-size: 9px; color: #8B7E74; font-weight: 600; } .wiz-team-size-num { font-size: 48px; font-weight: 700; color: #C5A55A; } .wiz-team-size-label { font-size: 14px; color: #8B7E74; margin-top: 4px; } .wiz-cost-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } /* Range slider — Premium Design */ .wiz-range, input[type="range"] { width: 100%; height: 10px; border-radius: 99px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, #C5A55A 0%, #C5A55A 0%, rgba(197,165,90,0.1) 0%, rgba(197,165,90,0.1) 100%); cursor: pointer; outline: none; margin: 10px 0; border: none; transition: background 0.1s ease; } .wiz-range::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #C5A55A, #B8943F); border: 3px solid var(--bg-card, #0a1226); cursor: grab; box-shadow: 0 0 0 4px rgba(197,165,90,0.2), 0 4px 16px rgba(0,0,0,0.35); transition: box-shadow 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1); } .wiz-range::-webkit-slider-thumb:hover, input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(197,165,90,0.3), 0 6px 24px rgba(0,0,0,0.45); transform: scale(1.12); } .wiz-range::-webkit-slider-thumb:active, input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); box-shadow: 0 0 0 8px rgba(197,165,90,0.35), 0 8px 32px rgba(0,0,0,0.5); } .wiz-range::-moz-range-thumb, input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #C5A55A, #B8943F); border: 3px solid var(--bg-card, #0a1226); cursor: grab; box-shadow: 0 0 0 4px rgba(197,165,90,0.2), 0 4px 16px rgba(0,0,0,0.35); } .wiz-range::-moz-range-track, input[type="range"]::-moz-range-track { height: 10px; background: rgba(197,165,90,0.1); border-radius: 99px; border: none; } .wiz-range::-moz-range-progress, input[type="range"]::-moz-range-progress { height: 10px; background: linear-gradient(90deg, #C5A55A, #B8943F); border-radius: 99px; } /* ===== WIZARD — INDUSTRY (screen 4) ===== */ .wiz-industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .wiz-industry-card { background: var(--bg-base); border: 2px solid var(--border); border-radius: 16px; padding: 16px; text-align: center; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; } .wiz-industry-card:hover { border-color: rgba(197,165,90,0.5); } .wiz-industry-card.selected { border-color: #C5A55A; } .wiz-industry-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: #8B7E74; transition: all .2s; } .wiz-industry-card.selected .wiz-industry-icon { background: rgba(197,165,90,0.15); color: #C5A55A; } .wiz-industry-label { font-size: 12px; color: #94a3b8; line-height: 1.3; transition: all .2s; } .wiz-industry-card.selected .wiz-industry-label { color: #fff; font-weight: 500; } .wiz-industry-hint { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-base); border: 1px solid rgba(197,165,90,0.2); border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; } /* ===== WIZARD — VACATION (screen 5) ===== */ .wiz-vacation-box { background: var(--bg-base); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 24px; } .wiz-vacation-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .wiz-vacation-num { font-size: 72px; font-weight: 700; color: #C5A55A; line-height: 1; } .wiz-calendar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 24px; } .wiz-calendar-month { display: flex; flex-direction: column; align-items: center; gap: 4px; } .wiz-calendar-month-label { font-size: 9px; color: #8B7E74; } .wiz-calendar-bar-bg { width: 100%; height: 40px; background: #0c1428; border-radius: 4px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .wiz-calendar-bar { width: 100%; background: rgba(197,165,90,0.3); border-radius: 4px; transition: height .3s; } .wiz-calendar-month-days { font-size: 9px; color: #8B7E74; } .wiz-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .wiz-preset-card { padding: 12px; border-radius: 12px; border: 2px solid var(--border); background: var(--bg-base); text-align: center; cursor: pointer; transition: all .2s; } .wiz-preset-card:hover { border-color: rgba(197,165,90,0.5); } .wiz-preset-card.selected { border-color: #C5A55A; background: rgba(197,165,90,0.1); } .wiz-preset-val { font-size: 18px; font-weight: 700; color: #fff; } .wiz-preset-card.selected .wiz-preset-val { color: #C5A55A; } .wiz-preset-label { font-size: 12px; color: #94a3b8; } .wiz-preset-card.selected .wiz-preset-label { color: #C5A55A; } .wiz-preset-sublabel { font-size: 10px; color: #8B7E74; margin-top: 2px; } /* ===== WIZARD — JOB TITLES (screen 6) ===== */ .wiz-role-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .wiz-role-card { text-align: left; border-radius: 16px; border: 1px solid; overflow: hidden; cursor: pointer; transition: all .2s; padding: 0; font-family: inherit; } .wiz-role-card:hover { filter: brightness(1.1); } .wiz-role-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid; } .wiz-role-card-perms { padding: 12px 16px; } .wiz-perm-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; } .wiz-perm-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wiz-cat-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 12px; padding: 6px; } .wiz-cat-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 500; background: transparent; color: #8B7E74; border: none; cursor: pointer; transition: all .2s; font-family: inherit; } .wiz-cat-tab.active { background: #C5A55A; color: #fff; } .wiz-cat-count { font-size: 10px; width: 16px; height: 16px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-weight: 600; background: rgba(197,165,90,0.2); color: #C5A55A; } .wiz-cat-tab.active .wiz-cat-count { background: rgba(255,255,255,0.25); color: #fff; } .wiz-chips-area { background: var(--bg-base); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 12px; } .wiz-chip-category { } .wiz-job-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; background: #0c1428; border: 1.5px solid var(--border); color: #94a3b8; cursor: pointer; transition: all .2s; font-family: inherit; } .wiz-job-chip.selected { background: rgba(197,165,90,0.12); border-color: rgba(197,165,90,0.5); color: #fff; } .wiz-add-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; background: rgba(197,165,90,0.12); border: 1.5px solid rgba(197,165,90,0.3); color: #C5A55A; cursor: pointer; transition: all .2s; font-family: inherit; white-space: nowrap; } .wiz-add-btn:disabled { opacity: .4; cursor: not-allowed; } .wiz-selected-box { background: var(--bg-base); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 20px; } .wiz-selected-count { margin-left: 8px; background: rgba(197,165,90,0.2); color: #C5A55A; font-size: 11px; padding: 2px 8px; border-radius: 999px; } .wiz-selected-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wiz-selected-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: #0c1428; } .wiz-selected-item-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .wiz-selected-item-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .wiz-selected-item-name { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wiz-selected-item-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 8px; } .wiz-role-select { display: flex; align-items: center; gap: 4px; font-size: 11px; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; background: none; cursor: pointer; transition: border-color .2s; font-family: inherit; } .wiz-role-select:hover { border-color: rgba(197,165,90,0.4); } .wiz-remove-btn { background: none; border: none; color: #334155; cursor: pointer; padding: 2px; display: flex; transition: color .2s; } .wiz-remove-btn:hover { color: #8B7E74; } /* CSV Import */ .wiz-import-section { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-base); margin-bottom: 24px; overflow: hidden; } .wiz-import-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .wiz-download-template-btn { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 6px 12px; border-radius: 8px; background: rgba(197,165,90,0.08); border: 1px solid rgba(197,165,90,0.2); color: #C5A55A; cursor: pointer; transition: all .2s; font-family: inherit; white-space: nowrap; flex-shrink: 0; } .wiz-dropzone { margin: 16px 20px; border-radius: 12px; border: 2px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; cursor: pointer; transition: all .2s; } .wiz-dropzone.dragover { border-color: #C5A55A; background: rgba(197,165,90,0.05); } /* ===== WIZARD — PRIVACY (screen 7) ===== */ .wiz-compliance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; } .wiz-compliance-badge { background: var(--bg-base); border: 1px solid rgba(16,185,129,0.2); border-radius: 12px; padding: 12px; text-align: center; } .wiz-privacy-options { display: flex; flex-direction: column; gap: 10px; } .wiz-privacy-option { width: 100%; text-align: left; padding: 16px; border-radius: 12px; border: 2px solid var(--border); background: var(--bg-base); cursor: pointer; transition: all .2s; display: flex; align-items: flex-start; gap: 14px; font-family: inherit; } .wiz-privacy-option:hover { border-color: rgba(197,165,90,0.3); } .wiz-privacy-option.selected { border-color: #C5A55A; background: rgba(197,165,90,0.05); } .wiz-radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #8B7E74; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: border-color .2s; } .wiz-privacy-option.selected .wiz-radio-dot { border-color: #C5A55A; } .wiz-radio-inner { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background .2s; } .wiz-privacy-option.selected .wiz-radio-inner { background: #C5A55A; } /* ===== WIZARD — LOADING (screen 8) ===== */ .wiz-setup-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: all .3s; } .wiz-setup-step.current { background: var(--bg-base); } .wiz-setup-step.upcoming { opacity: .3; } .wiz-setup-step-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wiz-setup-step-icon.completed { background: #3D7A5A; } .wiz-setup-step-icon.current { background: rgba(197,165,90,0.15); border: 1px solid rgba(197,165,90,0.3); } .wiz-setup-step-icon.upcoming { border: 2px solid var(--border); } .wiz-setup-step-label { font-size: 14px; flex: 1; } .wiz-setup-step.completed .wiz-setup-step-label { text-decoration: line-through; color: #8B7E74; } .wiz-setup-step.current .wiz-setup-step-label { color: #fff; font-weight: 500; } .wiz-setup-step.upcoming .wiz-setup-step-label { color: #94a3b8; } .wiz-setup-step-detail { font-size: 12px; color: #8B7E74; } /* Summary grid */ .wiz-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-bottom: 24px; } .wiz-summary-card { background: #0c1428; border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; } .wiz-summary-val { font-size: 24px; font-weight: 700; color: #C5A55A; margin-bottom: 4px; } .wiz-summary-label { font-size: 12px; color: #8B7E74; } /* Complete check */ .wiz-complete-check { width: 64px; height: 64px; border-radius: 50%; background: rgba(16,185,129,0.15); border: 2px solid rgba(16,185,129,0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } /* Confetti */ #confettiCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } /* Role Info Modal */ .wiz-role-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(250,246,239,0.85); } .wiz-role-modal-content { width: 100%; max-width: 520px; border-radius: 16px; overflow: hidden; background: #0c1428; border: 1px solid var(--border); box-shadow: 0 24px 80px rgba(0,0,0,.5); } .wiz-role-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); } /* ===== WIZARD — ANIMATIONS ===== */ @keyframes wizSpinLoader { to { transform: rotate(360deg); } } /* ===== WIZARD — RESPONSIVE ===== */ @media (max-width: 768px) { .wiz-card { padding: 28px 22px; } .wiz-title { font-size: 24px; } .wiz-feature-grid { grid-template-columns: repeat(2, 1fr); } .wiz-plan-grid { grid-template-columns: 1fr; } .wiz-industry-grid { grid-template-columns: repeat(3, 1fr); } .wiz-compliance-grid { grid-template-columns: repeat(2, 1fr); } .wiz-role-overview-grid { grid-template-columns: 1fr; } .wiz-calendar-grid { grid-template-columns: repeat(4, 1fr); } .wiz-selected-list { grid-template-columns: 1fr; } .wiz-cat-tabs { flex-wrap: wrap; } .wiz-summary-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .wiz-card { padding: 20px 16px; border-radius: 16px; } .wiz-title { font-size: 20px; } .wiz-feature-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .wiz-industry-grid { grid-template-columns: repeat(2, 1fr); } .wiz-preset-grid { grid-template-columns: 1fr; } .wiz-vacation-header { flex-direction: column; align-items: flex-start; gap: 12px; } .wiz-vacation-num { font-size: 48px; } .wiz-job-chip { min-height: 38px; } } /* ===== WELCOME MODAL ===== */ .tour-welcome-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px; } .tour-welcome-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg-base) 92%, transparent); backdrop-filter: blur(24px); } .tour-welcome-card { position: relative; width: 100%; max-width: 600px; border-radius: 24px; padding: 56px 48px; background: var(--card-bg); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--border); box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6); animation: tourFadeInUp .5s cubic-bezier(.16,1,.3,1); } @keyframes tourFadeInUp { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } } .tour-welcome-logo { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: color-mix(in srgb, var(--card-bg) 60%, transparent); border: 2px solid color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent); font-family: Outfit, sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--accent); } .tour-welcome-company { font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 16px; } .tour-welcome-heading { font-family: Outfit, sans-serif; font-size: 2rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.04em; margin: 0 0 8px; line-height: 1.2; } .tour-welcome-subtext { font-family: 'DM Sans', sans-serif; font-size: 1rem; color: var(--text-muted); margin: 0; line-height: 1.6; } .tour-welcome-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; border-radius: 16px; padding: 24px; background: rgba(15,27,45,0.03); border: 1px solid var(--border); } .tour-welcome-stat-val { font-family: Outfit, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; } .tour-welcome-stat-label { font-family: 'DM Sans', sans-serif; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); } .tour-welcome-section-label { font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 12px; } .tour-welcome-dept-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tour-welcome-dept-tag { padding: 6px 14px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 5%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent); font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500; color: var(--text-primary); } .tour-welcome-checklist { margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; } .tour-welcome-check-item { display: flex; align-items: center; gap: 12px; font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--text-primary); } .tour-welcome-cta { width: 100%; border-radius: 14px; padding: 16px; margin-bottom: 16px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--bg-base); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); transition: transform .15s; } .tour-welcome-cta:hover { transform: scale(1.01); } .tour-welcome-footer { text-align: center; font-family: 'DM Sans', sans-serif; font-size: .68rem; color: var(--text-subtle); line-height: 1.6; max-width: 440px; margin: 0 auto; } /* ===== TOUR GUIDE ===== */ .tour-overlay { position: fixed; inset: 0; z-index: 700; backdrop-filter: blur(20px) saturate(1.2); transition: background .3s; } .tour-card { position: fixed; z-index: 701; bottom: 32px; right: 32px; width: 460px; border-radius: 20px; padding: 32px 28px; background: var(--card-bg); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--border); border-top: 1px solid var(--border-strong); box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(15,27,45,0.03) inset; animation: tourCardIn .25s ease-out; } @keyframes tourCardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .tour-context-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tour-act-label { font-family: 'DM Sans', sans-serif; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); } .tour-category-badge { padding: 4px 10px; border-radius: 4px; font-family: 'DM Sans', sans-serif; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .tour-heading { font-family: Outfit, sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.03em; margin: 0 0 12px; } .tour-description { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--text-primary); line-height: 1.7; margin: 0 0 20px; } .tour-live-data { margin-bottom: 24px; border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 3%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 6%, transparent); font-family: 'DM Sans', sans-serif; } .tour-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tour-back-btn { font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 500; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; } .tour-progress-dots { display: flex; align-items: center; gap: 4px; } .tour-progress-dot { width: 20px; height: 3px; border-radius: 2px; transition: background .2s; } .tour-progress-divider { width: 1px; height: 8px; background: var(--border); margin: 0 2px; } .tour-next-btn { border-radius: 8px; padding: 9px 20px; border: none; cursor: pointer; background: var(--accent); color: var(--bg-base); font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 700; } .tour-next-btn.final { background: linear-gradient(135deg, #3D7A5A, #3D7A5A); padding: 14px 32px; box-shadow: 0 4px 24px rgba(61,122,90,0.3); } .tour-skip-btn { width: 100%; text-align: center; font-family: 'DM Sans', sans-serif; font-size: .68rem; color: var(--text-subtle); background: none; border: none; cursor: pointer; } .tour-skip-btn:hover { text-decoration: underline; } .tour-final-note { text-align: center; font-family: 'DM Sans', sans-serif; font-size: .68rem; color: var(--text-muted); } .tour-keyboard-hints { position: fixed; bottom: 24px; left: 24px; z-index: 702; font-family: 'DM Sans', sans-serif; font-size: .6rem; color: var(--text-subtle); } .tour-restart-btn { position: fixed; bottom: 20px; right: 20px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--card-bg) 90%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 4px 16px rgba(0,0,0,0.3); cursor: pointer; transition: transform .15s, border-color .15s; } .tour-restart-btn:hover { transform: scale(1.05); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } @keyframes tourDotPulse { 0%,100% { opacity:.7; } 50% { opacity:1; } } /* Tour spotlight effect on elements */ .tour-spotlight { position: relative !important; z-index: 700 !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent) !important; transform: scale(1.01); transition: all 500ms cubic-bezier(0.4,0,0.2,1); border-radius: 16px; } /* Tour live data internal styles */ .tour-live-data .tld-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .tour-live-data .tld-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; } .tour-live-data .tld-stat-val { font-family: Outfit, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); } .tour-live-data .tld-stat-label { font-family: 'DM Sans', sans-serif; font-size: .7rem; color: var(--text-muted); } .tour-live-data .tld-text { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--text-primary); } .tour-live-data .tld-text-sm { font-family: 'DM Sans', sans-serif; font-size: .7rem; color: var(--text-muted); } .tour-live-data .tld-text-xs { font-family: 'DM Sans', sans-serif; font-size: .65rem; color: var(--text-muted); } .tour-live-data .tld-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: .7rem; font-weight: 600; } .tour-live-data .tld-row { display: flex; align-items: center; gap: 8px; } .tour-live-data .tld-item { padding: 8px; border-radius: 8px; background: rgba(15,27,45,0.03); border: 1px solid var(--border); } .tour-live-data .tld-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tour-live-data .tld-bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 40px; } .tour-live-data .tld-bar { flex: 1; border-radius: 2px; } @media (max-width: 768px) { .tour-welcome-card { padding: 32px 24px; } .tour-welcome-heading { font-size: 1.5rem; } .tour-card { width: calc(100% - 32px); bottom: 16px; right: 16px; padding: 24px 20px; } .tour-welcome-stats { grid-template-columns: 1fr; } } /* ===== FIRST LOGIN FLOW (Mitarbeiter) ===== */ .fl-overlay { position: fixed; inset: 0; z-index: 550; background: var(--bg-base); overflow-y: auto; font-family: 'DM Sans', system-ui, sans-serif; } .fl-ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; } .fl-ambient-orb { position: absolute; border-radius: 50%; filter: blur(120px); } .fl-ambient-orb-1 { top: 0; left: 25%; width: 600px; height: 600px; background: #C5A55A; opacity: .03; } .fl-ambient-orb-2 { bottom: 0; right: 25%; width: 500px; height: 500px; background: #C5A55A; opacity: .015; } .fl-header { padding: 32px 24px; position: relative; z-index: 10; } .fl-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .fl-header-logo { display: flex; align-items: center; gap: 12px; } .fl-header-brand { font-family: Outfit, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .fl-header-tag { color: var(--text-muted); font-size: .875rem; font-weight: 500; } .fl-progress-wrap { max-width: 672px; margin: 0 auto 48px; padding: 0 24px; position: relative; z-index: 10; } .fl-progress-bar { height: 4px; background: var(--bg-elevated); border-radius: 999px; overflow: hidden; margin-bottom: 24px; } .fl-progress-fill { height: 100%; background: linear-gradient(90deg, #C5A55A, #D4BC72); transition: width .7s ease; } .fl-progress-steps { display: flex; align-items: center; justify-content: space-between; } .fl-progress-step { display: flex; flex-direction: column; align-items: center; gap: 8px; } .fl-progress-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 600; transition: all .5s; } .fl-progress-dot.completed { background: #C5A55A; color: var(--bg-base); box-shadow: 0 0 20px rgba(197,165,90,0.4); } .fl-progress-dot.current { background: var(--bg-elevated); color: #C5A55A; border: 2px solid #C5A55A; box-shadow: 0 0 16px rgba(197,165,90,0.3); } .fl-progress-dot.upcoming { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid rgba(197,165,90,0.1); } .fl-progress-step-label { font-size: .75rem; font-weight: 500; transition: color .3s; } .fl-content { position: relative; z-index: 10; padding: 0 24px 64px; } .fl-step { animation: flFadeUp .5s ease both; } @keyframes flFadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } .fl-card { position: relative; margin: 0 auto; background: var(--card-bg); border-radius: 24px; border: 1px solid rgba(197,165,90,0.1); overflow: hidden; backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(197,165,90,0.05); } .fl-card-md { max-width: 672px; } .fl-card-lg { max-width: 768px; } .fl-card-xl { max-width: 896px; } .fl-card-glow { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(197,165,90,0.05), transparent); pointer-events: none; } .fl-card-inner { position: relative; padding: 48px; } .fl-heading { font-family: Outfit, sans-serif; font-size: 2rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; line-height: 1.3; } .fl-text-white { color: var(--text-primary); margin: 0; } .fl-text-muted { color: var(--text-muted); margin: 0; } .fl-text-lg { font-size: 1.125rem; line-height: 1.6; } .fl-welcome-logo { width: 80px; height: 80px; border-radius: 16px; margin-bottom: 32px; background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(197,165,90,0.2); box-shadow: 0 8px 24px rgba(197,165,90,0.2); } .fl-timeline { display: flex; align-items: center; gap: 12px; margin: 40px 0 24px; } .fl-timeline-badge { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(197,165,90,0.1); } .fl-timeline-badge span { color: #C5A55A; font-weight: 600; } .fl-timeline-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; } .fl-timeline-item { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: rgba(26,40,71,0.3); border: 1px solid rgba(197,165,90,0.08); transition: border-color .2s; } .fl-timeline-item:hover { border-color: rgba(197,165,90,0.15); } .fl-timeline-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(197,165,90,0.1); } .fl-timeline-content { flex: 1; } .fl-timeline-time { font-size: .875rem; font-weight: 500; color: var(--text-muted); padding: 4px 12px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid rgba(197,165,90,0.08); } .fl-cta-btn { width: 100%; padding: 16px 24px; border-radius: 16px; border: none; cursor: pointer; background: linear-gradient(135deg, #C5A55A, #D4BC72); color: var(--bg-base); font-family: inherit; font-size: 1.125rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 12px; transition: all .3s; box-shadow: 0 8px 32px rgba(197,165,90,0.3); } .fl-cta-btn:hover { transform: scale(1.02); box-shadow: 0 8px 32px rgba(197,165,90,0.4); } .fl-cta-btn:active { transform: scale(0.98); } .fl-back-btn { padding: 16px 32px; border-radius: 16px; background: var(--bg-elevated); color: var(--text-primary); font-family: inherit; font-size: 1rem; font-weight: 600; border: 1px solid rgba(197,165,90,0.1); cursor: pointer; transition: border-color .2s; } .fl-back-btn:hover { border-color: #C5A55A; } .fl-btn-row { display: flex; gap: 16px; } /* Profile form */ .fl-avatar-row { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; } .fl-avatar-box { width: 96px; height: 96px; border-radius: 16px; background: var(--bg-elevated); border: 2px solid rgba(197,165,90,0.1); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .fl-avatar-upload { position: absolute; inset: 0; border-radius: 16px; background: rgba(0,0,0,0.6); opacity: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s; } .fl-avatar-box:hover .fl-avatar-upload { opacity: 1; } .fl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .fl-field { margin-bottom: 24px; } .fl-label { display: block; color: var(--text-primary); font-weight: 500; margin-bottom: 8px; } .fl-input-wrap { position: relative; } .fl-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; } .fl-input { width: 100%; padding: 12px 16px 12px 48px; background: rgba(26,40,71,0.5); border: 1px solid rgba(197,165,90,0.1); border-radius: 12px; color: var(--text-primary); font-family: inherit; font-size: 1rem; outline: none; transition: border-color .2s; box-sizing: border-box; } .fl-input::placeholder { color: var(--text-muted); } .fl-input:focus { border-color: #C5A55A; box-shadow: 0 0 0 3px rgba(197,165,90,0.2); } .fl-input.fl-input-pw { padding-right: 48px; } .fl-pw-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; color: var(--text-muted); } .fl-pw-toggle:hover { color: #C5A55A; } .fl-field-error { color: #9B3B3B; font-size: .875rem; margin-top: 8px; min-height: 0; } /* 2FA */ .fl-icon-badge { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; background: linear-gradient(135deg, #C5A55A, #D4BC72); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(197,165,90,0.3); } .fl-icon-badge-lg { width: 80px; height: 80px; border-radius: 24px; margin-bottom: 32px; box-shadow: 0 8px 32px rgba(197,165,90,0.4); } .fl-info-box { padding: 24px; border-radius: 16px; background: rgba(26,40,71,0.3); border: 1px solid rgba(197,165,90,0.08); display: flex; align-items: flex-start; gap: 16px; } .fl-step-num { width: 24px; height: 24px; border-radius: 50%; background: #C5A55A; color: var(--bg-base); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; flex-shrink: 0; } .fl-2fa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .fl-secret-code { flex: 1; padding: 8px 16px; background: var(--bg-elevated); border-radius: 8px; color: #C5A55A; font-family: monospace; font-size: .875rem; border: 1px solid rgba(197,165,90,0.1); } .fl-copy-btn { padding: 8px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid rgba(197,165,90,0.1); cursor: pointer; transition: border-color .2s; } .fl-copy-btn:hover { border-color: #C5A55A; } .fl-backup-codes { display: flex; flex-direction: column; gap: 8px; } .fl-backup-code { padding: 8px 16px; background: var(--bg-elevated); border-radius: 8px; color: #C5A55A; font-family: monospace; font-size: .875rem; border: 1px solid rgba(197,165,90,0.1); } .fl-outline-btn { width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--bg-elevated); color: #C5A55A; font-family: inherit; font-size: .875rem; font-weight: 500; border: 1px solid rgba(197,165,90,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .2s; } .fl-outline-btn:hover { border-color: #C5A55A; } /* Summary */ .fl-completed-task { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: rgba(197,165,90,0.1); border: 1px solid rgba(197,165,90,0.3); margin-bottom: 16px; } .fl-completed-icon { width: 48px; height: 48px; border-radius: 12px; background: #C5A55A; color: var(--bg-base); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fl-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fl-feature-card { padding: 16px; border-radius: 16px; background: rgba(26,40,71,0.3); border: 1px solid rgba(197,165,90,0.08); transition: border-color .2s; } .fl-feature-card:hover { border-color: rgba(197,165,90,0.15); } /* Manager 2FA digit inputs */ .mafl-digit-input { width: 48px; height: 56px; text-align: center; font-size: 1.25rem; font-weight: 600; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; outline: none; font-family: inherit; transition: all .2s; } .mafl-digit-input:focus { border-color: rgba(197,165,90,0.5); background: rgba(255,255,255,0.1); } @media (max-width: 768px) { .mafl-digit-input { width: 40px; height: 48px; font-size: 1rem; } .fl-card-inner { padding: 32px 24px; } .fl-heading { font-size: 1.5rem; } .fl-form-grid { grid-template-columns: 1fr; } .fl-2fa-grid { grid-template-columns: 1fr; } .fl-feature-grid { grid-template-columns: 1fr; } .fl-btn-row { flex-direction: column; } .fl-avatar-row { flex-direction: column; align-items: flex-start; } } /* ===== USER FORM GRID ===== */ .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ===== SMS TOGGLE SWITCHES ===== */ .sms-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius); } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 99px; transition: background 0.2s; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } /* ===== CREDENTIAL CHANGE OVERLAY ===== */ .cc-overlay { display: none; position: fixed; inset: 0; background: var(--bg-base); z-index: 160; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cc-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .cc-container { width: 100%; max-width: 460px; animation: fadeUp 0.5s ease both; } .cc-hero { text-align: center; margin-bottom: 32px; } .cc-icon-circle { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: rgba(16,185,129,0.12); display: flex; align-items: center; justify-content: center; } .cc-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; margin-bottom: 8px; } .cc-subtitle { color: var(--text-muted); font-size: .9rem; line-height: 1.6; } .cc-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 28px; } .cc-error { display: none; background: rgba(155,59,59,0.1); border: 1px solid rgba(155,59,59,0.25); color: #9B3B3B; border-radius: 10px; padding: 11px 14px; font-size: .875rem; margin-bottom: 16px; } .cc-field { margin-bottom: 16px; } .cc-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 7px; } .cc-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-size: .9375rem; color: var(--text-primary); background: var(--bg); box-sizing: border-box; transition: border-color .2s, box-shadow .2s; } .cc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,.12); } .cc-hint { font-size: 11px; color: var(--text-muted); margin-top: 5px; opacity: 0.7; } .cc-pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; } .cc-pw-requirements { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-bottom: 20px; padding: 8px 12px; background: rgba(197,165,90,0.06); border-radius: 8px; line-height: 1.4; } .cc-pw-requirements svg { flex-shrink: 0; color: var(--accent); } .cc-submit { width: 100%; padding: 13px 20px; font-size: .9375rem; border-radius: 10px; font-weight: 700; } /* ===== ONBOARDING TOUR v2 – Full Screen ===== */ @keyframes obFadeIn { from { opacity:0 } to { opacity:1 } } @keyframes obCardIn { from { opacity:0; transform:scale(.88) translateY(28px) } to { opacity:1; transform:scale(1) translateY(0) } } @keyframes obContentIn { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:translateX(0) } } @keyframes obWelcomeIcon { 0%{transform:scale(0) rotate(-12deg);opacity:0} 65%{transform:scale(1.12) rotate(4deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} } @keyframes obCheckIn { 0%{transform:scale(0);opacity:0} 70%{transform:scale(1.15);opacity:1} 100%{transform:scale(1);opacity:1} } .ob-overlay { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 16px; } .ob-overlay.active { display: flex; } .ob-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: obFadeIn .35s ease; } .ob-card { position: relative; z-index: 1; width: 100%; max-width: 620px; background: var(--bg-elevated); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; animation: obCardIn .45s cubic-bezier(.34,1.56,.64,1); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; } .ob-progress-track { height: 3px; background: rgba(255,255,255,.06); flex-shrink:0; } .ob-progress-fill { height:100%; background: linear-gradient(90deg,var(--accent),#a78bfa); border-radius:0 2px 2px 0; transition:width .5s cubic-bezier(.4,0,.2,1); min-width:2%; } .ob-topbar { display:flex; align-items:center; justify-content:space-between; padding: 14px 22px 0; flex-shrink:0; } .ob-step-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted); } .ob-close-x { width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; } .ob-close-x:hover { background:var(--bg-secondary); color:var(--text-primary); } /* Body */ .ob-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:22px 26px 0; -webkit-overflow-scrolling:touch; } /* Feature slide layout */ .ob-slide { display:flex; align-items:flex-start; gap:20px; animation:obContentIn .28s ease; } .ob-icon-circle { flex-shrink:0; width:68px; height:68px; border-radius:20px; display:flex; align-items:center; justify-content:center; } .ob-text-col { flex:1; min-width:0; } .ob-tag { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:9px; background:rgba(197,165,90,.12); color:var(--accent); border:1px solid rgba(197,165,90,.2); } .ob-tag.warn { background:rgba(245,158,11,.12); color:var(--warning); border-color:rgba(245,158,11,.25); } .ob-tag.success { background:rgba(16,185,129,.12); color:var(--success); border-color:rgba(16,185,129,.25); } .ob-title { font-size:1.35rem; font-weight:800; color:var(--text-primary); line-height:1.2; margin-bottom:7px; } .ob-subtitle { font-size:.875rem; color:var(--text-muted); line-height:1.65; margin-bottom:16px; } .ob-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .ob-features li { display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--text-primary); line-height:1.5; padding:9px 12px; background:var(--bg-secondary); border-radius:10px; border:1px solid var(--border); } .ob-feat-chk { flex-shrink:0; color:var(--success); margin-top:1px; } /* Welcome */ .ob-welcome { text-align:center; animation:obContentIn .35s ease; padding: 8px 0 0; } .ob-welcome-icon { width:auto !important; height:auto !important; border-radius:0; background:none !important; box-shadow:none !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-bottom: 8px; margin:0 auto 16px; animation:obWelcomeIcon .6s cubic-bezier(.34,1.56,.64,1) .1s both; } .ob-welcome-icon img, .ob-logo-img { width: 220px !important; height: auto !important; max-height: none !important; border-radius: 20px !important; display: block; object-fit: contain; } .ob-welcome-title { font-size:1.5rem; font-weight:900; line-height:1.2; margin-bottom:8px; background:linear-gradient(135deg,var(--text-primary) 40%,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .ob-welcome-sub { font-size:.85rem; color:var(--text-muted); line-height:1.6; margin-bottom:14px; } .ob-role-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; background:rgba(197,165,90,.15); color:var(--accent); border:1px solid rgba(197,165,90,.25); margin-bottom:22px; } .ob-chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .ob-chip { display:flex; align-items:center; gap:5px; padding:6px 12px; border-radius:10px; font-size:12px; font-weight:600; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-muted); } /* Finish */ .ob-finish { text-align:center; animation:obContentIn .3s ease; } .ob-finish-check { width:76px; height:76px; border-radius:50%; background:rgba(16,185,129,.1); border:2px solid var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--success); animation:obCheckIn .5s cubic-bezier(.34,1.56,.64,1); } /* Theme picker in onboarding finish */ .ob-theme-picker { display:flex; gap:12px; justify-content:center; margin:0 auto; max-width:320px; } .ob-theme-option { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px; border-radius:var(--radius); border:2px solid var(--border); cursor:pointer; transition:all .2s; font-size:12px; font-weight:600; color:var(--text-muted); } .ob-theme-option:hover { border-color:var(--border-strong); } .ob-theme-option.ob-theme-active { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); } .ob-theme-preview { width:100%; height:40px; border-radius:8px; border:1px solid; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 10px; } .ob-checklist { text-align:left; margin-top:16px; display:flex; flex-direction:column; gap:9px; } .ob-checklist-row { display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:11px; background:var(--bg-secondary); border:1px solid var(--border); font-size:13px; font-weight:500; color:var(--text-primary); cursor:pointer; transition:all .15s; } .ob-checklist-row:hover { border-color:var(--accent); background:rgba(197,165,90,.05); transform:translateX(2px); } .ob-cl-num { width:24px; height:24px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--accent),#C5A55A); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; } /* Footer */ .ob-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 22px 22px; flex-shrink:0; border-top:1px solid var(--border); margin-top:18px; } .ob-skip { font-size:12px; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:6px 8px; border-radius:6px; transition:color .15s; } .ob-skip:hover { color:var(--text-primary); } .ob-nav { display:flex; gap:8px; align-items:center; } .ob-btn-back { padding:8px 16px; border-radius:10px; border:1.5px solid var(--border); background:transparent; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; } .ob-btn-back:hover { background:var(--bg-secondary); color:var(--text-primary); } .ob-btn-next { padding:9px 22px; border-radius:10px; background:var(--accent); color:#fff; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; box-shadow:0 1px 4px rgba(0,0,0,.15); } .ob-btn-next:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.2); } .ob-btn-finish { background:linear-gradient(135deg,var(--success),#2D6B48); box-shadow:0 1px 4px rgba(0,0,0,.15); } .ob-btn-finish:hover { box-shadow:0 2px 8px rgba(0,0,0,.2); } /* "Jetzt ansehen" inline button in feature slide */ .ob-goto-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 9px 18px; background: rgba(197,165,90,.1); border: 1px solid rgba(197,165,90,.3); border-radius: 10px; color: var(--accent); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s; } .ob-goto-btn:hover { background: rgba(197,165,90,.2); border-color: rgba(197,165,90,.55); transform: translateY(-1px); } /* Floating "Tour fortsetzen" button */ .ob-resume-btn { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 9999; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 50px; background: linear-gradient(135deg, var(--accent), #C5A55A); color: #fff; font-size: .85rem; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); animation: obFadeIn .3s ease; transition: transform .15s, box-shadow .15s; } .ob-resume-btn.visible { display: flex; } .ob-resume-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); } /* Mobile */ @media (max-width:640px) { .ob-slide { flex-direction:column; gap:14px; } .ob-icon-circle { width:56px; height:56px; border-radius:16px; } .ob-title { font-size:1.15rem; } .ob-card { border-radius:20px; max-height:calc(100dvh - 24px); } .ob-body { padding:18px 18px 0; } .ob-footer { padding:12px 16px 18px; } .ob-welcome-title { font-size:1.35rem; } } /* ===== THEME PICKER ===== */ .theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; } .theme-option { cursor: pointer; border-radius: 14px; overflow: hidden; border: 2px solid var(--border); transition: border-color .2s, transform .15s, box-shadow .2s; user-select: none; position: relative; } .theme-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .theme-option:focus { outline: none; border-color: var(--accent); } .theme-option:focus:not(:focus-visible) { border-color: var(--border); } .theme-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } .theme-option.active .theme-option-footer { background: var(--accent-subtle); border-top-color: rgba(197,165,90,0.2); } /* Swatch — fixed-color mini UI preview, never inherits theme variables */ .theme-swatch { height: 90px; display: flex; flex-direction: row; overflow: hidden; position: relative; } /* Dark swatch */ .theme-swatch-dark { background: #0d0d14; } .theme-swatch-dark .ts-sidebar { width: 30%; min-width: 0; background: #0F1B2D; border-right: 1px solid rgba(15,27,45,0.08); flex-shrink: 0; } .theme-swatch-dark .ts-content { flex: 1; padding: 6px 7px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .theme-swatch-dark .ts-topbar { height: 8px; border-radius: 3px; background: rgba(15,27,45,0.08); width: 80%; } .theme-swatch-dark .ts-row { height: 7px; border-radius: 3px; background: rgba(255,255,255,0.05); } .theme-swatch-dark .ts-row-a { width: 100%; background: #C5A55A; opacity: 0.7; } .theme-swatch-dark .ts-row-b { width: 80%; } .theme-swatch-dark .ts-row-c { width: 55%; } /* Blue swatch */ .theme-swatch-blue { background: #060a1c; } .theme-swatch-blue .ts-sidebar { width: 30%; min-width: 0; background: #0c1430; border-right: 1px solid rgba(197,165,90,0.2); flex-shrink: 0; } .theme-swatch-blue .ts-content { flex: 1; padding: 6px 7px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .theme-swatch-blue .ts-topbar { height: 8px; border-radius: 3px; background: rgba(197,165,90,0.18); width: 80%; } .theme-swatch-blue .ts-row { height: 7px; border-radius: 3px; background: rgba(197,165,90,0.1); } .theme-swatch-blue .ts-row-a { width: 100%; background: #C5A55A; opacity: 0.8; } .theme-swatch-blue .ts-row-b { width: 80%; } .theme-swatch-blue .ts-row-c { width: 55%; } /* Light swatch */ .theme-swatch-light { background: #f0f2f8; } .theme-swatch-light .ts-sidebar { width: 30%; min-width: 0; background: #fff; border-right: 1px solid #dde3f0; flex-shrink: 0; } .theme-swatch-light .ts-content { flex: 1; padding: 6px 7px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .theme-swatch-light .ts-topbar { height: 8px; border-radius: 3px; background: #dde3f0; width: 80%; } .theme-swatch-light .ts-row { height: 7px; border-radius: 3px; background: #e8ecf5; } .theme-swatch-light .ts-row-a { width: 100%; background: #C5A55A; opacity: 0.6; } .theme-swatch-light .ts-row-b { width: 80%; } .theme-swatch-light .ts-row-c { width: 55%; } .theme-swatch-cream { background: #F3EDE2; } .theme-swatch-cream .ts-sidebar { width: 30%; min-width: 0; background: #EAE2D2; border-right: 1px solid rgba(26,22,20,0.12); flex-shrink: 0; } .theme-swatch-cream .ts-content { flex: 1; padding: 6px 7px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .theme-swatch-cream .ts-topbar { height: 8px; border-radius: 3px; background: rgba(26,22,20,0.12); width: 80%; } .theme-swatch-cream .ts-row { height: 7px; border-radius: 3px; background: rgba(26,22,20,0.08); } .theme-swatch-cream .ts-row-a { width: 100%; background: #C2410C; opacity: 0.85; } .theme-swatch-cream .ts-row-b { width: 80%; } .theme-swatch-cream .ts-row-c { width: 55%; } /* Footer */ .theme-option-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--bg-elevated); border-top: 1px solid var(--border); transition: background .2s, border-color .2s; } .theme-option-name { transition: color .2s; } .theme-option.active .theme-option-name { color: var(--accent); } .theme-option-check { display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; align-items: center; justify-content: center; flex-shrink: 0; animation: checkPop .2s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes checkPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .theme-option.active .theme-option-check { display: flex; } /* Settings tabs */ .settings-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 4px; width: fit-content; } .settings-tab { padding: 7px 18px; font-size: 13px; font-weight: 600; border-radius: 9px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .15s; white-space: nowrap; } .settings-tab.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(197,165,90,0.35); } .settings-tab:not(.active):hover { color: var(--text-primary); background: var(--bg-hover); } .settings-panel { display: none; } .settings-panel.active { display: block; } /* ===== MISC ===== */ .text-center { text-align: center; } .mt-20 { margin-top: 20px; } .demo-note { background: rgba(197,165,90,0.08); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 10px; font-size: 12px; color: var(--accent); margin-bottom: 18px; } .info-banner { display: flex; align-items: center; gap: 12px; background: rgba(197,165,90,0.08); border: 1px solid rgba(197,165,90,0.2); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .info-banner-icon { font-size: 18px; flex-shrink: 0; } /* ===== RESPONSIVE ===== */ @media (max-width: 1280px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } .db-kpi-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { :root { --sidebar-w: 240px; } .dashboard-grid-2 { grid-template-columns: 1fr; } .dashboard-grid-eq { grid-template-columns: 1fr; } .db-grid { grid-template-columns: 1fr; } .report-grid { grid-template-columns: 1fr; } .db-content-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .db-kpi-row { grid-template-columns: repeat(2, 1fr); } .quick-actions-grid { grid-template-columns: 1fr 1fr; } .dept-grid { grid-template-columns: repeat(2, 1fr) !important; } .db-actions { grid-template-columns: repeat(2, 1fr); } .db-kpi-bento { grid-template-columns: 1fr; } .db-kpi-featured .db-kpi-val { font-size: 40px !important; } .db-hero { flex-direction: column; gap: 16px; padding: 22px 24px; } } /* ===== SCHICHTPLANUNG (v3 — Compact & Modern) ===== */ /* ── Header bar ── */ .shift-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .shift-header-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .shift-header-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -.02em; white-space: nowrap; } .shift-header-sep { color: var(--border); font-size: 18px; font-weight: 300; } .shift-header-kw { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; letter-spacing: -.01em; } .shift-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Navigation buttons */ .shift-nav-btns { display: inline-flex; align-items: center; gap: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .shift-nav-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 7px 10px; font-size: 12px; font-weight: 600; transition: all .15s; display: flex; align-items: center; justify-content: center; } .shift-nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .shift-nav-btn.shift-nav-today { border-left: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--accent); font-weight: 700; padding: 7px 14px; } .shift-nav-btn.shift-nav-today:hover { background: rgba(197,165,90,0.08); } /* Suchfeld im Shift-Header */ .shift-search-wrap { position: relative; display: inline-flex; align-items: center; } .shift-search-wrap > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .shift-search-wrap > input { padding: 7px 10px 7px 32px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text-primary); font-size: .82rem; min-width: 180px; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; } .shift-search-wrap > input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,.12); } .shift-search-wrap > input::placeholder { color: var(--text-muted); } /* Custom dept dropdown */ .shift-dropdown { position: relative; z-index: 20; } .shift-dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text-primary); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; } .shift-dropdown-toggle:hover { border-color: var(--accent); } .shift-dropdown-toggle svg { transition: transform .2s; color: var(--text-muted); flex-shrink: 0; } .shift-dropdown.open .shift-dropdown-toggle { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,90,.12); } .shift-dropdown.open .shift-dropdown-toggle svg { transform: rotate(180deg); } .shift-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .15s ease; max-height: 280px; overflow-y: auto; } .shift-dropdown.open .shift-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .shift-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: .82rem; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background .1s; white-space: nowrap; } .shift-dropdown-item:hover { background: rgba(197,165,90,.08); } .shift-dropdown-item.active { color: var(--accent); font-weight: 700; } .shift-dropdown-check { flex-shrink: 0; color: var(--accent); } .shift-dropdown-item:not(.active) .shift-dropdown-check { visibility: hidden; } .shift-cal-export-menu { left: auto; right: 0; min-width: 200px; } .shift-cal-export-menu .shift-dropdown-item svg { flex-shrink: 0; } body.light-mode .shift-dropdown-menu { box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.05); } .shift-copy-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s; } .shift-copy-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(197,165,90,0.06); } .shift-copy-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); } /* ── Grid table ── */ .shift-grid-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: 0 4px 20px rgba(0,0,0,.12); -webkit-overflow-scrolling: touch; } .shift-grid-table { width: 100%; border-collapse: collapse; min-width: 720px; } /* Table header */ .shift-grid-table th { background: var(--bg-base); padding: 10px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 2px solid var(--border); text-align: center; border-right: 1px solid rgba(255,255,255,0.6); } .shift-th-emp { text-align: left; padding-left: 14px; min-width: 180px; border-right: 2px solid var(--border) !important; } .shift-th-day { position: relative; min-width: 110px; border-right: 2px solid rgba(15,27,45,0.06) !important; } body.light-mode .shift-th-day { border-right-color: rgba(0,0,0,0.08) !important; } .shift-th-dayname { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; } .shift-th-date { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted); margin-top: 1px; opacity: .7; } .shift-th-hours { min-width: 56px; border-left: 2px solid var(--border) !important; } /* Today column header */ .shift-grid-table th.shift-today-col { color: var(--accent); background: rgba(197,165,90,0.08); border-bottom-color: var(--accent); } .shift-today-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 4px auto 0; box-shadow: 0 0 6px rgba(197,165,90,0.6); } /* ── Employee cell with avatar ── */ .shift-emp-cell { padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-primary); border-right: 2px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-elevated); position: sticky; left: 0; z-index: 2; box-shadow: 6px 0 12px rgba(0,0,0,0.08); } .shift-th-emp { position: sticky; left: 0; z-index: 3; background: var(--bg-base); box-shadow: 6px 0 12px rgba(0,0,0,0.08); } .shift-emp-info { display: flex; align-items: center; gap: 10px; } .shift-emp-avatar { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1.5px solid var(--border); } .shift-emp-avatar-init { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(197,165,90,0.15), rgba(197,165,90,0.1)); color: var(--accent); font-size: 12px; font-weight: 800; } /* feste Mindesthöhe + Name oben: alle Namen starten auf gleicher Höhe, egal ob Rolle vorhanden ist */ .shift-emp-text { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; min-height: 30px; } .shift-emp-name { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } .shift-emp-role { font-size: 10px; font-weight: 500; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; } /* ── Day cells ── */ .shift-cell { vertical-align: top; padding: 6px 7px; border-right: 2px solid rgba(15,27,45,0.06); border-bottom: 1px solid var(--border); min-width: 110px; min-height: 58px; cursor: pointer; transition: background .12s ease; position: relative; } body.light-mode .shift-cell { border-right-color: rgba(0,0,0,0.08); } .shift-cell:hover { background: rgba(197,165,90,0.06); } .shift-cell.shift-today-col-cell { background: rgba(197,165,90,0.06); box-shadow: inset 0 0 0 1.5px rgba(197,165,90,0.12); } .shift-cell.readonly { cursor: default; } .shift-cell.readonly:hover { background: transparent; } /* Row hover highlight — full row lights up, very visible */ .shift-row { transition: background .1s ease; } .shift-row:hover > td { background: rgba(197,165,90,0.07) !important; } .shift-row:hover > .shift-emp-cell { background: rgba(197,165,90,0.10) !important; box-shadow: inset 3px 0 0 var(--accent), 4px 0 8px rgba(0,0,0,0.04); } body.light-mode .shift-row:hover > .shift-emp-cell { background: rgba(197,165,90,0.06) !important; } .shift-row:hover > .shift-cell.shift-today-col-cell { background: rgba(197,165,90,0.11) !important; } .shift-row:hover > .shift-hours-cell { background: rgba(0,0,0,0.07) !important; } /* Add hint */ .shift-add-hint { font-size: 18px; color: var(--accent); text-align: center; line-height: 42px; opacity: 0; transition: opacity .2s; font-weight: 300; } .shift-cell:hover .shift-add-hint { opacity: .5; } /* ── Shift blocks — clean design with left color accent ── */ .shift-block { background: linear-gradient(135deg, rgba(197,165,90,0.12), rgba(197,165,90,0.06)); border: 1px solid rgba(197,165,90,0.18); border-radius: 8px; padding: 7px 10px; border-left: 3.5px solid rgba(197,165,90,0.55); margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--accent); display: flex; flex-direction: column; gap: 2px; transition: background-color .15s, color .15s, border-color .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .shift-block-top { display: flex; align-items: center; gap: 5px; } .shift-block:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(197,165,90,0.18); } /* Type-specific colors — softer backgrounds, vivid left border */ .shift-block.shift-type-frueh { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(61,122,90,0.05)); border-color: rgba(16,185,129,0.15); border-left-color: #3D7A5A; color: #3D7A5A; box-shadow: 0 1px 3px rgba(16,185,129,0.06); } .shift-block.shift-type-frueh:hover { box-shadow: 0 3px 10px rgba(16,185,129,0.18); } .shift-block.shift-type-spaet { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(197,165,90,0.05)); border-color: rgba(245,158,11,0.15); border-left-color: #C5A55A; color: #C5A55A; box-shadow: 0 1px 3px rgba(245,158,11,0.06); } .shift-block.shift-type-spaet:hover { box-shadow: 0 3px 10px rgba(245,158,11,0.18); } .shift-block.shift-type-nacht { background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(167,139,250,0.05)); border-color: rgba(139,92,246,0.15); border-left-color: #8b5cf6; color: #a78bfa; box-shadow: 0 1px 3px rgba(139,92,246,0.06); } .shift-block.shift-type-nacht:hover { box-shadow: 0 3px 10px rgba(139,92,246,0.18); } .shift-block.shift-type-tag { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(96,165,250,0.05)); border-color: rgba(59,130,246,0.15); border-left-color: #3b82f6; color: #60a5fa; box-shadow: 0 1px 3px rgba(59,130,246,0.06); } .shift-block.shift-type-tag:hover { box-shadow: 0 3px 10px rgba(59,130,246,0.18); } /* Employee own shift highlight */ .shift-block.shift-block-mine { border-left-width: 4px; box-shadow: 0 0 8px rgba(197,165,90,0.2); } .shift-block.shift-block-mine.shift-type-frueh { box-shadow: 0 0 8px rgba(16,185,129,0.2); } .shift-block.shift-block-mine.shift-type-spaet { box-shadow: 0 0 8px rgba(245,158,11,0.2); } .shift-block.shift-block-mine.shift-type-nacht { box-shadow: 0 0 8px rgba(139,92,246,0.2); } .shift-block.shift-block-mine.shift-type-tag { box-shadow: 0 0 8px rgba(59,130,246,0.2); } .shift-block-icon { font-size: 13px; flex-shrink: 0; line-height: 1; } .shift-block-time { font-size: 12px; font-weight: 900; flex: 1; letter-spacing: -.01em; } .shift-block-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 0; line-height: 1; flex-shrink: 0; transition: color .15s, opacity .15s; border-radius: 4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; opacity: 0; margin-left: auto; } .shift-block:hover .shift-block-del { opacity: 1; } .shift-block-del:hover { color: var(--danger); background: var(--danger-bg); } .shift-block-note { font-size: 10px; font-weight: 600; color: inherit; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /* Virtual/recurring shift styling */ .shift-block-virtual { opacity: .7; border: 1px dashed rgba(255,255,255,.2); position: relative; } .shift-block-virtual:hover { opacity: .9; } .shift-repeat-icon { opacity: .5; flex-shrink: 0; margin-left: auto; } .shift-block-virtual .shift-repeat-icon { opacity: .7; } /* Empty row */ .shift-empty-row td { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; } /* My row highlight (employee view) */ .shift-row.shift-row-me > .shift-emp-cell { background: rgba(197,165,90,0.06); } /* ── Absence backgrounds ── */ .shift-cell.shift-absence-vacation { background: rgba(16,185,129,0.08); border-left: 3px solid rgba(16,185,129,0.4); } .shift-cell.shift-absence-sick { background: rgba(155,59,59,0.08); border-left: 3px solid rgba(155,59,59,0.4); } .shift-cell.shift-absence-homeoffice { background: rgba(197,165,90,0.08); border-left: 3px solid rgba(197,165,90,0.4); } /* Absence badges */ .shift-absence-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; margin-bottom: 3px; text-transform: uppercase; } .shift-abs-vacation { background: rgba(16,185,129,0.15); color: #3D7A5A; } .shift-abs-sick { background: rgba(155,59,59,0.15); color: #9B3B3B; } .shift-abs-homeoffice { background: rgba(197,165,90,0.15); color: #C5A55A; } /* ── Drag & drop ── */ .shift-cell.shift-drop-target { background: rgba(197,165,90,0.12) !important; outline: 2px dashed var(--accent); outline-offset: -2px; } .shift-block[draggable="true"] { cursor: grab; } .shift-block[draggable="true"]:active { cursor: grabbing; opacity: .5; } /* ── Hours column — highlighted background ── */ .shift-hours-cell { text-align: center; font-weight: 800; font-size: .9rem; border-bottom: 1px solid var(--border); border-left: 2px solid var(--border); padding: 10px 8px; white-space: nowrap; background: rgba(0,0,0,0.06); } body.light-mode .shift-hours-cell { background: rgba(0,0,0,0.03); } .shift-hours-cell.shift-hrs-good { color: var(--success); background: rgba(16,185,129,0.10); } .shift-hours-cell.shift-hrs-over { color: var(--warning); background: rgba(245,158,11,0.10); } .shift-hours-cell.shift-hrs-low { color: var(--text-muted); } .shift-th-hours { background: rgba(0,0,0,0.06) !important; font-weight: 800 !important; } body.light-mode .shift-th-hours { background: rgba(0,0,0,0.03) !important; } /* ── Shift template chips ── */ .shift-template-chips { display: flex; flex-wrap: wrap; gap: 6px; } .shift-tpl-chip { display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border); background: var(--bg-base); color: var(--text-primary); transition: all .15s; } .shift-tpl-chip:hover { border-color: var(--accent); background: rgba(197,165,90,0.08); color: var(--accent); } /* ── Employee Today card (compact) ── */ .shift-today-card { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; animation: dbFadeUp 0.3s ease both; } .shift-tc-icon { font-size: 18px; flex-shrink: 0; } .shift-tc-text { font-size: 13px; font-weight: 600; color: var(--text-primary); } .shift-tc-label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .shift-tc-time { font-size: 15px; font-weight: 800; color: var(--accent); letter-spacing: -.01em; } .shift-tc-note { font-size: 12px; font-weight: 500; color: var(--text-muted); } .shift-tc-sep { color: var(--border); font-size: 14px; } .shift-tc-next { font-size: 12px; color: var(--text-muted); } .shift-tc-extra { font-size: 11px; color: var(--accent); font-weight: 700; } /* ── Slide animation on week change ── */ @keyframes shiftSlideInLeft { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes shiftSlideInRight { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } #shiftGridContainer { transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .25s ease; } #shiftGridContainer.shift-slide-left { animation: shiftSlideInLeft .3s cubic-bezier(.16,1,.3,1) both; } #shiftGridContainer.shift-slide-right { animation: shiftSlideInRight .3s cubic-bezier(.16,1,.3,1) both; } /* ── Blocked cell (Elternzeit) — keep from v2 ── */ .shift-cell.blocked { background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 8px); pointer-events: auto; cursor: not-allowed; position: relative; } .shift-cell.blocked::after { content: attr(data-block-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); font-style: italic; pointer-events: none; } /* ── Employee view: larger shift blocks ── */ .shift-cell.readonly .shift-block { padding: 10px 14px; border-radius: 11px; gap: 3px; cursor: pointer; } .shift-cell.readonly .shift-block-time { font-size: 14px; font-weight: 900; } .shift-cell.readonly .shift-block-note { font-size: 11px; font-weight: 600; } .shift-cell.readonly .shift-block-icon { font-size: 15px; } .shift-cell.readonly { min-height: 68px; padding: 8px; } /* Today column glow for employee */ .shift-row-me > .shift-today-col-cell { background: rgba(197,165,90,0.08); box-shadow: inset 0 0 12px rgba(197,165,90,0.08); } /* ── Calendar Sync Section ── */ .shift-cal-sync { margin-top: 20px; padding: 20px 24px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border); animation: dbFadeUp 0.4s ease both; } .shift-cal-sync-header { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; } .shift-cal-sync-header svg { color: var(--accent); flex-shrink: 0; } .shift-cal-sync-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .shift-cal-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); background: var(--bg-base); color: var(--text-primary); cursor: pointer; transition: all .15s; } .shift-cal-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); } .shift-cal-btn.shift-cal-google:hover { border-color: #4285F4; background: rgba(66,133,244,0.06); } .shift-cal-btn.shift-cal-apple:hover { border-color: #999; background: rgba(0,0,0,0.04); } .shift-cal-btn.shift-cal-outlook:hover { border-color: #0078d4; background: rgba(0,120,212,0.06); } .shift-cal-sync-hint { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; } /* Generic modal overlay + box (used by shift detail, etc.) */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-box { background: var(--bg-elevated); border: none; border-radius: 16px; padding: 24px; width: 92%; max-width: 400px; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); animation: modalSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Calendar buttons in shift detail modal */ .shift-detail-cal-btns { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .shift-detail-cal-btns .shift-cal-btn { flex: 1; justify-content: center; padding: 8px 12px; font-size: 12px; } /* Shift add modal */ #shiftModal .modal-box { max-width: 420px; } .shift-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ===== MEIN PORTAL (Employee Self-Service) ===== */ .portal-hero { background: linear-gradient(135deg, rgba(197,165,90,0.08) 0%, rgba(197,165,90,0.04) 50%, rgba(197,165,90,0.06) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(197,165,90,0.12); border-radius: 20px; padding: 32px 36px; display: flex; align-items: center; gap: 28px; margin-bottom: 28px; animation: pageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; position: relative; overflow: hidden; } .portal-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(197,165,90,0.06), transparent); pointer-events: none; } .portal-hero-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #a78bfa); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #fff; flex-shrink: 0; } .portal-hero-info { flex: 1; } .portal-hero-name { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; } .portal-hero-role { font-size: .85rem; color: var(--text-muted); } .portal-vacation-badge { text-align: center; padding: 14px 20px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); border-radius: 12px; flex-shrink: 0; } .portal-vacation-days { font-size: 2rem; font-weight: 900; color: var(--success); line-height: 1; } .portal-vacation-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .portal-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .portal-action-btn { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-body); color: var(--text-secondary); transition: all 0.25s cubic-bezier(0.16,1,0.3,1); text-align: center; box-shadow: var(--inner-shadow); position: relative; overflow: hidden; } .portal-action-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity 0.25s; } .portal-action-btn:hover::before { opacity: 1; } .portal-action-btn:hover { border-color: var(--accent); background: rgba(197,165,90,0.08); color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(197,165,90,0.15); } .portal-action-icon { font-size: 1.5rem; } .portal-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .portal-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Timeline */ .portal-timeline { display: flex; flex-direction: column; gap: 10px; } .timeline-item { display: flex; gap: 14px; padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; align-items: flex-start; transition: border-color 0.2s ease, transform 0.2s ease; } .timeline-item:hover { border-color: rgba(197,165,90,0.3); transform: translateX(3px); } .timeline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .timeline-dot.pending { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); } .timeline-dot.approved { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); } .timeline-dot.rejected { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } .timeline-content { flex: 1; } .timeline-type { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .timeline-dates { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .timeline-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; } .timeline-badge.pending { background: var(--warning-bg); color: var(--warning); } .timeline-badge.approved { background: var(--success-bg); color: var(--success); } .timeline-badge.rejected { background: var(--danger-bg); color: var(--danger); } /* Shift list in portal */ .portal-shifts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; margin-bottom: 24px; } .portal-shift-card { background: var(--bg-elevated); border: 1.5px solid rgba(197,165,90,0.25); border-radius: 10px; padding: 12px 14px; } .portal-shift-date { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; } .portal-shift-time { font-size: 1.1rem; font-weight: 800; color: var(--accent); } .portal-shift-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; } @media (max-width: 640px) { .portal-hero { flex-direction: column; text-align: center; padding: 20px; } .portal-quick-actions { grid-template-columns: 1fr 1fr; } .shift-header-bar { flex-direction: column; gap: 8px; } .shift-header-right { width: 100%; justify-content: center; flex-wrap: wrap; } .shift-header-kw { font-size: 12px; } } @media (max-width: 768px) { .mobile-bottom-nav { display: block; } .mobile-menu-btn { display: flex; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 300; transform: translateX(-100%); transition: transform 0.25s ease; height: 100%; width: var(--sidebar-w) !important; } .sidebar.open { transform: translateX(0); } .sidebar-toggle-btn { display: none !important; } /* Reset collapsed state on mobile */ .sidebar.collapsed { width: var(--sidebar-w) !important; } .sidebar.collapsed .sidebar-brand-name, .sidebar.collapsed .user-info-text, .sidebar.collapsed .menu-section-title, .sidebar.collapsed .menu-item-left span, .sidebar.collapsed .menu-count, .sidebar.collapsed .badge-new, .sidebar.collapsed .plan-lock-icon, .sidebar.collapsed .menu-group-chevron, .sidebar.collapsed .btn-logout { opacity: 1 !important; width: auto !important; } .sidebar.collapsed .menu-section-title { height: auto !important; margin-bottom: 4px !important; padding: 0 8px !important; } .sidebar.collapsed .menu-item { padding: 8px 12px !important; justify-content: space-between !important; } .sidebar.collapsed .menu-item-left { gap: 9px !important; justify-content: flex-start !important; } .sidebar.collapsed .sidebar-header { padding: 16px 14px 14px !important; } .sidebar.collapsed .sidebar-brand { justify-content: flex-start !important; } .sidebar.collapsed .user-info { padding: 10px 12px !important; justify-content: flex-start !important; } .sidebar.collapsed .sidebar-menu { padding: 10px 8px !important; } .sidebar.collapsed .sidebar-footer { justify-content: flex-start !important; padding: 10px !important; } .sidebar.collapsed .menu-item::after { display: none !important; } .container { flex-direction: row; } .main-content { padding-bottom: 72px; } .header { padding: 12px 16px; } .db-kpi-row { grid-template-columns: repeat(2, 1fr); } .db-grid { grid-template-columns: 1fr; } .db-actions { grid-template-columns: repeat(2, 1fr); } .content { padding: 16px; } .card { padding: 16px; } .stats { grid-template-columns: 1fr 1fr; } .form { grid-template-columns: 1fr; } .setup-box { padding: 24px 20px; margin: 12px; } .form-grid-2 { grid-template-columns: 1fr; } .plan-cards-grid { grid-template-columns: 1fr; } .setup-industry-grid { grid-template-columns: repeat(2, 1fr); } .kpi-grid { grid-template-columns: 1fr 1fr; } .quick-actions-grid { grid-template-columns: 1fr 1fr; } /* Main grid responsive */ .db-main-grid { grid-template-columns: 1fr; } .db-content-grid { grid-template-columns: 1fr; } .db-kpi-bento { grid-template-columns: 1fr; } .db-kpi-quad { grid-template-columns: 1fr 1fr; } .db-hero { padding: 20px; } .db-hero h1 { font-size: 22px; } /* Analytics widgets responsive */ .db-widget-row .db-grid { grid-template-columns: 1fr !important; } .exec-metrics { grid-template-columns: repeat(2, 1fr); } .db-exec-status { padding: 20px !important; } .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .donut-wrap { flex-direction: column; align-items: center; text-align: center; } .donut-legend { align-items: center; } .trend-chart { height: 70px; } .db-expanded-section .db-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; } table { font-size: 11px; } th, td { padding: 9px 7px; } .wizard-steps { gap: 0; } .step-label { display: none; } .dept-grid { grid-template-columns: 1fr !important; } .report-grid { grid-template-columns: 1fr; } .report-card-header { flex-direction: column; align-items: flex-start; gap: 8px; } .notif-panel { width: 100vw; right: 0; left: 0; position: fixed; top: 52px; max-height: 70vh; border-radius: 0 0 12px 12px; } .header-actions .btn { font-size: 12px; padding: 6px 10px; } .db-expanded-section .db-grid { grid-template-columns: 1fr !important; } } @media (max-width: 360px) { .mobile-nav-item { font-size: 9px; padding: 6px 6px; min-width: 44px; } } /* ===== LEAVE REQUEST DETAIL BADGES ===== */ .lr-detail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--text-secondary); } .lr-detail-meta { color: var(--text-muted); font-size: 11px; } .lr-detail-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.4; } .lr-badge-blue { background: rgba(197,165,90,0.12); color: #C5A55A; } .lr-badge-orange { background: rgba(249,115,22,0.12); color: #B87A3D; } .lr-badge-green { background: rgba(16,185,129,0.12); color: #3D7A5A; } .lr-badge-purple { background: rgba(197,165,90,0.12); color: #C5A55A; } .lr-badge-warn { background: rgba(245,158,11,0.12); color: #C5A55A; } .lr-badge-doc { background: rgba(197,165,90,0.10); color: #C5A55A; cursor: default; } .lr-badge-recurring { background: rgba(197,165,90,0.10); color: #C5A55A; } /* Leave doc upload */ .lr-doc-status { margin-top: 4px; font-size: 12px; color: var(--text-secondary); } .lr-doc-status .doc-name { font-weight: 500; margin-right: 6px; } .lr-doc-status .doc-clear { color: #9B3B3B; cursor: pointer; font-weight: 700; margin-left: 4px; } .lr-doc-status .doc-clear:hover { text-decoration: underline; } /* ===== LEAVE REQUEST TIMELINE ===== */ .leave-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 4px; } .tl-item { display: flex; align-items: flex-start; gap: 12px; position: relative; min-height: 36px; } .tl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; z-index: 1; } .tl-line { position: absolute; left: 4px; top: 14px; bottom: -8px; width: 2px; background: var(--border); } .tl-content { flex: 1; padding-bottom: 12px; } .tl-label { font-size: 12px; font-weight: 600; color: var(--text-primary); } .tl-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* Calendar rich tooltip */ .cal-tooltip { position: fixed; z-index: 1300; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); pointer-events: none; transform: translate(-50%, -100%); font-size: 12px; max-width: 240px; display: none; } /* Notification bell + panel */ .notif-bell { position: relative; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--text-secondary); transition: background .15s, color .15s; } .notif-bell:hover { background: var(--bg-hover); color: var(--text-primary); } .notif-badge { position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 440px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 1000; display: none; } .notif-panel.open { display: block; } .notif-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; } .notif-item { padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; display: flex; gap: 10px; align-items: flex-start; } .notif-item:hover { background: var(--bg-hover); } .notif-item.unread { background: rgba(197,165,90,0.04); } .notif-item:last-child { border-bottom: none; } .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 5px; } .notif-item:not(.unread) .notif-dot { background: transparent; } .notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); } .notif-msg { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .notif-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13px; } /* ===== NEUER ANTRAG DROPDOWN ===== */ .nrm-item { padding: 9px 16px; font-size: 13px; color: var(--text-primary); cursor: pointer; transition: background .12s; } .nrm-item:hover { background: var(--bg-hover); } .nrm-item:first-child { border-radius: 10px 10px 0 0; } .nrm-item:last-child { border-radius: 0 0 10px 10px; } /* ===================================================== MOBILE RESPONSIVE — Comprehensive Mobile Overrides Does NOT change any desktop styles. ===================================================== */ /* ── 768px: Tablet / Small Laptop ──────────────────── */ @media (max-width: 768px) { /* Header compact */ .header-title { font-size: 15px; } .header-subtitle { font-size: 11px; } .header-left { gap: 8px; min-width: 0; } .header-left > div { min-width: 0; overflow: hidden; } .header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Page head mobile */ .page-head { margin-bottom: 16px; padding-bottom: 14px; gap: 10px; flex-wrap: wrap; } .page-head-title { font-size: 17px; } .page-head-icon { width: 36px; height: 36px; border-radius: 10px; } .page-head-actions .btn { font-size: 11px; padding: 5px 10px; } /* Cards compact */ .card { padding: 16px; border-radius: 12px; margin-bottom: 14px; } .card-header { margin-bottom: 14px; padding-bottom: 12px; flex-wrap: wrap; gap: 8px; } .card-title { font-size: 14px; } .card-header .btn { font-size: 11px; padding: 5px 10px; } /* Stat cards */ .stat-card { padding: 14px; } .stat-value { font-size: 22px; } /* Vacation items */ .vacation-item { padding: 12px 14px; flex-wrap: wrap; gap: 8px; } /* Modals fill screen */ .modal-content { width: 95%; max-width: none; padding: 22px; border-radius: 14px; max-height: 90vh; overflow-y: auto; } .modal-header { font-size: 16px; } .modal-footer { flex-wrap: wrap; } .modal-footer .btn { flex: 1; min-width: 100px; justify-content: center; } /* Notification panel full width */ .notif-panel { width: calc(100vw - 32px); right: 16px; max-height: 70vh; left: 16px; position: fixed; top: 52px; } /* Table responsiveness */ .table-container { margin: 0 -16px; padding: 0 16px; } table { font-size: 12px; } th, td { padding: 10px 8px; } /* Filter bars */ .card-header .btn-sm { font-size: 11px; padding: 4px 8px; } .report-filters { padding: 10px 12px; gap: 8px; border-radius: 10px; } .report-filters select, .report-filters input[type="date"] { min-width: 0; flex: 1 1 140px; } .report-grid { grid-template-columns: 1fr; } /* Dept drawer full width on mobile */ .dept-drawer-overlay { padding: 0; } .dept-drawer { max-width: 100%; max-height: 100vh; border-radius: 0; } .dept-drawer-body { padding: 20px 16px; } .dept-drawer-header { padding: 16px 20px; } .dept-drawer-tabs { padding: 8px 16px; } .dept-drawer-tab { padding: 8px 14px; font-size: .8rem; } .dept-drawer-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .dept-drawer-absence-summary { grid-template-columns: 1fr 1fr; gap: 8px; } .dept-quick-menu { right: auto; left: -120px; } /* Employee profile page */ .profile-header { flex-direction: column; text-align: center; } .profile-avatar { margin-bottom: 12px; } /* Shift planner */ .shift-header-bar { gap: 8px; } .shift-header-title { font-size: 15px; } .shift-emp-avatar { width: 26px; height: 26px; } /* Portal hero */ .portal-vacation-badge { padding: 10px 16px; } .portal-vacation-days { font-size: 1.6rem; } /* Calendar grid */ .cal-grid { font-size: 11px; } .cal-cell { min-height: 60px; padding: 4px; } /* Setup wizard */ .setup-box { padding: 28px 22px; margin: 8px; max-height: 95vh; } /* Welcome dashboard greeting */ .db-greeting { padding: 20px; } .db-greeting h1 { font-size: 1.3rem; } /* Action buttons grid */ .db-actions { gap: 8px; } .db-action-btn { padding: 14px 10px; font-size: 11px; } .db-action-btn svg { width: 20px; height: 20px; } /* Sidebar overlay when open */ .sidebar.open + .sidebar-overlay { display: block; } /* Widget sections */ .db-section { padding: 18px; } /* Upgrade modal */ .upgrade-modal { padding: 28px 24px; } /* Form buttons full width */ .form .btn-primary, .form [type="submit"] { width: 100%; justify-content: center; } /* Leave request forms */ .lr-detail-row { flex-direction: column; gap: 4px; } /* Quick request dropdown */ #newRequestMenu { right: -8px; width: calc(100vw - 32px); max-width: 280px; } /* Conversation page */ #conv-form .form { grid-template-columns: 1fr; } /* Credential change overlay */ .cc-wrap { padding: 24px 16px; } .cc-hero { margin-bottom: 24px; } .cc-icon-circle { width: 56px; height: 56px; margin-bottom: 16px; } .cc-icon-circle svg { width: 24px; height: 24px; } .cc-title { font-size: 1.3rem; } .cc-subtitle { font-size: .85rem; } .cc-card { padding: 22px; border-radius: 14px; } /* Onboarding tooltip */ .ob-tooltip { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); } /* Modal box */ .modal-box { padding: 20px; width: 95%; border-radius: 14px; } /* Status screens (suspended, pending, trial) */ #suspendedScreen > div, #pendingApproval > div, #trialExpiredScreen > div { padding: 24px 16px !important; } #trialExpiredScreen h2, #suspendedScreen h2, #pendingApproval h2 { font-size: 1.3rem !important; } } /* ── 640px: Large Phone ────────────────────────────── */ @media (max-width: 640px) { /* Content area */ .content { padding: 14px 12px; } /* Header */ .header { padding: 10px 12px; gap: 8px; } .header-title { font-size: 14px; max-width: 140px; } .header-subtitle { display: none; } .header-actions .btn { font-size: 11px; padding: 5px 8px; } /* KPI / Stats */ .db-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; } .db-kpi-card { padding: 14px 12px; } .db-kpi-card .db-kpi-value { font-size: 1.4rem; } .db-kpi-card .db-kpi-label { font-size: 10px; } /* Cards */ .card { padding: 14px; margin-bottom: 12px; border-radius: 10px; } .card-header { margin-bottom: 12px; padding-bottom: 10px; } /* Forms single column */ .form { grid-template-columns: 1fr; gap: 12px; } .form-grid-2 { grid-template-columns: 1fr; } .shift-modal-grid { grid-template-columns: 1fr; } /* Buttons */ .btn { font-size: 12px; padding: 7px 14px; } .btn-sm { font-size: 11px; padding: 4px 10px; } /* Stat cards compact */ .stats { grid-template-columns: 1fr 1fr; gap: 8px; } .stat-card { padding: 12px; } .stat-value { font-size: 20px; } .stat-label { font-size: 10px; } /* Vacation items stack */ .vacation-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; } .vacation-item > div:last-child { align-self: flex-end; flex-direction: row; align-items: center; } /* Tables smaller */ table { font-size: 11px; } th, td { padding: 8px 6px; } th { font-size: 10px; } /* Modals */ .modal-content { padding: 18px; width: 96%; } /* Portal */ .portal-quick-actions { gap: 8px; } .portal-action-btn { padding: 14px 8px; font-size: 11px; gap: 6px; } .portal-action-icon { font-size: 1.3rem; } .portal-hero { padding: 18px 16px; gap: 16px; margin-bottom: 16px; } .portal-hero-name { font-size: 1.1rem; } .portal-section-title { font-size: 12px; } .portal-shifts-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } /* Shift planner */ .shift-grid-table { min-width: 600px; } .shift-header-bar { flex-direction: column; align-items: stretch; } .shift-header-left { justify-content: center; } .shift-header-right { justify-content: center; } .shift-header-kw { font-size: 11px; } /* Eigene Zeile hervorheben auf Mobile */ .shift-row-me { background: rgba(197,165,90,0.04) !important; border-top: 2px solid rgba(197,165,90,0.2); border-bottom: 2px solid rgba(197,165,90,0.2); } .shift-row-me > .shift-emp-cell { background: rgba(197,165,90,0.08) !important; border-right: 3px solid var(--accent) !important; } /* Scroll-Indikator rechts */ .shift-grid-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .shift-grid-wrap::after { content: ''; position: sticky; right: 0; top: 0; width: 32px; height: 100%; background: linear-gradient(to right, transparent, var(--bg-primary)); pointer-events: none; display: block; float: right; margin-left: -32px; } /* ══ KALENDER MOBILE — Komplett neu ══ */ .calendar { padding: 12px; border-radius: 14px; } .calendar-legend { flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; } .legend-item { font-size: 10px; } .legend-swatch { width: 10px; height: 10px; border-radius: 3px; } .calendar-filters { gap: 4px; margin-bottom: 10px; flex-wrap: wrap; } .cal-view-btn, .cal-filter-btn { font-size: 11px; padding: 5px 10px; } /* KW-Spalte weg → 7 gleiche Spalten */ .calendar-grid { grid-template-columns: repeat(7, 1fr) !important; gap: 2px; } .kw-cell { display: none !important; } /* Tag-Header: kompakt mit 2-Buchstaben-Kürzel */ .day-header { font-size: 11px; padding: 8px 2px; letter-spacing: 0; background: rgba(197,165,90,0.06); border-radius: 8px; font-weight: 800; color: var(--text-secondary); } /* Tages-Zellen: größer + Touch-friendly */ .day { min-height: 76px; padding: 6px 4px; gap: 2px; border-radius: 8px; border-width: 1.5px; } .day.today { border-color: var(--accent) !important; background: rgba(197,165,90,0.08) !important; box-shadow: 0 0 0 1px rgba(197,165,90,0.15); } .date-num { font-size: 15px; font-weight: 900; margin-bottom: 3px; } /* Events als farbige Balken — clean, lesbar */ .event { height: 6px; width: 100%; padding: 0; font-size: 0 !important; border-radius: 3px; margin: 0; line-height: 1; flex-shrink: 0; } .event-more { font-size: 8px; line-height: 1; padding: 1px 0 0; font-style: normal; color: var(--accent); font-weight: 700; } /* Tap auf Tag → Tooltip bleibt lesbar */ .day:active { transform: scale(0.97); transition: transform .1s; } /* Welcome dashboard */ .db-greeting { padding: 16px; border-radius: 12px; } .db-greeting h1 { font-size: 1.15rem; } .db-greeting p { font-size: 12px; } /* Dashboard grid */ .db-grid { gap: 12px; } /* Sidebar mobile footer */ .sidebar-footer { padding: 8px; } .btn-logout { font-size: 11px; padding: 7px; } /* Settings grid */ .settings-grid { grid-template-columns: 1fr; } /* Department grid */ .dept-grid { grid-template-columns: 1fr !important; gap: 10px; } .dept-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dept-filter-bar { flex-direction: column; } .dept-filter-bar select { width: 100%; } .dept-stat-item { padding: 12px 14px; } .dept-stat-num { font-size: 1.2rem; } /* Report grid */ .report-grid { grid-template-columns: 1fr; } /* Conversation page */ #conv-incoming-card .vacation-item, #conv-list .vacation-item { flex-direction: column; align-items: flex-start; } /* User management */ .user-search-bar { flex-direction: column; gap: 8px; } .user-search-bar input, .user-search-bar select { width: 100%; } /* Leave type badges */ .lr-detail-badge { font-size: 10px; padding: 2px 6px; } /* Notification panel */ .notif-panel { width: calc(100vw - 16px); right: 8px; left: 8px; position: fixed; top: 52px; max-height: 70vh; } /* Document page */ .doc-scope-btn { font-size: 12px; padding: 6px 12px; } /* Credential change mobile */ .cc-wrap { padding: 20px 14px; align-items: flex-start; padding-top: max(20px, env(safe-area-inset-top, 20px)); } .cc-hero { margin-bottom: 20px; } .cc-icon-circle { width: 52px; height: 52px; margin-bottom: 14px; } .cc-icon-circle svg { width: 22px; height: 22px; } .cc-title { font-size: 1.2rem; } .cc-subtitle { font-size: .82rem; line-height: 1.5; } .cc-card { padding: 18px; border-radius: 12px; } .cc-pw-grid { grid-template-columns: 1fr; gap: 0; } .cc-pw-grid > div { margin-bottom: 14px; } .cc-input { padding: 11px 14px; font-size: .875rem; border-radius: 8px; } .cc-label { font-size: 11px; margin-bottom: 5px; } .cc-hint { font-size: 10px; } .cc-pw-requirements { font-size: 10px; padding: 7px 10px; } .cc-submit { padding: 12px 16px; font-size: .875rem; border-radius: 8px; } /* Onboarding mobile */ .ob-tooltip { max-width: none; width: calc(100vw - 24px); padding: 18px; border-radius: 14px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); } .ob-tooltip-header { gap: 10px; margin-bottom: 10px; } .ob-step-icon { font-size: 1.5rem; } .ob-step-title { font-size: .95rem; } .ob-step-counter { font-size: 10px; } .ob-step-text { font-size: .8rem; line-height: 1.6; margin-bottom: 14px; } .ob-close-btn { width: 32px; height: 32px; font-size: 1.2rem; } .ob-dots { gap: 4px; } .onboarding-dot { width: 6px; height: 6px; } } /* ── 480px: Medium Phone ───────────────────────────── */ @media (max-width: 480px) { /* Content minimal padding */ .content { padding: 12px 10px; } /* Header minimal */ .header { padding: 8px 10px; } .header-title { font-size: 13px; max-width: 120px; } /* Cards minimal */ .card { padding: 12px; margin-bottom: 10px; } .card-header { gap: 6px; margin-bottom: 10px; padding-bottom: 8px; } .card-title { font-size: 13px; } /* KPI single row of 2 */ .kpi-grid { gap: 8px; } .kpi-card { padding: 14px 12px; border-radius: 10px; } .kpi-icon { width: 30px; height: 30px; border-radius: 6px; } .kpi-icon svg { width: 16px; height: 16px; } .kpi-value { font-size: 1.3rem; } .kpi-label { font-size: 10px; } /* Stats 2 columns */ .stats { grid-template-columns: 1fr 1fr; gap: 6px; } .stat-card { padding: 10px; border-radius: 8px; } .stat-value { font-size: 18px; } /* Dept v2 mobile */ .dept-stats-bar { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .dept-stat-item { padding: 10px 12px; gap: 8px; border-radius: 10px; } .dept-stat-icon { width: 34px; height: 34px; } .dept-stat-icon svg { width: 16px; height: 16px; } .dept-stat-num { font-size: 1.1rem; } .dept-card-v2-body { padding: 14px; gap: 10px; } .dept-card-v2-title { font-size: 1rem; } .dept-mini-stat-val { font-size: 1.1rem; } .dept-avatar { width: 28px; height: 28px; margin-left: -6px; } /* Forms */ input, textarea, select { padding: 9px 12px; font-size: 13px; border-radius: 8px; } label { font-size: 10px; margin-bottom: 4px; } /* ── Schichtplaner: Eigene Zeile prominent, Rest dezent ── */ .shift-row:not(.shift-row-me) { opacity: .5; } .shift-row:not(.shift-row-me):hover { opacity: 1; } .shift-row-me { opacity: 1 !important; } .shift-row-me .shift-block { padding: 8px 10px !important; font-size: 12px !important; border-width: 2px !important; } .shift-row-me .shift-block-time { font-size: 13px !important; font-weight: 900 !important; } .shift-row-me > .shift-emp-cell .shift-emp-name { font-size: 12px !important; font-weight: 900 !important; } /* Buttons */ .btn { padding: 7px 12px; font-size: 12px; border-radius: 7px; } .btn-sm { padding: 4px 8px; font-size: 11px; } /* Vacation items compact */ .vacation-item { padding: 10px; border-radius: 8px; } .vacation-info strong { font-size: 13px; } .vacation-dates { font-size: 11px; } /* Modal full-width */ .modal-content { width: 98%; padding: 16px; border-radius: 12px; } .modal-header { font-size: 15px; margin-bottom: 10px; } .modal-footer { gap: 6px; } /* Setup wizard compact */ .setup-box { padding: 24px 20px; border-radius: 18px; max-width: 96%; } .wizard-steps { margin-bottom: 24px; } .step-dot { width: 28px; height: 28px; font-size: 11px; } .wizard-setup-pct { font-size: 3rem; } .wls-title { font-size: 1rem; } .celebration-title { font-size: 1.8rem; } .celebration-cta-btn { padding: 14px 36px; font-size: 1rem; } /* Portal compact */ .portal-hero-avatar { width: 48px; height: 48px; font-size: 1.2rem; } .portal-hero-name { font-size: 1rem; } .portal-hero-role { font-size: 12px; } .portal-vacation-days { font-size: 1.4rem; } .portal-vacation-badge { padding: 8px 14px; } .portal-quick-actions { grid-template-columns: 1fr 1fr; gap: 6px; } .portal-action-btn { padding: 12px 8px; font-size: 10px; border-radius: 10px; } .portal-action-icon { font-size: 1.2rem; } /* ══ SCHICHTPLANER MOBILE — Komplett neu ══ */ .shift-grid-table { min-width: 0; width: max-content; } /* ── Header: kompakt, zentriert ── */ .shift-header-bar { gap: 8px; padding: 12px; background: var(--bg-elevated); border-radius: 14px; margin-bottom: 12px; border: 1px solid var(--border); } .shift-header-title { font-size: 15px; font-weight: 800; } .shift-header-kw { font-size: 11px; padding: 3px 10px; border-radius: 8px; background: rgba(197,165,90,0.08); color: var(--accent); } .shift-header-left { gap: 8px; } /* Touch-friendly nav buttons: min 44px for accessibility */ .shift-nav-btn { padding: 12px 16px; font-size: 14px; min-height: 44px; min-width: 44px; border-radius: 10px; font-weight: 700; } .shift-nav-btn.shift-nav-today { padding: 12px 20px; font-size: 14px; font-weight: 800; background: rgba(197,165,90,0.1); color: var(--accent); } .shift-dropdown-toggle { font-size: 12px; padding: 10px 14px; border-radius: 10px; min-height: 44px; } .shift-dropdown-menu { min-width: 200px; border-radius: 12px; } .shift-copy-btn { font-size: 12px; padding: 10px 14px; border-radius: 10px; min-height: 44px; } /* ── Mitarbeiterspalte: sticky + compact with initials + truncated name ── */ .shift-th-emp { width: 100px !important; min-width: 100px !important; max-width: 100px !important; padding: 8px 6px; } .shift-emp-cell { width: 100px !important; min-width: 100px !important; max-width: 100px !important; padding: 8px 6px; border-right: 2px solid var(--border); position: sticky; left: 0; z-index: 2; background: var(--bg-elevated); box-shadow: 4px 0 8px rgba(0,0,0,0.08); } .shift-th-emp { position: sticky; left: 0; z-index: 3; background: var(--bg-base); box-shadow: 4px 0 8px rgba(0,0,0,0.08); } .shift-emp-avatar { width: 28px; height: 28px; font-size: .55rem !important; flex-shrink: 0; border-radius: 8px; } .shift-emp-text { overflow: hidden; max-width: 60px; } .shift-emp-name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; font-weight: 800; } .shift-emp-role { display: none; } .shift-emp-info { gap: 5px; } /* ── Tagesspalten: min 90px for shift block readability ── */ .shift-cell { padding: 5px 4px; min-width: 90px; min-height: 58px; } .shift-th-day { min-width: 90px; padding: 8px 4px; } .shift-th-dayname { font-size: 13px; font-weight: 800; } .shift-th-date { font-size: 11px; color: var(--text-muted); } /* ── Heute hervorheben — prominent auf Mobile ── */ .shift-today-col { background: rgba(197,165,90,0.12) !important; } .shift-today-col-cell { background: rgba(197,165,90,0.07) !important; box-shadow: inset 0 0 0 1.5px rgba(197,165,90,0.2) !important; border-radius: 6px; } /* ── Schicht-Blöcke: klar lesbar mit Farb-Akzent ── */ .shift-block { padding: 7px 9px; font-size: 11.5px; border-radius: 8px; gap: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left-width: 3.5px; } .shift-block-time { font-size: 12px; font-weight: 900; letter-spacing: -0.01em; } .shift-block-note { font-size: 10px; opacity: .7; } .shift-block-icon { font-size: 12px; } .shift-block-del { display: none; } /* ── Abwesenheits-Badges ── */ .shift-absence-badge { font-size: 10px; padding: 3px 8px; border-radius: 6px; } /* ── Stunden-Spalte ── */ .shift-hours-cell { font-size: 13px; padding: 8px 6px; min-width: 40px; font-weight: 800; } .shift-th-hours { min-width: 40px; font-size: 11px; } /* ── Scroll container: momentum scrolling ── */ .shift-grid-wrap { border-radius: 14px; border: 1px solid var(--border); overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .shift-grid-wrap::after { content: ''; position: sticky; right: 0; top: 0; width: 40px; height: 100%; background: linear-gradient(to right, transparent, var(--bg-primary)); pointer-events: none; display: block; float: right; margin-left: -40px; } /* ── Calendar sync ── */ .shift-cal-sync { padding: 16px; margin-top: 14px; border-radius: 14px; } .shift-cal-sync-header { font-size: 14px; gap: 8px; margin-bottom: 12px; } .shift-cal-sync-buttons { flex-direction: column; gap: 10px; } .shift-cal-btn { width: 100%; justify-content: center; padding: 14px 16px; font-size: 14px; border-radius: 12px; } .shift-cal-sync-hint { font-size: 11px; } /* ── Heute-Karte (Meine Schicht) ── */ .shift-today-card { padding: 14px 16px; gap: 12px; margin-bottom: 14px; border-radius: 14px; border: 1px solid rgba(197,165,90,0.15); background: rgba(197,165,90,0.04); } .shift-tc-icon { font-size: 20px; } .shift-tc-time { font-size: 16px; font-weight: 900; } .shift-tc-text { font-size: 13px; } /* ── Shift detail modal ── */ .shift-detail-cal-btns { flex-direction: column; gap: 8px; } .shift-detail-cal-btns .shift-cal-btn { font-size: 14px; padding: 12px 14px; border-radius: 12px; } /* Timeline */ .timeline-item { padding: 10px 12px; border-radius: 10px; gap: 10px; } .timeline-type { font-size: 11px; } .timeline-dates { font-size: 11px; } /* Tabs / filter */ .tab-bar { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-btn { font-size: 11px; padding: 6px 10px; white-space: nowrap; } /* Login box */ .login-box { padding: 28px 20px; border-radius: 14px; margin: 12px; } .login-header { margin-bottom: 24px; } .login-header h1 { font-size: 18px; } /* Sidebar */ .sidebar { width: 260px; } .sidebar-header { padding: 12px 10px; } .sidebar-brand-name { font-size: 14px; } .menu-item { font-size: 12px; padding: 7px 10px; } .menu-section-title { font-size: 9px; } /* Bottom nav safe area */ .mobile-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); } .main-content { padding-bottom: max(64px, calc(56px + env(safe-area-inset-bottom))); } /* Upgrade modal */ .upgrade-modal { padding: 24px 20px; } .upgrade-modal h2 { font-size: 1.1rem; } /* Conversation items */ .vacation-item .btn-sm { font-size: 10px; padding: 3px 7px; } /* Tooltip hide on touch */ .cal-tooltip { display: none !important; } /* Notification items compact */ .notif-item { padding: 8px 12px; gap: 8px; } .notif-title { font-size: 12px; } .notif-msg { font-size: 11px; } /* Credential change compact */ .cc-wrap { padding: 16px 12px; } .cc-hero { margin-bottom: 16px; } .cc-icon-circle { width: 48px; height: 48px; margin-bottom: 12px; } .cc-icon-circle svg { width: 20px; height: 20px; } .cc-title { font-size: 1.1rem; } .cc-subtitle { font-size: .78rem; } .cc-card { padding: 16px; } .cc-input { padding: 10px 12px; font-size: .8125rem; } .cc-pw-requirements { font-size: 9px; } .cc-submit { padding: 11px 14px; font-size: .8125rem; } /* Onboarding compact */ .ob-tooltip { width: calc(100vw - 16px); padding: 14px; border-radius: 12px; bottom: max(72px, calc(60px + env(safe-area-inset-bottom))) !important; } .ob-tooltip-header { gap: 8px; margin-bottom: 8px; } .ob-step-icon { font-size: 1.3rem; } .ob-step-title { font-size: .85rem; } .ob-step-text { font-size: .75rem; line-height: 1.55; margin-bottom: 12px; } .ob-dots { gap: 3px; max-width: 55%; } .onboarding-dot { width: 5px; height: 5px; } /* Modal box compact */ .modal-box { padding: 16px; width: 96%; border-radius: 12px; } /* ── Schichtplaner Hochformat: Kompakt-Modus ── */ .shift-grid-table { min-width: 0 !important; width: max-content; } .shift-cell { min-width: 90px !important; min-height: 50px; padding: 4px 3px; } .shift-th-day { min-width: 90px !important; } .shift-block { padding: 5px 7px !important; font-size: 10.5px !important; border-radius: 7px; border-left-width: 3px !important; } .shift-block-time { font-size: 11px !important; font-weight: 900 !important; } .shift-block-note { display: none; } .shift-hours-cell { min-width: 36px !important; font-size: 11px !important; } .shift-th-hours { min-width: 36px !important; } /* Scroll-Tipp */ .shift-grid-wrap::before { content: 'Wische →'; display: block; text-align: center; font-size: 10px; color: var(--text-muted); padding: 6px; opacity: .6; } /* Status screens compact */ #suspendedScreen > div, #pendingApproval > div, #trialExpiredScreen > div { padding: 20px 14px !important; } #trialExpiredScreen h2, #suspendedScreen h2, #pendingApproval h2 { font-size: 1.15rem !important; } #trialExpiredScreen p, #suspendedScreen p, #pendingApproval p { font-size: .8rem !important; } #trialExpiredScreen .btn, #suspendedScreen a, #pendingApproval button, #pendingApproval a { font-size: .8rem !important; padding: 9px 18px !important; } } /* ── 400px: Small Phone ────────────────────────────── */ @media (max-width: 400px) { /* ══ SCHICHTPLANER 400px: Avatar + initials only ══ */ .shift-th-emp { width: 52px !important; min-width: 52px !important; max-width: 52px !important; } .shift-emp-cell { width: 52px !important; min-width: 52px !important; max-width: 52px !important; padding: 6px 4px; border-right: 2px solid var(--border); } .shift-emp-text { display: none !important; } .shift-emp-info { justify-content: center; } .shift-emp-avatar { width: 34px; height: 34px; font-size: .7rem !important; border-radius: 8px; } /* Day columns stay at min 90px so shift times remain readable */ .shift-cell { min-width: 90px !important; min-height: 52px; } .shift-th-day { min-width: 90px !important; } .shift-block { padding: 5px 7px; font-size: 11px; border-left-width: 3px !important; } .shift-block-time { font-size: 11px; font-weight: 900; } /* Hide shift type label on very small screens, keep time visible */ .shift-block-note { display: none !important; } /* Header kompakt but touch-friendly */ .shift-header-bar { padding: 10px; } .shift-header-title { font-size: 13px; } .shift-nav-btn { padding: 10px 12px; font-size: 13px; min-height: 44px; min-width: 44px; } /* ══ KALENDER 400px ══ */ .calendar { padding: 8px; border-radius: 12px; } .day { min-height: 66px; padding: 4px 3px; border-radius: 6px; } .date-num { font-size: 14px; font-weight: 900; } .day-header { font-size: 10px; padding: 6px 1px; border-radius: 6px; } .event { height: 5px; border-radius: 2px; } .calendar-legend { display: none; } .calendar-filters { gap: 3px; } .cal-view-btn, .cal-filter-btn { font-size: 10px; padding: 4px 8px; } .content { padding: 10px 8px; } .header { padding: 8px; } .header-title { max-width: 100px; font-size: 12px; } .card { padding: 10px; border-radius: 8px; } .card-title { font-size: 12px; } .db-kpi-row { gap: 6px; } .db-kpi-card { padding: 10px 8px; border-radius: 8px; } .db-kpi-card .db-kpi-value { font-size: 1.2rem; } .stats { gap: 4px; } .stat-card { padding: 8px; } .stat-value { font-size: 16px; } .btn { padding: 6px 10px; font-size: 11px; } .vacation-item { padding: 8px; } .vacation-info strong { font-size: 12px; } .modal-content { padding: 14px; } .portal-hero { padding: 14px 12px; } .portal-hero-avatar { width: 40px; height: 40px; font-size: 1rem; } .portal-hero-name { font-size: 0.95rem; } .portal-quick-actions { gap: 4px; } .portal-action-btn { padding: 10px 6px; font-size: 9px; } .setup-box { padding: 16px 12px; } .login-box { padding: 24px 16px; } .sidebar { width: 240px; } /* Credential change very compact */ .cc-wrap { padding: 14px 10px; } .cc-card { padding: 14px; border-radius: 10px; } .cc-title { font-size: 1rem; } .cc-subtitle { font-size: .75rem; } } /* ── 360px: Very Small Phone ───────────────────────── */ @media (max-width: 360px) { .content { padding: 8px 6px; } .card { padding: 8px; } .db-kpi-row { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .portal-quick-actions { grid-template-columns: 1fr; } .setup-box { padding: 14px 10px; } .login-box { padding: 20px 14px; } .modal-content { padding: 12px; } /* Smallest phones: avatar-only employee column */ .shift-th-emp { width: 46px !important; min-width: 46px !important; max-width: 46px !important; } .shift-emp-cell { width: 46px !important; min-width: 46px !important; max-width: 46px !important; padding: 5px 3px; } .shift-emp-text { display: none !important; } .shift-emp-info { justify-content: center; } .shift-emp-avatar { width: 30px; height: 30px; font-size: .6rem !important; } .shift-emp-role { display: none; } } /* ── Touch-Friendly Enhancements (any mobile) ─────── */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets */ .menu-item { min-height: 40px; } .btn { min-height: 36px; } .btn-sm { min-height: 30px; } .notif-bell { min-width: 40px; min-height: 40px; } .mobile-nav-item { min-height: 44px; } /* Remove hover effects that don't work on touch */ .kpi-card:hover { transform: none; box-shadow: none; } .stat-card:hover { transform: none; box-shadow: none; } .portal-action-btn:hover { transform: none; box-shadow: none; } .shift-block:hover { transform: none; } .timeline-item:hover { transform: none; } .vacation-item:hover { border-color: var(--border); } /* Smooth scrolling for all scroll areas */ .shift-grid-wrap, .table-container, .sidebar-menu, .notif-panel, .modal-content { -webkit-overflow-scrolling: touch; } } /* ── Landscape Phone ──────────────────────────────── */ @media (max-height: 500px) and (orientation: landscape) { .setup-box { max-height: 98vh; padding: 16px 24px; } .modal-content { max-height: 95vh; } .login-page { align-items: flex-start; padding-top: 10px; } .login-box { max-height: 95vh; overflow-y: auto; } .mobile-bottom-nav { padding: 4px 0; } .mobile-nav-item { padding: 4px 8px; } .mobile-nav-item svg { width: 18px; height: 18px; } /* Credential change landscape */ .cc-wrap { padding: 12px 16px; align-items: flex-start; } .cc-hero { margin-bottom: 12px; } .cc-icon-circle { width: 40px; height: 40px; margin-bottom: 8px; } .cc-icon-circle svg { width: 18px; height: 18px; } .cc-title { font-size: 1rem; margin-bottom: 4px; } .cc-subtitle { font-size: .78rem; } .cc-card { padding: 16px; } .cc-field { margin-bottom: 10px; } .cc-pw-grid { grid-template-columns: 1fr 1fr; } .cc-input { padding: 8px 12px; } /* Onboarding landscape */ .ob-tooltip { max-height: calc(100vh - 20px); padding: 14px 18px; bottom: 10px !important; } .ob-step-text { font-size: .78rem; line-height: 1.5; margin-bottom: 10px; } .ob-tooltip-header { margin-bottom: 8px; } } /* ── Portrait Phone: Schichtplaner Tagesansicht-Feeling ──── */ @media (max-width: 480px) and (orientation: portrait) { /* Heute-Karte: Premium-Look */ .shift-today-card { padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(197,165,90,0.08), rgba(197,165,90,0.02)); border: 1.5px solid rgba(197,165,90,0.2); box-shadow: 0 4px 20px rgba(197,165,90,0.08); margin-bottom: 16px; } .shift-tc-time { font-size: 20px !important; font-weight: 900; letter-spacing: -0.02em; } .shift-tc-icon { font-size: 24px; } .shift-tc-text { font-size: 14px; } .shift-tc-next { font-size: 12px; color: var(--text-muted); } /* Eigene Zeile: noch prominenter */ .shift-row-me { background: rgba(197,165,90,0.04) !important; border-top: 2px solid rgba(197,165,90,0.25) !important; border-bottom: 2px solid rgba(197,165,90,0.25) !important; } .shift-row-me .shift-block { padding: 8px 10px !important; font-size: 12px !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } .shift-row-me .shift-block-time { font-size: 14px !important; font-weight: 900 !important; } /* Kalender: Touch-optimierte Zellen */ .day { min-height: 62px; border-radius: 10px; padding: 5px 3px; } .day.today { box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(197,165,90,0.15); } .date-num { font-size: 15px; font-weight: 900; } .event { height: 5px; border-radius: 3px; margin-bottom: 1px; } } /* ── iPad / Tablet: show full Mon-Fri without scroll ──── */ @media (min-width: 769px) and (max-width: 1024px) { .shift-grid-table { min-width: 100%; width: 100%; } .shift-th-emp { min-width: 140px; } .shift-emp-cell { min-width: 140px; } .shift-th-day { min-width: 0; } .shift-cell { min-width: 0; } /* Ensure the grid fits by letting columns share space equally */ .shift-grid-table th.shift-th-day, .shift-grid-table td.shift-cell { width: auto; } /* Touch-friendly nav on tablet too */ .shift-nav-btn { min-height: 40px; padding: 8px 14px; } .shift-nav-btn.shift-nav-today { padding: 8px 18px; font-weight: 800; } } /* ── Swap request banners: stack on mobile ──────────── */ @media (max-width: 640px) { .shift-swap-banners { flex-direction: column !important; gap: 6px !important; } .shift-swap-banners > div { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 12px !important; } .shift-swap-banners > div > div:last-child { display: flex; gap: 8px; justify-content: flex-end; } } /* ── Safe area padding for notched phones ──────────── */ @supports (padding-top: env(safe-area-inset-top)) { @media (max-width: 768px) { .header { padding-top: max(10px, env(safe-area-inset-top)); } .mobile-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); } .sidebar { padding-top: env(safe-area-inset-top); } } } /* ===================================================== ENHANCED MOBILE RESPONSIVENESS - April 2026 Comprehensive fixes for iPhone SE/14, iPad, iPad Pro. ONLY inside @media queries - desktop untouched. ===================================================== */ /* ===================================================== 1024px - iPad / iPad Pro / Small Laptop ===================================================== */ @media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } .db-kpi-row { grid-template-columns: repeat(4, 1fr); } .prof-grid { grid-template-columns: 1fr 1fr; } .exec-metrics { grid-template-columns: repeat(4, 1fr); } .dept-grid { grid-template-columns: repeat(2, 1fr) !important; } .portal-quick-actions { grid-template-columns: repeat(4, 1fr); } .content { padding: 20px 22px; } .shift-grid-wrap { -webkit-overflow-scrolling: touch; } .settings-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .db-actions { grid-template-columns: repeat(3, 1fr); } .shift-swap-banner { flex-wrap: wrap; gap: 10px; } .ann-banner { flex-wrap: wrap; } .req-info-bar { flex-wrap: wrap; gap: 12px; } } /* ===================================================== 768px - Small Tablet / Large Phone - ADDITIONS ===================================================== */ @media (max-width: 768px) { .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; } .db-kpi-bento { grid-template-columns: 1fr; } .db-kpi-quad { grid-template-columns: 1fr 1fr; } .db-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .prof-grid { grid-template-columns: 1fr; } .exec-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; } .db-exec-status { padding: 20px !important; } .settings-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; } .settings-tab { flex-shrink: 0; } .tab-bar, .seg-group, .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .tab-btn, .filter-btn, .seg-btn { flex-shrink: 0; } .form { grid-template-columns: 1fr; } .form-grid-2 { grid-template-columns: 1fr; } .shift-modal-grid { grid-template-columns: 1fr; } .portal-quick-actions { grid-template-columns: 1fr 1fr; } .dept-card-v2-stats { grid-template-columns: repeat(2, 1fr); } .shift-header-bar { flex-direction: column; gap: 10px; } .shift-header-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .shift-nav-btn { padding: 10px 14px; min-height: 44px; font-size: 13px; } .shift-swap-banner, .ann-banner { flex-direction: column; gap: 10px; } .upload-zone { padding: 28px 20px; } .theme-picker { grid-template-columns: 1fr 1fr; gap: 10px; } #toast-container { right: 12px; left: 12px; } .toast { max-width: none; min-width: 0; width: 100%; } .dept-stats-bar { grid-template-columns: repeat(2, 1fr); } .dept-filter-bar { flex-direction: column; gap: 8px; } .dept-filter-bar select { width: 100%; min-width: 0; } .security-item { flex-direction: column; gap: 12px; align-items: flex-start; } .reminder-toggle-item { gap: 12px; } .req-info-bar { flex-direction: column; gap: 10px; } .quick-actions-grid { grid-template-columns: 1fr 1fr; } .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .donut-wrap { flex-direction: column; align-items: center; text-align: center; } .donut-legend { align-items: center; } } /* ===================================================== 480px - Phone - ADDITIONS ===================================================== */ @media (max-width: 480px) { .menu-item { font-size: 13px; } .btn { font-size: 13px; } .uc-name { font-size: 13px; } .approval-card-name { font-size: 13px; } .widget-title { font-size: 13px; } .db-section-title { font-size: 13px; } table { font-size: 13px; } td { font-size: 13px; } .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0 10px; scrollbar-width: none; } .table-container::-webkit-scrollbar { display: none; } .approval-card { flex-direction: column; gap: 10px; padding: 12px; } .approval-card-right { flex-direction: row; width: 100%; justify-content: flex-end; } .approval-card-meta { gap: 6px; } .acm-comment { display: none; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .db-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; } .db-kpi-val { font-size: 24px; } .db-kpi-lbl { font-size: 10px; } .db-actions { grid-template-columns: repeat(2, 1fr); gap: 6px; } .db-action-btn { padding: 12px 8px; } .db-action-btn span { font-size: 10px; } .portal-quick-actions { grid-template-columns: 1fr 1fr; gap: 6px; } .portal-hero { flex-direction: column; text-align: center; padding: 16px; gap: 12px; } .db-section { padding: 14px; border-radius: 12px; } .widget { padding: 14px; border-radius: 12px; } .widget-header { margin-bottom: 10px; } .dept-card-v2-stats { grid-template-columns: repeat(2, 1fr); } .exec-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; } .exec-metric { padding: 10px 6px; } .exec-metric-val { font-size: 18px; } .tab-bar, .seg-group, .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } .tab-bar::-webkit-scrollbar, .seg-group::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; } .settings-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; } .cal-cell { min-height: 56px; padding: 3px; } .cal-grid { font-size: 11px; } .ann-banner { padding: 12px 14px; gap: 8px; flex-direction: column; } .ann-banner-title { font-size: 13px; } .ann-banner-msg { font-size: 13px; } .posteingang-item { padding: 14px; } .posteingang-title { font-size: 14px; } .posteingang-body { font-size: 13px; } .posteingang-header { flex-direction: column; align-items: flex-start; gap: 6px; } .uc { padding: 8px 10px; gap: 8px; } .uc-info { flex-wrap: wrap; gap: 4px; } .uc-row-meta { flex-wrap: wrap; gap: 4px; } .uc-actions { opacity: 1; } .theme-picker { grid-template-columns: 1fr; gap: 8px; } .theme-swatch { height: 60px; } .shift-nav-btn { min-height: 44px; min-width: 44px; } .shift-dropdown-toggle { min-height: 44px; } .shift-copy-btn { min-height: 44px; } .setup-industry-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .setup-industry-card { padding: 14px 10px; } .plan-cards-grid { grid-template-columns: 1fr; gap: 16px; } .plan-card-inner { padding: 24px 20px; } .welcome-card { padding: 20px; } .welcome-card h1 { font-size: 18px; } .welcome-card p { font-size: 13px; } .page-head { padding: 14px 16px; border-radius: 14px; flex-direction: column; gap: 12px; } .page-head-actions { width: 100%; } .page-head-actions .btn { flex: 1; justify-content: center; } .db-highlights { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; } .db-highlights::-webkit-scrollbar { display: none; } .db-highlight { flex-shrink: 0; } .db-hero-highlights { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } .db-hero-highlights::-webkit-scrollbar { display: none; } .bulk-action-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; } .sparkline-summary .big-num { font-size: 22px; } .trend-chart { height: 60px; gap: 8px; } .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .heatmap-wrap::-webkit-scrollbar { display: none; } .heatmap-legend { flex-wrap: wrap; gap: 8px; } .birthday-item { padding: 6px 8px; gap: 8px; } .birthday-emoji { font-size: 16px; } .birthday-name { font-size: 13px; } .login-box { width: calc(100% - 24px); max-width: 100%; margin: 0 12px; } .shift-template-chips { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; } .shift-template-chips::-webkit-scrollbar { display: none; } .shift-tpl-chip { flex-shrink: 0; } .leave-timeline { padding-left: 2px; } .tl-item { gap: 8px; } .upgrade-modal { width: 95%; padding: 24px 20px; } #toast-container { top: 12px; right: 8px; left: 8px; } .toast { max-width: none; min-width: 0; } .mdp-popup { width: calc(100vw - 40px); max-width: 300px; } } /* ===================================================== Touch targets - ALL mobile devices (coarse pointer) Ensures minimum 44px touch target per Apple HIG ===================================================== */ @media (hover: none) and (pointer: coarse) { .btn { min-height: 44px; } .btn-sm { min-height: 38px; padding: 6px 12px; } .menu-item { min-height: 44px; } .mobile-nav-item { min-height: 48px; min-width: 48px; } .notif-bell { min-width: 44px; min-height: 44px; } .shift-nav-btn { min-height: 44px; min-width: 44px; } .shift-dropdown-toggle { min-height: 44px; } .tab-btn, .filter-btn, .seg-btn { min-height: 40px; padding: 8px 16px; } .settings-tab { min-height: 44px; } .ac-btn { min-height: 38px; padding: 6px 12px; } .btn-inline-approve, .btn-inline-reject { width: 36px; height: 36px; } .quick-action-btn { min-height: 48px; } .db-action-btn { min-height: 48px; } .user-filter-chip { min-height: 36px; } .cal-view-btn, .cal-filter-btn { min-height: 36px; } .toggle-switch { min-width: 44px; } .ac-checkbox { min-width: 36px; min-height: 36px; } .portal-action-btn { min-height: 48px; } .dept-action-btn { min-height: 36px; padding: 6px 10px; } .shift-block { min-height: 40px; } .day { min-height: 56px; } .wizard-chip { min-height: 38px; } .shift-dropdown-item { min-height: 44px; padding: 10px 14px; } .nrm-item { min-height: 44px; padding: 10px 16px; } .uc-actions { opacity: 1; } .uc-act-btn { min-height: 36px; min-width: 36px; } .shift-block:active .shift-block-del { opacity: 1; } .card:hover { transform: none; } .widget:hover { transform: none; } .db-section:hover { transform: none; } .dept-card-v2:hover { transform: none; } .db-kpi-card:hover { transform: none; } .db-action-btn:hover { transform: none; } .db-highlight:hover { transform: none; } .insight-card:hover { transform: none; } .approval-card:hover { transform: none; } .birthday-item:hover { background: transparent; } .posteingang-item:hover { box-shadow: none; } } /* ══════════════════════════════════════════════════════ MOBILE SHIFT VIEW — Card-based daily view Hidden on desktop, shown on phones (max-width: 768px) ══════════════════════════════════════════════════════ */ .shift-mobile-view { display: none; } @media (max-width: 768px) { /* Hide the desktop table, show mobile card view */ .shift-grid-table { display: none !important; } .shift-mobile-view { display: block; } /* ── Day tab bar (horizontal scrollable pills) ── */ .shift-mobile-days { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; margin-bottom: 4px; } .shift-mobile-days::-webkit-scrollbar { display: none; } .shift-mobile-day-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 52px; height: 60px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--card-bg, var(--bg-secondary)); cursor: pointer; flex-shrink: 0; position: relative; transition: all 0.2s ease; } .shift-mobile-day-btn:active { transform: scale(0.95); } .shift-mobile-day-name { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .shift-mobile-day-num { font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1.1; } /* Active day pill */ .shift-mobile-day-btn.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 14px rgba(197,165,90,0.35); } .shift-mobile-day-btn.active .shift-mobile-day-name { color: rgba(255,255,255,0.85); } .shift-mobile-day-btn.active .shift-mobile-day-num { color: #FFFFFF; } /* Today dot indicator */ .shift-mobile-today-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); } .shift-mobile-day-btn.active .shift-mobile-today-dot { background: #FFFFFF; } /* ── Date label under tabs ── */ .shift-mobile-date-label { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 4px 4px 12px; text-transform: capitalize; } /* ── Card list ── */ .shift-mobile-cards { display: flex; flex-direction: column; gap: 10px; } /* ── Individual card ── */ .shift-mobile-card { background: var(--card-bg, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .shift-mobile-card:active { transform: scale(0.985); } /* Own card highlight */ .shift-mobile-card-me { border-left: 4px solid var(--accent); background: linear-gradient(135deg, rgba(197,165,90,0.06), transparent); box-shadow: 0 2px 12px rgba(197,165,90,0.08); } /* ── Card header: avatar + name ── */ .shift-mobile-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .shift-mobile-avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-subtle, rgba(197,165,90,0.12)); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; object-fit: cover; } img.shift-mobile-avatar { background: none; } .shift-mobile-card-info { flex: 1; min-width: 0; } .shift-mobile-card-name { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shift-mobile-you-badge { display: inline-block; font-size: 10px; font-weight: 800; color: var(--accent); background: var(--accent-subtle, rgba(197,165,90,0.12)); padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.03em; } .shift-mobile-card-role { font-size: 12px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Shift block inside card ── */ .shift-mobile-shift { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(197,165,90,0.06); border: 1px solid rgba(197,165,90,0.1); cursor: pointer; margin-bottom: 6px; transition: background 0.15s ease; position: relative; } .shift-mobile-shift:last-child { margin-bottom: 0; } .shift-mobile-shift:active { background: rgba(197,165,90,0.12); } .shift-mobile-shift-time { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; flex-shrink: 0; } .shift-mobile-shift-type { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 8px; background: rgba(197,165,90,0.1); color: var(--accent); white-space: nowrap; } .shift-mobile-shift-recurring { font-size: 11px; color: var(--text-muted); font-style: italic; } .shift-mobile-shift-hours { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: auto; flex-shrink: 0; } /* Virtual (recurring) shift styling */ .shift-mobile-shift-virtual { opacity: 0.7; border-style: dashed; } /* ── Shift type colors ── */ /* Frühdienst: warm orange */ .shift-mobile-shift.shift-type-frueh { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); } .shift-mobile-shift.shift-type-frueh .shift-mobile-shift-type { background: rgba(245,158,11,0.12); color: #C5A55A; } .shift-mobile-shift.shift-type-frueh .shift-mobile-shift-time { color: #C5A55A; } /* Spätdienst: purple */ .shift-mobile-shift.shift-type-spaet { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.2); } .shift-mobile-shift.shift-type-spaet .shift-mobile-shift-type { background: rgba(139,92,246,0.12); color: #8b5cf6; } .shift-mobile-shift.shift-type-spaet .shift-mobile-shift-time { color: #8b5cf6; } /* Nachtdienst: dark blue */ .shift-mobile-shift.shift-type-nacht { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); } .shift-mobile-shift.shift-type-nacht .shift-mobile-shift-type { background: rgba(59,130,246,0.12); color: #3b82f6; } .shift-mobile-shift.shift-type-nacht .shift-mobile-shift-time { color: #3b82f6; } /* Tagdienst: teal */ .shift-mobile-shift.shift-type-tag { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); } .shift-mobile-shift.shift-type-tag .shift-mobile-shift-type { background: rgba(16,185,129,0.12); color: #3D7A5A; } .shift-mobile-shift.shift-type-tag .shift-mobile-shift-time { color: #3D7A5A; } /* ── Absence badge (full-width colored) ── */ .shift-mobile-absence { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; } .shift-mobile-abs-vacation { background: rgba(16,185,129,0.1); color: #3D7A5A; border: 1px solid rgba(16,185,129,0.2); } .shift-mobile-abs-sick { background: rgba(155,59,59,0.1); color: #9B3B3B; border: 1px solid rgba(155,59,59,0.2); } .shift-mobile-abs-homeoffice { background: rgba(197,165,90,0.1); color: #C5A55A; border: 1px solid rgba(197,165,90,0.2); } .shift-mobile-abs-elternzeit { background: rgba(168,85,247,0.1); color: #a855f7; border: 1px solid rgba(168,85,247,0.2); } /* ── Empty state ── */ .shift-mobile-empty { font-size: 13px; color: var(--text-muted); padding: 4px 0; font-style: italic; } .shift-mobile-empty-state { text-align: center; padding: 40px 20px; font-size: 14px; color: var(--text-muted); } /* ── Add shift button on empty card ── */ .shift-mobile-add-btn { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1.5px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s ease; } .shift-mobile-add-btn:active { background: rgba(197,165,90,0.06); border-color: var(--accent); color: var(--accent); } /* ── Swap banners inside mobile view ── */ .shift-mobile-view .shift-swap-banners { margin-bottom: 12px; } } /* ── Light mode adjustments for mobile shift view ── */ @media (max-width: 768px) { body.light-mode .shift-mobile-card, body.theme-light .shift-mobile-card { background: #FFFFFF; border-color: #e5e7eb; } body.light-mode .shift-mobile-day-btn, body.theme-light .shift-mobile-day-btn { background: #FFFFFF; border-color: #e5e7eb; } body.light-mode .shift-mobile-shift, body.theme-light .shift-mobile-shift { border-color: rgba(0,0,0,0.06); } } /* ===================================================================== */ /* ===== TRÄGER DASHBOARD TOUR (Card-Design aus src First Login) ====== */ /* ===================================================================== */ #trgTourRoot { display: none; } #trgTourRoot.active { display: block; } .trg-tour-backdrop { /* Transparent click-blocker only. The actual darkening happens via the spotlight's box-shadow below, which creates a "cutout" effect showing the real dashboard clearly inside the highlighted area while dimming everything outside. */ position: fixed; inset: 0; z-index: 10000; background: transparent; animation: trgTourFadeIn .3s ease-out; } @keyframes trgTourFadeIn { from { opacity: 0; } to { opacity: 1; } } .trg-tour-spotlight { position: fixed; z-index: 10001; pointer-events: none; border-radius: 16px; border: 2px solid rgba(122, 179, 240, 0.6); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 60px rgba(122, 179, 240, 0.35), inset 0 0 20px rgba(122, 179, 240, 0.08); transition: all .45s cubic-bezier(0.4, 0, 0.2, 1); } .trg-tour-spotlight-ring { position: fixed; z-index: 10002; pointer-events: none; border-radius: 20px; border: 3px solid rgba(122, 179, 240, 0.7); animation: trgTourPulseRing 2s ease-in-out infinite; transition: all .45s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes trgTourPulseRing { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.03); opacity: 0.85; } } .trg-tour-briefing { position: fixed; z-index: 10003; width: 420px; background: var(--card-bg); border-radius: 20px; border: 2px solid #C5A55A; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(122, 179, 240, 0.25), 0 0 80px rgba(122, 179, 240, 0.18); animation: trgTourBriefingIn .3s ease-out; transition: top .45s cubic-bezier(0.4, 0, 0.2, 1), left .45s cubic-bezier(0.4, 0, 0.2, 1); font-family: 'DM Sans', sans-serif; } @keyframes trgTourBriefingIn { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .trg-tour-briefing::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(122, 179, 240, 0.1) 0%, transparent 60%); pointer-events: none; } .trg-tour-briefing-inner { position: relative; padding: 24px; } .trg-tour-brief-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .trg-tour-brief-meta { flex: 1; min-width: 0; } .trg-tour-step-pill { display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(122, 179, 240, 0.15); color: #C5A55A; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; border: 1px solid rgba(122, 179, 240, 0.35); margin-bottom: 10px; } .trg-tour-brief-heading { font-family: Outfit, sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.02em; line-height: 1.25; } .trg-tour-close-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: transparent; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all .15s; } .trg-tour-close-btn:hover { background: var(--bg-elevated); color: var(--text-primary); } .trg-tour-brief-description { color: var(--text-muted); font-size: 14px; line-height: 1.65; margin: 0 0 20px; } .trg-tour-progress-wrap { margin-bottom: 22px; } .trg-tour-progress-bar { height: 4px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; } .trg-tour-progress-fill { height: 100%; background: linear-gradient(90deg, #C5A55A, #D4BC72); transition: width .6s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 12px rgba(122, 179, 240, 0.5); } .trg-tour-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--text-muted); } .trg-tour-act-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #C5A55A; } .trg-tour-brief-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .trg-tour-back-btn { padding: 10px 18px; border-radius: 12px; background: var(--bg-elevated); color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; border: 1px solid rgba(122, 179, 240, 0.15); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; } .trg-tour-back-btn:hover:not(:disabled) { border-color: #C5A55A; background: rgba(122, 179, 240, 0.08); } .trg-tour-back-btn:disabled { opacity: 0.3; cursor: not-allowed; } .trg-tour-skip-btn { background: none; border: none; color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .15s; } .trg-tour-skip-btn:hover { color: #C5A55A; } .trg-tour-next-btn { padding: 10px 20px; border-radius: 12px; background: linear-gradient(135deg, #C5A55A, #D4BC72); color: var(--bg-base); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 800; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .2s; box-shadow: 0 4px 14px rgba(122, 179, 240, 0.3); } .trg-tour-next-btn:hover { box-shadow: 0 8px 28px rgba(122, 179, 240, 0.5); transform: translateY(-1px); } .trg-tour-next-btn.final { background: linear-gradient(135deg, #3D7A5A, #3D7A5A); box-shadow: 0 4px 14px rgba(52, 211, 153, 0.3); } .trg-tour-next-btn.final:hover { box-shadow: 0 8px 28px rgba(52, 211, 153, 0.5); } /* Connector arrow toward target */ .trg-tour-briefing::after { content: ''; position: absolute; width: 16px; height: 16px; background: var(--card-bg); border: 2px solid #C5A55A; display: none; } .trg-tour-briefing[data-pos="top"]::after { bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); border-top: none; border-left: none; display: block; } .trg-tour-briefing[data-pos="bottom"]::after { top: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); border-bottom: none; border-right: none; display: block; } .trg-tour-briefing[data-pos="left"]::after { right: -10px; top: 50%; transform: translateY(-50%) rotate(45deg); border-left: none; border-bottom: none; display: block; } .trg-tour-briefing[data-pos="right"]::after { left: -10px; top: 50%; transform: translateY(-50%) rotate(45deg); border-right: none; border-top: none; display: block; } @media (max-width: 900px) { .trg-tour-briefing { width: calc(100vw - 32px); } } /* ===== TRÄGER TOUR — Premium Step-Transition Animations ===== */ /* Two-phase: (1) EXIT — old content blurs out in direction (2) ENTER — new content springs in from opposite side with overshoot */ /* === PHASE 1: EXIT === */ .trg-tour-briefing-inner.trg-out-fwd .trg-tour-brief-header, .trg-tour-briefing-inner.trg-out-fwd .trg-tour-brief-description, .trg-tour-briefing-inner.trg-out-fwd .trg-tour-visual, .trg-tour-briefing-inner.trg-out-fwd .trg-tour-progress-wrap, .trg-tour-briefing-inner.trg-out-fwd .trg-tour-brief-nav { animation: trgOutFwd .22s cubic-bezier(0.55, 0, 0.85, 0.3) both; } .trg-tour-briefing-inner.trg-out-back .trg-tour-brief-header, .trg-tour-briefing-inner.trg-out-back .trg-tour-brief-description, .trg-tour-briefing-inner.trg-out-back .trg-tour-visual, .trg-tour-briefing-inner.trg-out-back .trg-tour-progress-wrap, .trg-tour-briefing-inner.trg-out-back .trg-tour-brief-nav { animation: trgOutBack .22s cubic-bezier(0.55, 0, 0.85, 0.3) both; } @keyframes trgOutFwd { 0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translateX(-52px) scale(0.92); filter: blur(8px); } } @keyframes trgOutBack { 0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translateX(52px) scale(0.92); filter: blur(8px); } } /* === PHASE 2: ENTER (spring with overshoot) === */ .trg-tour-briefing-inner.trg-anim-fwd .trg-tour-brief-header { animation: trgSpringFwd .58s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-fwd .trg-tour-brief-description { animation: trgSpringFwd .58s .06s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-fwd .trg-tour-visual { animation: trgSpringFwdScale .65s .12s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-fwd .trg-tour-progress-wrap { animation: trgSpringFwd .55s .22s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-fwd .trg-tour-brief-nav { animation: trgSpringFwd .55s .28s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-back .trg-tour-brief-header { animation: trgSpringBack .58s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-back .trg-tour-brief-description { animation: trgSpringBack .58s .06s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-back .trg-tour-visual { animation: trgSpringBackScale .65s .12s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-back .trg-tour-progress-wrap { animation: trgSpringBack .55s .22s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-tour-briefing-inner.trg-anim-back .trg-tour-brief-nav { animation: trgSpringBack .55s .28s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes trgSpringFwd { 0% { opacity: 0; transform: translateX(58px) scale(0.94); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } } @keyframes trgSpringFwdScale { 0% { opacity: 0; transform: translateX(58px) scale(0.85); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } } @keyframes trgSpringBack { 0% { opacity: 0; transform: translateX(-58px) scale(0.94); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } } @keyframes trgSpringBackScale { 0% { opacity: 0; transform: translateX(-58px) scale(0.85); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } } /* === Internal Visual-Children: keep their own native animations === (We don't stagger children here — each .trg-vis-* element has its own native animation like dept-bar-fill growing from 0, shift drag pulse, chart bars growing etc. Adding a stagger transform on top overrides those and breaks them visually.) */ /* === Next Button: Arrow Shoot on Click === */ .trg-tour-next-btn { position: relative; overflow: hidden; } .trg-tour-next-btn:active { transform: translateY(1px) scale(0.96); } .trg-tour-next-btn.trg-firing svg { animation: trgArrowShoot .5s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes trgArrowShoot { 0% { transform: translateX(0); opacity: 1; } 35% { transform: translateX(24px); opacity: 0; } 36% { transform: translateX(-24px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* Ripple burst on click */ .trg-tour-next-btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.5), transparent 60%); opacity: 0; transform: scale(0); pointer-events: none; } .trg-tour-next-btn.trg-firing::before { animation: trgBtnBurst .5s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes trgBtnBurst { 0% { opacity: 0.8; transform: scale(0); } 100% { opacity: 0; transform: scale(2); } } /* === Progress Fill Shimmer === */ .trg-tour-progress-fill { position: relative; } .trg-tour-progress-fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent); opacity: 0; } .trg-tour-briefing-inner.trg-anim-fwd .trg-tour-progress-fill::after, .trg-tour-briefing-inner.trg-anim-back .trg-tour-progress-fill::after { animation: trgProgressShimmer 1.1s .25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes trgProgressShimmer { 0% { opacity: 0; transform: translateX(-50px) scaleX(0.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(15px) scaleX(1.5); } } /* === Card itself: subtle directional shift with spring === */ .trg-tour-briefing.trg-shift-fwd { animation: trgCardShiftFwd .75s cubic-bezier(0.34, 1.56, 0.64, 1); } .trg-tour-briefing.trg-shift-back { animation: trgCardShiftBack .75s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes trgCardShiftFwd { 0% { box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(197,165,90,0.25), 0 0 80px rgba(197,165,90,0.18); } 25% { box-shadow: 0 24px 64px rgba(0,0,0,0.85), 0 0 0 1px rgba(197,165,90,0.6), 0 0 140px rgba(197,165,90,0.45); } 100% { box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(197,165,90,0.25), 0 0 80px rgba(197,165,90,0.18); } } @keyframes trgCardShiftBack { 0% { box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(197,165,90,0.25), 0 0 80px rgba(197,165,90,0.18); } 25% { box-shadow: 0 24px 64px rgba(0,0,0,0.85), 0 0 0 1px rgba(197,165,90,0.6), 0 0 140px rgba(197,165,90,0.45); } 100% { box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(197,165,90,0.25), 0 0 80px rgba(197,165,90,0.18); } } /* === Spotlight: dramatic flash + scale on target arrival === */ .trg-tour-spotlight.trg-flash { animation: trgSpotlightFlash .8s cubic-bezier(0.34, 1.56, 0.64, 1); } .trg-tour-spotlight-ring.trg-flash { animation: trgRingBurst .6s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes trgSpotlightFlash { 0% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.62), 0 0 60px rgba(197,165,90,0.35), inset 0 0 20px rgba(197,165,90,0.08); } 30% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.62), 0 0 160px rgba(197,165,90,0.9), inset 0 0 60px rgba(197,165,90,0.35); } 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.62), 0 0 60px rgba(197,165,90,0.35), inset 0 0 20px rgba(197,165,90,0.08); } } @keyframes trgRingBurst { 0% { transform: scale(1); opacity: 0.7; } 30% { transform: scale(1.15); opacity: 1; border-color: rgba(197,165,90,1); } 100% { transform: scale(1); opacity: 0.7; } } /* ===== TRÄGER TOUR — Visual Demo Block innerhalb der Card ===== */ .trg-tour-visual { margin: 0 0 20px; padding: 14px; border-radius: 12px; background: rgba(122, 179, 240, 0.05); border: 1px solid rgba(122, 179, 240, 0.12); font-family: 'DM Sans', sans-serif; } .trg-tour-visual:empty { display: none; } /* Mini-KPI tiles */ .trg-vis-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .trg-vis-kpi { padding: 8px 6px; border-radius: 8px; background: rgba(255,255,255,0.6); text-align: center; } .trg-vis-kpi .trg-vis-kv { font-family: Outfit, sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); } .trg-vis-kpi .trg-vis-kl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } .trg-vis-kpi.green .trg-vis-kv { color: #3D7A5A; } .trg-vis-kpi.orange .trg-vis-kv { color: #C5A55A; } .trg-vis-kpi.red .trg-vis-kv { color: #9B3B3B; } .trg-vis-kpi.blue .trg-vis-kv { color: #C5A55A; } /* Rows (generic) */ .trg-vis-list { display: flex; flex-direction: column; gap: 6px; } .trg-vis-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.6); font-size: 11px; color: var(--text-primary); } .trg-vis-row .trg-vis-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trg-vis-avatar { width: 22px; height: 22px; border-radius: 50%; background: rgba(197,165,90,0.2); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #C5A55A; flex-shrink: 0; } .trg-vis-pill { padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; } .trg-vis-pill.blue { background: rgba(197,165,90,0.15); color: #C5A55A; } .trg-vis-pill.green { background: rgba(16,185,129,0.15); color: #3D7A5A; } .trg-vis-pill.orange { background: rgba(245,158,11,0.15); color: #C5A55A; } .trg-vis-pill.purple { background: rgba(167,139,250,0.15); color: #a78bfa; } .trg-vis-pill.red { background: rgba(155,59,59,0.15); color: #9B3B3B; } .trg-vis-btn-add { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(197,165,90,0.12); border: 1px dashed rgba(197,165,90,0.4); text-align: center; font-size: 11px; font-weight: 700; color: #C5A55A; } /* Approve / Reject demo */ .trg-vis-request { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.6); } .trg-vis-request-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-primary); } .trg-vis-req-buttons { display: flex; gap: 6px; } .trg-vis-approve { flex: 1; padding: 7px; border-radius: 6px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); color: #3D7A5A; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; animation: trgVisPulse 2.5s ease-in-out infinite; } .trg-vis-reject { flex: 1; padding: 7px; border-radius: 6px; background: rgba(155,59,59,0.08); border: 1px solid rgba(155,59,59,0.3); color: #9B3B3B; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; } @keyframes trgVisPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } } /* Today todo checklist */ .trg-vis-todo { display: flex; flex-direction: column; gap: 5px; } .trg-vis-todo-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(15,27,45,0.03); font-size: 11px; color: var(--text-primary); } .trg-vis-todo-check { width: 14px; height: 14px; border-radius: 4px; background: rgba(197,165,90,0.15); border: 1px solid rgba(197,165,90,0.4); flex-shrink: 0; } .trg-vis-todo-check.done { background: #3D7A5A; border-color: #3D7A5A; position: relative; } .trg-vis-todo-check.done::after { content: '✓'; position: absolute; inset: 0; color: var(--bg-base); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; } /* Department attendance bars */ .trg-vis-dept { display: flex; flex-direction: column; gap: 8px; } .trg-vis-dept-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-primary); } .trg-vis-dept-name { width: 75px; flex-shrink: 0; } .trg-vis-dept-bar-bg { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; position: relative; } .trg-vis-dept-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C5A55A, #D4BC72); transform-origin: left center; animation: trgVisGrow .9s .35s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes trgVisGrow { from { transform: scaleX(0); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } } .trg-vis-dept-val { width: 36px; text-align: right; font-weight: 700; } /* Shift plan grid with drag visual */ .trg-vis-shift-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 8px; } .trg-vis-shift-col { display: flex; flex-direction: column; gap: 3px; align-items: center; } .trg-vis-shift-day { font-size: 9px; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; } .trg-vis-shift { width: 100%; height: 14px; border-radius: 3px; } .trg-vis-shift.blue { background: rgba(197,165,90,0.35); } .trg-vis-shift.orange { background: rgba(245,158,11,0.35); } .trg-vis-shift.purple { background: rgba(167,139,250,0.35); } .trg-vis-shift.drag { background: rgba(197,165,90,0.6); border: 1.5px dashed #C5A55A; animation: trgVisDrag 3s ease-in-out infinite; } @keyframes trgVisDrag { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-6px) scale(1.08); } 60% { transform: translateY(12px) scale(1); } } .trg-vis-hint { padding: 6px 8px; border-radius: 6px; background: rgba(197,165,90,0.08); font-size: 10px; color: #C5A55A; text-align: center; border: 1px solid rgba(197,165,90,0.15); } /* Mini bar chart */ .trg-vis-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 50px; padding: 4px 0; } .trg-vis-bar { flex: 1; border-radius: 3px; background: linear-gradient(to top, rgba(197,165,90,0.4), rgba(197,165,90,0.1)); transform-origin: bottom center; animation: trgVisBarGrow .8s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trg-vis-bar.highlight { background: linear-gradient(to top, #C5A55A, #D4BC72); } .trg-vis-bar:nth-child(1) { animation-delay: .30s; } .trg-vis-bar:nth-child(2) { animation-delay: .34s; } .trg-vis-bar:nth-child(3) { animation-delay: .38s; } .trg-vis-bar:nth-child(4) { animation-delay: .42s; } .trg-vis-bar:nth-child(5) { animation-delay: .46s; } .trg-vis-bar:nth-child(6) { animation-delay: .50s; } .trg-vis-bar:nth-child(7) { animation-delay: .54s; } .trg-vis-bar:nth-child(8) { animation-delay: .58s; } .trg-vis-bar:nth-child(9) { animation-delay: .62s; } .trg-vis-bar:nth-child(10) { animation-delay: .66s; } .trg-vis-bar:nth-child(11) { animation-delay: .70s; } .trg-vis-bar:nth-child(12) { animation-delay: .74s; } @keyframes trgVisBarGrow { from { transform: scaleY(0); opacity: 0.3; } to { transform: scaleY(1); opacity: 1; } } .trg-vis-chart-meta { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted); margin-top: 4px; } /* Success checklist (final step) */ .trg-vis-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .trg-vis-check-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15); font-size: 10px; color: var(--text-primary); } .trg-vis-check-item::before { content: '✓'; color: #3D7A5A; font-weight: 900; font-size: 12px; } /* ═══════════════════════════════════════════════════ MITARBEITER-LISTE V4 Replaces old .user-management table. All colors via theme variables. ═══════════════════════════════════════════════════ */ /* When ML page is visible, make the .page container fill full available height */ #user-management.active, #positions.active { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 100%; } /* Page-scope (inside #user-management and #positions) */ #user-management .ml-page, #positions .ml-page { width: 100%; max-width: none; margin: 0; padding: 24px 40px 80px; position: relative; font-family: 'DM Sans', system-ui, sans-serif; color: var(--text-secondary); box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column; min-height: calc(100vh - 80px); } /* List fills remaining space so empty state and last rows reach the bottom */ #user-management .ml-list, #positions .ml-list { flex: 1 1 auto; display: flex; flex-direction: column; } #user-management #mlRows, #positions #positionsRows { flex: 1 1 auto; } .ml-row-empty { min-height: 260px; display: flex !important; align-items: center; justify-content: center; flex-direction: column; } body.ml-drawer-open { overflow: hidden; } /* NAMEPLATE */ .ml-nameplate { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--border-strong); margin-bottom: 40px; gap: 20px; flex-wrap: wrap; } .ml-nameplate-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ml-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); display: flex; align-items: center; gap: 10px; } .ml-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent); } .ml-title { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 144; font-size: 64px; font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; color: var(--text-primary); margin: 6px 0 0; } .ml-title em { font-style: italic; font-weight: 400; color: var(--accent); } .ml-nameplate-actions { display: flex; gap: 8px; padding-bottom: 8px; flex-wrap: wrap; } /* BUTTONS (scoped copies that use theme vars) */ .ml-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.2, 0, 0.1, 1); white-space: nowrap; background: transparent; color: var(--text-secondary); } .ml-btn svg { width: 14px; height: 14px; } .ml-btn-primary { background: var(--accent); color: var(--bg-base); border-color: var(--accent); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 45%, transparent); } .ml-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--accent) 55%, transparent); } .ml-btn-ghost { border-color: var(--border-strong); color: var(--text-secondary); } .ml-btn-ghost:hover { background: var(--bg-hover); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text-primary); } .ml-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .ml-btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); } .ml-btn-sm { padding: 8px 12px; font-size: 11.5px; } /* STATS-STRIP */ .ml-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 36px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ml-stat { padding: 24px 28px; cursor: pointer; transition: background 0.15s; background: transparent; border: none; text-align: left; font-family: inherit; color: inherit; } .ml-stat + .ml-stat { border-left: 1px solid var(--border); } .ml-stat:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); } .ml-stat.active { background: color-mix(in srgb, var(--accent) 6%, transparent); } .ml-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-weight: 700; margin-bottom: 10px; } .ml-stat-value { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 96; font-size: 42px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; } .ml-stat-value small { font-size: 13px; font-weight: 400; color: var(--text-muted); font-family: 'DM Sans', sans-serif; } .ml-stat.anwesend .ml-stat-value { color: var(--success); } .ml-stat.urlaub .ml-stat-value { color: var(--warning); } .ml-stat.krank .ml-stat-value { color: var(--danger); } .ml-stat.homeoffice .ml-stat-value { color: var(--homeoffice); } /* TOOLBAR */ .ml-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .ml-search { flex: 1 1 240px; max-width: 400px; position: relative; } .ml-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: color-mix(in srgb, var(--text-muted) 55%, transparent); } .ml-search input { width: 100%; padding: 12px 16px 12px 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: all 0.2s; box-sizing: border-box; } .ml-search input:focus { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--bg-hover); box-shadow: 0 0 0 4px var(--accent-subtle); } .ml-search input::placeholder { color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-style: italic; } .ml-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; } .ml-chip:hover, .ml-chip.active { border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text-primary); } .ml-chip.active { background: color-mix(in srgb, var(--accent) 6%, transparent); } .ml-chip svg { width: 11px; height: 11px; color: color-mix(in srgb, var(--text-muted) 55%, transparent); } .ml-toolbar-right { margin-left: auto; display: flex; gap: 14px; align-items: center; } .ml-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); } /* LIST */ .ml-list { margin-top: 8px; } .ml-list-header, .ml-row { display: grid; grid-template-columns: 38px 3px 1fr 140px 110px 160px 120px 36px; gap: 18px; padding: 12px 20px 12px 22px; align-items: center; } .ml-list-header { border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-weight: 700; } .ml-list-header span.numeric { text-align: right; } .ml-row { padding: 14px 20px 14px 22px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); position: relative; cursor: pointer; transition: background 0.15s; contain: layout style; } .ml-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity 0.15s; } .ml-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--bg-hover)); } .ml-row:hover::before { opacity: 0.55; } .ml-row.selected { background: color-mix(in srgb, var(--accent) 6%, transparent); } .ml-row.selected::before { opacity: 1; } .ml-row-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; border-bottom: 1px solid var(--border); } /* Marker (index / checkbox) */ .ml-marker { display: flex; align-items: center; justify-content: center; width: 100%; } .ml-index { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--text-muted) 55%, transparent); letter-spacing: -0.01em; font-feature-settings: 'tnum'; } .ml-cb { display: none; width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; background: transparent; cursor: pointer; align-items: center; justify-content: center; transition: all 0.15s; } .ml-cb:hover { border-color: var(--accent); } .ml-cb.checked { background: var(--accent); border-color: var(--accent); } .ml-cb.checked::after { content: ''; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; } .ml-row:hover .ml-index, .ml-list.has-selection .ml-index, .ml-row.selected .ml-index { display: none; } .ml-row:hover .ml-cb, .ml-list.has-selection .ml-cb, .ml-row.selected .ml-cb { display: inline-flex; } /* Life-bar */ .ml-life { width: 3px; height: 32px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 30%, transparent); } .ml-life.anwesend { background: var(--success); box-shadow: 0 0 10px color-mix(in srgb, var(--success) 35%, transparent); } .ml-life.urlaub { background: var(--warning); } .ml-life.krank { background: var(--danger); box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 30%, transparent); } .ml-life.homeoffice { background: var(--homeoffice); } .ml-life.gesperrt { background: color-mix(in srgb, var(--text-muted) 50%, transparent); } /* Name cell */ .ml-name-cell { display: flex; align-items: center; gap: 14px; min-width: 0; } .ml-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 24; font-weight: 600; font-size: 13px; color: #0a0d18; flex-shrink: 0; letter-spacing: -0.02em; } .ml-name-info { min-width: 0; flex: 1; } .ml-name { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 24; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-position { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; font-weight: 500; } /* Dept */ .ml-dept { font-size: 12px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Role badge */ .ml-role { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; border-radius: 4px; white-space: nowrap; } .ml-role.träger, .ml-role.traeger { color: var(--danger); background: var(--danger-bg); } .ml-role.admin { color: var(--homeoffice); background: var(--homeoffice-bg); } .ml-role.manager { color: var(--warning); background: var(--warning-bg); } .ml-role.employee, .ml-role.mitarbeiter { color: var(--text-muted); background: transparent; border: 1px solid var(--border); } /* Status */ .ml-status { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ml-status.anwesend { color: var(--success); } .ml-status.urlaub { color: var(--warning); } .ml-status.krank { color: var(--danger); } .ml-status.homeoffice { color: var(--homeoffice); } .ml-status.gesperrt { color: var(--text-muted); } .ml-status.anwesend .ml-status-dot { background: var(--success); box-shadow: 0 0 6px color-mix(in srgb, var(--success) 50%, transparent); } .ml-status.urlaub .ml-status-dot { background: var(--warning); } .ml-status.krank .ml-status-dot { background: var(--danger); box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 40%, transparent); } .ml-status.homeoffice .ml-status-dot { background: var(--homeoffice); } .ml-status.gesperrt .ml-status-dot { background: var(--text-muted); } /* Urlaub cell */ .ml-urlaub-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } .ml-urlaub-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); font-feature-settings: 'tnum'; font-weight: 500; letter-spacing: -0.01em; } .ml-urlaub-num small { color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-weight: 400; } .ml-urlaub-bar { width: 56px; height: 2px; background: var(--border); border-radius: 1px; position: relative; overflow: hidden; } .ml-urlaub-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--bar, 50%); background: var(--success); border-radius: 1px; } .ml-urlaub-bar.mid::after { background: var(--warning); } .ml-urlaub-bar.low::after { background: var(--danger); } /* Action trigger */ .ml-action { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: color-mix(in srgb, var(--text-muted) 55%, transparent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-left: auto; opacity: 0; transform: translateX(-4px); } .ml-action svg { width: 14px; height: 14px; } .ml-row:hover .ml-action { opacity: 1; transform: translateX(0); color: var(--text-secondary); border-color: var(--border); } .ml-action:hover { background: var(--accent-subtle); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } /* Avatar color classes (decorative, not theme-bound) */ .ml-avatar.avc-a { background: linear-gradient(135deg, #d6a880, #b8865e); } .ml-avatar.avc-b { background: linear-gradient(135deg, #b794cc, #8d6ba4); } .ml-avatar.avc-c { background: linear-gradient(135deg, #e06b5e, #b8402f); } .ml-avatar.avc-d { background: linear-gradient(135deg, #8fbf6b, #5d8a3d); } .ml-avatar.avc-e { background: linear-gradient(135deg, #e0a93e, #a77a1e); } .ml-avatar.avc-f { background: linear-gradient(135deg, #6b9bbf, #3d6f91); } .ml-avatar.avc-g { background: linear-gradient(135deg, #c48ba3, #8d5c73); } .ml-avatar.avc-h { background: linear-gradient(135deg, #a3b88f, #5e7a48); } /* Footer */ .ml-footer { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } /* ═══════════════ BULK BAR ═══════════════ */ .ml-bulk { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--bg-hover); border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 16px; display: none; align-items: center; gap: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); backdrop-filter: blur(20px); z-index: 2000; opacity: 0; transition: all 0.25s cubic-bezier(0.2, 0, 0.1, 1); } .ml-bulk.visible { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); } .ml-bulk-count { font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 500; color: var(--text-primary); padding-right: 14px; border-right: 1px solid var(--border-strong); } .ml-bulk-count em { color: var(--accent); font-style: normal; } .ml-bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: transparent; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif; } .ml-bulk-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .ml-bulk-btn svg { width: 14px; height: 14px; } .ml-bulk-btn.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .ml-bulk-clear { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--border); } /* ═══════════════ DRAWER ═══════════════ */ .ml-drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 15, 0.82); opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.2, 0, 0.1, 1); z-index: 2100; } .ml-drawer-backdrop.visible { opacity: 1; pointer-events: auto; } .ml-drawer { position: fixed; top: 0; right: 0; width: 560px; max-width: 92vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; background: var(--bg-card); border-left: 1px solid var(--border-strong); box-shadow: -40px 0 80px -20px rgba(0, 0, 0, 0.6); transform: translateX(calc(100% + 120px)); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s; z-index: 2101; display: flex; flex-direction: column; overflow: hidden; visibility: hidden; pointer-events: none; } .ml-drawer.visible { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .ml-drawer-head { padding: 28px 32px 24px; border-bottom: 1px solid var(--border); background: var(--bg-hover); flex-shrink: 0; } .ml-drawer-head-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .ml-drawer-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-weight: 700; } .ml-drawer-close { width: 36px; height: 36px; border-radius: 10px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .ml-drawer-close:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); } .ml-drawer-close svg { width: 16px; height: 16px; } .ml-drawer-hero { display: flex; align-items: center; gap: 18px; } .ml-drawer-avatar { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 48; font-weight: 600; font-size: 26px; color: #0a0d18; flex-shrink: 0; letter-spacing: -0.03em; } .ml-drawer-hero-info { flex: 1; min-width: 0; } .ml-drawer-hero-name { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 72; font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 6px; } .ml-drawer-hero-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); } .ml-drawer-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted) 55%, transparent); } .ml-drawer-hero-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; } .ml-drawer-hero-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ml-drawer-hero-status.anwesend { color: var(--success); } .ml-drawer-hero-status.urlaub { color: var(--warning); } .ml-drawer-hero-status.krank { color: var(--danger); } .ml-drawer-hero-status.homeoffice { color: var(--homeoffice); } .ml-drawer-hero-status.gesperrt { color: var(--text-muted); } .ml-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 28px 32px 24px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; /* Eigener Compositor-Layer — isoliert Scroll-Paints vom Rest des Dashboards */ contain: layout paint; will-change: scroll-position; } .ml-drawer.visible { will-change: transform; } .ml-drawer-body::-webkit-scrollbar { width: 6px; } .ml-drawer-body::-webkit-scrollbar-track { background: transparent; } .ml-drawer-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .ml-section { margin-bottom: 32px; } .ml-section:last-child { margin-bottom: 0; } .ml-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ml-section-title { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 32; font-size: 16px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin: 0; } .ml-section-sub { font-size: 11px; color: color-mix(in srgb, var(--text-muted) 55%, transparent); } .ml-field { margin-bottom: 14px; } .ml-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ml-field-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--text-muted) 55%, transparent); font-weight: 700; margin-bottom: 6px; } .ml-input, .ml-select { width: 100%; padding: 11px 13px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 9px; color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: all 0.18s; box-sizing: border-box; } .ml-input:focus, .ml-select:focus { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 0 3px var(--accent-subtle); background: var(--bg-hover); } .ml-input[readonly] { color: var(--text-muted); cursor: default; } .ml-input.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; } .ml-field-help { font-size: 10.5px; color: color-mix(in srgb, var(--text-muted) 55%, transparent); margin-top: 5px; line-height: 1.5; } .ml-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; } .ml-field-action { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); } .ml-field-action .dots { letter-spacing: 4px; } .ml-field-action button { margin-left: auto; background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); padding: 6px 12px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif; } .ml-field-action button:hover { background: var(--accent-subtle); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); } .ml-urlaub-display { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 10px; } .ml-urlaub-big { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 48; font-size: 32px; font-weight: 500; color: var(--accent); letter-spacing: -0.02em; } .ml-urlaub-big small { font-size: 14px; color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-weight: 400; } .ml-urlaub-meta { font-size: 11px; color: var(--text-muted); line-height: 1.5; } .ml-urlaub-meta strong { color: var(--text-secondary); font-weight: 600; } .ml-docs-list { display: flex; flex-direction: column; gap: 6px; } .ml-doc-empty { padding: 20px 12px; text-align: center; font-size: 11.5px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 8px; } .ml-danger-zone { padding: 18px 18px 16px; background: color-mix(in srgb, var(--danger) 4%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 15%, transparent); border-radius: 10px; } .ml-danger-title { font-size: 11px; font-weight: 700; color: var(--danger); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } .ml-danger-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; } .ml-danger-actions { display: flex; gap: 8px; } .ml-drawer-foot { padding: 18px 32px; border-top: 1px solid var(--border); background: var(--bg-hover); display: flex; gap: 10px; flex-shrink: 0; } .ml-drawer-foot .ml-btn { flex: 1; justify-content: center; } @media (max-width: 900px) { .ml-stats { grid-template-columns: repeat(2, 1fr); } .ml-list-header, .ml-row { grid-template-columns: 32px 3px 1fr 100px 60px; } .ml-list-header > *:nth-child(n+6), .ml-row > *:nth-child(n+6) { display: none; } } /* ═══════════════ DRAWER CREATE/EDIT MODE TOGGLE ═══════════════ */ .ml-drawer.ml-create-mode .ml-edit-only { display: none !important; } .ml-drawer:not(.ml-create-mode) .ml-create-only { display: none !important; } /* ═══════════════ POSITIONS PAGE ═══════════════ */ #positions .ml-list-header.ml-pos-grid, #positions .ml-row.ml-pos-grid { grid-template-columns: 1.4fr 120px 1fr 90px 120px; } #positions .ml-pos-name { font-family: 'Inter', system-ui, sans-serif; font-variation-settings: "opsz" 24; font-size: 15px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.015em; } #positions .ml-pos-level { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; border-radius: 4px; white-space: nowrap; } #positions .ml-pos-level.admin { color: var(--homeoffice); background: var(--homeoffice-bg); } #positions .ml-pos-level.manager { color: var(--warning); background: var(--warning-bg); } #positions .ml-pos-level.employee { color: var(--text-muted); background: transparent; border: 1px solid var(--border); } #positions .ml-pos-tabs { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #positions .ml-pos-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); font-feature-settings: 'tnum'; text-align: right; } #positions .ml-pos-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity 0.15s; } #positions .ml-row:hover .ml-pos-actions { opacity: 1; } #positions .ml-pos-actions button { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif; } #positions .ml-pos-actions button:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text-primary); } #positions .ml-pos-actions button.danger:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); } /* ========================================================= APPROVALS v2 — Premium Urlaubsanträge (Claude Design) Scoped to #approvals.apv2-page ========================================================= */ .apv2-page{ --apv2-bg:#FAF6EF; --apv2-surface:#FFFDF8; --apv2-surface-2:#F6F0E2; --apv2-surface-sunk:#EFE7D3; --apv2-ink:#1A1612; --apv2-ink-2:#3A332A; --apv2-ink-3:#6B6050; --apv2-ink-4:#9A8F7D; --apv2-ink-5:#BDB3A0; --apv2-div:rgba(26,22,18,.06); --apv2-div-2:rgba(26,22,18,.10); --apv2-gold:#C5A55A; --apv2-gold-deep:#A8863E; --apv2-gold-amber:#C68B3C; --apv2-gold-bronze:#8C6A3A; --apv2-gold-soft:#D3B977; --apv2-gold-muted:#B89A6A; --apv2-gold-pale:#DCC899; --apv2-gold-ink:#5C4214; --apv2-gold-wash:rgba(197,165,90,.10); --apv2-gold-wash-2:rgba(197,165,90,.20); --apv2-danger:#A8412C; --apv2-danger-wash:rgba(168,65,44,.08); --apv2-font-serif:"Fraunces","Iowan Old Style",Georgia,serif; --apv2-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --apv2-font-mono:ui-monospace,"SF Mono",Menlo,monospace; --apv2-shadow-xs:0 1px 0 rgba(92,66,20,.04); --apv2-shadow-sm:0 1px 2px rgba(92,66,20,.05); --apv2-shadow-md:0 6px 20px -6px rgba(92,66,20,.14), 0 2px 4px rgba(92,66,20,.04); --apv2-shadow-lg:0 22px 48px -14px rgba(92,66,20,.22), 0 8px 14px -4px rgba(92,66,20,.08); --apv2-r-sm:6px; --apv2-r-md:10px; --apv2-r-lg:14px; --apv2-r-xl:20px; --apv2-ease:cubic-bezier(.2,.7,.2,1); --apv2-dur:140ms; --apv2-dur-2:220ms; --apv2-row-h:52px; --apv2-page-max:1100px; background:var(--apv2-bg); color:var(--apv2-ink); font-family:var(--apv2-font-sans); font-size:13.5px; line-height:1.45; -webkit-font-smoothing:antialiased; letter-spacing:-.005em; padding:0; margin:-24px -28px 0; min-height:calc(100vh - 60px); position:relative; } @media (max-width:900px){ .apv2-page{ margin:-16px; } } body.theme-dark .apv2-page{ --apv2-bg:#14110D; --apv2-surface:#1A1612; --apv2-surface-2:#211C16; --apv2-surface-sunk:#110E0A; --apv2-ink:#F3ECDC; --apv2-ink-2:#D9CFB8; --apv2-ink-3:#A89B80; --apv2-ink-4:#786E57; --apv2-ink-5:#4F4836; --apv2-div:rgba(243,236,220,.07); --apv2-div-2:rgba(243,236,220,.12); --apv2-gold:#D4B977; --apv2-gold-deep:#C2A35A; --apv2-gold-amber:#D9A362; --apv2-gold-bronze:#A98756; --apv2-gold-soft:#E6CE98; --apv2-gold-muted:#CFB685; --apv2-gold-pale:#EBDAAF; --apv2-gold-ink:#F3DEA6; --apv2-gold-wash:rgba(212,185,119,.08); --apv2-gold-wash-2:rgba(212,185,119,.18); --apv2-danger:#D07761; --apv2-danger-wash:rgba(208,119,97,.12); --apv2-shadow-md:0 6px 20px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25); --apv2-shadow-lg:0 22px 50px -16px rgba(0,0,0,.65); } .apv2-page[data-density="comfort"]{--apv2-row-h:60px} .apv2-page[data-density="dense"]{--apv2-row-h:44px} .apv2-page *{box-sizing:border-box} .apv2-page button{font:inherit;color:inherit} .apv2-page :focus-visible{outline:2px solid var(--apv2-gold);outline-offset:2px;border-radius:var(--apv2-r-sm)} .apv2-page ::selection{background:var(--apv2-gold-wash-2);color:var(--apv2-ink)} /* HEADER */ .apv2-header{ position:relative; background: color-mix(in oklab, var(--apv2-bg) 92%, transparent); border-bottom:1px solid var(--apv2-div); } .apv2-header-inner{ max-width:var(--apv2-page-max); margin:0 auto; padding:24px 32px 0; } .apv2-crumb{ display:inline-flex; gap:6px; align-items:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--apv2-ink-4); font-weight:500; margin-bottom:10px; } .apv2-sep{color:var(--apv2-ink-5)} .apv2-cur{color:var(--apv2-ink-2)} .apv2-h1{ font-family:var(--apv2-font-serif); font-size:30px; font-weight:500; line-height:1.1; letter-spacing:-.02em; margin:0; color:var(--apv2-ink); } .apv2-count{ color:var(--apv2-ink-4); font-weight:400; font-style:italic; margin-left:10px; font-size:24px; font-family:var(--apv2-font-serif);} .apv2-header-row{ display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 0 0; flex-wrap:wrap; } .apv2-search{ position:relative; display:flex; align-items:center; gap:8px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:10px; padding:7px 10px 7px 12px; width:340px; max-width:100%; color:var(--apv2-ink-3); box-shadow:var(--apv2-shadow-xs); transition:border-color var(--apv2-dur) var(--apv2-ease), box-shadow var(--apv2-dur) var(--apv2-ease); } .apv2-search:focus-within{border-color:var(--apv2-gold); box-shadow:0 0 0 3px var(--apv2-gold-wash); color:var(--apv2-ink)} .apv2-search input{border:0;background:transparent;outline:none;flex:1;font:inherit;font-size:13px;color:var(--apv2-ink);min-width:0} .apv2-search input::placeholder{color:var(--apv2-ink-4)} .apv2-page kbd{ font-family:var(--apv2-font-mono); font-size:10.5px; padding:2px 6px; border-radius:5px; background:var(--apv2-surface-2); color:var(--apv2-ink-3); border:1px solid var(--apv2-div-2); box-shadow:inset 0 -1px 0 var(--apv2-div); } /* STATS STRIP */ .apv2-stats{ max-width:var(--apv2-page-max); margin:18px auto 0; padding:0 32px; display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--apv2-div); border:1px solid var(--apv2-div); border-radius:var(--apv2-r-lg); overflow:hidden; } .apv2-stat{ padding:14px 18px; background:var(--apv2-surface); cursor:pointer; position:relative; transition:background var(--apv2-dur) var(--apv2-ease); border:0; text-align:left; } .apv2-stat:hover{background:var(--apv2-surface-2)} .apv2-stat.is-active{background:var(--apv2-gold-wash)} .apv2-stat.is-active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--apv2-gold); } .apv2-stat-label{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--apv2-ink-4); font-weight:500; margin-bottom:6px; display:flex; align-items:center; gap:6px; } .apv2-stat-dot{width:6px;height:6px;border-radius:50%;background:var(--apv2-gold)} .apv2-stat-dot.urgent{background:var(--apv2-gold-amber)} .apv2-stat-dot.week{background:var(--apv2-gold)} .apv2-stat-dot.later{background:var(--apv2-gold-pale)} .apv2-stat-val{ font-family:var(--apv2-font-serif); font-size:26px; font-weight:500; letter-spacing:-.02em; color:var(--apv2-ink); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:8px; } .apv2-stat-delta{font-family:var(--apv2-font-sans); font-size:11px; color:var(--apv2-ink-4); font-weight:450} /* CONTROL BAR */ .apv2-control{ max-width:var(--apv2-page-max); margin:20px auto 0; padding:0 32px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .apv2-divider{width:1px;height:18px;background:var(--apv2-div-2);margin:0 4px} .apv2-team-chips{display:contents} .apv2-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:transparent; border:1px solid var(--apv2-div-2); color:var(--apv2-ink-3); font-size:12.5px; font-weight:450; cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); white-space:nowrap; font-family:var(--apv2-font-sans); } .apv2-chip:hover{color:var(--apv2-ink); border-color:var(--apv2-ink-5); background:var(--apv2-surface)} .apv2-chip.is-active{color:var(--apv2-gold-ink); background:var(--apv2-gold-wash); border-color:var(--apv2-gold-wash-2)} .apv2-chip-count{font-family:var(--apv2-font-mono);font-size:10.5px;padding:1px 6px;background:var(--apv2-surface-sunk);color:var(--apv2-ink-3);border-radius:999px;margin-left:2px} .apv2-chip.is-active .apv2-chip-count{background:var(--apv2-gold);color:#fff} body.theme-dark .apv2-chip.is-active .apv2-chip-count{color:#1A1612} .apv2-group-ctrl{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .apv2-group-ctrl-label{font-size:11px;color:var(--apv2-ink-4);letter-spacing:.06em;text-transform:uppercase;font-weight:500} .apv2-seg{ display:flex; background:var(--apv2-surface-sunk); border-radius:8px; padding:3px; gap:2px; } .apv2-seg button{ border:0; background:transparent; padding:5px 10px; border-radius:6px; color:var(--apv2-ink-3); font-size:12px; font-weight:450; cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); font-family:var(--apv2-font-sans); } .apv2-seg button:hover{color:var(--apv2-ink)} .apv2-seg button.is-active{background:var(--apv2-surface); color:var(--apv2-ink); box-shadow:var(--apv2-shadow-xs); font-weight:500} .apv2-sort{ display:inline-flex; align-items:center; gap:6px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:8px; padding:6px 10px 6px 11px; font-size:12px; color:var(--apv2-ink-2); cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); } .apv2-sort:hover{border-color:var(--apv2-ink-5); color:var(--apv2-ink)} .apv2-sort svg{color:var(--apv2-ink-4)} .apv2-sort select{ border:0; background:transparent; font:inherit; color:inherit; outline:none; cursor:pointer; padding-right:14px; appearance:none; -webkit-appearance:none; } .apv2-sort-label{color:var(--apv2-ink-4); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; margin-right:2px} /* VIEWS DROPDOWN */ .apv2-views{position:relative} .apv2-views-btn{ display:inline-flex; align-items:center; gap:7px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:8px; padding:6px 11px; font-size:12.5px; color:var(--apv2-ink-2); cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); } .apv2-views-btn:hover{border-color:var(--apv2-ink-5); color:var(--apv2-ink)} .apv2-views-btn svg{color:var(--apv2-ink-4)} .apv2-views-btn .apv2-star{color:var(--apv2-gold)} .apv2-views-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:280px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:var(--apv2-r-md); box-shadow:var(--apv2-shadow-lg); padding:6px; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity var(--apv2-dur) var(--apv2-ease), transform var(--apv2-dur) var(--apv2-ease); } .apv2-views.is-open .apv2-views-menu{opacity:1; transform:none; pointer-events:auto} .apv2-views-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--apv2-ink-2); font-size:12.5px; } .apv2-views-item:hover{background:var(--apv2-surface-2); color:var(--apv2-ink)} .apv2-views-item .meta{color:var(--apv2-ink-4); font-size:11px; margin-left:auto; font-variant-numeric:tabular-nums} .apv2-views-divider{height:1px; background:var(--apv2-div); margin:4px 6px} .apv2-views-head{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--apv2-ink-4); font-weight:500; padding:8px 10px 4px} /* ACTIVE FILTER PILLS */ .apv2-active-filters{ max-width:var(--apv2-page-max); margin:14px auto 0; padding:12px 32px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px dashed var(--apv2-div-2); } .apv2-active-filters.is-empty{display:none} .apv2-active-filters-label{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--apv2-ink-4); font-weight:500; display:flex; align-items:center; gap:6px; } .apv2-active-filters-label::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--apv2-gold); } .apv2-pills-host{display:flex;gap:6px;flex-wrap:wrap} .apv2-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--apv2-gold-wash); color:var(--apv2-gold-ink); border:1px solid var(--apv2-gold-wash-2); border-radius:999px; padding:4px 4px 4px 10px; font-size:12px; font-weight:450; transition:all var(--apv2-dur) var(--apv2-ease); } .apv2-pill:hover{background:var(--apv2-gold-wash-2)} .apv2-pill .apv2-pill-key{color:var(--apv2-ink-4); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:500; margin-right:2px} .apv2-pill-x{ width:18px; height:18px; border-radius:50%; border:0; background:transparent; color:var(--apv2-gold-ink); cursor:pointer; display:grid; place-items:center; transition:background var(--apv2-dur) var(--apv2-ease); } .apv2-pill-x:hover{background:color-mix(in oklab, var(--apv2-gold) 25%, transparent); color:var(--apv2-ink)} .apv2-clear-all{ margin-left:auto; border:0; background:transparent; color:var(--apv2-ink-4); font-size:11.5px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:all var(--apv2-dur) var(--apv2-ease); font-family:var(--apv2-font-sans); } .apv2-clear-all:hover{color:var(--apv2-danger); background:var(--apv2-danger-wash)} /* LIST */ .apv2-list{ max-width:var(--apv2-page-max); margin:16px auto 0; padding:0 32px 160px; display:flex; flex-direction:column; gap:20px; } .apv2-section-head{ display:flex; align-items:center; gap:10px; padding:12px 6px 8px; cursor:pointer; user-select:none; color:var(--apv2-ink-2); transition:color var(--apv2-dur) var(--apv2-ease); } .apv2-section-head:hover{color:var(--apv2-ink)} .apv2-section-caret{width:12px; height:12px; color:var(--apv2-ink-4); transition:transform var(--apv2-dur-2) var(--apv2-ease); flex-shrink:0} .apv2-section.is-collapsed .apv2-section-caret{transform:rotate(-90deg)} .apv2-section-title{font-family:var(--apv2-font-serif); font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--apv2-ink)} .apv2-section-count{margin-left:6px; font-family:var(--apv2-font-mono); font-size:11.5px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums} .apv2-section-actions{margin-left:auto; display:flex; gap:6px; opacity:0; transition:opacity var(--apv2-dur) var(--apv2-ease)} .apv2-section-head:hover .apv2-section-actions{opacity:1} .apv2-section-action{ border:0; background:transparent; color:var(--apv2-ink-4); font-size:11.5px; padding:3px 8px; border-radius:6px; cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); font-family:var(--apv2-font-sans); } .apv2-section-action:hover{color:var(--apv2-gold-ink); background:var(--apv2-gold-wash)} .apv2-section-body{ background:var(--apv2-surface); border-radius:var(--apv2-r-lg); box-shadow:var(--apv2-shadow-sm); overflow:hidden; transition:max-height var(--apv2-dur-2) var(--apv2-ease), opacity var(--apv2-dur-2) var(--apv2-ease); } .apv2-section.is-collapsed .apv2-section-body{max-height:0 !important; opacity:0; pointer-events:none; box-shadow:none} /* ROW */ .apv2-row{ position:relative; display:grid; grid-template-columns: 22px 28px minmax(160px,1.2fr) minmax(150px,1fr) minmax(200px,1.2fr) 86px auto; align-items:center; gap:14px; padding:0 16px 0 14px; min-height:var(--apv2-row-h); border-bottom:1px solid var(--apv2-div); cursor:pointer; outline:none; transition:background-color var(--apv2-dur) var(--apv2-ease); contain: layout style; } .apv2-row:last-child{border-bottom:0} .apv2-row:hover,.apv2-row.is-focused{background:var(--apv2-surface-2)} .apv2-row::after{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--apv2-gold-deep); opacity:.7; } .apv2-row.is-leaving{opacity:0; transform:translateX(8px); pointer-events:none; transition:opacity var(--apv2-dur-2) var(--apv2-ease), transform var(--apv2-dur-2) var(--apv2-ease), max-height var(--apv2-dur-2) var(--apv2-ease); max-height:var(--apv2-row-h); overflow:hidden} .apv2-row-check{opacity:0; transition:opacity var(--apv2-dur) var(--apv2-ease); display:inline-flex; cursor:pointer} .apv2-row:hover .apv2-row-check,.apv2-row.is-checked .apv2-row-check,.apv2-row:focus-within .apv2-row-check{opacity:1} .apv2-row-check input{position:absolute;opacity:0;pointer-events:none} .apv2-row-check-box{ width:14px;height:14px;border-radius:3px;border:1.5px solid var(--apv2-ink-5); display:inline-grid;place-items:center;background:var(--apv2-surface);color:transparent; transition:all var(--apv2-dur) var(--apv2-ease); } .apv2-row-check:hover .apv2-row-check-box{border-color:var(--apv2-gold)} .apv2-row.is-checked .apv2-row-check-box{background:var(--apv2-gold);border-color:var(--apv2-gold);color:#fff} body.theme-dark .apv2-row.is-checked .apv2-row-check-box{color:#1A1612} .apv2-row-avatar{ position:relative; width:26px; height:26px; border-radius:50%; background:var(--apv2-surface-2); display:grid; place-items:center; font-size:10.5px; font-weight:500; color:var(--apv2-ink-2); border:1px solid var(--apv2-div-2); } .apv2-row-pulse{ position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%; background:var(--apv2-gold-amber); box-shadow:0 0 0 2px var(--apv2-surface); } .apv2-row-pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--apv2-gold-amber); animation:apv2Pulse 1.8s ease-out infinite; } @keyframes apv2Pulse{0%{transform:scale(1);opacity:.6}80%{transform:scale(2.2);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.apv2-row-pulse::after{animation:none}} .apv2-row-person{min-width:0} .apv2-row-name{font-weight:500; font-size:13.5px; color:var(--apv2-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .apv2-row-team{font-size:11.5px; color:var(--apv2-ink-4); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .apv2-page[data-density="dense"] .apv2-row-team{display:none} .apv2-row-type{display:flex;align-items:center;gap:8px;color:var(--apv2-ink-2);font-size:12.5px;min-width:0} .apv2-row-type-icon{ width:18px; height:18px; border-radius:5px; display:grid; place-items:center; color:var(--apv2-gold-deep); background:color-mix(in oklab, var(--apv2-gold-deep) 12%, transparent); flex-shrink:0; } .apv2-row-type-label{font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .apv2-row-type-label .apv2-days{color:var(--apv2-ink-4); font-size:11.5px; margin-left:4px} .apv2-row-period{min-width:0; font-size:12.5px; color:var(--apv2-ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .apv2-row-period strong{color:var(--apv2-ink); font-weight:500} .apv2-row-period .apv2-dash{color:var(--apv2-ink-5); margin:0 3px} .apv2-row-submitted{font-size:11.5px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right} .apv2-row-actions{display:flex; gap:4px; opacity:0; transform:translateX(4px); transition:opacity var(--apv2-dur) var(--apv2-ease), transform var(--apv2-dur) var(--apv2-ease)} .apv2-row:hover .apv2-row-actions,.apv2-row:focus-within .apv2-row-actions,.apv2-row.is-focused .apv2-row-actions,.apv2-row.is-open .apv2-row-actions{opacity:1; transform:none} .apv2-icon-btn{ width:26px; height:26px; border-radius:7px; border:1px solid var(--apv2-div-2); background:var(--apv2-surface); color:var(--apv2-ink-3); display:inline-grid; place-items:center; cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); } .apv2-icon-btn:hover{color:var(--apv2-ink);border-color:var(--apv2-ink-5);background:var(--apv2-surface-2)} .apv2-icon-btn-approve:hover{color:#fff;background:var(--apv2-gold);border-color:var(--apv2-gold)} body.theme-dark .apv2-icon-btn-approve:hover{color:#1A1612} .apv2-icon-btn-decline:hover{color:var(--apv2-danger);border-color:color-mix(in oklab, var(--apv2-danger) 40%, var(--apv2-div-2));background:var(--apv2-danger-wash)} .apv2-row-expand{ grid-column:2 / -1; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px; padding:0; overflow:hidden; max-height:0; opacity:0; transition:max-height var(--apv2-dur-2) var(--apv2-ease), opacity var(--apv2-dur-2) var(--apv2-ease), padding var(--apv2-dur-2) var(--apv2-ease); } .apv2-row.is-open{background:var(--apv2-surface-2)} .apv2-row.is-open .apv2-row-expand{max-height:160px; opacity:1; padding:4px 4px 14px} .apv2-row-expand-label{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--apv2-ink-4); font-weight:500; margin-bottom:5px} .apv2-row-note,.apv2-row-coll{font-size:12.5px; color:var(--apv2-ink-2); line-height:1.5} .apv2-row-coll.warn{color:var(--apv2-gold-amber); font-weight:500} .apv2-row-history{display:flex;flex-direction:column;gap:3px} .apv2-row-history-row{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--apv2-ink-3); font-variant-numeric:tabular-nums} .apv2-row-history-bar{position:relative; flex:1; height:2px; border-radius:2px; background:var(--apv2-div)} .apv2-row-history-bar>span{position:absolute; top:0; bottom:0; background:var(--apv2-gold); border-radius:2px; opacity:.7} .apv2-row-history-date{min-width:54px; font-size:10.5px; color:var(--apv2-ink-4)} .apv2-row-history-empty{font-size:11px;color:var(--apv2-ink-4);font-style:italic} /* ROLLUP */ .apv2-rollup{ display:flex; align-items:center; gap:12px; padding:10px 16px 10px 14px; background:var(--apv2-surface-sunk); border-bottom:1px solid var(--apv2-div); font-size:12.5px; color:var(--apv2-ink-2); cursor:pointer; transition:background var(--apv2-dur) var(--apv2-ease); } .apv2-rollup:hover{background:color-mix(in oklab, var(--apv2-surface-sunk) 70%, var(--apv2-gold-wash))} .apv2-rollup-label{font-weight:500; color:var(--apv2-ink)} .apv2-rollup-hint{color:var(--apv2-ink-4); font-size:11.5px} .apv2-rollup-btn{ margin-left:auto; border:1px solid var(--apv2-div-2); background:var(--apv2-surface); color:var(--apv2-ink-2); font-size:11.5px; padding:4px 10px; border-radius:6px; cursor:pointer; transition:all var(--apv2-dur) var(--apv2-ease); font-family:var(--apv2-font-sans); } .apv2-rollup-btn:hover{color:var(--apv2-gold-ink); border-color:var(--apv2-gold-wash-2); background:var(--apv2-gold-wash)} .apv2-rollup-stack{display:flex} .apv2-rollup-stack .apv2-row-avatar{margin-left:-6px; border:2px solid var(--apv2-surface-sunk)} .apv2-rollup-stack .apv2-row-avatar:first-child{margin-left:0} /* BUTTONS (scoped) */ .apv2-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:all var(--apv2-dur) var(--apv2-ease);font-family:var(--apv2-font-sans)} .apv2-btn-primary{background:var(--apv2-gold);color:#fff;box-shadow:var(--apv2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.15)} body.theme-dark .apv2-btn-primary{color:#1A1612} .apv2-btn-primary:hover{background:color-mix(in oklab, var(--apv2-gold) 88%, black); transform:translateY(-1px); box-shadow:var(--apv2-shadow-md)} .apv2-btn-outline{background:transparent; border-color:var(--apv2-div-2); color:var(--apv2-ink-2)} .apv2-btn-outline:hover{color:var(--apv2-ink); border-color:var(--apv2-ink-5); background:var(--apv2-surface)} .apv2-btn-ghost{background:transparent; color:var(--apv2-ink-3); padding:7px 10px} .apv2-btn-ghost:hover{color:var(--apv2-ink); background:var(--apv2-surface-2)} /* BULKBAR */ .apv2-bulkbar{position:fixed; left:50%; transform:translate(-50%,20px); bottom:22px; z-index:50; opacity:0; pointer-events:none; transition:transform var(--apv2-dur-2) var(--apv2-ease), opacity var(--apv2-dur-2) var(--apv2-ease)} .apv2-bulkbar.is-open{transform:translate(-50%,0); opacity:1; pointer-events:auto} .apv2-bulkbar-inner{ display:flex; align-items:center; gap:12px; background:var(--apv2-surface); border:1px solid var(--apv2-gold-wash-2); box-shadow:var(--apv2-shadow-lg); padding:8px 8px 8px 18px; border-radius:999px; min-width:420px; } .apv2-bulkbar-count{display:inline-flex; align-items:center; gap:8px; color:var(--apv2-ink-2); font-size:13px; padding-right:10px; border-right:1px solid var(--apv2-div)} .apv2-bulkbar-count strong{color:var(--apv2-ink); font-weight:500} .apv2-bulkbar-dot{width:6px;height:6px;border-radius:50%;background:var(--apv2-gold);box-shadow:0 0 0 3px var(--apv2-gold-wash-2)} .apv2-bulkbar-actions{display:flex; gap:6px; margin-left:auto} /* EMPTY */ .apv2-empty{ max-width:560px; margin:80px auto 100px; padding:48px 40px; text-align:center; background: radial-gradient(1200px 200px at 50% -60px, var(--apv2-gold-wash), transparent 70%), var(--apv2-surface); border-radius:var(--apv2-r-xl); box-shadow:var(--apv2-shadow-md); border:1px solid var(--apv2-div); } .apv2-empty-mark{width:60px; height:60px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%; color:var(--apv2-gold); background:var(--apv2-gold-wash); border:1px solid var(--apv2-gold-wash-2)} .apv2-empty-title{font-family:var(--apv2-font-serif); font-size:26px; font-weight:500; letter-spacing:-.015em; margin:0 0 8px; color:var(--apv2-ink)} .apv2-empty-sub{color:var(--apv2-ink-3); margin:0 auto; max-width:420px} .apv2-empty-sub strong{color:var(--apv2-ink); font-weight:500} /* RESPONSIVE */ @media (max-width:900px){ .apv2-stats{grid-template-columns:repeat(2, 1fr)} .apv2-row{grid-template-columns:22px 28px 1fr auto} .apv2-row-type,.apv2-row-period,.apv2-row-submitted{display:none} .apv2-header-inner{padding:18px 16px 0} .apv2-stats,.apv2-control,.apv2-active-filters,.apv2-list{padding-left:16px;padding-right:16px} .apv2-bulkbar-inner{min-width:0} } /* ========================================================= APPROVALS v2 — SICK (Krankmeldungen) variant Amber accent, AU column, approve/decline colors ========================================================= */ .apv2-page.apv2-sick{ --apv2-amber-wash:rgba(198,139,60,.10); --apv2-amber-wash-2:rgba(198,139,60,.22); --apv2-amber-ink:#6A3E10; --apv2-danger-wash-2:rgba(168,65,44,.18); --apv2-approve:#5E8A4E; --apv2-approve-hover:#527A42; } body.theme-dark .apv2-page.apv2-sick{ --apv2-amber-wash:rgba(217,163,98,.12); --apv2-amber-wash-2:rgba(217,163,98,.22); --apv2-amber-ink:#F3CA8A; --apv2-danger-wash-2:rgba(208,119,97,.22); --apv2-approve:#7FA66B; --apv2-approve-hover:#6E955A; } .apv2-page.apv2-sick .apv2-row{ grid-template-columns: 22px 28px minmax(160px,1.2fr) minmax(90px,.5fr) minmax(140px,.95fr) minmax(130px,.8fr) 78px auto; } .apv2-page.apv2-sick .apv2-row::after{ background:var(--apv2-gold-amber); opacity:.8; } .apv2-page.apv2-sick .apv2-row[data-urgency="urgent"]::after{ background:var(--apv2-danger); opacity:.85 } .apv2-page.apv2-sick .apv2-stat.is-active::before{ background:var(--apv2-gold-amber); } .apv2-page.apv2-sick .apv2-stat-dot.urgent{background:var(--apv2-danger)} .apv2-page.apv2-sick .apv2-stat-dot.new{background:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-stat-dot.running{background:var(--apv2-gold)} .apv2-page.apv2-sick .apv2-stat-dot.missing{background:var(--apv2-gold-bronze)} .apv2-page.apv2-sick .apv2-stat-dot.return{background:var(--apv2-gold-pale)} .apv2-page.apv2-sick .apv2-chip.is-active{color:var(--apv2-amber-ink); background:var(--apv2-amber-wash); border-color:var(--apv2-amber-wash-2)} .apv2-page.apv2-sick .apv2-chip.is-active .apv2-chip-count{background:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-views-btn .apv2-star{color:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-active-filters-label::before{background:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-pill{background:var(--apv2-amber-wash); color:var(--apv2-amber-ink); border-color:var(--apv2-amber-wash-2)} .apv2-page.apv2-sick .apv2-pill:hover{background:var(--apv2-amber-wash-2)} .apv2-page.apv2-sick .apv2-pill-x{color:var(--apv2-amber-ink)} .apv2-page.apv2-sick .apv2-pill-x:hover{background:color-mix(in oklab, var(--apv2-gold-amber) 25%, transparent); color:var(--apv2-ink)} .apv2-page.apv2-sick .apv2-section-action:hover{color:var(--apv2-amber-ink); background:var(--apv2-amber-wash)} .apv2-page.apv2-sick .apv2-row-check:hover .apv2-row-check-box{border-color:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-row.is-checked .apv2-row-check-box{background:var(--apv2-gold-amber);border-color:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-row-pulse{background:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-row-pulse.is-urgent{background:var(--apv2-danger)} .apv2-page.apv2-sick .apv2-row-pulse::after{background:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-row-pulse.is-urgent::after{background:var(--apv2-danger)} .apv2-page.apv2-sick .apv2-row-type-icon{color:var(--apv2-gold-amber); background:var(--apv2-amber-wash)} .apv2-page.apv2-sick .apv2-rollup:hover{background:color-mix(in oklab, var(--apv2-surface-sunk) 70%, var(--apv2-amber-wash))} .apv2-page.apv2-sick .apv2-rollup-btn:hover{color:var(--apv2-amber-ink); border-color:var(--apv2-amber-wash-2); background:var(--apv2-amber-wash)} .apv2-page.apv2-sick .apv2-row-history-bar>span{background:var(--apv2-gold-amber)} .apv2-page.apv2-sick .apv2-empty-mark{color:var(--apv2-gold-amber); background:var(--apv2-amber-wash); border-color:var(--apv2-amber-wash-2)} .apv2-page.apv2-sick .apv2-bulkbar-inner{border-color:var(--apv2-amber-wash-2)} .apv2-page.apv2-sick .apv2-bulkbar-dot{background:var(--apv2-gold-amber); box-shadow:0 0 0 3px var(--apv2-amber-wash-2)} /* SICK: Approve button is green (Anerkennen), not gold */ .apv2-page.apv2-sick .apv2-icon-btn-approve:hover{color:#fff;background:var(--apv2-approve);border-color:var(--apv2-approve)} body.theme-dark .apv2-page.apv2-sick .apv2-icon-btn-approve:hover{color:#14110D} .apv2-page.apv2-sick .apv2-icon-btn-decline:hover{color:#fff;background:var(--apv2-danger);border-color:var(--apv2-danger)} .apv2-page.apv2-sick .apv2-btn-approve{background:var(--apv2-approve);color:#fff;box-shadow:var(--apv2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.15);border:1px solid transparent} body.theme-dark .apv2-page.apv2-sick .apv2-btn-approve{color:#14110D} .apv2-page.apv2-sick .apv2-btn-approve:hover{background:var(--apv2-approve-hover); transform:translateY(-1px); box-shadow:var(--apv2-shadow-md)} /* AU Pill */ .apv2-row-au{min-width:0} .apvs-au-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 7px; border-radius:999px; font-size:11px; font-weight:500; letter-spacing:.01em; white-space:nowrap; border:1px solid transparent; } .apvs-au-pill svg{flex-shrink:0} .apvs-au-pill.has{background:var(--apv2-gold-wash); color:var(--apv2-gold-ink); border-color:var(--apv2-gold-wash-2)} .apvs-au-pill.pending{background:var(--apv2-amber-wash); color:var(--apv2-amber-ink); border-color:var(--apv2-amber-wash-2)} .apvs-au-pill.overdue{background:var(--apv2-danger-wash); color:var(--apv2-danger); border-color:var(--apv2-danger-wash-2); font-weight:500} .apvs-au-pill.overdue .apvs-au-dot{width:5px;height:5px;border-radius:50%;background:var(--apv2-danger); animation:apvsPulseDot 1.8s ease-out infinite} @keyframes apvsPulseDot{0%,100%{opacity:1}50%{opacity:.4}} .apvs-au-download{ display:inline-flex; align-items:center; gap:7px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); padding:6px 10px 6px 9px; border-radius:7px; font-size:12px; color:var(--apv2-ink-2); cursor:pointer; margin-top:4px; transition:all var(--apv2-dur) var(--apv2-ease); font-family:var(--apv2-font-sans); } .apvs-au-download:hover{border-color:var(--apv2-gold); color:var(--apv2-ink); background:var(--apv2-gold-wash)} .apvs-au-download svg{color:var(--apv2-gold-ink)} /* Confirm modal for approve without AU */ .apvs-modal-backdrop{ position:fixed; inset:0; z-index:200; background:color-mix(in oklab, var(--apv2-bg) 50%, rgba(26,22,18,.35)); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity var(--apv2-dur-2) var(--apv2-ease); } .apvs-modal-backdrop.is-open{opacity:1; pointer-events:auto} .apvs-modal{ background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:var(--apv2-r-lg); box-shadow:var(--apv2-shadow-lg); padding:24px; width:460px; max-width:90vw; transform:translateY(8px); transition:transform var(--apv2-dur-2) var(--apv2-ease); font-family:var(--apv2-font-sans); } .apvs-modal-backdrop.is-open .apvs-modal{transform:none} .apvs-modal-icon{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--apv2-danger-wash); color:var(--apv2-danger); margin-bottom:14px; } .apvs-modal-title{font-family:var(--apv2-font-serif); font-size:20px; font-weight:500; letter-spacing:-.015em; margin:0 0 6px; color:var(--apv2-ink)} .apvs-modal-body{color:var(--apv2-ink-3); font-size:13px; line-height:1.55; margin:0 0 18px} .apvs-modal-body strong{color:var(--apv2-ink); font-weight:500} .apvs-modal-actions{display:flex; gap:8px; justify-content:flex-end} @media (max-width:900px){ .apv2-page.apv2-sick .apv2-row{grid-template-columns:22px 28px 1fr auto} } /* ========================================================= CREATE REQUEST — Unified Antrag stellen (Claude Design) Scoped to #request-new.cr-page ========================================================= */ .cr-page{ --cr-cream-00:#FFFDF8; --cr-cream-05:#FAF6EF; --cr-cream-10:#F6F0E2; --cr-cream-20:#EFE7D3; --cr-cream-30:#E4D7B8; --cr-ink-90:#1A1612; --cr-ink-70:#3A332A; --cr-ink-50:#6B6050; --cr-ink-30:#9A8F7D; --cr-gold-deep:#A8863E; --cr-gold-amber:#C68B3C; --cr-gold-pale:#DCC899; --cr-gold-bronze:#8C6A3A; --cr-gold-soft:#D3B977; --cr-gold-muted:#B89A6A; --cr-gold-wash:rgba(197,165,90,.10); --cr-gold-hair:rgba(197,165,90,.35); --cr-amber-warn:#D79B3C; --cr-green-ok:#5E8A4E; --cr-red-flag:#A8412C; --cr-bg:var(--cr-cream-05); --cr-surface:var(--cr-cream-00); --cr-line:rgba(26,22,18,.10); --cr-line-soft:rgba(26,22,18,.06); --cr-r-s:6px; --cr-r-m:14px; --cr-r-l:22px; --cr-shadow-xs:0 1px 0 rgba(92,66,20,.04); --cr-shadow-s:0 4px 20px -8px rgba(92,66,20,.18); --cr-shadow-m:0 20px 60px -30px rgba(92,66,20,.25); --cr-ff-serif:"Fraunces","Cormorant Garamond","Times New Roman",serif; --cr-ff-sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; --cr-ff-mono:ui-monospace,"SF Mono",Menlo,monospace; background:var(--cr-bg); color:var(--cr-ink-90); font-family:var(--cr-ff-sans); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; letter-spacing:-.003em; margin:-24px -28px 0; padding:0; min-height:calc(100vh - 60px); position:relative; } body.theme-dark .cr-page{ --cr-cream-00:#1A1612; --cr-cream-05:#14110D; --cr-cream-10:#211C16; --cr-cream-20:#2B251D; --cr-cream-30:#3A332A; --cr-ink-90:#F3ECDC; --cr-ink-70:#D9CFB8; --cr-ink-50:#A89B80; --cr-ink-30:#786E57; --cr-gold-wash:rgba(212,185,119,.10); --cr-gold-hair:rgba(212,185,119,.35); --cr-line:rgba(243,236,220,.12); --cr-line-soft:rgba(243,236,220,.07); } @media (max-width:900px){ .cr-page{ margin:-16px; } } .cr-page *{box-sizing:border-box} .cr-page button{font:inherit;color:inherit} .cr-page :focus-visible{outline:2px solid var(--cr-gold-deep);outline-offset:2px;border-radius:var(--cr-r-s)} .cr-serif{font-family:var(--cr-ff-serif);font-weight:400;letter-spacing:-.015em} /* HEADER */ .cr-header{ max-width:1400px; margin:0 auto; padding:40px 40px 28px; display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--cr-line-soft); flex-wrap:wrap; gap:20px; } .cr-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cr-ink-50); margin:0 0 16px; } .cr-eyebrow::before{content:"";width:28px;height:1px;background:var(--cr-gold-deep)} .cr-title{ font-family:var(--cr-ff-serif); font-size:clamp(36px, 5vw, 64px); font-weight:300; line-height:1.0; margin:0 0 10px; letter-spacing:-.028em; color:var(--cr-ink-90); } .cr-accent{font-style:italic;color:var(--cr-gold-bronze);font-weight:400} .cr-subtitle{ font-family:var(--cr-ff-serif); font-style:italic; font-size:17px; color:var(--cr-ink-50); font-weight:300; margin:0; } .cr-header-aside{ font-family:var(--cr-ff-serif); font-size:12px; color:var(--cr-ink-50); text-align:right; letter-spacing:.02em; padding-bottom:6px; } .cr-num{display:block;font-size:28px;font-weight:300;color:var(--cr-ink-90);letter-spacing:-.02em;margin-bottom:2px} /* LAYOUT */ .cr-layout{ max-width:1400px; margin:0 auto; padding:36px 40px 140px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; } .cr-form-wrap{min-width:0} /* STEPS */ .cr-step-label{display:flex;align-items:baseline;gap:14px;margin-bottom:20px} .cr-step-title{font-family:var(--cr-ff-serif);font-size:22px;font-weight:400;margin:0;letter-spacing:-.015em;color:var(--cr-ink-90)} .cr-step-hint{margin-left:auto;font-size:12px;color:var(--cr-ink-50);font-family:var(--cr-ff-serif);font-style:italic} /* Type grid */ .cr-type-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:44px; transition:opacity .3s ease; } .cr-type-card{ position:relative; background:var(--cr-surface); border:1px solid var(--cr-line); border-radius:var(--cr-r-m); padding:22px 20px; cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .3s, opacity .3s; overflow:hidden; min-height:148px; display:flex; flex-direction:column; gap:14px; font-family:var(--cr-ff-sans); text-align:left; } .cr-type-card::before{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--cr-type-color, var(--cr-gold-deep)); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .cr-type-card:hover{transform:translateY(-3px);border-color:var(--cr-gold-hair);box-shadow:var(--cr-shadow-s)} .cr-type-card:hover::before{transform:scaleX(1)} .cr-type-card.selected{border-color:var(--cr-type-color, var(--cr-gold-deep));box-shadow:0 0 0 3px color-mix(in oklab, var(--cr-type-color, var(--cr-gold-deep)) 15%, transparent)} .cr-type-card.selected::before{transform:scaleX(1)} .cr-type-card.dim{opacity:.35; filter:saturate(.5)} .cr-type-icon{ width:40px; height:40px; border-radius:10px; background:color-mix(in oklab, var(--cr-type-color, var(--cr-gold-deep)) 18%, var(--cr-cream-10)); color:var(--cr-type-color, var(--cr-gold-deep)); display:grid; place-items:center; transition:transform .4s; } .cr-type-card:hover .cr-type-icon{transform:rotate(-4deg) scale(1.05)} .cr-type-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4} .cr-type-name{font-family:var(--cr-ff-serif);font-size:19px;font-weight:400;letter-spacing:-.012em;margin:0;color:var(--cr-ink-90)} .cr-type-desc{font-size:12.5px;color:var(--cr-ink-50);line-height:1.45;margin:-6px 0 0} /* Chip */ .cr-type-chip{ display:none; align-items:center; gap:12px; padding:10px 14px 10px 10px; background:var(--cr-surface); border:1px solid var(--cr-line); border-radius:999px; margin-bottom:24px; width:fit-content; } .cr-type-chip.show{display:inline-flex} .cr-type-chip .cr-type-icon{width:28px;height:28px;border-radius:8px} .cr-type-chip .cr-type-icon svg{width:15px;height:15px} .cr-chip-name{font-family:var(--cr-ff-serif);font-size:15px;color:var(--cr-ink-90)} .cr-chip-change{ font-size:11px; color:var(--cr-gold-bronze); cursor:pointer; padding:4px 10px; border-radius:999px; border:1px solid var(--cr-gold-hair); background:transparent; letter-spacing:.04em; text-transform:uppercase; font-family:var(--cr-ff-sans); } .cr-chip-change:hover{background:var(--cr-gold-wash)} /* Step 2 */ .cr-step-2{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; max-height:0; overflow:hidden; } .cr-step-2.active{opacity:1;transform:none;pointer-events:auto;max-height:none;overflow:visible} /* DATEPICKER */ .cr-dp-wrap{ background:var(--cr-surface); border:1px solid var(--cr-line); border-radius:var(--cr-r-m); padding:22px 24px 18px; margin-bottom:24px; } .cr-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px} .cr-dp-nav{display:flex;gap:6px} .cr-dp-nav button{ width:32px; height:32px; border-radius:8px; border:1px solid var(--cr-line); background:var(--cr-surface); color:var(--cr-ink-70); display:grid; place-items:center; cursor:pointer; transition:all .2s; } .cr-dp-nav button:hover{background:var(--cr-gold-wash);border-color:var(--cr-gold-hair);color:var(--cr-gold-deep)} .cr-dp-info{display:flex;align-items:center;gap:10px;font-family:var(--cr-ff-serif);font-size:14px;color:var(--cr-ink-70);flex-wrap:wrap} .cr-dp-info .cr-num{display:inline;font-size:22px;color:var(--cr-gold-deep);font-weight:400;margin-bottom:0} .cr-dp-info .cr-sep{color:var(--cr-ink-30);margin:0 4px} .cr-dp-months{display:grid;grid-template-columns:1fr 1fr;gap:32px} .cr-dp-month-title{font-family:var(--cr-ff-serif);font-size:16px;margin:0 0 14px;display:flex;align-items:baseline;gap:8px;color:var(--cr-ink-90);font-weight:400} .cr-dp-month-title .cr-year{color:var(--cr-ink-50);font-size:13px;font-style:italic} .cr-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .cr-dp-wk{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--cr-ink-30);text-align:center;padding:6px 0 10px;font-weight:500} .cr-dp-day{ aspect-ratio:1; display:grid; place-items:center; font-size:13px; color:var(--cr-ink-70); cursor:pointer; position:relative; border-radius:8px; transition:background .15s, color .15s; user-select:none; } .cr-dp-day:hover:not(.muted):not(.selected){background:var(--cr-cream-10)} .cr-dp-day.muted{color:var(--cr-ink-30);cursor:default;opacity:.5} .cr-dp-day.weekend{color:var(--cr-ink-50)} .cr-dp-day.today{outline:1px solid var(--cr-gold-deep);outline-offset:-2px;font-weight:500} .cr-dp-day.in-range{background:var(--cr-gold-wash);color:var(--cr-ink-90);border-radius:0} .cr-dp-day.range-start{background:var(--cr-gold-deep);color:var(--cr-cream-00);border-radius:8px 0 0 8px} .cr-dp-day.range-end{background:var(--cr-gold-deep);color:var(--cr-cream-00);border-radius:0 8px 8px 0} .cr-dp-day.range-start.range-end{border-radius:8px} body.theme-dark .cr-dp-day.range-start, body.theme-dark .cr-dp-day.range-end{color:#14110D} .cr-dp-day.holiday::after, .cr-dp-day.team-off::after{ content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--cr-amber-warn); } .cr-dp-day.team-off::after{background:var(--cr-red-flag)} .cr-dp-legend{display:flex;gap:22px;padding-top:14px;margin-top:14px;border-top:1px solid var(--cr-line-soft);font-size:11px;color:var(--cr-ink-50);flex-wrap:wrap} .cr-dp-legend span{display:flex;align-items:center;gap:6px} .cr-dot{width:6px;height:6px;border-radius:50%} .cr-dot.holiday{background:var(--cr-amber-warn)} .cr-dot.team{background:var(--cr-red-flag)} .cr-dot.today{border:1px solid var(--cr-gold-deep); background:transparent} /* FORM FIELDS */ .cr-field{margin-bottom:18px} .cr-field-label{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cr-ink-50); margin-bottom:8px; font-weight:500; font-family:var(--cr-ff-sans); } .cr-req{color:var(--cr-gold-bronze);margin-left:4px} .cr-toggle-group{ display:inline-flex; padding:4px; background:var(--cr-cream-10); border-radius:999px; border:1px solid var(--cr-line-soft); flex-wrap:wrap; gap:2px; } .cr-toggle-group button{ padding:8px 16px; border-radius:999px; border:0; background:transparent; cursor:pointer; font-family:var(--cr-ff-sans); font-size:12.5px; color:var(--cr-ink-70); transition:all .2s; } .cr-toggle-group button.active{background:var(--cr-surface);color:var(--cr-ink-90);box-shadow:var(--cr-shadow-xs);font-weight:500} .cr-input, .cr-textarea, .cr-select{ width:100%; padding:12px 14px; border:1px solid var(--cr-line); border-radius:10px; background:var(--cr-surface); color:var(--cr-ink-90); font-family:var(--cr-ff-sans); font-size:14px; transition:border-color .2s, box-shadow .2s; outline:none; } .cr-textarea{min-height:96px; resize:vertical; font-family:var(--cr-ff-serif); font-size:15px; line-height:1.55} .cr-textarea::placeholder{font-family:var(--cr-ff-serif);font-style:italic;color:var(--cr-ink-30)} .cr-input:focus, .cr-textarea:focus, .cr-select:focus{border-color:var(--cr-gold-deep);box-shadow:0 0 0 3px color-mix(in oklab, var(--cr-gold-deep) 15%, transparent)} .cr-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cr-select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--cr-ink-50) 50%), linear-gradient(135deg, var(--cr-ink-50) 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px; } /* Pegasus Encryption Badge */ .pgc-badge{ display:inline-flex; align-items:center; gap:.45rem; margin-top:10px; padding:.35rem .7rem; border-radius:999px; background:#FAF6EF; border:1px solid #C5A55A; color:#0F1B2D; font-size:.78rem; font-weight:600; line-height:1.3; cursor:help; } .pgc-badge-lock{ font-size:.9rem; } .cr-dropzone{ display:block; border:1.5px dashed var(--cr-line); border-radius:12px; padding:28px 20px; text-align:center; transition:all .2s; cursor:pointer; background:color-mix(in oklab, var(--cr-cream-10) 60%, transparent); } .cr-dropzone:hover{border-color:var(--cr-gold-deep); background:var(--cr-gold-wash)} .cr-dropzone.has-file{border-style:solid;border-color:var(--cr-gold-deep);background:var(--cr-gold-wash)} .cr-dz-ic{ width:40px; height:40px; border-radius:10px; margin:0 auto 10px; background:var(--cr-surface); border:1px solid var(--cr-line); display:grid; place-items:center; color:var(--cr-gold-bronze); } .cr-dz-title{font-family:var(--cr-ff-serif);font-size:15px;margin-bottom:4px;color:var(--cr-ink-90)} .cr-dz-sub{font-size:11.5px;color:var(--cr-ink-50)} /* Validation cards */ .cr-checks{display:flex; flex-direction:column; gap:10px; margin:22px 0 12px} .cr-check{ display:flex; gap:12px; align-items:flex-start; padding:12px 16px; background:var(--cr-surface); border:1px solid var(--cr-line-soft); border-left:3px solid var(--cr-amber-warn); border-radius:8px; font-size:13px; } .cr-check.ok{border-left-color:var(--cr-green-ok)} .cr-check.warn{border-left-color:var(--cr-amber-warn)} .cr-check.err{border-left-color:var(--cr-red-flag)} .cr-check .cr-check-ic{ font-family:var(--cr-ff-serif); width:18px; height:18px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:11px; background:color-mix(in oklab, currentColor 15%, transparent); color:var(--cr-amber-warn); } .cr-check.ok .cr-check-ic{color:var(--cr-green-ok)} .cr-check.err .cr-check-ic{color:var(--cr-red-flag)} .cr-check strong{font-weight:500;color:var(--cr-ink-90)} .cr-check .cr-check-text{color:var(--cr-ink-70);line-height:1.45} /* Conditional blocks */ .cr-cond{display:none} .cr-cond.show{display:block; animation:crFadeIn .4s ease} @keyframes crFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* CONTEXT PANEL */ .cr-context{ min-width:0; align-self:start; position:sticky; top:20px; display:flex; flex-direction:column; gap:18px; } .cr-c-card{background:var(--cr-surface);border:1px solid var(--cr-line);border-radius:var(--cr-r-m);padding:22px 24px} .cr-c-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px} .cr-c-title{font-family:var(--cr-ff-serif);font-size:16px;font-weight:400;letter-spacing:-.012em;margin:0;color:var(--cr-ink-90)} .cr-c-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cr-ink-30)} /* Donut */ .cr-donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .cr-donut{width:120px;height:120px;position:relative;flex-shrink:0} .cr-donut svg{transform:rotate(-90deg)} .cr-donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center} .cr-donut-big{font-family:var(--cr-ff-serif);font-size:34px;font-weight:300;letter-spacing:-.025em;line-height:1;color:var(--cr-ink-90)} .cr-donut-den{color:var(--cr-ink-30);font-size:18px} .cr-donut-lbl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cr-ink-50);margin-top:3px} .cr-donut-legend{flex:1;display:flex;flex-direction:column;gap:6px;min-width:140px} .cr-donut-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:5px 0;border-bottom:1px dotted var(--cr-line-soft)} .cr-donut-row:last-child{border-bottom:none} .cr-lbl-row{display:flex;align-items:center;gap:8px;color:var(--cr-ink-70)} .cr-swatch{width:10px;height:10px;border-radius:3px} .cr-val{font-family:var(--cr-ff-serif);color:var(--cr-ink-90);font-size:14px} /* History */ .cr-history{display:flex;flex-direction:column} .cr-h-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dotted var(--cr-line-soft);font-size:13px} .cr-h-item:last-child{border-bottom:none} .cr-h-item .cr-h-status{width:8px;height:8px;border-radius:50%;flex-shrink:0} .cr-h-item.approved .cr-h-status{background:var(--cr-green-ok)} .cr-h-item.pending .cr-h-status{background:var(--cr-amber-warn)} .cr-h-item.rejected .cr-h-status{background:var(--cr-red-flag)} .cr-h-label{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0} .cr-h-name{font-family:var(--cr-ff-serif);font-size:14px;color:var(--cr-ink-90);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr-h-date{font-size:11px;color:var(--cr-ink-50);font-family:var(--cr-ff-mono);white-space:nowrap} /* SUBMIT BAR */ .cr-submit-bar{ position:fixed; bottom:0; left:0; right:0; z-index:40; background:color-mix(in oklab, var(--cr-surface) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--cr-line); padding:14px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; transform:translateY(110%); transition:transform .5s cubic-bezier(.2,.7,.2,1); } .cr-submit-bar.show{transform:none} .cr-summary{display:flex;align-items:center;gap:14px;font-family:var(--cr-ff-serif);font-size:15px;color:var(--cr-ink-90);min-width:0} .cr-summary .cr-dot{width:6px;height:6px;border-radius:50%;background:var(--cr-gold-deep);flex-shrink:0} .cr-sum-meta{font-size:11.5px;color:var(--cr-ink-50);letter-spacing:.04em;font-family:var(--cr-ff-sans);text-transform:uppercase;margin-bottom:2px} .cr-sum-main{font-family:var(--cr-ff-serif);font-size:14px} .cr-sum-main strong{font-weight:400;color:var(--cr-ink-90)} .cr-actions{display:flex;gap:10px;flex-wrap:wrap} .cr-btn{ padding:12px 22px; border-radius:999px; font-family:var(--cr-ff-sans); font-size:13px; font-weight:500; letter-spacing:.02em; cursor:pointer; transition:all .2s; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; } .cr-btn-ghost{background:transparent;border-color:var(--cr-line);color:var(--cr-ink-70)} .cr-btn-ghost:hover{border-color:var(--cr-ink-50);color:var(--cr-ink-90)} .cr-btn-primary{background:var(--cr-ink-90);color:var(--cr-cream-00);border-color:var(--cr-ink-90)} .cr-btn-primary:hover{background:var(--cr-gold-bronze);border-color:var(--cr-gold-bronze)} .cr-btn-primary:disabled{opacity:.5;cursor:not-allowed} .cr-spinner{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--cr-cream-00); border-top-color:transparent; animation:crSpin .7s linear infinite; display:none; } .cr-btn.loading .cr-spinner{display:block} .cr-btn.loading .cr-btn-label{opacity:.7} @keyframes crSpin{to{transform:rotate(360deg)}} /* SUCCESS OVERLAY */ .cr-success{ position:fixed; inset:0; z-index:100; background:color-mix(in oklab, var(--cr-surface) 97%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:none; align-items:center; justify-content:center; flex-direction:column; gap:20px; animation:crFadeIn .5s ease; padding:20px; } .cr-success.show{display:flex} .cr-success-check{width:96px;height:96px} .cr-success-check svg{width:100%;height:100%} .cr-success-check circle, .cr-success-check path{ fill:none; stroke:var(--cr-gold-deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .cr-success-check circle{stroke-dasharray:283;stroke-dashoffset:283;animation:crDrawC 1s cubic-bezier(.2,.7,.2,1) forwards} .cr-success-check path{stroke-dasharray:50;stroke-dashoffset:50;animation:crDrawC .6s .7s cubic-bezier(.2,.7,.2,1) forwards} @keyframes crDrawC{to{stroke-dashoffset:0}} .cr-success h2{font-family:var(--cr-ff-serif);font-size:clamp(32px,5vw,56px);font-weight:300;letter-spacing:-.025em;margin:0;color:var(--cr-ink-90);text-align:center} .cr-success h2 em{color:var(--cr-gold-bronze);font-style:italic} .cr-success p{color:var(--cr-ink-50);font-family:var(--cr-ff-serif);font-style:italic;font-size:16px;margin:0;text-align:center} /* RESPONSIVE */ @media (max-width: 960px){ .cr-layout{grid-template-columns:1fr;gap:32px;padding:28px 20px 180px} .cr-context{position:static} .cr-header{padding:28px 20px 20px} .cr-type-grid{grid-template-columns:repeat(2,1fr)} .cr-dp-months{grid-template-columns:1fr;gap:24px} .cr-submit-bar{padding:12px 16px;flex-direction:column;gap:10px;align-items:stretch} .cr-summary{justify-content:flex-start} .cr-actions{justify-content:flex-end} .cr-header{flex-direction:column;align-items:flex-start;gap:16px} .cr-header-aside{text-align:left} .cr-two-col{grid-template-columns:1fr;gap:12px} } @media (max-width: 480px){ .cr-type-grid{grid-template-columns:1fr} .cr-title{font-size:32px} } /* ========================================================= GLOBAL RESPONSIVE — Tablet (769–1024) & Mobile additions ========================================================= */ /* === TABLET (769–1024px) === */ @media (min-width: 769px) and (max-width: 1024px) { /* Sidebar tighter */ :root { --sidebar-w: 220px; } .sidebar { width: var(--sidebar-w); } .sidebar.collapsed { width: 64px; } /* Content padding */ .content { padding: 18px 20px; } .header { padding: 12px 20px; } /* Grids */ .stats { grid-template-columns: repeat(2, 1fr); } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .db-kpi-row { grid-template-columns: repeat(2, 1fr); } .db-kpi-bento{ grid-template-columns: repeat(2, 1fr); } .db-kpi-quad { grid-template-columns: repeat(2, 1fr); } .db-grid, .db-main-grid, .db-content-grid { grid-template-columns: 1fr; } .db-widget-row .db-grid { grid-template-columns: 1fr 1fr !important; } .report-grid { grid-template-columns: repeat(2, 1fr); } .plan-cards-grid { grid-template-columns: repeat(2, 1fr); } .form-grid-2 { grid-template-columns: repeat(2, 1fr); } .setup-industry-grid { grid-template-columns: repeat(3, 1fr); } .quick-actions-grid { grid-template-columns: repeat(2, 1fr); } /* Tables horizontal scroll */ .ml-list, .schichtplan-wrap, #shiftGridContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Approvals v2 tablet */ .apv2-page { margin: -18px -20px 0; } .apv2-header-inner, .apv2-stats, .apv2-control, .apv2-active-filters, .apv2-list { padding-left: 20px; padding-right: 20px; } .apv2-stats { grid-template-columns: repeat(5, 1fr); } .apv2-stat { padding: 12px 14px; } .apv2-stat-val { font-size: 22px; } .apv2-h1 { font-size: 26px; } .apv2-search { width: 260px; } } /* === MOBILE additions (<=768px) === */ @media (max-width: 768px) { /* Page outer */ .content { padding: 16px; } .header { padding: 10px 14px; gap: 10px; } /* Close sidebar on page change hook (visual only) */ .sidebar { box-shadow: 4px 0 24px rgba(0,0,0,0.15); } /* Touch targets */ .btn, .btn-primary, .btn-secondary, .menu-item, .header-actions button { min-height: 40px; } input, select, textarea { font-size: 16px; } /* prevent iOS zoom */ /* Modals full-screen-ish */ .modal-dialog, .modal-content { max-width: 94vw !important; width: 94vw !important; margin: 12px auto; border-radius: 14px !important; } /* Page headers */ .page-head { flex-direction: column; align-items: stretch; padding: 16px; gap: 12px; } .page-head-title { font-size: 18px; } .page-head-sub { font-size: 12px; } .page-head-actions { width: 100%; justify-content: stretch; flex-wrap: wrap; } .page-head-actions .btn { flex: 1; justify-content: center; min-width: 0; } /* Tables → scroll wrapper */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .ml-list, .ml-list-header, .ml-row { grid-template-columns: 38px 3px 1fr auto !important; gap: 10px !important; padding: 12px !important; } .ml-list-header { font-size: 9px; } /* Hide less-important columns on narrow */ .ml-row > .ml-col-hide-mobile, .ml-list-header > .ml-col-hide-mobile { display: none; } /* Calendar */ .calendar-grid { font-size: 11px; } .cal-cell { min-height: 44px !important; padding: 4px !important; } .cal-event { font-size: 10px; padding: 2px 4px; } /* Schichtplanung horizontal scroll */ #shiftGridContainer, .schichtplan-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Forms */ .form-grid-2 { grid-template-columns: 1fr !important; gap: 12px !important; } .form input, .form select, .form textarea { width: 100%; } /* Approvals v2 mobile extras */ .apv2-page { margin: -16px; } .apv2-h1 { font-size: 22px; } .apv2-count { font-size: 18px; } .apv2-header-row { flex-direction: column; align-items: stretch; gap: 10px; } .apv2-search { width: 100%; } .apv2-views { width: 100%; } .apv2-views-btn { width: 100%; justify-content: space-between; } .apv2-group-ctrl { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } .apv2-group-ctrl-label { display: none; } .apv2-seg { width: 100%; } .apv2-seg button { flex: 1; text-align: center; } .apv2-sort { width: 100%; } .apv2-sort select { flex: 1; } .apv2-stats { grid-template-columns: repeat(2, 1fr); } .apv2-stat { padding: 12px 14px; } .apv2-stat-val { font-size: 22px; } .apv2-control { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .apv2-control::-webkit-scrollbar { display: none; } .apv2-divider { display: none; } .apv2-chip { flex-shrink: 0; font-size: 12px; padding: 5px 10px; } .apv2-active-filters { padding-left: 16px; padding-right: 16px; } .apv2-list { padding-bottom: 120px; } .apv2-row { padding: 0 12px 0 12px; } .apv2-row-expand { grid-template-columns: 1fr; gap: 12px; } .apv2-row.is-open .apv2-row-expand { max-height: 280px; padding: 4px 4px 14px; } .apv2-section-head { padding: 10px 4px 6px; } .apv2-bulkbar { bottom: 76px; left: 8px; right: 8px; transform: none; } .apv2-bulkbar.is-open { transform: translateY(0); } .apv2-bulkbar-inner { width: 100%; min-width: 0; padding: 8px 10px; } .apv2-bulkbar-actions { flex-wrap: wrap; } } /* === TINY PHONE (<=400px) === */ @media (max-width: 400px) { .apv2-h1 { font-size: 20px; } .apv2-stats { grid-template-columns: 1fr 1fr; } .apv2-stat-val { font-size: 20px; } .apv2-row-team { font-size: 10.5px; } .page-head-actions .btn { font-size: 12px; padding: 6px 8px; } } /* === TOUCH DEVICES: disable hover-only reveal for actions === */ @media (hover: none) and (pointer: coarse) { .apv2-row-actions { opacity: 1 !important; transform: none !important; } .apv2-row-check { opacity: 1 !important; } .apv2-section-actions { opacity: 1 !important; } .ml-row .hover-only { opacity: 1 !important; } } /* ========================================================= SONDER-APPROVALS — Premium Scoped to .son-page (extends .apv2-page tokens) Akzent-Override über [data-sontype="..."] resp. [data-accent="..."] ========================================================= */ /* --- 1. Scope-Setup ------------------------------------------------------ */ /* .son-page erbt sämtliche apv2-Tokens (gleiche Custom-Property-Familie), bringt aber zusätzliche typ-spezifische Variablen mit, die Akzentfarben austauschbar machen, ohne Komponenten zu duplizieren. */ .son-page{ /* Akzent-Slots — werden per [data-accent] / [data-sontype] umgeschrieben */ --son-accent: var(--apv2-gold); --son-accent-deep: var(--apv2-gold-deep); --son-accent-soft: var(--apv2-gold-soft); --son-accent-pale: var(--apv2-gold-pale); --son-accent-ink: var(--apv2-gold-ink); --son-accent-wash: var(--apv2-gold-wash); --son-accent-wash-2: var(--apv2-gold-wash-2); /* Kontrast-Slot: Textfarbe auf Accent-gefüllten Buttons. Default #fff für dunkle Akzente; pro Typ überschreibbar. */ --son-accent-on: #fff; /* Timeline-Skala — typ-spezifisch in Tagen. Wird vom JS über inline --son-timeline-days und --son-timeline-now-pct gespeist. */ --son-timeline-days: 14; /* Status-Slots für typ-eigene Indikatoren */ --son-warn: var(--apv2-gold-amber); --son-danger: var(--apv2-danger); --son-ok: #5E8A4E; } /* --- 2. Akzent-Overrides per Typ ---------------------------------------- */ /* HOMEOFFICE — Standard Gold (Timeline 14 Tage, Wochen-Fenster) */ .son-page[data-sontype="homeoffice"]{ --son-timeline-days: 14; } /* SONDERURLAUB — Bronze (deutlich dunkler/wärmer als Gold) */ .son-page[data-sontype="sonderurlaub"]{ --son-accent: #8C6A3A; --son-accent-deep: #5C4214; --son-accent-soft: #B89A6A; --son-accent-pale: #DCC899; --son-accent-ink: #4A3414; --son-accent-wash: rgba(140,106,58,.10); --son-accent-wash-2: rgba(140,106,58,.22); --son-accent-on: #fff; --son-timeline-days: 30; } body.theme-dark .son-page[data-sontype="sonderurlaub"]{ --son-accent: #C29862; --son-accent-deep: #D9B47A; --son-accent-ink: #E9CB94; --son-accent-wash: rgba(194,152,98,.12); --son-accent-wash-2: rgba(194,152,98,.26); --son-accent-on: #1A1612; } /* FORTBILDUNG — Amber/Orange (deutlich heller/wärmer als Gold) */ .son-page[data-sontype="fortbildung"]{ --son-accent: #D88A2C; --son-accent-deep: #8B5418; --son-accent-soft: #E5A862; --son-accent-pale: #F2CD9A; --son-accent-ink: #6A3E10; --son-accent-wash: rgba(216,138,44,.10); --son-accent-wash-2: rgba(216,138,44,.22); --son-accent-on: #fff; --son-timeline-days: 60; } body.theme-dark .son-page[data-sontype="fortbildung"]{ --son-accent: #E2A766; --son-accent-deep: #F0BE82; --son-accent-ink: #F3CA8A; --son-accent-wash: rgba(226,167,102,.14); --son-accent-wash-2: rgba(226,167,102,.28); --son-accent-on: #1A1612; } /* ELTERNZEIT — Sage/Olive (klar abgesetzt vom Gold-Spektrum, ruhig/familiär) */ .son-page[data-sontype="elternzeit"]{ --son-accent: #7E9270; --son-accent-deep: #4F6242; --son-accent-soft: #A6B797; --son-accent-pale: #CFD9C4; --son-accent-ink: #2F4022; --son-accent-wash: rgba(126,146,112,.10); --son-accent-wash-2: rgba(126,146,112,.22); --son-accent-on: #fff; --son-timeline-days: 365; } body.theme-dark .son-page[data-sontype="elternzeit"]{ --son-accent: #9CB28E; --son-accent-deep: #B5C8A8; --son-accent-ink: #D2DEC6; --son-accent-wash: rgba(156,178,142,.12); --son-accent-wash-2: rgba(156,178,142,.26); --son-accent-on: #1A1612; } /* --- 3. Akzent-Re-Wiring der apv2-Komponenten ---------------------------- */ /* apv2-Komponenten lesen `--apv2-gold*` direkt — wir mappen die Akzent-Slots pro .son-page neu, sodass dieselben Komponenten die typ-eigene Farbe verwenden, ohne dass Komponenten dupliziert werden müssten. */ .son-page{ --apv2-gold: var(--son-accent); --apv2-gold-deep: var(--son-accent-deep); --apv2-gold-soft: var(--son-accent-soft); --apv2-gold-pale: var(--son-accent-pale); --apv2-gold-ink: var(--son-accent-ink); --apv2-gold-wash: var(--son-accent-wash); --apv2-gold-wash-2: var(--son-accent-wash-2); } /* --- 4. Typ-spezifische Row-Bestandteile -------------------------------- */ /* Eine kompaktere Row als apv2 mit zusätzlichem Meta-Slot rechts der Person */ .son-page .son-row{ position:relative; display:grid; align-items:center; gap:14px; padding:6px 16px 6px 14px; min-height:var(--apv2-row-h); border-radius:8px; cursor:pointer; outline:none; transition:background-color var(--apv2-dur) var(--apv2-ease); margin-bottom:6px; } .son-page .son-row:hover, .son-page .son-row.is-focused{ background:var(--apv2-surface-2); } .son-page .son-row::after{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--son-accent-deep); opacity:.7; } .son-page .son-row[data-urgency="urgent"]::after{ background:var(--apv2-danger); opacity:.85; } .son-page .son-row-check, .son-page .son-row-check-box, .son-page .son-row-avatar, .son-page .son-row-pulse{ /* spiegeln apv2 — bewusst gleicher Look */ } .son-page .son-row-name{ font-weight:500; font-size:13.5px; color:var(--apv2-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .son-page .son-row-team{ font-size:11.5px; color:var(--apv2-ink-4); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .son-page[data-density="dense"] .son-row-team{ display:none; } .son-page .son-row-detail{ min-width:0; font-size:12.5px; color:var(--apv2-ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .son-page .son-row-detail strong{ color:var(--apv2-ink); font-weight:500; } .son-page .son-row-detail .son-dash{ color:var(--apv2-ink-5); margin:0 3px; } .son-page .son-row-submitted{ font-size:11.5px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; } /* Type-Pill (klein, akzentgefärbt) */ .son-page .son-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px; border-radius:999px; font-size:11px; font-weight:500; letter-spacing:.01em; white-space:nowrap; border:1px solid transparent; background:var(--son-accent-wash); color:var(--son-accent-ink); border-color:var(--son-accent-wash-2); } .son-page .son-pill svg{ flex-shrink:0; opacity:.8; } .son-page .son-pill.is-warn{ background:rgba(215,155,60,.10); color:#7A4D10; border-color:rgba(215,155,60,.24); } body.theme-dark .son-page .son-pill.is-warn{ background:rgba(215,155,60,.14); color:#F2C58A; border-color:rgba(215,155,60,.28); } .son-page .son-pill.is-danger{ background:var(--apv2-danger-wash); color:var(--apv2-danger); border-color:rgba(168,65,44,.20); font-weight:500; } .son-page .son-pill.is-ok{ background:rgba(94,138,78,.10); color:var(--son-ok); border-color:rgba(94,138,78,.22); } body.theme-dark .son-page .son-pill.is-ok{ background:rgba(127,166,107,.14); color:#9FBF87; } .son-page .son-pill.is-muted{ background:transparent; color:var(--apv2-ink-3); border-color:var(--apv2-div-2); } /* Meta-Cell — Quote-Bar / Anlass / Kurs / Frist */ .son-page .son-meta{ min-width:0; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--apv2-ink-3); white-space:nowrap; overflow:hidden; } /* Quote-Bar (Homeoffice) */ .son-page .son-quota{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; } .son-page .son-quota-bar{ position:relative; flex:1; height:3px; border-radius:2px; background:var(--apv2-div); overflow:hidden; min-width:40px; } .son-page .son-quota-bar > span{ position:absolute; top:0; bottom:0; left:0; background:var(--son-accent); border-radius:2px; transition:width var(--apv2-dur-2) var(--apv2-ease); } .son-page .son-quota.is-warn .son-quota-bar > span{ background:var(--son-warn); } .son-page .son-quota.is-over .son-quota-bar > span{ background:var(--apv2-danger); } .son-page .son-quota-val{ font-family:var(--apv2-font-mono); font-size:10.5px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums; white-space:nowrap; } /* Konflikt-Indikator (Homeoffice) */ .son-page .son-conflict{ display:inline-flex; align-items:center; gap:5px; color:var(--apv2-danger); font-size:11.5px; font-weight:500; } .son-page .son-conflict::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--apv2-danger); /* Pulse läuft nur 5 Iterationen (≈9s), dann statisch — vermeidet Flacker-Effekt bei vielen offenen Konflikten gleichzeitig. */ animation:sonPulseDot 1.8s ease-out 5; } @keyframes sonPulseDot{ 0%,100%{opacity:1} 50%{opacity:.4} } @media (prefers-reduced-motion:reduce){ .son-page .son-conflict::before{ animation:none; } } /* Beleg-Indikator (Sonderurlaub) */ .son-page .son-proof{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; } .son-page .son-proof.has{ color:var(--son-accent-ink); } .son-page .son-proof.missing{ color:var(--apv2-ink-4); font-style:italic; } /* Budget-Indikator (Fortbildung) */ .son-page .son-budget{ display:inline-flex; align-items:center; gap:6px; font-family:var(--apv2-font-mono); font-size:11px; color:var(--apv2-ink-3); font-variant-numeric:tabular-nums; } .son-page .son-budget.is-tight{ color:var(--son-warn); font-weight:500; } .son-page .son-budget.is-over{ color:var(--apv2-danger); font-weight:500; } /* Frist-Status (Elternzeit) */ .son-page .son-deadline{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-variant-numeric:tabular-nums; } .son-page .son-deadline-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; } .son-page .son-deadline.is-ok .son-deadline-dot{ background:var(--son-ok); } .son-page .son-deadline.is-tight .son-deadline-dot{ background:var(--son-warn); } .son-page .son-deadline.is-missed .son-deadline-dot{ background:var(--apv2-danger); } .son-page .son-deadline.is-ok{ color:var(--apv2-ink-3); } .son-page .son-deadline.is-tight{ color:#7A4D10; font-weight:500; } body.theme-dark .son-page .son-deadline.is-tight{ color:#F2C58A; } .son-page .son-deadline.is-missed{ color:var(--apv2-danger); font-weight:500; } /* Pattern-Note (Homeoffice "Jeden Mi") */ .son-page .son-pattern{ font-size:11.5px; color:var(--apv2-ink-4); font-style:italic; margin-left:6px; } /* Kind-Geburtstag (Elternzeit) */ .son-page .son-child{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--apv2-ink-3); } .son-page .son-child::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--son-accent-soft); } /* Kurs/Anbieter (Fortbildung) */ .son-page .son-course{ display:flex; flex-direction:column; min-width:0; } .son-page .son-course-title{ font-size:12.5px; color:var(--apv2-ink-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .son-page .son-course-vendor{ font-size:11px; color:var(--apv2-ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Type-Icon im List-Row */ .son-page .son-row-type{ display:flex; align-items:center; gap:8px; min-width:0; } .son-page .son-row-type-icon{ width:18px; height:18px; border-radius:5px; display:grid; place-items:center; color:var(--son-accent-deep); background:color-mix(in oklab, var(--son-accent-deep) 12%, transparent); flex-shrink:0; } /* Action-Buttons (erben apv2) — Akzent-Tweak für Approve. Textfarbe via --son-accent-on, damit helle Akzente (z.B. Soft/Sage) einen kontrastreichen dunklen Text bekommen. */ .son-page .apv2-icon-btn-approve:hover{ color:var(--son-accent-on); background:var(--son-accent); border-color:var(--son-accent); } /* Genehmigen/Ablehnen wie in der Urlaubsliste: versteckt, erscheinen beim Hover — in EIGENER rechter Spalte (liegen NICHT mehr über "Dringlich"). */ .son-page .apv2-row-actions{ justify-self:end; align-self:center; gap:6px; } .son-page .son-row:hover .apv2-row-actions, .son-page .son-row:focus-within .apv2-row-actions, .son-page .son-row.is-open .apv2-row-actions{ opacity:1; transform:none; } .son-page .apv2-icon-btn{ width:30px; height:30px; } /* Decision-Spalte darf nicht in die Actions-Spalte bluten */ .son-page .son-row-submitted{ min-width:0; } /* --- 5. Section-Heads (gruppiert) --------------------------------------- */ .son-page .son-section{ display:flex; flex-direction:column; } .son-page .son-section-head{ display:flex; align-items:center; gap:10px; padding:12px 6px 8px; cursor:pointer; user-select:none; color:var(--apv2-ink-2); } .son-page .son-section-head:hover{ color:var(--apv2-ink); } .son-page .son-section-title{ font-family:var(--apv2-font-serif); font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--apv2-ink); } .son-page .son-section-count{ margin-left:6px; font-family:var(--apv2-font-mono); font-size:11.5px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums; } .son-page .son-section-body{ background:var(--apv2-surface); border-radius:var(--apv2-r-lg); box-shadow:var(--apv2-shadow-sm); overflow:hidden; padding:6px 6px 8px; } /* --- 6. Dark-Mode Feinheiten -------------------------------------------- */ body.theme-dark .son-page .son-row::after{ opacity:.85; } body.theme-dark .son-page .son-quota-bar{ background:rgba(243,236,220,.08); } /* --- 6b. Dark-Mode auf globalen Website-Tokens -------------------------- */ /* Erbt das, was apv2-base bereits umgemappt hat — bleibt nur als expliziter Anker für son-eigene Slots, falls jemand außerhalb .apv2-page rendert. */ body.theme-dark .son-page{ --son-bg: var(--bg-base); --son-surface: var(--bg-elevated); --son-ink: var(--text-primary); --son-gold: var(--accent); --son-gold-hover:var(--accent-hover); } /* --- 6c. Mini-Timeline pro Row ----------------------------------------- Skala adaptiv pro Typ via --son-timeline-days: - Homeoffice (14 T): Wochenend-Pattern (Sa/So sichtbar) - Sonderurlaub (30 T): leichte Wochen-Stripes - Fortbildung (60 T): Monats-Mitte-Marker - Elternzeit (365 T): Quartals-Marker ---------------------------------------------------------------------- */ .son-page .son-row-timeline{ position:relative; width:100%; height:24px; flex-shrink:0; border-radius:6px; border:1px solid var(--apv2-div); background:transparent; } /* Wochenend-Pattern: nur bei kurzen Skalen sichtbar */ .son-page[data-sontype="homeoffice"] .son-row-timeline{ background: repeating-linear-gradient( 90deg, transparent 0, transparent calc(100% / 14 * 5), color-mix(in oklab, var(--apv2-ink-4) 8%, transparent) calc(100% / 14 * 5), color-mix(in oklab, var(--apv2-ink-4) 8%, transparent) calc(100% / 14 * 7), transparent calc(100% / 14 * 7), transparent calc(100% / 14 * 12), color-mix(in oklab, var(--apv2-ink-4) 8%, transparent) calc(100% / 14 * 12), color-mix(in oklab, var(--apv2-ink-4) 8%, transparent) calc(100% / 14 * 14) ); } .son-page[data-sontype="sonderurlaub"] .son-row-timeline{ background: repeating-linear-gradient( 90deg, transparent 0, transparent calc(100% / 30 - 1px), color-mix(in oklab, var(--apv2-ink-4) 6%, transparent) calc(100% / 30 - 1px), color-mix(in oklab, var(--apv2-ink-4) 6%, transparent) calc(100% / 30) ); } .son-page[data-sontype="fortbildung"] .son-row-timeline, .son-page[data-sontype="elternzeit"] .son-row-timeline{ background: linear-gradient( to right, transparent 0, transparent calc(50% - 1px), color-mix(in oklab, var(--apv2-ink-4) 10%, transparent) calc(50% - 1px), color-mix(in oklab, var(--apv2-ink-4) 10%, transparent) 50%, transparent 50%, transparent 100% ); } .son-page .son-row-timeline-track{ position:absolute; inset:4px 6px; border-top:1px dashed var(--apv2-div-2); } .son-page .son-row-timeline-now{ position:absolute; top:2px; bottom:2px; width:1px; background:var(--son-accent-deep); opacity:.7; } .son-page .son-row-timeline-now::after{ content:""; position:absolute; top:-2px; left:-2px; width:5px; height:5px; border-radius:50%; background:var(--son-accent-deep); } .son-page .son-row-timeline-bar{ position:absolute; top:6px; bottom:6px; background:var(--son-accent); border-radius:3px; opacity:.85; box-shadow:0 1px 0 rgba(0,0,0,.06); } .son-page .son-row-timeline-bar.is-conflict{ /* box-shadow statt outline — wird in scrollbaren Containern nicht beschnitten */ box-shadow: 0 0 0 2px var(--son-warn); } .son-page .son-row-timeline-overlap{ position:absolute; top:6px; bottom:6px; background:var(--son-accent-pale); border-radius:3px; opacity:.55; display:grid; place-items:center; font:500 8.5px/1 var(--apv2-font-mono); color:var(--son-accent-ink); letter-spacing:.04em; overflow:hidden; text-transform:uppercase; } .son-page .son-row-timeline-overlap span{ padding:0 3px; } /* --- 6d. Resturlaub-Bar + Kontext-Microcopy ---------------------------- */ .son-page .son-row-context{ display:flex; align-items:center; gap:10px; margin-top:2px; font-size:11px; color:var(--apv2-ink-4); font-weight:450; white-space:nowrap; overflow:hidden; } .son-page .son-row-context > *{ flex-shrink:0; } .son-page .son-row-context .son-ctx-sep{ width:2px; height:2px; border-radius:50%; background:var(--apv2-ink-5); margin:0 2px; } .son-page .son-resturl{ display:inline-flex; align-items:center; gap:6px; color:var(--apv2-ink-3); } .son-page .son-resturl-bar{ display:inline-flex; gap:1.5px; } .son-page .son-resturl-bar i{ width:5px; height:9px; border-radius:1.5px; background:var(--apv2-surface-sunk); } .son-page .son-resturl-bar i.is-on{ background:var(--son-accent); } .son-page .son-resturl-bar i.is-warn{ background:var(--son-warn); } .son-page .son-resturl-val{ font-family:var(--apv2-font-mono); font-size:10.5px; color:var(--apv2-ink-3); font-variant-numeric:tabular-nums; } /* --- 6e. Decision-Anchor / Frist-Microcopy ----------------------------- */ .son-page .son-decision{ display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums; } .son-page .son-decision em{ font-style:normal; color:var(--son-accent-ink); font-weight:500; } .son-page .son-frist-pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 7px; border-radius:999px; font-size:10.5px; font-weight:500; letter-spacing:.02em; background:rgba(215,155,60,.10); color:#7A4D10; border:1px solid rgba(215,155,60,.24); white-space:nowrap; } body.theme-dark .son-page .son-frist-pill{ background:rgba(215,155,60,.14); color:#F2C58A; border-color:rgba(215,155,60,.28); } .son-page .son-frist-pill::before{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.7; } .son-page .son-frist-pill.is-danger{ background:var(--apv2-danger-wash); color:var(--apv2-danger); border-color:rgba(168,65,44,.20); } /* Updated grid: timeline-Spalte zwischen Detail und Submitted */ .son-page .son-row{ gap:10px; grid-template-columns: 22px 28px minmax(150px,1.4fr) /* Person */ minmax(96px,.7fr) /* Type-Pill */ minmax(130px,1fr) /* Detail / Period */ minmax(80px,.6fr) /* Meta */ 66px /* Mini-Timeline (klein) */ minmax(210px,1.8fr) /* Submitted / Decision (breit, fuer "Dringlich") */ 74px; /* Actions — eigene reservierte Spalte rechts */ } /* --- 7. Responsive ------------------------------------------------------ */ @media (max-width:900px){ .son-page .son-row{ grid-template-columns: 22px 28px 1fr auto; } .son-page .son-row-detail, .son-page .son-meta, .son-page .son-row-submitted, .son-page .son-row-timeline{ display:none; } .son-page .apv2-control{ flex-wrap:wrap; } .son-page .son-row-context{ flex-wrap:wrap; white-space:normal; } } /* ========================================================= 8. Decision-Streak-Microcopy (unter dem H1) ========================================================= */ .son-page .son-streak{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:6px 0 4px; font-size:11.5px; color:var(--apv2-ink-4); font-variant-numeric:tabular-nums; letter-spacing:.005em; } .son-page .son-streak strong{ color:var(--son-accent-ink); font-weight:500; font-family:var(--apv2-font-serif); font-size:13.5px; letter-spacing:-.005em; } .son-page .son-streak-sep{ width:3px; height:3px; border-radius:50%; background:var(--apv2-ink-5); align-self:center; } /* ========================================================= 9. Smart-Bulk-Quick-Picks (über der Bulkbar / oder als Suggestion) ========================================================= */ .son-page .son-smart-bulk{ position:sticky; bottom:74px; z-index:9; margin:14px auto 0; max-width:var(--apv2-page-max); padding:0 32px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; pointer-events:none; /* Container ignoriert Clicks, Buttons fangen sie */ } .son-page .son-smart-bulk:empty{ display:none; } .son-page .son-smart-pick{ pointer-events:auto; display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:999px; background:var(--apv2-surface); border:1px solid var(--son-accent-wash-2); color:var(--son-accent-ink); font:500 11.5px var(--apv2-font-sans); letter-spacing:.005em; cursor:pointer; box-shadow:var(--apv2-shadow-sm); transition:transform 140ms var(--apv2-ease), box-shadow 140ms var(--apv2-ease), background-color 140ms var(--apv2-ease); } .son-page .son-smart-pick:hover{ transform:translateY(-1px); background:var(--son-accent-wash); box-shadow:var(--apv2-shadow-md); } .son-page .son-smart-pick:focus-visible{ outline:2px solid var(--son-accent); outline-offset:2px; } .son-page .son-smart-pick .son-smart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--son-accent); color:var(--son-accent-on); font-family:var(--apv2-font-mono); font-size:10.5px; font-weight:600; } .son-page .son-smart-pick svg{ width:11px; height:11px; opacity:.75; } @media (max-width:900px){ .son-page .son-smart-bulk{ padding:0 16px; bottom:80px; } } /* ========================================================= 10. Saved-Reply-Templates (im Approve/Decline-Modal) ========================================================= */ .son-page .son-reply-templates, body .son-reply-templates{ margin:8px 0 6px; display:flex; gap:6px; flex-wrap:wrap; } .son-page .son-reply-pick, body .son-reply-pick{ padding:5px 10px; border-radius:6px; background:transparent; border:1px solid var(--apv2-div-2, rgba(26,22,18,.10)); color:var(--apv2-ink-3, #6B6050); font:500 11.5px var(--apv2-font-sans); cursor:pointer; letter-spacing:.005em; transition:all 140ms var(--apv2-ease); } .son-page .son-reply-pick:hover, body .son-reply-pick:hover{ background:var(--son-accent-wash, rgba(197,165,90,.10)); border-color:var(--son-accent-wash-2, rgba(197,165,90,.20)); color:var(--son-accent-ink, #5C4214); } .son-page .son-reply-label, body .son-reply-label{ width:100%; margin:6px 0 4px; font:500 10.5px var(--apv2-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--apv2-ink-4, #9A8F7D); } /* ========================================================= 11. Empty-State mit Anschluss-Action ========================================================= */ .son-page .apv2-empty .son-empty-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:7px 14px 7px 12px; border-radius:999px; background:var(--son-accent-wash); border:1px solid var(--son-accent-wash-2); color:var(--son-accent-ink); font:500 12px var(--apv2-font-sans); letter-spacing:.005em; text-decoration:none; cursor:pointer; transition:all 140ms var(--apv2-ease); } .son-page .apv2-empty .son-empty-cta:hover{ background:var(--son-accent-wash-2); transform:translateY(-1px); } .son-page .apv2-empty .son-empty-cta svg{ width:11px; height:11px; opacity:.7; } /* ========================================================= 12. Row-Expansion (Notiz · Letzte Abwesenheiten · Anhang) ========================================================= */ .son-page .son-row{ /* Damit Expand sauber unter den Spalten ausklappt */ grid-row-gap:0; } .son-page .son-row-expand{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin-top:6px; padding:14px 12px 6px 40px; border-top:1px dashed var(--apv2-div-2); max-height:0; overflow:hidden; opacity:0; transition:max-height 220ms var(--apv2-ease), opacity 140ms var(--apv2-ease), padding 220ms var(--apv2-ease); } .son-page .son-row.is-open .son-row-expand{ max-height:240px; opacity:1; padding-top:14px; padding-bottom:14px; } .son-page .son-row-expand-label{ font:600 9.5px var(--apv2-font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--apv2-ink-4); margin-bottom:6px; } .son-page .son-row-note{ font-size:12.5px; color:var(--apv2-ink-2); line-height:1.55; font-style:italic; } .son-page .son-row-note:empty::before{ content:"Keine Notiz."; color:var(--apv2-ink-5); font-style:normal; } .son-page .son-row-history{ display:flex; flex-direction:column; gap:5px; } .son-page .son-row-history-row{ display:grid; grid-template-columns:54px 1fr 38px; gap:8px; align-items:center; font:500 11px var(--apv2-font-mono); color:var(--apv2-ink-3); font-variant-numeric:tabular-nums; } .son-page .son-row-history-bar{ position:relative; height:5px; border-radius:3px; background:var(--apv2-surface-sunk); } .son-page .son-row-history-bar > span{ position:absolute; top:0; bottom:0; background:var(--son-accent-soft); border-radius:3px; opacity:.85; } .son-page .son-row-history-empty{ font-size:11.5px; color:var(--apv2-ink-5); font-style:italic; } .son-page .son-row-attachments{ display:flex; flex-wrap:wrap; gap:6px; } .son-page .son-row-attach{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:6px; background:var(--apv2-surface-2); border:1px solid var(--apv2-div-2); font:500 11px var(--apv2-font-sans); color:var(--apv2-ink-2); text-decoration:none; } .son-page .son-row-attach:hover{ background:var(--son-accent-wash); color:var(--son-accent-ink); border-color:var(--son-accent-wash-2); } .son-page .son-row-attach svg{ width:11px; height:11px; opacity:.7; } @media (max-width:900px){ .son-page .son-row-expand{ grid-template-columns:1fr; gap:10px; padding-left:14px; } .son-page .son-row.is-open .son-row-expand{ max-height:380px; } } /* Caret-Indikator für Expand-State */ .son-page .son-row-caret{ width:12px; height:12px; display:inline-grid; place-items:center; margin-left:auto; margin-right:6px; color:var(--apv2-ink-4); transition:transform 140ms var(--apv2-ease); } .son-page .son-row.is-open .son-row-caret{ transform:rotate(90deg); color:var(--son-accent); } /* ========================================================= 13. Undo-Toast (nach Bulk- / Smart-Approve / Decline) ========================================================= */ .son-toast-host{ position:fixed; left:50%; bottom:24px; z-index:1000; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; } .son-toast{ pointer-events:auto; display:inline-flex; align-items:center; gap:14px; padding:10px 12px 10px 16px; border-radius:10px; background:#1A1612; color:#F3ECDC; font:500 13px "Inter",-apple-system,sans-serif; box-shadow:0 18px 38px -8px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.15); animation:sonToastIn 220ms cubic-bezier(.2,.7,.2,1); max-width:420px; } .son-toast.is-leaving{ animation:sonToastOut 200ms ease-in forwards; } .son-toast-msg{ flex:1 1 auto; letter-spacing:-.005em; } .son-toast-msg strong{ color:#F3DEA6; font-weight:500; } .son-toast-undo{ background:transparent; border:1px solid rgba(243,236,220,.20); color:#F3ECDC; padding:5px 12px; border-radius:7px; font:500 12.5px inherit; cursor:pointer; transition:all 140ms var(--apv2-ease); } .son-toast-undo:hover{ background:rgba(243,236,220,.10); border-color:rgba(243,236,220,.40); } .son-toast-undo:focus-visible{ outline:2px solid #C5A55A; outline-offset:2px; } .son-toast-progress{ position:absolute; left:0; bottom:0; height:2px; background:rgba(197,165,90,.6); animation:sonToastProgress var(--son-toast-dur, 5s) linear forwards; } .son-toast{ position:relative; overflow:hidden; } @keyframes sonToastIn{ from{ opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes sonToastOut{ to { opacity:0; transform:translateY(8px); } } @keyframes sonToastProgress{ from{ width:100% } to { width:0% } } @media (prefers-reduced-motion:reduce){ .son-toast{ animation:none; } .son-toast-progress{ animation:none; width:100%; } } /* ========================================================= 13a. Saved Views — Dropdown-Menü ========================================================= */ .son-page .apv2-views{ position:relative; } .son-page .apv2-views-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:280px; max-width:360px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:var(--apv2-r-md); box-shadow:var(--apv2-shadow-lg); padding:6px; display:none; animation:sonViewsIn 140ms cubic-bezier(.2,.7,.2,1); } .son-page .apv2-views.is-open .apv2-views-menu{ display:block; } @keyframes sonViewsIn{ from{ opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } .son-page .son-view-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; user-select:none; color:var(--apv2-ink-2); font:500 12.5px var(--apv2-font-sans); letter-spacing:.005em; } .son-page .son-view-item:hover{ background:var(--son-accent-wash); color:var(--son-accent-ink); } .son-page .son-view-item.is-active{ background:var(--son-accent-wash); color:var(--son-accent-ink); } .son-page .son-view-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .son-page .son-view-meta{ font-family:var(--apv2-font-mono); font-size:10.5px; color:var(--apv2-ink-4); } .son-page .son-view-del{ width:20px; height:20px; border-radius:5px; border:0; background:transparent; cursor:pointer; color:var(--apv2-ink-4); display:grid; place-items:center; transition:all 140ms var(--apv2-ease); } .son-page .son-view-del:hover{ background:var(--apv2-danger-wash); color:var(--apv2-danger); } .son-page .son-views-divider{ height:1px; background:var(--apv2-div); margin:6px 4px; } .son-page .son-views-save{ display:flex; gap:6px; padding:6px; } .son-page .son-views-save input{ flex:1; min-width:0; padding:6px 10px; border-radius:6px; background:var(--apv2-surface-2); border:1px solid var(--apv2-div-2); color:var(--apv2-ink-2); font:500 12px inherit; outline:none; } .son-page .son-views-save input:focus{ border-color:var(--son-accent); box-shadow:0 0 0 2px var(--son-accent-wash); } .son-page .son-views-save-btn{ padding:6px 12px; border-radius:6px; background:var(--son-accent); color:var(--son-accent-on, #fff); border:0; font:500 12px inherit; cursor:pointer; transition:opacity 140ms var(--apv2-ease); } .son-page .son-views-save-btn:disabled{ opacity:.4; cursor:not-allowed; } .son-page .son-views-empty{ padding:14px 12px; text-align:center; color:var(--apv2-ink-4); font-size:12px; } /* ========================================================= 13b. Inbox-Zero-Moment (Empty-State Celebration) ========================================================= */ .son-page .apv2-empty.is-zero-moment{ animation:sonZeroFade 480ms cubic-bezier(.2,.7,.2,1); } .son-page .apv2-empty.is-zero-moment .apv2-empty-mark{ animation:sonZeroPop 600ms cubic-bezier(.2,.7,.2,1); color:var(--son-accent, var(--apv2-gold)); } .son-page .apv2-empty.is-zero-moment .apv2-empty-title{ color:var(--son-accent-ink, var(--apv2-gold-ink)); } @keyframes sonZeroPop{ 0% { transform:scale(.6) rotate(-6deg); opacity:0; } 55% { transform:scale(1.1) rotate(2deg); opacity:1; } 100% { transform:scale(1) rotate(0); opacity:1; } } @keyframes sonZeroFade{ from{ opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .son-page .apv2-empty.is-zero-moment, .son-page .apv2-empty.is-zero-moment .apv2-empty-mark{ animation:none; } } /* ========================================================= 13c. Konflikt-Tooltip (Hover-Avatare der Kollidierenden) ========================================================= */ .son-tooltip{ position:absolute; z-index:1100; min-width:220px; max-width:320px; padding:10px 12px; background:#1A1612; color:#F3ECDC; border:1px solid rgba(243,236,220,.10); border-radius:10px; box-shadow:0 14px 32px -8px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.15); font:500 12px "Inter",-apple-system,sans-serif; pointer-events:none; animation:sonTooltipIn 140ms ease-out; } @keyframes sonTooltipIn{ from{ opacity:0; transform:translateY(2px); } to { opacity:1; transform:none; } } .son-tooltip-title{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#A89B80; font-weight:600; margin-bottom:8px; } .son-tooltip-list{ display:flex; flex-direction:column; gap:6px; } .son-tooltip-row{ display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; } .son-tooltip-avatar{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; background:rgba(217,189,123,.16); color:#D9BD7B; font:600 10px ui-monospace,Menlo,monospace; letter-spacing:.04em; } .son-tooltip-name{ color:#F3ECDC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .son-tooltip-range{ color:#A89B80; font-family:ui-monospace,Menlo,monospace; font-size:10.5px; font-variant-numeric:tabular-nums; } body.style-modern .son-tooltip{ background:#0F172A; color:#F1F5F9; border-color:rgba(241,245,249,.10); border-radius:8px; } /* ========================================================= 13c2. Decline-Modal mit Pflicht-Begründung ========================================================= */ .son-decline-backdrop{ position:fixed; inset:0; z-index:1100; background:rgba(26,22,18,.42); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; } .son-decline-backdrop.is-open{ display:flex; animation:sonDeclineIn 160ms ease-out; } @keyframes sonDeclineIn{ from{ opacity:0; } to { opacity:1; } } .son-decline{ background:var(--apv2-surface, #FFFDF8); color:var(--apv2-ink, #1A1612); border:1px solid var(--apv2-div-2, rgba(26,22,18,.10)); border-radius:14px; padding:24px 28px; width:92%; max-width:480px; box-shadow:0 24px 60px -12px rgba(0,0,0,.35); } body.theme-dark .son-decline{ background:#1A1612; color:#F3ECDC; border-color:rgba(243,236,220,.10); } body.style-modern .son-decline{ background:#FFFFFF; color:#0F172A; border-color:rgba(15,23,42,.10); border-radius:10px; } body.style-modern.theme-dark .son-decline{ background:#131720; color:#F1F5F9; border-color:rgba(241,245,249,.10); } .son-decline-title{ font:500 18px "Fraunces",Georgia,serif; letter-spacing:-.01em; margin:0 0 6px; } body.style-modern .son-decline-title{ font-family:"Inter",sans-serif; font-weight:700; letter-spacing:-.02em; } .son-decline-sub{ font:400 12.5px "Inter",sans-serif; color:var(--apv2-ink-3, #6B6050); margin:0 0 12px; } body.theme-dark .son-decline-sub{ color:#A89B80; } .son-decline-templates{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .son-decline-templates:empty{ display:none; } .son-decline-textarea{ width:100%; min-height:90px; box-sizing:border-box; padding:10px 12px; border-radius:8px; background:var(--apv2-surface-2); border:1.5px solid var(--apv2-div-2); color:var(--apv2-ink); font:400 13px "Inter",sans-serif; line-height:1.5; outline:none; resize:vertical; } .son-decline-textarea:focus{ border-color:var(--apv2-danger, #A8412C); box-shadow:0 0 0 3px rgba(168,65,44,.10); } body.theme-dark .son-decline-textarea{ background:#221C16; color:#F3ECDC; border-color:rgba(243,236,220,.10); } .son-decline-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; } .son-decline-cancel, .son-decline-confirm{ padding:8px 14px; border-radius:8px; font:500 13px "Inter",sans-serif; cursor:pointer; transition:all 140ms cubic-bezier(.2,.7,.2,1); } .son-decline-cancel{ background:transparent; border:1px solid var(--apv2-div-2); color:var(--apv2-ink-3); } .son-decline-cancel:hover{ border-color:var(--apv2-ink-5); color:var(--apv2-ink); } .son-decline-confirm{ background:var(--apv2-danger, #A8412C); border:1px solid var(--apv2-danger); color:#fff; } .son-decline-confirm:hover:not(:disabled){ background:#8B3525; border-color:#8B3525; } .son-decline-confirm:disabled{ opacity:.4; cursor:not-allowed; } body.theme-dark .son-decline-confirm{ background:#D07761; border-color:#D07761; color:#1A1612; } /* ========================================================= 13c3. Date-Range-Picker (eigener Zeitraum in der Filter-Toolbar) ========================================================= */ .son-page .son-daterange{ display:inline-flex; align-items:center; gap:6px; color:var(--apv2-ink-3); font:500 11.5px var(--apv2-font-sans); } .son-page .son-daterange-label{ color:var(--apv2-ink-4); } .son-page .son-daterange input[type="date"]{ padding:5px 8px; background:var(--apv2-surface); border:1px solid var(--apv2-div-2); border-radius:6px; color:var(--apv2-ink-2); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; color-scheme:light; } body.theme-dark .son-page .son-daterange input[type="date"]{ color-scheme:dark; } .son-page .son-daterange input[type="date"]:hover{ border-color:var(--apv2-ink-5); } .son-page .son-daterange input[type="date"]:focus{ outline:none; border-color:var(--son-accent); box-shadow:0 0 0 2px var(--son-accent-wash); } .son-page .son-daterange-sep{ color:var(--apv2-ink-5); font-weight:400; } .son-page .son-daterange-clear{ width:18px; height:18px; border-radius:50%; border:0; padding:0; background:var(--apv2-surface-sunk); color:var(--apv2-ink-3); cursor:pointer; font:600 14px sans-serif; line-height:1; display:grid; place-items:center; } .son-page .son-daterange-clear:hover{ background:var(--apv2-danger-wash); color:var(--apv2-danger); } /* ========================================================= 13d. Density + CSV-Export Toolbar-Erweiterungen ========================================================= */ .son-page .apv2-toolbar-actions{ display:flex; gap:8px; align-items:center; margin-left:auto; } .son-page .son-density-sel{ display:inline-flex; align-items:center; gap:6px; color:var(--apv2-ink-3); font:500 11.5px var(--apv2-font-sans); letter-spacing:.005em; } .son-page .son-density-sel select{ background:transparent; border:1px solid var(--apv2-div-2); color:var(--apv2-ink-2); border-radius:6px; padding:5px 8px; font:inherit; cursor:pointer; } .son-page .son-density-sel select:hover{ border-color:var(--apv2-ink-5); } .son-page .son-csv-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; background:transparent; border:1px solid var(--apv2-div-2); color:var(--apv2-ink-3); font:500 11.5px var(--apv2-font-sans); cursor:pointer; transition:all 140ms var(--apv2-ease); } .son-page .son-csv-btn:hover{ background:var(--son-accent-wash); border-color:var(--son-accent-wash-2); color:var(--son-accent-ink); } .son-page .son-csv-btn svg{ width:12px; height:12px; opacity:.7; } /* ========================================================= 13e. Preferences-Panel (zentrale Settings-Drawer) ========================================================= */ .son-prefs-backdrop{ position:fixed; inset:0; z-index:1100; background:rgba(26,22,18,.42); display:none; justify-content:flex-end; backdrop-filter:blur(2px); } .son-prefs-backdrop.is-open{ display:flex; animation:sonPrefsBackdrop 200ms ease-out; } @keyframes sonPrefsBackdrop{ from{ opacity:0; } to { opacity:1; } } .son-prefs{ width:380px; max-width:92vw; height:100vh; background:#FFFDF8; color:#1A1612; border-left:1px solid rgba(26,22,18,.10); box-shadow:-12px 0 36px -8px rgba(0,0,0,.18); display:flex; flex-direction:column; animation:sonPrefsSlide 220ms cubic-bezier(.2,.7,.2,1); } @keyframes sonPrefsSlide{ from{ transform:translateX(20px); opacity:0; } to { transform:none; opacity:1; } } body.theme-dark .son-prefs{ background:#1A1612; color:#F3ECDC; border-color:rgba(243,236,220,.10); } body.style-modern .son-prefs{ background:#FFFFFF; color:#0F172A; border-color:rgba(15,23,42,.10); } body.style-modern.theme-dark .son-prefs{ background:#131720; color:#F1F5F9; border-color:rgba(241,245,249,.10); } .son-prefs-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px 14px; border-bottom:1px solid rgba(26,22,18,.06); } body.theme-dark .son-prefs-head{ border-color:rgba(243,236,220,.06); } .son-prefs-head h3{ margin:0; font:500 18px "Fraunces",Georgia,serif; letter-spacing:-.01em; } body.style-modern .son-prefs-head h3{ font-family:"Inter",sans-serif; font-weight:700; letter-spacing:-.02em; } .son-prefs-close{ width:28px; height:28px; border:0; background:transparent; color:#9A8F7D; font:600 18px sans-serif; cursor:pointer; border-radius:6px; display:grid; place-items:center; } .son-prefs-close:hover{ background:rgba(26,22,18,.05); color:#1A1612; } body.theme-dark .son-prefs-close:hover{ background:rgba(243,236,220,.06); color:#F3ECDC; } .son-prefs-body{ flex:1; overflow:auto; padding:18px 24px 24px; display:flex; flex-direction:column; gap:18px; } .son-prefs-group{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .son-prefs-group legend{ font:600 10.5px "Inter",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#9A8F7D; margin-bottom:4px; } body.theme-dark .son-prefs-group legend{ color:#A89B80; } .son-prefs-group label{ display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; user-select:none; border:1px solid rgba(26,22,18,.06); background:#F6F0E2; transition:all 140ms cubic-bezier(.2,.7,.2,1); } .son-prefs-group label:hover{ border-color:rgba(197,165,90,.30); background:rgba(197,165,90,.08); } .son-prefs-group label:has(input:checked){ border-color:#C5A55A; background:rgba(197,165,90,.12); } body.theme-dark .son-prefs-group label{ background:#221C16; border-color:rgba(243,236,220,.06); } body.theme-dark .son-prefs-group label:hover{ background:rgba(212,185,119,.10); border-color:rgba(212,185,119,.30); } body.style-modern .son-prefs-group label{ background:#F1F5F9; border-color:rgba(15,23,42,.06); border-radius:6px; } body.style-modern.theme-dark .son-prefs-group label{ background:#1A1F2C; border-color:rgba(241,245,249,.06); } .son-prefs-group input[type="radio"]{ margin:2px 0 0; accent-color:#C5A55A; } .son-prefs-group label span{ font:500 13px "Inter",sans-serif; color:#1A1612; display:flex; flex-direction:column; gap:2px; line-height:1.35; } body.theme-dark .son-prefs-group label span{ color:#F3ECDC; } body.style-modern .son-prefs-group label span{ color:#0F172A; } body.style-modern.theme-dark .son-prefs-group label span{ color:#F1F5F9; } .son-prefs-group label em{ font:400 11px "Inter",sans-serif; font-style:normal; color:#9A8F7D; } body.theme-dark .son-prefs-group label em{ color:#A89B80; } .son-prefs-action{ padding:9px 14px; border-radius:8px; background:transparent; border:1px solid rgba(26,22,18,.10); color:#3A332A; font:500 12.5px "Inter",sans-serif; cursor:pointer; text-align:left; transition:all 140ms cubic-bezier(.2,.7,.2,1); } .son-prefs-action:hover{ border-color:#A8412C; color:#A8412C; background:rgba(168,65,44,.05); } body.theme-dark .son-prefs-action{ color:#D9CFB8; border-color:rgba(243,236,220,.10); } body.theme-dark .son-prefs-action:hover{ color:#D07761; border-color:#D07761; background:rgba(208,119,97,.10); } @media (max-width:600px){ .son-prefs{ width:100%; } } /* ========================================================= 14. STYLE-VARIANT: MODERN Aktivierung: body.style-modern Default (ohne Klasse) = "Retro" (warmes Cream/Fraunces). Modern = kühles Slate, Inter überall, sharp edges, crisper Schatten. ========================================================= */ /* Light Modern */ body.style-modern .apv2-page, body.style-modern .son-page{ --apv2-bg: #F8FAFC; --apv2-surface: #FFFFFF; --apv2-surface-2: #F1F5F9; --apv2-surface-sunk: #E2E8F0; --apv2-ink: #0F172A; --apv2-ink-2: #1E293B; --apv2-ink-3: #475569; --apv2-ink-4: #94A3B8; --apv2-ink-5: #CBD5E1; --apv2-div: rgba(15,23,42,.06); --apv2-div-2: rgba(15,23,42,.10); /* Gold-Akzent bleibt — aber Wash kühler */ --apv2-gold: #C9A14B; --apv2-gold-deep: #8E6F1E; --apv2-gold-amber: #B07A26; --apv2-gold-bronze: #6F5526; --apv2-gold-soft: #D9BD7B; --apv2-gold-muted: #B89A6A; --apv2-gold-pale: #E8D7A8; --apv2-gold-ink: #5C4214; --apv2-gold-wash: rgba(201,161,75,.08); --apv2-gold-wash-2: rgba(201,161,75,.18); /* Headlines: kein Fraunces mehr — Inter überall */ --apv2-font-serif: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Schärfere Radien */ --apv2-r-sm: 4px; --apv2-r-md: 6px; --apv2-r-lg: 8px; --apv2-r-xl: 12px; /* Crispe Schatten — weniger Spread, härter */ --apv2-shadow-xs: 0 0 0 1px rgba(15,23,42,.04); --apv2-shadow-sm: 0 1px 2px rgba(15,23,42,.06); --apv2-shadow-md: 0 2px 8px -1px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --apv2-shadow-lg: 0 12px 32px -8px rgba(15,23,42,.12), 0 4px 8px -2px rgba(15,23,42,.06); } /* Dark Modern */ body.style-modern.theme-dark .apv2-page, body.style-modern.theme-dark .son-page{ --apv2-bg: #0B0E14; --apv2-surface: #131720; --apv2-surface-2: #1A1F2C; --apv2-surface-sunk: #0F131B; --apv2-ink: #F1F5F9; --apv2-ink-2: #E2E8F0; --apv2-ink-3: #94A3B8; --apv2-ink-4: #64748B; --apv2-ink-5: #334155; --apv2-div: rgba(241,245,249,.06); --apv2-div-2: rgba(241,245,249,.10); --apv2-gold: #D9BD7B; --apv2-gold-deep: #E8D7A8; --apv2-gold-ink: #F3DEA6; --apv2-gold-wash: rgba(217,189,123,.08); --apv2-gold-wash-2: rgba(217,189,123,.18); } /* Modern: H1 / Counts ohne Serif, bolder */ body.style-modern .apv2-h1{ font-family:var(--apv2-font-sans); font-weight:700; letter-spacing:-.025em; } body.style-modern .apv2-count{ font-family:var(--apv2-font-sans); font-style:normal; font-weight:600; } /* Modern: KPI-Werte sans, bold */ body.style-modern .apv2-stat-val{ font-family:var(--apv2-font-sans); font-weight:700; letter-spacing:-.02em; } body.style-modern .apv2-stat-label{ letter-spacing:.05em; font-weight:600; } /* Modern: Streak ohne Serif-Emphasis */ body.style-modern .son-streak strong{ font-family:var(--apv2-font-sans); font-weight:600; } /* Modern: Section-Heads sans, bolder */ body.style-modern .son-section-title{ font-family:var(--apv2-font-sans); font-weight:600; letter-spacing:-.01em; } /* Modern: schärfere Chips, weniger Letter-Spacing */ body.style-modern .apv2-chip{ border-radius:6px; letter-spacing:0; } body.style-modern .son-pill{ border-radius:5px; letter-spacing:0; font-weight:500; } /* Modern: Suchfeld mit klarem Border statt cream-look */ body.style-modern .apv2-search{ border-radius:8px; background:var(--apv2-surface); box-shadow:var(--apv2-shadow-xs); } body.style-modern .apv2-search:focus-within{ box-shadow:0 0 0 3px var(--apv2-gold-wash), var(--apv2-shadow-xs); } /* Modern: Crumb ohne Letter-Spacing-Overload */ body.style-modern .apv2-crumb{ letter-spacing:.08em; font-weight:600; } /* Modern: Empty-CTA und Smart-Pick — moderner Pill-Look */ body.style-modern .son-empty-cta, body.style-modern .son-smart-pick{ border-radius:8px; box-shadow:var(--apv2-shadow-sm); } /* Modern: Tab-Bar im Demo (außerhalb der .son-page) */ body.style-modern{ background:#F8FAFC; color:#0F172A; } body.style-modern.theme-dark{ background:#0B0E14; color:#F1F5F9; } body.style-modern .son-tabs{ background:#FFFFFF; border:1px solid rgba(15,23,42,.08); border-radius:10px; box-shadow:0 1px 2px rgba(15,23,42,.04); } body.style-modern.theme-dark .son-tabs{ background:#131720; border-color:rgba(241,245,249,.10); box-shadow:none; } body.style-modern .son-tab{ color:#475569; border-radius:6px; } body.style-modern .son-tab:hover{ background:rgba(15,23,42,.04); color:#0F172A; } body.style-modern .son-tab.is-active{ background:#0F172A; color:#F8FAFC; } body.style-modern.theme-dark .son-tab{ color:#94A3B8; } body.style-modern.theme-dark .son-tab:hover{ background:rgba(241,245,249,.06); color:#F1F5F9; } body.style-modern.theme-dark .son-tab.is-active{ background:#F1F5F9; color:#0F172A; } /* Modern: subtiler Akzent-Streifen statt soft Goldring */ body.style-modern .son-row::after{ width:3px; opacity:.85; border-radius:0 2px 2px 0; } /* Modern: Mini-Timeline mit klarem Border statt hairline */ body.style-modern .son-row-timeline{ border:1px solid var(--apv2-div-2); background-color:var(--apv2-surface-2); } /* Modern: Frist-Pill schärfer */ body.style-modern .son-frist-pill{ border-radius:6px; letter-spacing:0; font-weight:600; } /* ========================================================= 15. Print-Stylesheet (HR-Compliance: Liste sauber drucken) ========================================================= */ @media print{ body{ background:#fff !important; color:#000 !important; } .son-tabs, .son-theme, .son-page .apv2-header-row, .son-page .apv2-control, .son-page .apv2-active-filters, .son-page .son-streak, .son-page .son-smart-bulk, .son-page .apv2-bulkbar, .son-page .apv2-row-actions, .son-page .apv2-row-check, .son-page .son-row-timeline{ display:none !important; } .son-page{ margin:0 !important; padding:0 !important; background:#fff !important; color:#000 !important; min-height:auto !important; } .son-page .apv2-header{ background:none !important; border:none !important; } .son-page .apv2-header-inner{ padding:0 0 12px !important; } .son-page .apv2-h1{ color:#000 !important; font-size:18px !important; font-family:Georgia,serif !important; } .son-page .apv2-stats{ border:1px solid #888 !important; background:#f5f5f5 !important; margin-top:8px !important; } .son-page .son-section-body{ background:#fff !important; box-shadow:none !important; border:1px solid #ccc !important; } .son-page .son-row{ page-break-inside:avoid; background:#fff !important; border-bottom:1px solid #eee !important; border-radius:0 !important; grid-template-columns: 28px minmax(140px, 1.4fr) 1fr 1fr auto !important; } .son-page .son-row::after{ display:none; } .son-page .son-pill{ background:none !important; border:1px solid #999 !important; color:#000 !important; } .son-page .son-row-name{ color:#000 !important; } .son-page .apv2-empty{ display:none !important; } } /* ===== RECHTE-CENTER (Per-User-Berechtigungen) ===== */ .perm-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 16px;font-size:.78rem;color:var(--text-muted,#8B7E74)} .perm-legend .pl{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .perm-legend .pl-swatch{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;border:1px solid transparent} .perm-legend .pl-allow{background:#e7f6ec;color:#1a7a45;border-color:#bfe6cd} .perm-legend .pl-deny{background:#fdeaea;color:#b4322f;border-color:#f3c9c7} .perm-legend .pl-on{background:rgba(197,165,90,.14);color:var(--accent,#C5A55A);border-color:rgba(197,165,90,.3)} .perm-legend .pl-off{background:transparent;color:#c9c2b6;border:1px dashed #ddd6c8} #permMatrixWrap{overflow:visible} .perm-matrix-wrap{overflow-x:auto;border:1px solid var(--border,#e5e1d8);border-radius:14px;background:var(--bg-elevated,#fff)} .perm-matrix{border-collapse:separate;border-spacing:0;font-size:.8rem;width:100%} .perm-matrix th,.perm-matrix td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--border,#ece7dd)} .perm-matrix tbody tr:last-child td{border-bottom:none} .perm-matrix thead th{position:sticky;top:0;z-index:2;background:var(--bg-elevated,#fff)} .perm-matrix .perm-group{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent,#C5A55A);background:rgba(197,165,90,.07);border-bottom:1px solid rgba(197,165,90,.2)} .perm-matrix .perm-col{writing-mode:vertical-rl;transform:rotate(180deg);height:128px;font-weight:600;font-size:.74rem;color:var(--text-primary,#3a342c);white-space:nowrap;vertical-align:bottom;padding-bottom:10px} .perm-matrix .perm-name-col{text-align:left;white-space:nowrap;position:sticky;left:0;z-index:3;background:var(--bg-elevated,#fff);font-weight:600;color:var(--text-primary,#3a342c);box-shadow:1px 0 0 var(--border,#ece7dd)} .perm-matrix thead .perm-name-col{z-index:4} .perm-matrix tbody tr:nth-child(even) td{background:rgba(0,0,0,.015)} .perm-matrix tbody tr:nth-child(even) .perm-name-col{background:var(--bg-hover)} .perm-matrix tbody tr:hover td{background:rgba(197,165,90,.06)} .perm-matrix tbody tr:hover .perm-name-col{background:rgba(197,165,90,.10)} .perm-cell{width:30px;height:30px;border-radius:7px;border:1px solid transparent;cursor:pointer;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .15s ease,background .15s ease} .perm-cell:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.12)} .perm-cell:active{transform:scale(.92)} .perm-cell:focus-visible{outline:2px solid var(--accent,#C5A55A);outline-offset:1px} .perm-cell.perm-allow{background:#e7f6ec;color:#1a7a45;border-color:#bfe6cd} .perm-cell.perm-deny{background:#fdeaea;color:#b4322f;border-color:#f3c9c7} .perm-cell.perm-default-on{background:rgba(197,165,90,.14);color:var(--accent,#C5A55A)} .perm-cell.perm-default-off{background:transparent;color:#cdc7ba} /* ===== Sidebar eingeklappt: alle Icons sauber & gleichmäßig untereinander (nur Desktop) ===== */ @media (min-width: 769px) { .sidebar.collapsed .menu-group-header{display:none} /* Kategorie-Header als Icon nutzlos → raus */ .sidebar.collapsed .menu-group-items{max-height:none !important;overflow:visible} /* immer ALLE Item-Icons zeigen */ .sidebar.collapsed .menu-section{margin-bottom:6px} .sidebar.collapsed .sidebar-menu{gap:4px} .sidebar.collapsed .menu-group, .sidebar.collapsed .menu-group-items{gap:4px} .sidebar.collapsed .menu-item.active::before{display:none} .sidebar.collapsed .menu-item.active{background:var(--accent-subtle)} } /* ===== Dark-Mode-Anpassungen: Sidebar-Aktiv + Rechte-Center ===== */ body.theme-dark .menu-item.active{box-shadow:none} body.theme-dark .perm-matrix tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)} body.theme-dark .perm-matrix tbody tr:hover td{background:rgba(197,165,90,.10)} body.theme-dark .perm-cell.perm-allow{background:rgba(74,222,128,.16);color:#5BE584;border-color:rgba(74,222,128,.28)} body.theme-dark .perm-cell.perm-deny{background:rgba(248,113,113,.16);color:#FF8A8A;border-color:rgba(248,113,113,.28)} body.theme-dark .perm-cell.perm-default-off{color:#5b6066} body.theme-dark .perm-legend .pl-allow{background:rgba(74,222,128,.16);color:#5BE584;border-color:rgba(74,222,128,.28)} body.theme-dark .perm-legend .pl-deny{background:rgba(248,113,113,.16);color:#FF8A8A;border-color:rgba(248,113,113,.28)} body.theme-dark .perm-legend .pl-off{color:#6b7079;border-color:rgba(255,255,255,.14)}