/* ===========================================================================
   Capita Web-Tools — Design-System (Kanon v1)
   Zentrale, geteilte Stylesheet-Quelle für alle Web-Tools am Cognito-Pool.
   Eingebunden via: <link rel="stylesheet" href="https://ui.capita-aws.ch/v1/capita-ui.css">
   Betrieb: TELAG AG · Part of Capita plc
   =========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jetbrains-mono-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-700.woff2') format('woff2');}

/* ---------- Tokens: Light ---------- */
:root{
  color-scheme: light;
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#f9fbfc; --surface-3:#eef3f6;
  --ink:#131a2b; --ink-2:#44506a; --muted:#71809a; --faint:#a3afc2;
  --border:#e2e7ee; --line:#eef1f6; --hairline:#eaeef4; --hover:#f5f8fb; --overlay:rgba(10,20,40,.05);
  /* Akzent = Capita-Teal, Rot = Telag = Gefahr */
  --accent:#0d7d94; --accent-dark:#0a6072; --accent-soft:#e1f2f6; --on-accent:#ffffff;
  --cyan:#00b9c9; --navy:#01083c;
  --ok:#1f9d6b; --ok-bg:#e7f6ef; --ok-ink:#0e6e49;
  --warn:#c9871a; --warn-bg:#fdf3e2; --warn-ink:#8a5b06;
  --bad:#d2232a; --bad-bg:#fbe9ea; --bad-ink:#a81b21;
  --info:#3b6fd4; --info-bg:#e8edfb; --info-ink:#2f5cab;
  --neutral:#71809a; --neutral-bg:#eef1f6;
  /* Navy-Sidebar (immer dunkel) */
  --nav-bg:#0a1230; --nav-ink:#c3cee4; --nav-ink-active:#ffffff;
  --nav-hover:rgba(255,255,255,.06); --nav-active:rgba(0,185,201,.16); --nav-line:rgba(255,255,255,.09);
  /* Radius / Schatten */
  --r-xs:6px; --r-sm:9px; --radius:12px; --radius-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(25,29,37,.05);
  --shadow-sm:0 1px 3px rgba(25,29,37,.06), 0 1px 2px rgba(25,29,37,.04);
  --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);
  /* Typo / Motion */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:160ms;
}
/* ---------- Tokens: Dark ---------- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0e1420; --surface:#161d2b; --surface-2:#1a2230; --surface-3:#1f2a38;
  --ink:#e8edf5; --ink-2:#aeb8c8; --muted:#828ea0; --faint:#5a6476;
  --border:#28313f; --line:#1f2733; --hairline:#1d2632; --hover:#1c2533; --overlay:rgba(255,255,255,.06);
  --accent:#3fcede; --accent-dark:#2fb3c4; --accent-soft:#0e2b33; --on-accent:#04141a;
  --cyan:#3fcede; --navy:#01083c;
  --ok:#3fc28a; --ok-bg:#16302433; --ok-ink:#5fd6a3;
  --warn:#e0a743; --warn-bg:#3a2e1633; --warn-ink:#f0c069;
  --bad:#e2474d; --bad-bg:#3a1d2033; --bad-ink:#f08a8e;
  --info:#5a93e6; --info-bg:#1c2a4433; --info-ink:#8fb4f0;
  --neutral:#828ea0; --neutral-bg:#1f2733;
  --nav-bg:#070d22; --nav-active:rgba(63,206,222,.18);
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --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);
}

/* ---------- Reset / Basis ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{line-height:1.25;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.cui-mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.cui-muted{color:var(--muted);}
[hidden]{display:none !important;}

/* ---------- App-Layout: Sidebar + Main ---------- */
.cui-app{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.cui-side{background:var(--nav-bg); color:var(--nav-ink); border-right:1px solid var(--nav-line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.cui-brand{padding:22px 22px 20px; border-bottom:1px solid var(--nav-line); display:flex; flex-direction:column; gap:18px;}
.cui-brand .cui-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.42); font-weight:700; margin-bottom:-2px;}
.cui-brand img{height:30px; width:auto; max-width:186px; display:block; object-fit:contain;}
.cui-brand img.cui-telag{height:42px;}
.cui-brand .cui-divider{display:none;}
.cui-nav{padding:12px; overflow-y:auto; flex:1;}
.cui-nav .cui-sec{font-size:10px; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.34); padding:6px 12px 8px; font-weight:700;}
.cui-nav a{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); color:var(--nav-ink); font-weight:500; font-size:13.5px; margin-bottom:2px; transition:background var(--dur) var(--ease); position:relative; cursor:pointer;}
.cui-nav a:hover{background:var(--nav-hover); color:#fff; text-decoration:none;}
.cui-nav a.active{background:var(--nav-active); color:var(--nav-ink-active); font-weight:600;}
.cui-nav a.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--cyan);}
.cui-nav a svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.7; fill:none; flex:none; opacity:.85;}
.cui-nav a.active svg{opacity:1; color:var(--cyan);}
.cui-switcher{display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:var(--r-sm); background:rgba(255,255,255,.05); color:#fff; font-weight:600; font-size:13px; cursor:pointer; border:1px solid var(--nav-line); margin-bottom:10px;}
.cui-switcher svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none;}
.cui-switcher .cui-chev{margin-left:auto; opacity:.6;}
.cui-side .cui-foot{padding:14px 18px; border-top:1px solid var(--nav-line); font-size:11px; color:rgba(255,255,255,.42);}
.cui-main{display:flex; flex-direction:column; min-width:0;}

