/* ZENKIDS UI V2 | Portal Klinik & BABYLON | strictly visual, no business logic */
:root { --zk-ui-ready: 1; --zk-bg:#f3f7fc; --zk-panel:#ffffff; --zk-panel-2:#f8fbff; --zk-panel-soft:#eef4fd; --zk-text:#15233b; --zk-muted:#667b99; --zk-border:#dce6f3; --zk-accent:#2563eb; --zk-accent-deep:#1d4ed8; --zk-accent-rgb:37,99,235; --zk-sidebar:#101f3c; --zk-sidebar-2:#182b4d; --zk-shadow:0 12px 35px rgba(29,50,83,.055); --zk-input:#fff; --zk-radius:22px; color-scheme:light; }
html[data-zk-theme="ocean"] { --zk-bg:#edf8f9; --zk-panel:#fff; --zk-panel-2:#f6fcfc; --zk-panel-soft:#e1f4f4; --zk-text:#102f3d; --zk-muted:#5e7987; --zk-border:#d4e8eb; --zk-accent:#087e85; --zk-accent-deep:#06656b; --zk-accent-rgb:8,126,133; --zk-sidebar:#0d2d3d; --zk-sidebar-2:#154959; }
html[data-zk-theme="emerald"] { --zk-bg:#f0f8f3; --zk-panel:#fff; --zk-panel-2:#f8fcf9; --zk-panel-soft:#e5f4e8; --zk-text:#153223; --zk-muted:#608174; --zk-border:#d6e8db; --zk-accent:#16804a; --zk-accent-deep:#11633a; --zk-accent-rgb:22,128,74; --zk-sidebar:#103423; --zk-sidebar-2:#1b4833; }
html[data-zk-theme="graphite"] { --zk-bg:#eff2f7; --zk-panel:#fff; --zk-panel-2:#f9fafc; --zk-panel-soft:#e9ecf4; --zk-text:#182132; --zk-muted:#66728a; --zk-border:#dae0ea; --zk-accent:#5256be; --zk-accent-deep:#3d419d; --zk-accent-rgb:82,86,190; --zk-sidebar:#191e2b; --zk-sidebar-2:#2a3041; }
html[data-zk-theme="midnight"] { --zk-bg:#101a2b; --zk-panel:#17253a; --zk-panel-2:#1b2c44; --zk-panel-soft:#253953; --zk-text:#f2f7ff; --zk-muted:#adc0d8; --zk-border:#334761; --zk-accent:#74a7ff; --zk-accent-deep:#477ee1; --zk-accent-rgb:116,167,255; --zk-sidebar:#0c1424; --zk-sidebar-2:#13223a; --zk-shadow:0 14px 36px rgba(0,0,0,.22); --zk-input:#21334d; color-scheme:dark; }
/* All authenticated pages: common visual tokens, not page-specific markup rewrites */
body.zk-app { --bg:var(--zk-bg); --surface:var(--zk-panel); --surface2:var(--zk-panel-2); --line:var(--zk-border); --ink:var(--zk-text); --muted:var(--zk-muted); --accent:var(--zk-accent); --accent2:var(--zk-accent-deep); --nav:var(--zk-sidebar); background:var(--zk-bg)!important; color:var(--zk-text); }
body.zk-app .app-shell { min-width:0; }
body.zk-app .sidebar { background:linear-gradient(160deg,var(--zk-sidebar) 0%,var(--zk-sidebar-2) 82%,var(--zk-sidebar) 100%)!important; box-shadow:9px 0 30px rgba(12,26,50,.09); }
body.zk-app .sidebar .nav-link.active { background:rgba(var(--zk-accent-rgb),.25)!important; box-shadow:inset 3px 0 var(--zk-accent)!important; }
body.zk-app .sidebar .nav-link:hover { background:rgba(255,255,255,.09); }
body.zk-app .topbar { background:var(--zk-panel)!important; border-bottom:1px solid var(--zk-border)!important; backdrop-filter:blur(14px); min-width:0; }
body.zk-app .topbar-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:12px!important; min-width:0; }
body.zk-app .topbar-title h1 { color:var(--zk-text)!important; font-weight:800; letter-spacing:-.025em; }
body.zk-app .topbar-title p { color:var(--zk-muted)!important; }
body.zk-app .content { width:100%; max-width:1580px; padding:clamp(18px,2vw,32px); color:var(--zk-text); }
body.zk-app .content .page-head { margin-bottom:20px; }
body.zk-app .content .page-head h2 { color:var(--zk-text); letter-spacing:-.035em; font-weight:850; }
body.zk-app .content .card { background:var(--zk-panel)!important; border:1px solid var(--zk-border)!important; box-shadow:var(--zk-shadow)!important; border-radius:var(--zk-radius)!important; color:var(--zk-text); }
body.zk-app .content .card:not(.hero) { padding:clamp(18px,1.8vw,28px); }
body.zk-app .content .card .card { background:var(--zk-panel-2)!important; box-shadow:none!important; border-radius:16px!important; padding:16px; }
body.zk-app .content .card:not(.hero) > h3, body.zk-app .content h2, body.zk-app .content h3 { color:var(--zk-text); }
body.zk-app .content .card p, body.zk-app .content .metric-sub, body.zk-app .content .metric-label { color:var(--zk-muted); }
body.zk-app .content .grid { gap:18px; }
body.zk-app .content .grid .card { min-width:0; }
body.zk-app .content .metric-value { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
body.zk-app .content .btn-primary { background:var(--zk-accent)!important; border-color:var(--zk-accent)!important; color: #fff!important; border-radius:13px; box-shadow:0 7px 16px rgba(var(--zk-accent-rgb),.15); font-weight:760; }
body.zk-app .content .btn-primary:hover { background:var(--zk-accent-deep)!important; border-color:var(--zk-accent-deep)!important; box-shadow:0 9px 24px rgba(var(--zk-accent-rgb),.22); }
html[data-zk-theme="midnight"] body.zk-app .content .btn-primary { color:#10203a!important; }
body.zk-app .content .btn:not(.btn-primary) { background:var(--zk-panel-2); border-color:var(--zk-border); color:var(--zk-text); border-radius:13px; }
body.zk-app .content .btn { transition:background .18s,box-shadow .18s,transform .18s; }
body.zk-app .content .btn:hover { transform:translateY(-1px); }
body.zk-app .content .table-wrap { border:1px solid var(--zk-border)!important; border-radius:17px!important; overflow:auto; max-width:100%; background:var(--zk-panel); }
body.zk-app .content table { background:var(--zk-panel)!important; color:var(--zk-text); }
body.zk-app .content table thead th { background:var(--zk-panel-soft)!important; color:var(--zk-muted)!important; }
body.zk-app .content table td { background:var(--zk-panel)!important; border-color:var(--zk-border)!important; color:var(--zk-text); }
body.zk-app .content table tr:hover td { background:var(--zk-panel-2)!important; }
body.zk-app .content .field input, body.zk-app .content .field select, body.zk-app .content .field textarea, body.zk-app .content .input, body.zk-app .content .select { background:var(--zk-input)!important; color:var(--zk-text)!important; border:1px solid var(--zk-border)!important; border-radius:12px; min-width:0; }
body.zk-app .content .field label { color:var(--zk-text); }
body.zk-app .content input:focus-visible,body.zk-app .content select:focus-visible,body.zk-app .content textarea:focus-visible { outline:2px solid rgba(var(--zk-accent-rgb),.55)!important; outline-offset:2px; }
body.zk-app .content .source-badge { border-radius:999px; }
/* Dashboard hero and KPI */
body.zk-app .content .card.hero { background:linear-gradient(115deg,var(--zk-panel),var(--zk-panel-soft))!important; border:1px solid var(--zk-border)!important; color:var(--zk-text)!important; }
body.zk-app .content .card.hero h1,body.zk-app .content .card.hero h2{color:var(--zk-text)!important;}
body.zk-app .content .card.hero p{color:var(--zk-muted)!important;}
/* Reports: align and separate large cards without double margins / nested confusion */
body.zk-app .content .financial-report-page-head { margin-bottom:18px; }
body.zk-app .content .financial-report-filter { margin:18px 0 22px!important; }
body.zk-app .content .financial-report-card-head { display:flex; gap:20px; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
body.zk-app .content .financial-report-card-head h3 { margin:6px 0 7px; line-height:1.3; letter-spacing:-.018em; }
body.zk-app .content .financial-report-card-head p { margin:0; line-height:1.55; }
body.zk-app .content .financial-report-card-head .btn { flex-shrink:0; }
body.zk-app .content .financial-report-kicker { color:var(--zk-accent)!important; font-size:11px; letter-spacing:.13em; font-weight:800; }
body.zk-app .content .financial-monthly-card,body.zk-app .content .financial-invoice-card,body.zk-app .content .financial-report-chart-card,body.zk-app .content .financial-transactions-card { margin-top:20px!important; }
body.zk-app .content .financial-transactions-card { padding-block:25px!important; }
body.zk-app .content .financial-transactions-card .financial-report-card-head { margin-bottom:0; align-items:center; }
body.zk-app .content .financial-transactions-card .btn { min-height:50px; padding:12px 18px; }
body.zk-app .content .financial-monthly-table th,body.zk-app .content .financial-monthly-table td { white-space:normal; }
body.zk-app .content .financial-report-filter-form { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
body.zk-app .content .financial-report-filter-form .field { flex:1 1 165px; min-width:145px; margin:0; }
body.zk-app .content .financial-report-filter-form .btn { min-height:44px; }
body.zk-app .content .financial-report-export-bar { margin:14px 0 20px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; background:var(--zk-panel)!important; border:1px solid var(--zk-border); border-radius:20px; padding:20px; }
body.zk-app .content .financial-report-export-actions { display:flex; flex-wrap:wrap; gap:8px; }
body.zk-app .content .financial-period-caption { margin:16px 0; color:var(--zk-muted); }
body.zk-app .content .shift-closing-grid { margin-top:22px!important; gap:20px; align-items:start; }
body.zk-app .content .shift-closing-grid > .card { margin-top:0!important; }
body.zk-app .content .invoice-summary-strip,body.zk-app .content .closure-system-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
body.zk-app .content .invoice-summary-strip > div,body.zk-app .content .closure-system-summary > div { padding:14px 16px; background:var(--zk-panel-soft); border:1px solid var(--zk-border); border-radius:15px; }
body.zk-app .content .financial-report-metrics .card,body.zk-app .content .financial-secondary-metrics .card { margin:0!important; }
/* Icon-based palette picker: compact and contained; never occupies document flow */
.zk-theme-switcher { position:relative; display:inline-flex; align-items:center; flex:0 0 auto; z-index:55; }
.zk-theme-toggle { display:grid!important; place-items:center; width:44px!important; height:44px!important; min-width:44px; min-height:44px; padding:0!important; margin:0; border:1px solid var(--zk-border)!important; border-radius:14px!important; background:var(--zk-panel)!important; color:var(--zk-accent)!important; cursor:pointer; box-shadow:0 4px 15px rgba(20,40,70,.06); }
.zk-theme-toggle svg { width:20px; height:20px; display:block; }
.zk-theme-toggle:hover,.zk-theme-toggle[aria-expanded="true"] { background:var(--zk-panel-soft)!important; border-color:var(--zk-accent)!important; }
.zk-theme-toggle:focus-visible,.zk-theme-option:focus-visible { outline:3px solid rgba(var(--zk-accent-rgb),.40); outline-offset:2px; }
.zk-theme-panel { position:absolute!important; display:block; top:calc(100% + 12px)!important; right:0!important; width:min(306px,calc(100vw - 32px))!important; max-width:calc(100vw - 32px); min-width:0; padding:12px!important; background:var(--zk-panel)!important; border:1px solid var(--zk-border)!important; box-shadow:0 20px 50px rgba(9,30,63,.19)!important; border-radius:20px!important; z-index:900!important; text-align:left!important; white-space:normal!important; }
.zk-theme-panel[hidden],.zk-theme-switcher [hidden] { display:none!important; }
.zk-theme-heading { padding:5px 7px 9px; display:block; }
.zk-theme-heading strong{display:block;font-size:14px;color:var(--zk-text);}
.zk-theme-heading small{display:block;font-size:11px;line-height:1.5;margin-top:3px;color:var(--zk-muted);}
.zk-theme-option { box-sizing:border-box; display:flex!important; align-items:center; gap:11px; width:100%; max-width:100%; min-width:0; padding:11px!important; margin:3px 0!important; text-align:left!important; border:1px solid transparent!important; border-radius:13px!important; background:transparent!important; color:var(--zk-text)!important; cursor:pointer; font:inherit; }
.zk-theme-option:hover,.zk-theme-option.is-active { background:var(--zk-panel-soft)!important; border-color:var(--zk-border)!important; }
.zk-theme-swatch { display:inline-block; width:24px; height:24px; min-width:24px; border-radius:8px; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.zk-theme-option-copy{flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.zk-theme-option-copy strong { display:block; font-size:12.5px; font-weight:750; line-height:1.35; }
.zk-theme-option-copy small { display:block; font-size:11px; color:var(--zk-muted); line-height:1.45; margin-top:2px; }
.zk-theme-option-check { margin-left:auto; color:var(--zk-accent); font-size:16px; font-weight:850; }
.zk-theme-login-slot { display:flex; align-items:center; justify-content:flex-end; }
/* Login redesign, shared between products */
body.zk-modern-login { margin:0; min-height:100vh; background:var(--zk-bg)!important; color:var(--zk-text); }
body.zk-modern-login.login-body { display:block!important; padding:0!important; }
.zk-login-page { min-height:100vh; padding:clamp(16px,3vw,42px); display:grid; place-items:center; }
.zk-login-layout { width:min(1120px,100%); min-height:600px; display:grid; grid-template-columns:1fr 1fr; border-radius:30px; overflow:hidden; background:var(--zk-panel); box-shadow:0 30px 90px rgba(16,40,74,.13); border:1px solid var(--zk-border); }
.zk-login-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:30px; background:linear-gradient(155deg,var(--zk-sidebar) 0%,var(--zk-sidebar-2) 100%); color:#f7fbff; padding:clamp(30px,4vw,56px); }
.zk-login-brand::before { content:''; position:absolute; width:340px; height:340px; right:-150px; top:-100px; border-radius:50%; background:rgba(255,255,255,.07); box-shadow:0 0 0 100px rgba(255,255,255,.025); pointer-events:none; }
.zk-login-brand > * { position:relative; z-index:1; }
.zk-login-brand-identity{display:flex;gap:14px;align-items:center;}
.zk-login-brand-identity img{width:60px;height:60px;object-fit:contain;border-radius:18px;background:#fff;padding:8px;}
.zk-login-brand-identity b{display:block;font-size:19px;letter-spacing:.1em;}
.zk-login-brand-identity small{display:block;color:#b9cce3;font-size:12px;margin-top:5px;}
.zk-login-brand h1{font-size:clamp(29px,3.4vw,44px);letter-spacing:-.04em;line-height:1.17;margin:0 0 16px;color:#fff;}
.zk-login-brand p{color:#cbd9e9;line-height:1.7;margin:0;font-size:14px;max-width:430px;}
.zk-login-brand-foot{font-size:11px;color:#afc4dc;}
.zk-login-main{padding:clamp(27px,4vw,56px);display:flex;flex-direction:column;justify-content:center;min-width:0;background:var(--zk-panel);}
.zk-login-main .zk-theme-login-slot{margin-bottom:30px;}
.zk-login-tag{font-size:11px;letter-spacing:.15em;font-weight:800;color:var(--zk-accent);margin-bottom:12px;}
.zk-login-main h2{font-size:clamp(25px,3vw,34px);letter-spacing:-.04em;line-height:1.2;color:var(--zk-text);margin:0 0 11px;}
.zk-login-main .zk-login-desc{font-size:13px;line-height:1.65;color:var(--zk-muted);margin:0 0 22px;}
.zk-login-main .field { display:block; margin:0 0 17px; }
.zk-login-main .field label { display:block; color:var(--zk-text); font-size:12px; font-weight:750; margin-bottom:8px; }
.zk-login-main .field input { width:100%;min-height:48px;box-sizing:border-box;border-radius:12px;border:1px solid var(--zk-border);padding:12px 14px;background:var(--zk-input);color:var(--zk-text);font:inherit;font-size:14px; }
.zk-login-main .field input:focus { outline:2px solid rgba(var(--zk-accent-rgb),.4);border-color:var(--zk-accent); }
.zk-login-main .zk-password-wrap { position:relative; }
.zk-login-main .zk-password-wrap input { padding-right:62px; }
.zk-password-toggle { position:absolute;right:7px;top:5px;min-height:38px;min-width:46px;border:0;border-radius:9px;background:transparent;color:var(--zk-muted);font-weight:700;cursor:pointer;font-size:11px; }
.zk-password-toggle:hover{background:var(--zk-panel-soft);color:var(--zk-text);}
.zk-login-submit { width:100%;min-height:49px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--zk-accent);color:#fff;font-weight:800;cursor:pointer;margin-top:8px; }
.zk-login-submit:hover{background:var(--zk-accent-deep);}
html[data-zk-theme="midnight"] .zk-login-submit{color:#10203a;}
.zk-login-note{font-size:11px;line-height:1.65;color:var(--zk-muted);padding:14px 15px;background:var(--zk-panel-soft);border-radius:13px;border:1px solid var(--zk-border);margin-top:23px;}
.zk-login-link{margin-top:16px;font-size:12px;color:var(--zk-muted);}
.zk-login-link a{color:var(--zk-accent);font-weight:750;}
.zk-login-main .alert{margin-bottom:17px;}
/* Additional dark-mode legibility beyond app-wide variables. */
html[data-zk-theme="midnight"] body.zk-app .topbar,html[data-zk-theme="midnight"] body.zk-app .content .card,html[data-zk-theme="midnight"] body.zk-app .content .table-wrap { color:var(--zk-text)!important; }
html[data-zk-theme="midnight"] body.zk-app .user strong,html[data-zk-theme="midnight"] body.zk-app .topbar a,html[data-zk-theme="midnight"] body.zk-app .content strong { color:inherit; }
html[data-zk-theme="midnight"] body.zk-app .financial-report-card-head h3 { color:var(--zk-text)!important; }
@media(max-width:1050px){ body.zk-app .topbar-actions {gap:7px!important;} body.zk-app .content{padding:20px;} .zk-login-layout{max-width:960px;} }
@media(max-width:820px){body.zk-app .content{padding:16px;}body.zk-app .content .financial-report-card-head{flex-wrap:wrap;}body.zk-app .content .financial-report-card-head .btn{width:100%;}body.zk-app .content .financial-report-filter-form .field{flex:1 1 100%;}body.zk-app .content .card:not(.hero){padding:18px;}body.zk-app .topbar .zk-theme-toggle{width:39px!important;height:39px!important;min-width:39px;min-height:39px;} .zk-login-page{padding:14px;}.zk-login-layout{grid-template-columns:1fr;}.zk-login-brand{padding:26px;min-height:170px;}.zk-login-brand h1{font-size:27px;}.zk-login-brand-foot{display:none;}.zk-login-main{padding:26px;}.zk-login-main .zk-theme-login-slot{margin-bottom:16px;} .zk-theme-panel{position:fixed!important;top:78px!important;right:12px!important;left:auto!important;width:min(306px,calc(100vw - 24px))!important;} }
@media(max-width:530px){body.zk-app .financial-transactions-card .financial-report-card-head{align-items:stretch;}body.zk-app .financial-transactions-card .btn{width:100%;} .zk-login-brand-identity img{width:48px;height:48px;} .zk-theme-panel { right:-5px!important; } }
@media(prefers-reduced-motion: reduce){.zk-theme-option,.zk-theme-toggle,.zk-login-submit{transition:none!important;}}