/* Capita Pikett Manager — "Klar" * Visuelles Upgrade im Stil des Proficiency Managers / Connect Dashboards: * - heller, moderner SaaS-Look, viel Weissraum, eine Akzentfarbe (Capita-Rot) * - Light/Dark pro Nutzer (data-theme="dark" auf , localStorage pikm_theme) * - Signature: grosse Statuskarte "Aktuelle Rufbereitschaft" (immer sichtbar) * - Tabs: Kontakte / Perioden / Umstellungs-Log * Schrift: Inter via Google Fonts wenn online, sonst System-Stack. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap'); :root { color-scheme: light; --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f6f7f9; --ink:#191d25; --ink-2:#444b59; --muted:#7e8696; --faint:#aab0bd; --border:#e1e4ea; --line:#eef0f3; --accent:#d2232a; /* Capita-Rot — Primaeraktionen, aktiver Tab */ --accent-dark:#a81b21; --accent-soft:#fbe9ea; --warn:#c9a227; /* niemand gesetzt */ --ok:#1f9d6b; /* aktiv / im Dienst */ --mono:'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; --radius:12px; --radius-lg:16px; --shadow:0 1px 2px rgba(25,29,37,.04), 0 4px 16px -8px rgba(25,29,37,.10); --shadow-lg:0 12px 36px -12px rgba(25,29,37,.22), 0 2px 6px rgba(25,29,37,.06); --hover:#f9fafc; --row-active:#fdf1f1; /* Zeile des aktiven Pikett */ --tab-active-bg:#191d25; --tab-active-ink:#ffffff; } /* ============ Dark Mode ============ */ :root[data-theme="dark"] { color-scheme: dark; --bg:#0f1421; --surface:#161d2b; --surface-2:#1c2433; --ink:#e8edf5; --ink-2:#aeb8c8; --muted:#828ea0; --faint:#5a6476; --border:#28313f; --line:#1f2733; --accent:#e2474d; --accent-dark:#c43a40; --accent-soft:#3a1d20; --warn:#d8b13a; --ok:#35b886; --shadow:0 1px 2px rgba(0,0,0,.30), 0 6px 18px -10px rgba(0,0,0,.55); --shadow-lg:0 14px 40px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4); --hover:#1c2533; --row-active:#2a1c20; --tab-active-bg:#33405a; --tab-active-ink:#eef2f8; } * { box-sizing:border-box; margin:0; padding:0; } body { font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } .hidden { display:none !important; } .mono { font-family:var(--mono); } /* ---------- Login ---------- */ .centered { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; } .login-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:44px 48px; text-align:center; max-width:440px; } .login-card p { color:var(--muted); margin:14px 0 26px; } .login-card code { font-family:var(--mono); font-size:12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:2px 6px; } /* ---------- Brand / Header ---------- */ .brand { font-size:18px; font-weight:800; letter-spacing:-.02em; } .brand span { font-weight:500; color:var(--faint); } .topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 30px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; } .topbar-right { display:flex; align-items:center; gap:12px; } .user-email { color:var(--muted); font-size:13px; } /* ---------- Layout ---------- */ .container { max-width:1080px; margin:0 auto; padding:26px 24px 70px; display:flex; flex-direction:column; gap:18px; } /* ---------- Statuskarte (Signature) ---------- */ .active-card { background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--ok); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:24px 28px; } .active-card-warn { border-left-color:var(--warn); } .active-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .active-name { font-size:32px; font-weight:800; letter-spacing:-.02em; margin:4px 0 3px; } .active-phone { color:var(--muted); font-size:14px; } /* ---------- Tabs ---------- */ .tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); padding-bottom:0; flex-wrap:nowrap; overflow-x:auto; } .tab { border:none; background:transparent; padding:9px 16px; font-size:14px; font-weight:550; cursor:pointer; color:var(--ink-2); border-radius:10px 10px 0 0; font-family:inherit; white-space:nowrap; flex:none; transition:background .15s, color .15s; } .tab:hover { background:var(--surface-2); } .tab.active { background:var(--tab-active-bg); color:var(--tab-active-ink); font-weight:600; } /* ---------- Panels ---------- */ .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px 24px; margin-bottom:18px; } .panel-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:12px; } .panel-head h2 { font-size:16px; font-weight:700; letter-spacing:-.01em; } .panel-hint { color:var(--muted); font-size:12px; font-family:var(--mono); } .panel-footnote { margin-top:14px; color:var(--muted); font-size:12.5px; line-height:1.5; } /* ---------- Info-Tab ---------- */ .info-panel h3 { font-size:14px; font-weight:700; letter-spacing:-.01em; margin:20px 0 6px; color:var(--ink); } .info-panel h3:first-of-type { margin-top:4px; } .info-panel p, .info-panel ul { margin:0 0 10px; line-height:1.6; color:var(--ink-2); font-size:14px; } .info-panel ul { padding-left:20px; } .info-panel li { margin-bottom:5px; } .info-panel strong { color:var(--ink); font-weight:650; } .info-panel a { color:var(--accent); font-weight:650; text-decoration:none; } .info-panel a:hover { text-decoration:underline; } .data-table a { color:var(--accent); font-weight:600; text-decoration:none; } .data-table a:hover { text-decoration:underline; } /* ---------- Drag & Drop (IVR-Reihenfolge) ---------- */ .col-handle { width:34px; text-align:center; } .drag-handle { cursor:grab; color:var(--muted); font-size:16px; line-height:1; user-select:none; } .drag-handle:active { cursor:grabbing; } tr.dragging { opacity:.5; background:var(--accent-soft); } /* ---------- Öffnungszeiten-Editor ---------- */ .hours-day { display:flex; align-items:flex-start; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); } .hours-day:last-child { border-bottom:none; } .hours-day-label { width:36px; font-weight:700; color:var(--ink); padding-top:6px; flex:none; } .hours-windows { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .hours-window { display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:var(--radius); padding:4px 6px; } .hours-window input[type="time"] { border:1px solid var(--border); border-radius:6px; padding:4px 6px; font-family:inherit; font-size:13px; background:var(--surface); color:var(--ink); } .hours-closed { color:var(--muted); font-size:13px; padding-top:6px; } .hours-actions { margin-top:16px; } .field select { border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:14px; font-family:inherit; background:var(--surface); color:var(--ink); } .holiday-windows { grid-column:1 / -1; } .holiday-windows > label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); margin-bottom:8px; } .holiday-windows > label em { font-style:normal; color:var(--ink); } .hint-small { font-size:12px; color:var(--muted); margin-top:8px; } .notify-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px; border-bottom:1px solid var(--border); } .notify-row:last-child { border-bottom:none; } /* ---------- Kennzahlen (Perioden) ---------- */ .stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; } .stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); } .stat-value { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:4px; } .stat-value.sm { font-size:18px; font-weight:700; } /* ---------- Tabellen ---------- */ .data-table { width:100%; border-collapse:collapse; } .data-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--border); } .data-table td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; } .data-table tr:last-child td { border-bottom:none; } .data-table tbody tr:hover td { background:var(--hover); } /* groessere Zeilen fuer die Historie-Tabs */ .table-lg td { padding:13px 12px; font-size:14px; } .table-lg th { padding:10px 12px; } .row-active td { background:var(--row-active); } .row-active:hover td { background:var(--row-active); } .badge { display:inline-block; margin-left:8px; padding:1px 9px; border-radius:10px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; vertical-align:middle; } /* Kanal-Chip im Log */ .chip { display:inline-block; padding:2px 10px; border-radius:8px; font-size:12px; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); } .chip-web { background:var(--accent-soft); border-color:transparent; color:var(--accent-dark); } .chip-call { background:var(--surface-2); } .col-ivr { width:48px; text-align:center; color:var(--muted); } .col-calls { width:80px; text-align:right; } .data-table td.col-calls { text-align:right; } .col-actions { text-align:right; white-space:nowrap; } .col-actions .btn + .btn { margin-left:6px; } .empty { color:var(--muted); text-align:center; padding:22px 10px; } /* ---------- Formular ---------- */ .add-form { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; align-items:end; } .add-form button[type="submit"] { grid-column:1 / -1; justify-self:start; } .field { display:flex; flex-direction:column; gap:5px; min-width:0; } .field label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); } .field input { border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:14px; font-family:inherit; background:var(--surface); color:var(--ink); transition:border-color .15s, box-shadow .15s; } .field input:hover { border-color:var(--faint); } .field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ---------- Buttons ---------- */ .btn { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--ink); padding:9px 16px; font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .15s, border-color .15s, color .15s; } .btn:hover { background:var(--bg); border-color:var(--faint); } .btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); } .btn-ghost { background:transparent; color:var(--muted); } .btn-ghost:hover { color:var(--accent); border-color:var(--faint); background:transparent; } .btn-small { padding:5px 12px; font-size:12.5px; } .theme-toggle { font-size:15px; line-height:1; padding:8px 11px; } /* ---------- Banner ---------- */ .banner { border-radius:var(--radius); padding:12px 16px; font-size:13px; } .banner-error { background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-dark); } /* ---------- Fokus / Zugaenglichkeit ---------- */ .btn:focus-visible, input:focus-visible, .tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* ---------- Mobile ---------- */ @media (max-width: 660px) { .topbar { padding:12px 18px; } .container { padding:20px 16px 60px; } .add-form { grid-template-columns:1fr; } .active-name { font-size:26px; } .stats { grid-template-columns:1fr; } /* Nur in der Kontaktliste die Key-Spalte ausblenden (Historie-Tabs bleiben voll) */ #tab-kontakte .data-table th:nth-child(3), #tab-kontakte .data-table td:nth-child(3) { display:none; } }