/* ---------- Topbar ---------- */
.cui-topbar{display:flex; align-items:center; gap:14px; padding:12px 26px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 88%, transparent); position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(6px);}
.cui-crumb{font-size:13px; color:var(--muted);}
.cui-crumb b{color:var(--ink); font-weight:600;}
.cui-spacer{flex:1;}
.cui-search{position:relative;}
.cui-search input{width:220px; padding:8px 11px 8px 32px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); font-size:13px; font-family:inherit;}
.cui-search svg{position:absolute; left:9px; top:8px; width:16px; height:16px; stroke:var(--muted); stroke-width:1.8; fill:none;}
.cui-content{padding:26px 32px; max-width:1280px; width:100%; margin:0 auto;}
.cui-page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px;}
.cui-page-head h1{font-size:23px; font-weight:800; letter-spacing:-.02em;}
.cui-page-head p{color:var(--muted); font-size:14px; margin-top:3px;}

/* ---------- Buttons ---------- */
.cui-btn{display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:all var(--dur) var(--ease); white-space:nowrap; text-decoration:none;}
.cui-btn:hover{text-decoration:none;}
.cui-btn svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.9; fill:none;}
.cui-btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm);}
.cui-btn-primary:hover{background:var(--accent-dark);}
.cui-btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--shadow-xs);}
.cui-btn-secondary:hover{background:var(--hover);}
.cui-btn-ghost{background:transparent; color:var(--ink-2);}
.cui-btn-ghost:hover{background:var(--hover); color:var(--ink);}
.cui-btn-danger{background:transparent; color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, transparent);}
.cui-btn-danger:hover{background:var(--bad-bg);}
.cui-btn-sm{padding:6px 11px; font-size:12.5px;}
.cui-btn-mini{padding:5px 10px; font-size:12px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-xs); font-weight:600; cursor:pointer;}
.cui-btn:disabled{opacity:.5; cursor:not-allowed;}
.cui-icon-btn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:all var(--dur) var(--ease);}
.cui-icon-btn:hover{background:var(--hover); color:var(--ink);}
.cui-icon-btn svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none;}

/* ---------- Cards ---------- */
.cui-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.cui-card-h{padding:16px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.cui-card-h h2{font-size:15px; font-weight:700;}
.cui-card-b{padding:22px;}
.cui-card-pad{padding:22px;}
.cui-section{margin-bottom:22px;}
.cui-section > h2{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:12px;}

/* ---------- KPI-Stat ---------- */
.cui-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cui-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.cui-stat .cui-lbl2{font-size:12px; color:var(--muted); font-weight:500;}
.cui-stat .cui-val{font-size:27px; font-weight:800; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums;}

/* ---------- Badges ---------- */
.cui-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); line-height:1.4;}
.cui-badge .cui-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.cui-badge-ok{background:var(--ok-bg); color:var(--ok-ink);}
.cui-badge-warn{background:var(--warn-bg); color:var(--warn-ink);}
.cui-badge-bad{background:var(--bad-bg); color:var(--bad-ink);}
.cui-badge-info{background:var(--info-bg); color:var(--info-ink);}
.cui-badge-neutral{background:var(--neutral-bg); color:var(--muted);}
.cui-badge-accent{background:var(--accent-soft); color:var(--accent-dark);}
:root[data-theme="dark"] .cui-badge-accent{color:var(--accent);}

