/* =========================================================================
   Cyberdine Systems — theme.css
   Design-Tokens + Komponenten-Skin (SaaS-light, Teal-Akzent).
   Lädt NACH bootstrap5.min.css und screen.css -> gewinnt im Kaskaden-Konflikt.
   Vorlage: docs/superpowers/mockups/2026-07-14-cyberdine-saas-light.html
   ========================================================================= */

:root{
  --bg:#f6f8f9; --surface:#fff; --surface-2:#fbfcfd; --surface-3:#f1f4f6;
  --border:#e4e9ed; --border-strong:#d3dade;
  --text:#16232e; --text-muted:#5c6b78; --text-faint:#8a97a2;
  --accent:#0e7c8b; --accent-hover:#0a616e; --accent-tint:#e5f2f4; --accent-tint-2:#d3e9ec;
  --ok:#157f47; --ok-tint:#e4f4ea; --warn:#9a6410; --warn-tint:#f7efdc; --bad:#b3341f; --bad-tint:#fae6e2;
  --r:9px; --r-sm:6px; --pill:999px;
  --shadow:0 1px 2px rgba(16,35,46,.05),0 2px 6px rgba(16,35,46,.045);
  --shadow-lg:0 4px 14px rgba(16,35,46,.09);
  --tooltip-bg:#16232e; --tooltip-fg:#fff;
  --chart-grid:#eef2f4; --chart-line:#0e7c8b;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:13.5px; --fs-md:15px; --fs-lg:18px; --fs-xl:23px; --fs-2xl:29px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e141a; --surface:#161e26; --surface-2:#131a21; --surface-3:#1c2630;
    --border:#26313b; --border-strong:#324150; --text:#e7edf2; --text-muted:#9aa8b4; --text-faint:#6f7d8a;
    --accent:#2ba6b6; --accent-hover:#48c0cf; --accent-tint:#123138; --accent-tint-2:#17414a;
    --ok:#3fb26f; --ok-tint:#13301f; --warn:#d09a3e; --warn-tint:#332714; --bad:#e06a54; --bad-tint:#341813;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 6px 20px rgba(0,0,0,.5);
    --tooltip-bg:#26313b; --tooltip-fg:#e7edf2; --chart-grid:#26313b; --chart-line:#2ba6b6;
  }
}
:root[data-theme="dark"]{
  --bg:#0e141a; --surface:#161e26; --surface-2:#131a21; --surface-3:#1c2630;
  --border:#26313b; --border-strong:#324150; --text:#e7edf2; --text-muted:#9aa8b4; --text-faint:#6f7d8a;
  --accent:#2ba6b6; --accent-hover:#48c0cf; --accent-tint:#123138; --accent-tint-2:#17414a;
  --ok:#3fb26f; --ok-tint:#13301f; --warn:#d09a3e; --warn-tint:#332714; --bad:#e06a54; --bad-tint:#341813;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 6px 20px rgba(0,0,0,.5);
  --tooltip-bg:#26313b; --tooltip-fg:#e7edf2; --chart-grid:#26313b; --chart-line:#2ba6b6;
}

/* ---- Bootstrap-5-Variablen auf Tokens mappen (BS5-Komponenten erben Skin) ---- */
:root{
  --bs-primary:var(--accent); --bs-primary-rgb:14,124,139;
  --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-secondary-color:var(--text-muted);
  --bs-border-color:var(--border); --bs-border-radius:var(--r-sm); --bs-border-radius-sm:var(--r-sm);
  --bs-font-sans-serif:var(--font); --bs-body-font-size:var(--fs-base);
  --bs-link-color:var(--accent); --bs-link-hover-color:var(--accent-hover);
  --bs-link-color-rgb:14,124,139;
}

/* ---- Basis ---- */
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;}
.num,.mono{font-variant-numeric:tabular-nums;}
.eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--text-faint);}

