/* ZYASY Monitor Unified UI, v1 — presentation-only layer.
   Applies one coherent dark/emerald design across the existing work, admin and mobile apps.
   Business logic, database calls and financial calculations remain in original JavaScript. */
:root{
  color-scheme:dark;
  --zy-bg:#08131d;--zy-panel:#111f2e;--zy-panel-alt:#142638;
  --zy-input:#192b3d;--zy-line:#2b4257;--zy-line-soft:#233747;
  --zy-text:#e9f4fc;--zy-muted:#91a7b9;--zy-green:#31e2aa;
  --zy-green-dark:#0d3b31;--zy-red:#f07c89;--zy-amber:#eabb70;
  --zy-shadow:0 15px 45px rgba(0,0,0,.2);
}
html{scroll-behavior:smooth}
body.zyasy-unified{background:radial-gradient(ellipse at 80% -300px,#173a4b 0%,transparent 40%),var(--zy-bg)!important;color:var(--zy-text)!important;font-family:Inter,'Segoe UI',system-ui,sans-serif!important;min-height:100dvh}
body.zyasy-unified *{box-sizing:border-box}
body.zyasy-unified [hidden],body.zyasy-unified .hidden{display:none!important}
body.zyasy-unified a{color:#80eed0;text-underline-offset:3px}
body.zyasy-unified a:hover{color:#b9ffe6}
body.zyasy-unified h1,body.zyasy-unified h2,body.zyasy-unified h3,body.zyasy-unified h4{color:#f2f9ff;letter-spacing:-.023em}
body.zyasy-unified p,body.zyasy-unified .muted{line-height:1.6}
body.zyasy-unified .muted,body.zyasy-unified small,body.zyasy-unified .hint{color:var(--zy-muted)}
body.zyasy-unified :is(.card,.surface,.panel-card,.kpi,.job-kpi,.stat,.box,.notice:not(.error)){border-color:var(--zy-line);box-shadow:var(--zy-shadow)}
body.zyasy-unified :is(.card,.surface,.kpi,.job-kpi,.stat){background:linear-gradient(152deg,#122333,#101d2b)!important;border:1px solid var(--zy-line)!important;border-radius:17px!important;color:var(--zy-text)}
body.zyasy-unified :is(input:not([type=radio]):not([type=checkbox]),select,textarea){background:var(--zy-input)!important;color:var(--zy-text)!important;border:1px solid #3a5266!important;border-radius:11px!important;min-height:42px;box-shadow:none!important;max-width:100%}
body.zyasy-unified :is(input,select,textarea):focus-visible{outline:2px solid #31e2aa80!important;outline-offset:2px;border-color:var(--zy-green)!important}
body.zyasy-unified :is(input,textarea)::placeholder{color:#90a5b4!important;opacity:1}
body.zyasy-unified input[type=checkbox],body.zyasy-unified input[type=radio]{accent-color:var(--zy-green)}
body.zyasy-unified label,body.zyasy-unified .field label{color:#d1e1ef}
body.zyasy-unified button,body.zyasy-unified .button,body.zyasy-unified .btn{background:#182b3e;color:#e9f5fd;border:1px solid #355066;border-radius:11px;transition:background .15s,border-color .15s,transform .12s;font-weight:650}
body.zyasy-unified button:hover:not(:disabled),body.zyasy-unified .button:hover{background:#244054;border-color:#4d7b7a}
body.zyasy-unified button:active:not(:disabled){transform:translateY(1px)}
body.zyasy-unified :is(button.primary,button.btn.primary,.primary,button.btn.green){background:linear-gradient(115deg,#47ecc1,#0cc98e)!important;border-color:#12ce93!important;color:#06251e!important;font-weight:800;box-shadow:0 6px 24px #0b9d7233}
body.zyasy-unified :is(button.primary,button.btn.primary,.primary):hover:not(:disabled){filter:brightness(1.05)}
body.zyasy-unified :is(button.danger,.btn.red){background:#402633!important;color:#ffacb3!important;border-color:#81515b!important}
body.zyasy-unified :is(.badge,.pill,.test-label){background:#1a3c35!important;color:#7af0c1!important;border:1px solid #296e59!important;border-radius:999px!important;padding:5px 11px}
body.zyasy-unified :is(.error,.form-error){color:#ff949e!important}
body.zyasy-unified :is(.notice,.banner){background:#302917!important;color:#f5d08e!important;border:1px solid #66532e!important;border-radius:12px!important}
body.zyasy-unified dialog{background:#0e1d2c!important;color:var(--zy-text)!important;border:1px solid var(--zy-line)!important;border-radius:20px!important;box-shadow:0 25px 90px #000b;max-width:min(92vw,980px)}
body.zyasy-unified dialog::backdrop{background:#010812ce;backdrop-filter:blur(4px)}
body.zyasy-unified table{color:var(--zy-text);border-collapse:collapse}
body.zyasy-unified :is(table th,.history th,.items th){background:#1a3044!important;color:#b8d8e5!important;border-color:var(--zy-line)!important;text-transform:none}
body.zyasy-unified :is(table td,.items td,.totals td){border-color:var(--zy-line)!important}
body.zyasy-unified table tr:hover td{background:#1c344247}
body.zyasy-unified .table-wrap{max-width:100%;overflow-x:auto;scrollbar-color:#36615c #102231}
body.zyasy-unified :is(.totals td:first-child,.totals tr.total td){background:#1b3b37!important;color:#bdfbe4!important}
body.zyasy-unified :is(.kpis,.dashboard-metrics,.job-metrics){gap:12px}
body.zyasy-unified :is(.kpi strong,.dashboard-metrics strong,.job-kpi strong){color:#edfcff!important;font-variant-numeric:tabular-nums}
body.zyasy-unified :is(.kpi span,.dashboard-metrics small,.job-kpi small){color:#9fb7c7!important}
/* Existing desktop workspace — retained DOM, controls and navigation behaviour. */
body.zyasy-unified.page-work .app-header{background:#0b1826!important;color:var(--zy-text)!important;border-bottom:1px solid var(--zy-line)!important;height:auto;min-height:85px;padding:16px 26px;box-shadow:0 6px 30px #0002}
body.zyasy-unified.page-work .brand img{object-fit:contain;background:#08131d;border:1px solid var(--zy-line);border-radius:13px}
body.zyasy-unified.page-work .brand h1{color:white;font-size:20px;letter-spacing:-.5px}
body.zyasy-unified.page-work .brand small{color:var(--zy-muted)}
body.zyasy-unified.page-work .app-layout{grid-template-columns:260px minmax(0,1fr)}
body.zyasy-unified.page-work #appNav{top:85px;height:calc(100dvh - 85px);background:#0a1825;border-right:1px solid var(--zy-line-soft);padding:18px 12px;gap:6px}
body.zyasy-unified.page-work #appNav small{color:#829ab0}
body.zyasy-unified.page-work #appNav button{background:transparent!important;color:#afc3d5!important;border:1px solid transparent!important;border-radius:12px;min-height:45px;font-size:13px;text-align:left;padding:11px 14px}
body.zyasy-unified.page-work #appNav button:before{color:#7590a4}
body.zyasy-unified.page-work #appNav button:hover{background:#193345!important;color:#edfdf7!important}
body.zyasy-unified.page-work #appNav button.active{background:linear-gradient(100deg,#153e37,#17423b)!important;color:#61f4bd!important;border-color:#267761!important;box-shadow:inset 3px 0 #30e2a7!important}
body.zyasy-unified.page-work #appNav button.active:before{color:var(--zy-green)}
body.zyasy-unified.page-work .app-layout>main{padding:26px clamp(16px,2.5vw,40px) 90px;max-width:1700px}
body.zyasy-unified.page-work .shell-toolbar{margin-bottom:16px}
body.zyasy-unified.page-work #signOut{white-space:nowrap}
body.zyasy-unified.page-work .branch-label{color:var(--zy-muted)}
body.zyasy-unified.page-work .branch-label select{min-width:130px}
body.zyasy-unified.page-work #identity{color:#b8c9d9}
body.zyasy-unified.page-work .welcome{background:linear-gradient(112deg,#102a38,#143d42 78%,#0e272f)!important;border:1px solid #27584e;border-radius:22px;box-shadow:var(--zy-shadow);min-height:250px}
body.zyasy-unified.page-work .welcome>p:first-child{color:var(--zy-green);font-weight:800}
body.zyasy-unified.page-work .welcome h2{color:#effff8}
body.zyasy-unified.page-work .welcome span{color:#a6c9cb}
body.zyasy-unified.page-work .workshop-overview>div{background:#081c254f;border:1px solid #48736c;border-radius:16px}
body.zyasy-unified.page-work .workshop-overview strong{color:#7ef0c8}
body.zyasy-unified.page-work .workshop-overview small{color:#a9c5c9}
body.zyasy-unified.page-work .dashboard-metrics .card{position:relative;overflow:hidden;margin:14px 0 0;padding:22px 20px;min-height:130px}
body.zyasy-unified.page-work .dashboard-metrics .card:before{content:'';position:absolute;width:4px;height:44px;left:0;top:25px;background:var(--zy-green);border-radius:0 5px 5px 0;opacity:.8}
body.zyasy-unified.page-work .recent-job{border-color:var(--zy-line)}
body.zyasy-unified.page-work .recent-job p,body.zyasy-unified.page-work .monitor-table small{color:var(--zy-muted)}
body.zyasy-unified.page-work .job-kpi{border-top:3px solid #27c98e!important;cursor:pointer}
body.zyasy-unified.page-work .job-kpi.selected{background:#16392f!important;outline:2px solid #27e1a7}
body.zyasy-unified.page-work .monitor-board{padding:22px}
body.zyasy-unified.page-work :is(.monitor-table th,.monitor-table td){border-color:var(--zy-line-soft)!important}
body.zyasy-unified.page-work .monitor-table td:first-child{color:#e8f8ff}
body.zyasy-unified.page-work .job-actions button{padding:8px 11px}
body.zyasy-unified.page-work #page-module #adminModule{background:var(--zy-bg)!important;border-radius:16px}
body.zyasy-unified.page-work #workspace article{background:#142638;border-color:var(--zy-line)}
body.zyasy-unified.page-work #menuToggle{background:#142c3d;color:var(--zy-green);border-color:#376157}
body.zyasy-unified.page-work .shell-device-link{display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;padding:11px 14px;background:#17392f;border:1px solid #278065;border-radius:11px;font-size:12px;font-weight:700;white-space:nowrap}
body.zyasy-unified.page-work .mobile-quick-nav{display:none}
/* Unified mobile app (also attractive at desktop width). */
body.zyasy-unified.page-mobile{background:radial-gradient(ellipse at 10% 0%,#12344480,transparent 40%),#08131d!important}
body.zyasy-unified.page-mobile .topbar{background:#0b1825e8!important;border-bottom:1px solid #2d4254;box-shadow:0 6px 35px #0003}
body.zyasy-unified.page-mobile .topbar .brand img{border-radius:13px;background:#081a23;border:1px solid #2f5c53}
body.zyasy-unified.page-mobile .surface{background:linear-gradient(152deg,#122333,#101c29)!important;border-color:var(--zy-line)!important}
body.zyasy-unified.page-mobile .banner{box-shadow:none}
body.zyasy-unified.page-mobile #bottomNav button.active{background:#114437!important;color:#6ff6c5!important}
body.zyasy-unified.page-mobile #bottomNav .plus span{color:#06271f;background:linear-gradient(120deg,#49ecbd,#0bcc91)}
body.zyasy-unified.page-mobile .quick-grid>*{box-shadow:0 8px 20px #0002}
body.zyasy-unified.page-mobile .field input,body.zyasy-unified.page-mobile .field textarea{margin-top:10px}
body.zyasy-unified.page-mobile .hero{border-color:#2a6854!important}
body.zyasy-unified.page-mobile .step.current .step-body{border-color:#3bdda8;background:#0d3830}
/* Login / index page, same brand experience. */
body.zyasy-unified.page-login header{background:#0d2030;border-bottom:1px solid var(--zy-line);box-shadow:0 6px 24px #0003}
body.zyasy-unified.page-login header img{background:transparent;object-fit:contain}
body.zyasy-unified.page-login main{padding-top:clamp(24px,5vh,70px)}
body.zyasy-unified.page-login #login{max-width:480px;padding:32px;border:1px solid #285448!important}
body.zyasy-unified.page-login #login h1{font-size:28px}
body.zyasy-unified.page-login #login button.primary{width:100%;margin-top:6px}
body.zyasy-unified.page-login #workspace :is(.layout,.metrics){color:var(--zy-text)}
/* Legacy full-admin module lives inside the original iframe. Make it match without changing calculations. */
body.zyasy-unified.page-admin{background:var(--zy-bg)!important;--navy:#112b39!important;--blue:#19cf97!important;--light:#192e40!important;--line:#2b4556!important;--text:#ebf6fc!important}
body.zyasy-unified.page-admin .topbar{background:#0e1d2a!important;border-bottom:1px solid var(--zy-line);box-shadow:0 7px 25px #0003;min-height:70px}
body.zyasy-unified.page-admin .topbar h1{color:#f5ffff}
body.zyasy-unified.page-admin .wrap{max-width:1550px;width:100%;padding:0 clamp(12px,2vw,25px) 60px}
body.zyasy-unified.page-admin .tabs{padding:10px 0;gap:8px}
body.zyasy-unified.page-admin .tab{background:#1a2f41!important;color:#b3cbd7!important;border:1px solid var(--zy-line)!important;border-radius:11px!important;box-shadow:none!important;padding:11px 14px}
body.zyasy-unified.page-admin .tab.active{background:#164739!important;border-color:#2a9972!important;color:#7df0c5!important;box-shadow:inset 0 -3px #36eab4!important}
body.zyasy-unified.page-admin .card{padding:clamp(14px,2vw,23px);margin-bottom:15px}
body.zyasy-unified.page-admin .card h2{color:#e4fff3;font-size:17px}
body.zyasy-unified.page-admin :is(.kpi,.stat){background:linear-gradient(130deg,#142636,#152b3a)!important}
body.zyasy-unified.page-admin :is(.btn,.tab){min-height:40px}
body.zyasy-unified.page-admin :is(.btn.primary,.btn.green){color:#08251e!important}
body.zyasy-unified.page-admin :is(.btn.light,.btn.dark){background:#234054;color:#e8f4fa}
body.zyasy-unified.page-admin .notice{background:#332c19!important;color:#f0c778!important;border-color:#776037!important}
body.zyasy-unified.page-admin :is(.history,.items,.totals){color:var(--zy-text)}
body.zyasy-unified.page-admin .history th,body.zyasy-unified.page-admin .items th{background:#1a3446!important}
body.zyasy-unified.page-admin .history td{border-bottom:1px solid #365063!important}
body.zyasy-unified.page-admin .badge.paid{background:#17483a!important;color:#82f2c7!important}
body.zyasy-unified.page-admin .badge.unpaid{background:#512630!important;color:#ffadaf!important}
body.zyasy-unified.page-admin .badge.deposit{background:#3a321d!important;color:#fad28e!important}
body.zyasy-unified.page-admin :is(.grid,.kpis){gap:12px}
body.zyasy-unified.page-admin .table-wrap{overflow-x:auto}
/* narrow screens: readable tappable layout across PC and mobile app. */
@media(min-width:960px){
 body.zyasy-unified.page-mobile .container{max-width:1530px;padding:30px 40px 100px 290px}
 body.zyasy-unified.page-mobile .topbar{position:sticky;top:0;z-index:30;padding:17px 34px}
 body.zyasy-unified.page-mobile .bottom-nav{display:flex!important;position:fixed;left:0;top:84px;bottom:0;right:auto;transform:none;width:245px;max-width:none;height:calc(100dvh - 84px);flex-direction:column;justify-content:flex-start;gap:8px;padding:22px 14px;background:#0b1b29;border-right:1px solid var(--zy-line);border-top:0;border-radius:0;box-shadow:none}
 body.zyasy-unified.page-mobile .bottom-nav button{flex:0 0 auto;display:flex;gap:14px;align-items:center;justify-content:flex-start;text-align:left;font-size:14px;padding:12px 14px}
 body.zyasy-unified.page-mobile .bottom-nav button span{font-size:19px;margin:0;line-height:1.2}
 body.zyasy-unified.page-mobile .bottom-nav button.plus span{width:27px;height:27px;font-size:20px;line-height:27px;text-align:center;margin:0}
 body.zyasy-unified.page-mobile .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.zyasy-unified.page-mobile .quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.zyasy-unified.page-mobile #jobList{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.zyasy-unified.page-mobile .form-stack{max-width:1100px}
 body.zyasy-unified.page-mobile .welcome-row h1{font-size:33px}
}
@media(max-width:959px){
 body.zyasy-unified.page-work .app-layout{display:block}
 body.zyasy-unified.page-work .app-header{position:sticky;top:0;padding:12px 15px;min-height:70px;flex-wrap:wrap}
 body.zyasy-unified.page-work .app-header .brand h1{font-size:17px}
 body.zyasy-unified.page-work .app-header>.row{width:100%;justify-content:space-between}
 body.zyasy-unified.page-work #menuToggle{display:block}
 body.zyasy-unified.page-work #appNav{position:fixed;top:0;bottom:0;left:0;width:min(310px,83vw);height:100dvh;max-height:none;z-index:60;transform:translateX(-110%);padding:20px 12px;box-shadow:12px 0 55px #0008;transition:transform .2s}
 body.zyasy-unified.page-work.nav-open #appNav{transform:translateX(0)}
 body.zyasy-unified.page-work .app-layout>main{padding:17px 13px 92px}
 body.zyasy-unified.page-work .mobile-quick-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:9px 7px max(8px,env(safe-area-inset-bottom));background:#0b1926fa;backdrop-filter:blur(14px);border-top:1px solid var(--zy-line);gap:4px;justify-content:space-around}
 body.zyasy-unified.page-work .mobile-quick-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:53px;padding:5px 2px;border:0;background:transparent;color:#9eb2c2;font-size:10px;border-radius:12px}
 body.zyasy-unified.page-work .mobile-quick-nav button .quick-icon{font-size:22px}
 body.zyasy-unified.page-work .mobile-quick-nav button[data-unified-action="new"] .quick-icon{display:inline-block;background:var(--zy-green);color:#06271f;border-radius:10px;width:32px;line-height:32px;font-size:25px}
 body.zyasy-unified.page-work .mobile-quick-nav button.is-active{color:var(--zy-green);background:#11362f}
 body.zyasy-unified.page-work .welcome{padding:21px;min-height:0}
 body.zyasy-unified.page-work .workshop-overview{position:static;width:100%;margin-top:18px}
 body.zyasy-unified.page-work .welcome>span{max-width:100%}
 body.zyasy-unified.page-work .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.zyasy-unified.page-work .job-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.zyasy-unified.page-work #adminModule{min-height:70dvh}
 body.zyasy-unified.page-admin .topbar{position:relative}
 body.zyasy-unified.page-admin .wrap{padding:0 12px 50px}
 body.zyasy-unified.page-admin .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
 body.zyasy-unified.page-admin .tab{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:600px){
 body.zyasy-unified.page-work .app-header .shell-device-link{padding:9px;font-size:11px}
 body.zyasy-unified.page-work .app-header #identity{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body.zyasy-unified.page-work .dashboard-metrics,body.zyasy-unified.page-work .job-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 body.zyasy-unified.page-work .dashboard-metrics .card{min-height:112px;padding:15px 13px}
 body.zyasy-unified.page-work .job-kpi{padding:12px}
 body.zyasy-unified.page-work .monitor-filters{grid-template-columns:1fr}
 body.zyasy-unified.page-work .monitor-filters>div:first-child{grid-column:auto}
 body.zyasy-unified.page-work .monitor-table tr{background:#112435;border-color:var(--zy-line)!important}
 body.zyasy-unified.page-work dialog{width:96vw;max-height:93dvh;padding:16px}
 body.zyasy-unified.page-work .grid{grid-template-columns:1fr}
 body.zyasy-unified.page-work .lines{grid-template-columns:1fr 1fr}
 body.zyasy-unified.page-work :is(.card,.monitor-board){padding:15px}
 body.zyasy-unified.page-admin .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.zyasy-unified.page-admin .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.zyasy-unified.page-admin .items{min-width:610px}
 body.zyasy-unified.page-admin .card:has(>.items){overflow-x:auto}
 body.zyasy-unified.page-admin .tabs{margin:0 -2px 14px}
 body.zyasy-unified.page-mobile .container{padding-bottom:115px}
 body.zyasy-unified.page-mobile .two-col{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){body.zyasy-unified.page-mobile .two-col,body.zyasy-unified.page-mobile .type-picker{grid-template-columns:1fr 1fr}}
/* Never alter printing or accounting presentation on paper. Existing invoice-print.css remains authoritative. */
@media print{
 body.zyasy-unified{background:#fff!important;color:#000!important;color-scheme:light}
 body.zyasy-unified .mobile-quick-nav,body.zyasy-unified .shell-device-link{display:none!important}
 body.zyasy-unified :is(.receipt,#receipt,#printout){background:white!important;color:black!important}
}

@media print{
 body.zyasy-unified.page-admin #printReceipt{color:#111!important;background:white!important;color-scheme:light}
 body.zyasy-unified.page-admin #printReceipt :is(h1,h2,h3,p,td,th){color:#111!important}
 body.zyasy-unified.page-admin #printReceipt .pr-section,
 body.zyasy-unified.page-admin #printReceipt .pr-items th{background:#102d35!important;color:#fff!important}
 body.zyasy-unified.page-admin #printReceipt .pr-table th{background:#f4f7fb!important;color:#111!important}
 body.zyasy-unified.page-admin #printReceipt table td{background:#fff!important;border-color:#cbd5e1!important;color:#111!important}
}