/* ---------- Formular ---------- */
.cui-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;}
.cui-fld{display:flex; flex-direction:column; gap:6px;}
.cui-fld.cui-span2{grid-column:1 / -1;}
.cui-fld label{font-size:12.5px; font-weight:600; color:var(--ink-2);}
.cui-fld label .cui-hint{color:var(--faint); font-weight:400;}
.cui-input,.cui-select,.cui-textarea{width:100%; padding:9px 11px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); font-size:13.5px; font-family:inherit; transition:border var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.cui-textarea{resize:vertical; min-height:120px; line-height:1.5;}
.cui-input:focus,.cui-select:focus,.cui-textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.cui-form-actions{display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.cui-status-text{font-size:12.5px; color:var(--faint);}

/* Chips (Mehrfachauswahl) */
.cui-chips{display:flex; flex-wrap:wrap; gap:8px;}
.cui-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); cursor:pointer; user-select:none;}
.cui-chip.on{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent-dark);}
:root[data-theme="dark"] .cui-chip.on{color:var(--accent);}
.cui-chip svg{width:13px; height:13px; stroke:currentColor; stroke-width:2.4; fill:none;}

/* Toggle-Switch */
.cui-switch{position:relative; display:inline-block; width:42px; height:24px;}
.cui-switch input{opacity:0; width:0; height:0;}
.cui-switch .cui-track{position:absolute; inset:0; background:var(--border); border-radius:var(--r-pill); transition:background var(--dur) var(--ease); cursor:pointer;}
.cui-switch .cui-track::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-sm);}
.cui-switch input:checked + .cui-track{background:var(--accent);}
.cui-switch input:checked + .cui-track::before{transform:translateX(18px);}

/* ---------- Tabs ---------- */
.cui-tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:18px;}
.cui-tab{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--dur) var(--ease);}
.cui-tab:hover{color:var(--ink);}
.cui-tab.active{color:var(--accent); border-bottom-color:var(--accent);}

/* ---------- Tabelle ---------- */
.cui-table-wrap{overflow-x:auto;}
.cui-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.cui-table thead th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:11px 22px; background:var(--surface-2); border-bottom:1px solid var(--border);}
.cui-table tbody td{padding:12px 22px; border-bottom:1px solid var(--line);}
.cui-table tbody tr:last-child td{border-bottom:none;}
.cui-table tbody tr{transition:background var(--dur) var(--ease);}
.cui-table tbody tr:hover{background:var(--hover);}
.cui-table tr.tint-ok{background:color-mix(in srgb, var(--ok) 7%, transparent);}
.cui-table tr.tint-warn{background:color-mix(in srgb, var(--warn) 9%, transparent);}
.cui-table tr.tint-bad{background:color-mix(in srgb, var(--bad) 8%, transparent);}
.cui-table td.cui-acts{text-align:right; white-space:nowrap;}
.cui-ic{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:var(--r-xs); border:1px solid transparent; color:var(--muted); cursor:pointer;}
.cui-ic:hover{background:var(--hover); color:var(--ink);}
.cui-ic.del:hover{color:var(--bad); background:var(--bad-bg);}
.cui-ic svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none;}

/* ---------- Skeleton ---------- */
.cui-skel{background:linear-gradient(90deg, var(--line) 25%, var(--surface-3) 50%, var(--line) 75%); background-size:200% 100%; animation:cui-sh 1.3s infinite; border-radius:var(--r-xs); height:12px;}
@keyframes cui-sh{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media (prefers-reduced-motion: reduce){ .cui-skel{animation:none;} }

/* ---------- Modal + Toast ---------- */
.cui-overlay{position:fixed; inset:0; background:rgba(10,14,20,.5); display:none; place-items:center; z-index:50; backdrop-filter:blur(2px);}
.cui-overlay.open{display:grid;}
.cui-modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:min(440px,92vw); padding:24px;}
.cui-modal h2,.cui-modal h3{font-size:17px; font-weight:700; margin-bottom:8px;}
.cui-modal p{color:var(--muted); font-size:14px; margin-bottom:20px;}
.cui-modal .cui-row{display:flex; justify-content:flex-end; gap:10px;}
.cui-toast-wrap{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:10px; z-index:60;}
.cui-toast{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--ok); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); padding:12px 16px; font-size:13.5px; font-weight:500; min-width:260px; animation:cui-slidein var(--dur) var(--ease);}
.cui-toast.err{border-left-color:var(--bad);}
.cui-toast svg{width:18px; height:18px; stroke:var(--ok); stroke-width:2; fill:none; flex:none;}
@keyframes cui-slidein{from{transform:translateY(8px); opacity:0;}to{transform:none; opacity:1;}}

/* ---------- Utilities ---------- */
.cui-stack{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.cui-cols-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.cui-note{font-size:12.5px; color:var(--faint);}
@media (max-width:900px){
  .cui-app{grid-template-columns:1fr;}
  .cui-side{display:none;}
  .cui-stats{grid-template-columns:1fr 1fr;}
  .cui-cols-2,.cui-form-grid{grid-template-columns:1fr;}
}