/* ---- BS5-Buttons an Token angleichen ---- */
.btn{--bs-btn-font-size:var(--fs-base);--bs-btn-font-weight:600;--bs-btn-border-radius:var(--r-sm);}
/* Legacy-Buttons ohne BS5-Farbvariante (btn / btn-sm) sichtbar machen: neutraler Default-Look statt transparent */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not([class*="btn-outline"]){
	--bs-btn-color:var(--text);
	--bs-btn-bg:var(--surface);
	--bs-btn-border-color:var(--border);
	--bs-btn-hover-color:var(--text);
	--bs-btn-hover-bg:var(--bg);
	--bs-btn-hover-border-color:var(--text-faint);
	--bs-btn-active-color:var(--text);
	--bs-btn-active-bg:var(--bg);
	--bs-btn-active-border-color:var(--text-faint);
}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent-hover);--bs-btn-hover-border-color:var(--accent-hover);--bs-btn-active-bg:var(--accent-hover);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;}
.btn-outline-secondary{--bs-btn-color:var(--text-muted);--bs-btn-border-color:var(--border);--bs-btn-hover-bg:var(--surface-3);--bs-btn-hover-color:var(--text);--bs-btn-hover-border-color:var(--border-strong);}

/* ---- App-Shell ---- */
.app{display:grid;grid-template-columns:236px 1fr;grid-template-rows:56px 1fr;min-height:100vh;}
.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:20px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1020;}
.brand{display:flex;align-items:center;gap:10px;width:196px;flex:none;text-decoration:none;color:var(--text);}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;box-shadow:var(--shadow);}
.brand b{font-weight:650;font-size:var(--fs-md);letter-spacing:-.01em;}
.brand span{color:var(--text-faint);font-weight:500;}
.topsearch{flex:1;max-width:440px;position:relative;}
.topsearch input{width:100%;height:36px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--pill);padding:0 14px 0 36px;color:var(--text);font-size:var(--fs-base);font-family:inherit;}
.topsearch input::placeholder{color:var(--text-faint);}
.topsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);background:var(--surface);}
.topsearch svg{position:absolute;left:12px;top:9px;color:var(--text-faint);}
.topright{margin-left:auto;display:flex;align-items:center;gap:14px;}
.userchip{width:32px;height:32px;border-radius:var(--pill);background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px;text-decoration:none;}

/* ---- Sidebar (bestehendes #navigation-Markup, restyled) ---- */
.side{background:var(--surface);border-right:1px solid var(--border);padding:12px 12px 40px;overflow-y:auto;}
.side #navigation{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px;}
.side #navigation li{position:relative;border:none;list-style:none;}
.side #navigation > li{margin-top:1px;}
.side #navigation a{display:block;padding:8px 11px;border-radius:var(--r-sm);color:var(--text-muted);text-decoration:none;font-weight:500;font-size:var(--fs-base);line-height:1.3;}
.side #navigation a:hover{background:var(--surface-3);color:var(--text);}
.side #navigation a.active{background:var(--accent-tint);color:var(--accent-hover);font-weight:600;}
/* Untermenüs eingerückt, dezenter */
.side #navigation ul{list-style:none;padding:0;margin:1px 0 4px;}
/* Kein Aufblitzen beim Laden: Untermenüs verstecken, bis JS sie zu BS5-Collapse macht */
.side #navigation > li > ul:not(.collapse){display:none;}
.side #navigation ul a{padding:6px 11px 6px 22px;font-size:var(--fs-sm);color:var(--text-faint);}
.side #navigation ul a:hover{color:var(--text);}
.side #navigation ul a.active{color:var(--accent-hover);background:var(--accent-tint);}
/* Submenu-Aufklapp-Chevron (Bootstrap-5-Collapse-Toggle, rotiert via aria-expanded) */
.side #navigation a.navchev{position:absolute;left:auto;right:13px;top:15px;margin:0;padding:0;box-sizing:content-box;width:6px;height:6px;border:0;border-top:2px solid var(--text-faint);border-right:2px solid var(--text-faint);border-radius:0;background:none;text-indent:0;overflow:visible;transform:rotate(45deg);transition:transform .15s ease;cursor:pointer;}
.side #navigation a.navchev[aria-expanded="true"]{transform:rotate(135deg);top:12px;}
.side #navigation a.navchev:hover{border-color:var(--accent);}

/* Notify-Badge rechts (neben dem Chevron) */
.side #navigation .navNotify{position:absolute;right:28px;top:6px;}
.side #navigation .navNotify a{padding:0;min-width:18px;height:18px;display:grid;place-items:center;background:var(--bad);color:#fff;border-radius:var(--pill);font-size:10px;font-weight:700;}
.side #navigation .navNotify a:hover{background:var(--bad);color:#fff;}

