:root{--bg:#f5f7f8;--surface:#ffffff;--surface-soft:#f8fafb;--text:#17202a;--muted:#657181;--border:#dfe5ea;--teal:#0f766e;--teal-soft:#e7f4f2;--amber:#d97706;--amber-soft:#fff4df;--red:#b42318;--red-soft:#fff1f0;--slate:#334155;--shadow:0 18px 50px rgba(15,23,42,0.07)}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}.sidebar{background:#111827;color:#f8fafc;display:flex;flex-direction:column;gap:28px;min-height:100vh;padding:24px 18px;position:-webkit-sticky;position:sticky;top:0}.brand{align-items:center;display:flex;gap:12px;padding:4px 6px 12px}.brand-mark{align-items:center;background:#0f766e;border-radius:8px;display:grid;height:38px;justify-items:center;width:38px}.brand span,.brand strong{display:block}.brand strong{font-size:15px;line-height:1.2}.brand span{color:#a7b0bd;font-size:12px;margin-top:2px}.nav-list{display:grid;grid-gap:4px;gap:4px}.nav-item{align-items:center;background:transparent;border:0;border-radius:8px;color:#b8c1cc;display:flex;gap:11px;height:42px;padding:0 12px;text-align:left}.nav-item.active,.nav-item:hover{background:rgba(255,255,255,.08);color:#ffffff}.sidebar-status{align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;display:flex;gap:10px;margin-top:auto;padding:12px}.sidebar-status span,.sidebar-status strong{display:block}.sidebar-status strong{font-size:13px}.sidebar-status span{color:#a7b0bd;font-size:12px;line-height:1.4;margin-top:3px}.status-pulse{background:#10b981;border-radius:999px;box-shadow:0 0 0 5px rgba(16,185,129,.14);flex:0 0 auto;height:9px;margin-top:5px;width:9px}.workspace{min-width:0;padding:28px}.topbar{align-items:center;display:flex;gap:24px;justify-content:space-between;margin-bottom:22px}.topbar h1{font-size:27px;letter-spacing:0;line-height:1.15;margin:0}.topbar p{color:var(--muted);font-size:14px;margin:7px 0 0}.topbar-actions{align-items:center;display:flex;gap:10px}.date-button,.icon-button,.search-control{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--slate);display:flex;gap:8px;height:40px}.search-control{padding:0 12px;width:280px}.search-control input{background:transparent;border:0;color:var(--text);min-width:0;outline:none;width:100%}.date-button{padding:0 12px}.icon-button{justify-content:center;width:40px}.avatar{align-items:center;background:#17202a;border-radius:8px;color:#ffffff;display:grid;font-size:12px;font-weight:700;height:40px;justify-items:center;width:40px}.kpi-grid{display:grid;grid-gap:14px;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 0 rgba(15,23,42,.02);padding:18px}.metric-card p,.metric-card span{color:var(--muted);font-size:13px;margin:0}.metric-card strong{display:block;font-size:29px;letter-spacing:0;line-height:1.15;margin:9px 0 5px}.metric-card[data-tone=good] strong{color:var(--teal)}.metric-card[data-tone=warn] strong{color:var(--amber)}.metric-card[data-tone=danger] strong{color:var(--red)}.dashboard-grid{display:grid;grid-gap:14px;gap:14px;grid-template-columns:minmax(0,2fr) minmax(320px,.9fr)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 0 rgba(15,23,42,.02);min-width:0;padding:18px}.panel-header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;margin-bottom:16px}.panel-header.compact{margin-bottom:12px}.panel h2{font-size:16px;line-height:1.25;margin:0}.panel p{color:var(--muted);font-size:13px;line-height:1.45;margin:5px 0 0}.ghost-button{align-items:center;background:var(--surface-soft);border:1px solid var(--border);border-radius:8px;color:var(--slate);display:inline-flex;font-size:13px;height:34px;padding:0 11px;white-space:nowrap}.activity-panel,.employee-panel,.table-panel{grid-column:span 1}.chart-wrap{height:285px}.alerts-panel{grid-row:span 2}.alert-list{display:grid;grid-gap:10px;gap:10px}.alert-item{align-items:flex-start;border:1px solid var(--border);border-radius:8px;display:flex;gap:10px;padding:12px}.alert-item svg{flex:0 0 auto;margin-top:2px}.alert-item[data-level=critical],.alert-item[data-level=high]{background:var(--red-soft);border-color:#ffd3cf;color:var(--red)}.alert-item[data-level=medium]{background:var(--amber-soft);border-color:#fedda4;color:#92400e}.alert-item[data-level=low]{background:#f8fafc;color:var(--slate)}.alert-title{align-items:center;display:flex;gap:10px;justify-content:space-between}.alert-title strong{color:inherit;font-size:13px}.alert-item small,.alert-title span{color:var(--muted);font-size:11px}.alert-item p{color:#475569;font-size:12px;line-height:1.45;margin:4px 0 5px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;min-width:760px;width:100%}th{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;padding:0 12px 10px;text-align:left;text-transform:uppercase}td{border-top:1px solid #edf1f4;color:var(--slate);font-size:13px;padding:13px 12px;vertical-align:middle}td span,td strong{display:block}td span{color:var(--muted);font-size:12px;margin-top:3px}.pc-cell{align-items:center;display:flex;gap:9px}.pc-cell svg{color:var(--teal)}.action-chip,.status-chip{align-items:center;border-radius:999px;display:inline-flex;font-size:12px;font-weight:700;gap:5px;height:25px;padding:0 9px}.status-chip[data-status=online]{background:var(--teal-soft);color:var(--teal)}.status-chip[data-status=idle]{background:#eef2f7;color:#475569}.status-chip[data-status=offline]{background:var(--red-soft);color:var(--red)}.action-chip[data-action=flagged],.status-chip[data-status=warning]{background:var(--amber-soft);color:#92400e}.action-chip[data-action=allowed]{background:var(--teal-soft);color:var(--teal)}.action-chip[data-action=blocked]{background:var(--red-soft);color:var(--red)}.employee-panel{grid-column:1/-1}.employee-list{display:grid;grid-gap:8px;gap:8px}.employee-row{align-items:center;border:1px solid #edf1f4;border-radius:8px;display:flex;gap:20px;justify-content:space-between;padding:12px 14px}.employee-row span,.employee-row strong{display:block}.employee-row strong{font-size:14px}.employee-row span{color:var(--muted);font-size:12px;margin-top:4px}.employee-stats{display:grid;grid-gap:8px;gap:8px;grid-template-columns:repeat(4,minmax(90px,auto));text-align:right}.login-shell{align-items:center;background:linear-gradient(180deg,rgba(17,24,39,.05),rgba(15,118,110,.04)),var(--bg);display:grid;min-height:100vh;padding:24px}.login-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);margin:0 auto;max-width:410px;padding:24px;width:100%}.login-brand{align-items:center;display:flex;gap:12px;padding-bottom:22px}.login-brand span,.login-brand strong{display:block}.login-brand strong{font-size:15px;line-height:1.2}.login-brand span{color:var(--muted);font-size:12px;margin-top:2px}.login-heading{align-items:flex-start;border-top:1px solid #edf1f4;display:flex;gap:12px;padding-top:22px}.login-heading svg{color:var(--teal);flex:0 0 auto;margin-top:3px}.login-heading h1{font-size:23px;letter-spacing:0;line-height:1.15;margin:0}.login-heading p{color:var(--muted);font-size:13px;margin:7px 0 0}.login-form{display:grid;grid-gap:14px;gap:14px;margin-top:22px}.login-form label{color:var(--slate);display:grid;font-size:13px;font-weight:700;grid-gap:7px;gap:7px}.login-form input{background:var(--surface-soft);border:1px solid var(--border);border-radius:8px;color:var(--text);height:42px;outline:none;padding:0 12px;width:100%}.login-form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,118,110,.12)}.login-error{background:var(--red-soft);border:1px solid #ffd3cf;border-radius:8px;color:var(--red);font-size:13px;line-height:1.4;margin:0;padding:10px 12px}.login-button{align-items:center;background:var(--teal);border:0;border-radius:8px;color:#ffffff;display:inline-flex;font-weight:700;height:42px;justify-content:center;margin-top:2px;padding:0 14px}.login-button:disabled{cursor:default;opacity:.72}@media (max-width:1180px){.app-shell{grid-template-columns:80px minmax(0,1fr)}.brand div:last-child,.nav-item span,.sidebar-status{display:none}.sidebar{align-items:center;padding:20px 12px}.nav-item{justify-content:center;padding:0;width:44px}.dashboard-grid,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.alerts-panel{grid-row:auto}}@media (max-width:780px){.app-shell{display:block}.sidebar{min-height:auto;position:static}.nav-list{display:flex;overflow-x:auto;width:100%}.workspace{padding:18px}.employee-row,.topbar,.topbar-actions{align-items:stretch;flex-direction:column}.date-button,.search-control{width:100%}.dashboard-grid,.employee-stats,.kpi-grid{grid-template-columns:1fr}.topbar h1{font-size:24px}}