/* ---- Main ---- */
.main{padding:24px 28px 48px;overflow-y:auto;}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--text-faint);font-size:var(--fs-sm);margin-bottom:6px;}
.crumbs a{color:var(--text-muted);text-decoration:none;}
.crumbs b{color:var(--text-muted);font-weight:500;}
.pagehead{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.pagehead h1{font-size:var(--fs-xl);font-weight:680;letter-spacing:-.015em;text-wrap:balance;margin:0;}
.pagehead .spacer{flex:1;}

/* ---- Cards (BS5 .card + Skin) ---- */
.card{--bs-card-bg:var(--surface);--bs-card-border-color:var(--border);--bs-card-border-radius:var(--r);--bs-card-inner-border-radius:var(--r);box-shadow:var(--shadow);}
.cardhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);}
.cardhead h3{font-size:var(--fs-md);font-weight:640;margin:0;}
.cardhead a{color:var(--accent);text-decoration:none;font-size:var(--fs-sm);font-weight:600;}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;position:relative;overflow:hidden;}
.kpi .lab{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:600;}
.kpi .val{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em;margin-top:9px;}
.kpi .val small{font-size:15px;font-weight:600;color:var(--text-muted);}
.kpi .delta{margin-top:6px;font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:4px;}
.kpi .up{color:var(--ok);} .kpi .down{color:var(--bad);}
.kpi .rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.kpi.warn .rail{background:var(--warn);} .kpi.bad .rail{background:var(--bad);}
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;}

/* mini list */
.mini{display:flex;flex-direction:column;}
.mini .row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--border);margin:0;}
.mini .row:first-child{border-top:none;}
.mini .who{font-weight:600;}
.mini .sub{color:var(--text-faint);font-size:var(--fs-sm);}
.mini .amt{margin-left:auto;font-weight:650;}

/* ---- Tabellen (Overview) ---- */
table.overview{width:100%;border-collapse:collapse;font-size:var(--fs-base);background:var(--surface);}
table.overview thead th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2);}
table.overview tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.overview tbody tr:hover{background:var(--surface-2);}
table.overview .right,table.overview .r{text-align:right;}
.idlink{color:var(--accent);font-weight:650;text-decoration:none;}

/* ---- Status-Pills ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:650;padding:3px 9px;border-radius:var(--pill);}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.ok{background:var(--ok-tint);color:var(--ok);}
.pill.warn{background:var(--warn-tint);color:var(--warn);}
.pill.bad{background:var(--bad-tint);color:var(--bad);}
.pill.neutral{background:var(--surface-3);color:var(--text-muted);}

/* ---- Zeilen-Aktionen / Icon-Buttons ---- */
.iconbtn{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--text-faint);display:inline-grid;place-items:center;cursor:pointer;}
.iconbtn:hover{background:var(--surface-3);color:var(--accent);border-color:var(--border);}

/* ---- Filter-/Toolbar-Chips ---- */
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.chip{height:30px;padding:0 12px;border:1px solid var(--border);border-radius:var(--pill);background:var(--surface-2);color:var(--text-muted);font-size:var(--fs-sm);font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;}
.chip.on{background:var(--accent-tint);border-color:var(--accent-tint-2);color:var(--accent-hover);font-weight:600;}

/* ---- Paginierung ---- */
.pager{display:flex;align-items:center;gap:4px;padding:12px 16px;color:var(--text-muted);font-size:var(--fs-sm);}
.pager .pg{min-width:30px;height:30px;padding:0 8px;border-radius:var(--r-sm);display:inline-grid;place-items:center;cursor:pointer;font-weight:600;text-decoration:none;color:var(--text-muted);}
.pager .pg.on{background:var(--accent);color:#fff;}
.pager .pg:not(.on):hover{background:var(--surface-3);}

/* ---- Quick-Filter-Chips (Status) über der Liste ---- */
.main .qftoolbar{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:14px;box-shadow:var(--shadow);}

/* ---- Overview: Bulk-Leiste / Paginierung / Views-Kopf (screen.css überschreiben) ---- */
.main div.bulkCnt{background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:var(--r) var(--r) 0 0;padding:12px 16px;box-shadow:none;}
.main div.splitter{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:12px 16px;box-shadow:none;}
.main .splitter a,.main .splitter strong{min-width:30px;height:30px;padding:0 8px;border-radius:var(--r-sm);display:inline-grid;place-items:center;font-weight:600;text-decoration:none;color:var(--text-muted);font-size:var(--fs-sm);}
.main .splitter strong{background:var(--accent);color:#fff;}
.main .splitter a:hover{background:var(--surface-3);color:var(--text);}
.main table.overview{border:1px solid var(--border);border-top:none;border-bottom:none;}
.main #views,.main #showViews{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;}
.main #views .vHeader{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:600;}
.main .viewButtons{margin-top:12px;}

/* ---- Konfigurations-Seite: altes Fixed-Width-Float-Layout -> robustes Flex-Zweispalten ---- */
.main #config{width:auto;max-width:100%;margin-top:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);display:flex;align-items:stretch;overflow:hidden;}
.main #configSections{float:none;flex:none;width:220px;margin:0;padding:8px 0;list-style:none;border-right:1px solid var(--border);background:var(--surface-2);}
.main #configSections li{border:none;}
.main #configSections li a{display:block;padding:8px 16px;color:var(--text-muted);font-size:var(--fs-base);text-shadow:none;text-decoration:none;font-weight:500;}
.main #configSections li a:hover{background:var(--surface-3);color:var(--text);}
.main #configSections li a.active{background:var(--accent-tint);color:var(--accent-hover);font-weight:600;}
.main #configOptions{float:none;flex:1;min-width:0;width:auto;padding:0;}
.main #configOptions p{margin:14px 18px;color:var(--text-muted);}
.main #configOptions table.stdForm{width:100%;margin:0;border:none;border-radius:0;box-shadow:none;}
.main #configOptions table.stdForm textarea{width:100%!important;max-width:420px;}
.main #config .clear{clear:none;}

/* ---- Formulare (.stdForm-Tabelle strukturell gestylt; keine Klassen-Injektion) ---- */
.main .stdForm{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);}
.main .stdForm tr,.main .stdForm tr.row1{background:var(--surface);}
.main .stdForm th,.main .stdForm td{border:none;background:var(--surface);}
.main .stdForm th{text-align:left;font-weight:550;color:var(--text-muted);padding:11px 18px;width:210px;vertical-align:middle;}
.main .stdForm td{padding:9px 18px;border-top:1px solid var(--border);vertical-align:middle;}
.main .stdForm tr:first-child td,.main .stdForm tr:first-child th{border-top:none;}
.main .stdForm tr.rowHead th,.main .stdForm tr.rowHead td{background:var(--surface-2);border-top:1px solid var(--border);}
.main .stdForm tr.rowHead h3{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:700;padding:5px 0;}
.main .stdForm input[type=text],.main .stdForm input[type=password],.main .stdForm input.datePicker,.main .stdForm input.tagfield,.main .stdForm input.text,.main .stdForm textarea,.main .stdForm select{border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:7px 11px;font-size:var(--fs-base);font-family:inherit;color:var(--text);background:var(--surface);min-width:280px;max-width:100%;}
.main .stdForm textarea{min-height:70px;}
.main .stdForm input:focus,.main .stdForm textarea:focus,.main .stdForm select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
/* select2 (v3) an Look angleichen */
.main .stdForm .select2-container{min-width:280px;}
.main .stdForm .select2-container .select2-choice{height:34px;line-height:32px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);box-shadow:none;}
.hint{color:var(--text-faint);font-size:var(--fs-sm);}

/* ---- Dashboard KPI-Reihe (oben, volle Breite) ---- */
.main .dashboard-kpis{margin-bottom:16px;}
.main .dashboard-hero{margin-bottom:18px;align-items:stretch;}
.main .dashboard-hero .card{display:flex;flex-direction:column;}
.main .chartwrap{padding:14px 18px 10px;}
.main .chart-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.main .chart-meta .big{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;}
.main .dashboard-kpis .kpi .lab{display:block;}
.main .dashboard-kpis .kpi .val small{font-size:15px;font-weight:600;color:var(--text-muted);}

/* ---- Dashboard-Portlets als Cards ---- */
.main #leftCol,.main #rightCol{width:calc(50% - 8px);}
.main #leftCol{float:left;margin-right:16px;}
.main #rightCol{float:left;}
.main .startColumn .portlet{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;}
.main .startColumn .portlet-header{background:var(--surface);border-bottom:1px solid var(--border);padding:13px 18px;font-size:var(--fs-md);font-weight:640;color:var(--text);cursor:move;}
.main .startColumn .portlet-content{padding:16px 18px;}
.main .startColumn .portlet table.static{width:100%;}
.main .startColumn .portlet table.static td,.main .startColumn .portlet table.static th{border:none;padding:7px 6px;background:transparent;}
.main .startColumn .portlet table.static tr.borderBottom td{border-bottom:1px solid var(--border);padding-bottom:12px;}
.main .startColumn .portlet table.static th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:600;}
.main .startColumn .portlet .navNotify,.main #notifications+ .startColumn{}
.main .portlet-content .btn,.main .portlet-content a.btn{margin-top:6px;}

/* ---- Login (nicht eingeloggt) ---- */
html{background:var(--bg);} /* alten Gradient-Bleed (screen.css html{}) neutralisieren */
.login-shell{max-width:380px;margin:9vh auto 0;padding:28px 30px 32px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);}
.login-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;font-size:var(--fs-lg);}
.login-brand .logo{width:34px;height:34px;font-size:16px;}
.login-brand b{font-weight:650;} .login-brand span:last-child{color:var(--text-faint);}
.login-form{display:flex;flex-direction:column;}
.login-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin:10px 0 3px;}
.login-form .form-control{height:38px;}
.login-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-muted);margin:14px 0 2px;font-weight:500;}
.login-btn{margin-top:14px;width:100%;height:40px;font-size:var(--fs-md);}
.login-shell #notifications{margin-bottom:8px;}

/* ---- jQuery-UI Tabs flach/modern (Teal-Unterstrich) ---- */
.main .ui-tabs{padding:0;border:none;background:transparent;}
.main .ui-tabs .ui-tabs-nav{background:transparent;background-image:none;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;margin-bottom:18px;}
.main .ui-tabs .ui-tabs-nav li{background:transparent;background-image:none;border:none;margin:0 2px -1px 0;border-radius:0;top:0;}
.main .ui-tabs .ui-tabs-nav li a{color:var(--text-muted);font-weight:550;padding:10px 16px;border-bottom:2px solid transparent;}
.main .ui-tabs .ui-tabs-nav li a:hover{color:var(--text);}
.main .ui-tabs .ui-tabs-nav li.ui-tabs-selected a,.main .ui-tabs .ui-tabs-nav li.ui-tabs-active a,.main .ui-tabs .ui-tabs-nav li.ui-state-active a{color:var(--accent-hover);border-bottom-color:var(--accent);font-weight:650;}
.main .ui-tabs .ui-tabs-panel{padding:0;background:transparent;border:none;}

/* ---- jQuery-UI Datepicker / Dialog dezent an Tokens ---- */
.ui-datepicker,.ui-dialog{border:1px solid var(--border)!important;box-shadow:var(--shadow-lg)!important;border-radius:var(--r)!important;background:var(--surface)!important;}
.ui-datepicker .ui-datepicker-header{background:var(--surface)!important;background-image:none!important;border:none!important;color:var(--text)!important;}
.ui-datepicker td a.ui-state-active,.ui-datepicker td a.ui-state-highlight{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;}
.ui-dialog .ui-dialog-titlebar{background:var(--surface)!important;background-image:none!important;border:none!important;border-bottom:1px solid var(--border)!important;color:var(--text)!important;}

/* ---- A11y ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* --- PDF-Vorschau in Dokument-Show-Ansicht --- */
.showLayout{display:grid;grid-template-columns:minmax(0,880px) 1fr;gap:16px;align-items:start;}
.showLayout > #container-1{min-width:0;}
.pdfPreview{position:sticky;top:16px;display:flex;flex-direction:column;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	box-shadow:var(--shadow);overflow:hidden;}
.pdfPreviewHead{display:flex;align-items:center;gap:14px;padding:9px 14px;
	border-bottom:1px solid var(--border);font-weight:600;}
.pdfPreviewHead a{font-weight:400;font-size:.85em;}
.pdfPreviewFrame{width:100%;height:calc(100vh - 150px);border:0;background:#fff;}
.pdfPreviewEmpty{padding:40px 20px;text-align:center;color:var(--text-faint);}
.pdfPreviewEmpty p{margin:0 0 14px;}
@media (max-width:1400px){
	.showLayout{grid-template-columns:1fr;}
	.pdfPreview{position:static;}
	.pdfPreviewFrame{height:80vh;}
}

/* Tooltip fuer Dashboard-Umsatzdiagramm (flot plothover) */
#dashChartTooltip{position:absolute;display:none;z-index:1080;padding:4px 9px;background:var(--tooltip-bg);color:var(--tooltip-fg);font-size:12px;font-weight:600;line-height:1.3;border-radius:6px;box-shadow:var(--shadow-lg);pointer-events:none;white-space:nowrap;}

/* ============ Dark Mode: Ergaenzungen zum bestehenden Token-Layer ============ */
/* iframe-PDF bleibt hell (PDF-Inhalt ist weiss) */
:root[data-theme="dark"] .pdfPreviewFrame{background:#fff;}
/* Theme-Toggle-Icon: Mond im Hellmodus (Klick -> dunkel), Sonne im Dunkelmodus (Klick -> hell) */
#themeToggle .ico-sun{display:none;} #themeToggle .ico-moon{display:inline-block;}
:root[data-theme="dark"] #themeToggle .ico-sun{display:inline-block;} :root[data-theme="dark"] #themeToggle .ico-moon{display:none;}

/* ============ Dark Mode: Legacy-Flaechen (screen.css harte Farben) dark-tauglich ============ */
/* Weisse Karten/Papier-Container -> surface */
:root[data-theme="dark"] #wrap,
:root[data-theme="dark"] #footer,
:root[data-theme="dark"] .paperBox{background:var(--surface);}
/* Formulare (stdForm): BG, Zebra, Kopfzeile, Raender */
:root[data-theme="dark"] table.stdForm td,
:root[data-theme="dark"] table.stdForm th{background-color:var(--surface-2);border-bottom-color:var(--border);color:var(--text);}
:root[data-theme="dark"] table.stdForm tr.row1 th,
:root[data-theme="dark"] table.stdForm tr.row1 td{background-color:var(--surface-3);}
:root[data-theme="dark"] table.stdForm td.headline{background-color:var(--surface-3)!important;color:var(--text);}
:root[data-theme="dark"] table.stdForm td.headline h3{text-shadow:none;color:var(--text);}
/* #f4f3f3-Gruppe: Dokument-Optionen, Config, Installer, Datepicker */
:root[data-theme="dark"] #documentOptions,
:root[data-theme="dark"] #config,
:root[data-theme="dark"] body.installer table.accessData{background-color:var(--surface-2);border-color:var(--border);}
:root[data-theme="dark"] #documentOptions table td a{text-shadow:none;}
:root[data-theme="dark"] #ui-datepicker-div.ui-widget-content{background:var(--surface-2)!important;}
/* Positionstabelle (docTable) */
:root[data-theme="dark"] #invoice .docTableBody{background-color:var(--surface-2);}
:root[data-theme="dark"] #invoice .docTableFoot{background-color:var(--surface-3);}
/* Overview-Tabelle: explizite helle Zeilen-BGs (Bild-Zeilentrenner bleibt als Trenner) */
:root[data-theme="dark"] table.overview .col1{background-color:var(--surface-2);}
:root[data-theme="dark"] table.overview tr:hover td{background-color:var(--surface-3)!important;}
:root[data-theme="dark"] table.overview tr.totals td{background-color:var(--surface-3);}
:root[data-theme="dark"] .notesList .note:hover{background-color:var(--surface-3);}
/* jQuery-UI Header/Toolbar/Boxen (efefef/dcdcdc) */
:root[data-theme="dark"] .ui-widget-header,
:root[data-theme="dark"] .bulkCnt,
:root[data-theme="dark"] .splitter,
:root[data-theme="dark"] .filterBox,
:root[data-theme="dark"] .tagBox,
:root[data-theme="dark"] .sendActionCnt .sendAction,
:root[data-theme="dark"] #options,
:root[data-theme="dark"] #optPane{background:var(--surface-2);color:var(--text-muted);border-color:var(--border);}
/* jQuery-UI Tabs/Dialog (Invoice-Detail nutzt jQuery-UI-Tabs!) */
:root[data-theme="dark"] .ui-widget-content{background:var(--surface);color:var(--text);}
:root[data-theme="dark"] .ui-state-default,
:root[data-theme="dark"] .ui-widget-content .ui-state-default,
:root[data-theme="dark"] .ui-widget-header .ui-state-default{background:var(--surface-3);border-color:var(--border);}
:root[data-theme="dark"] .ui-state-default a,
:root[data-theme="dark"] .ui-state-default a:link,
:root[data-theme="dark"] .ui-state-default a:visited{color:var(--text-muted);}
:root[data-theme="dark"] .ui-state-hover,
:root[data-theme="dark"] .ui-state-focus{background:var(--surface-2);}
:root[data-theme="dark"] .ui-state-active,
:root[data-theme="dark"] .ui-state-active a{background:var(--surface);color:var(--text);}
:root[data-theme="dark"] .ui-dialog.ui-widget-content,
:root[data-theme="dark"] .ui-autocomplete{background:var(--surface)!important;border-color:var(--border);}
:root[data-theme="dark"] .ui-tabs-nav li a span{text-shadow:none;}
/* Gelbe Hinweisboxen -> dunkles warn-tint */
:root[data-theme="dark"] .hint,
:root[data-theme="dark"] .activeline,
:root[data-theme="dark"] table.overview tr.checked td,
:root[data-theme="dark"] table.overview tr.static:hover td,
:root[data-theme="dark"] #introductionHints,
:root[data-theme="dark"] .bgHighlight{background-color:var(--warn-tint)!important;color:var(--text);border-color:var(--warn);}
:root[data-theme="dark"] #introductionHints h2{color:var(--warn);}
/* Config-Sektionen */
:root[data-theme="dark"] #configSections li{border-color:var(--border);}
:root[data-theme="dark"] #configSections li a{color:var(--text-muted);text-shadow:none;}
:root[data-theme="dark"] #configSections li a.active{background:var(--surface);color:var(--text);}
/* Select2-Widgets in Formularen */
:root[data-theme="dark"] .select2-choices{background:var(--surface-2);border-color:var(--border);color:var(--text);}
:root[data-theme="dark"] .select2-results{color:var(--text);}
/* pre/code */
:root[data-theme="dark"] pre{background-color:var(--surface-3);color:var(--text);}

/* Dokument-Summenzeilen: Klassen statt Inline-Styles (Light exakt, Dark ueber Tokens) */
#invoice .docTableFoot.docSubtotal{background-color:#d6e8f3;}
#invoice .docTableFoot.docTotal{background-color:#c0dcec;}
#invoice .docTableBody.docOptional{background-color:#fffff1;}
:root[data-theme="dark"] #invoice .docTableFoot.docSubtotal{background-color:var(--surface-3);}
:root[data-theme="dark"] #invoice .docTableFoot.docTotal{background-color:var(--accent-tint-2);}
:root[data-theme="dark"] #invoice .docTableBody.docOptional{background-color:var(--warn-tint);}

/* Mailspool-Versand-Log */
#spoolLog{margin-top:8px;max-height:260px;overflow-y:auto;font-size:var(--fs-sm);}
.spoolLogLine{padding:2px 0;border-bottom:1px solid var(--border);}
.spoolLogLine.ok{color:var(--text-muted);}
.spoolLogLine.err{color:var(--bad);}

/* Animierte diagonale Streifen auf der Mailspool-Versand-Progressbar */
#spoolProgressWrap #progressbar.ui-progressbar{overflow:hidden;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2);}
#spoolProgressWrap #progressbar .ui-progressbar-value{
	border:0;margin:0;
	background-color:var(--accent)!important;
	background-image:linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent)!important;
	background-size:1.1rem 1.1rem!important;
	background-repeat:repeat!important;
	animation:spoolStripes 1s linear infinite;
}
@keyframes spoolStripes{from{background-position:0 0;}to{background-position:1.1rem 0;}}
@media (prefers-reduced-motion:reduce){#spoolProgressWrap #progressbar .ui-progressbar-value{animation:none;}}