/* SORTEX PULSE / Premium Interface System / Stage 3B.UI v0.2.2
   Local assets only. All controls retain the existing Stage 3B server actions. */
:root {
  color-scheme: dark;
  --bg:#07121f; --sidebar:#091727; --topbar:#101e2e;
  --panel:#101f30; --panel-strong:#14263a; --panel-glass:rgba(17,33,50,.92);
  --inset:#0b1929; --input:#0c1b2b; --text:#f1f7ff; --heading:#f8fbff;
  --muted:#99aec6; --subtle:#6f89a4; --border:rgba(139,178,211,.16);
  --border-strong:rgba(146,198,230,.28); --accent:#64e1d1; --accent-deep:#0c3f46;
  --blue:#9dbfff; --gold:#efd09a; --success:#65dfb0; --danger:#ff97a6;
  --shadow:0 16px 44px rgba(0,4,17,.20),0 2px 8px rgba(0,4,17,.12);
  --ambient:radial-gradient(ellipse 45% 42% at 92% 3%,rgba(40,115,153,.14),transparent 74%),radial-gradient(ellipse 48% 50% at 21% 65%,rgba(22,115,107,.065),transparent 80%);
  --radius:18px; --focus:0 0 0 3px rgba(97,223,207,.24);
  --footer:rgba(11,25,41,.90);
}
html[data-theme="light"] {
  color-scheme:light;
  --bg:#f3f7fc; --sidebar:#ffffff; --topbar:rgba(255,255,255,.90);
  --panel:#ffffff; --panel-strong:#f4f8fd; --panel-glass:rgba(255,255,255,.95);
  --inset:#f4f8fc; --input:#fff; --text:#23364f; --heading:#10223e;
  --muted:#637a96; --subtle:#7a90a8; --border:rgba(77,107,143,.14);
  --border-strong:rgba(77,107,143,.24); --accent:#007f7b; --accent-deep:#dff7f0;
  --blue:#386abc; --gold:#986c28; --success:#008960; --danger:#ad3656;
  --shadow:0 18px 46px rgba(32,66,116,.065),0 2px 10px rgba(32,66,116,.045);
  --ambient:radial-gradient(ellipse 44% 44% at 91% 2%,rgba(110,169,233,.12),transparent 78%),radial-gradient(ellipse 45% 44% at 18% 68%,rgba(60,190,174,.07),transparent 75%);
  --focus:0 0 0 3px rgba(0,144,137,.19); --footer:rgba(250,252,255,.93);
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--ambient),var(--bg);color:var(--text);font:14px/1.53 Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s}
button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--heading)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:rgba(100,225,209,.31)}
.icon{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:0;padding:24px 14px 14px;min-width:0;background:linear-gradient(156deg,rgba(48,113,145,.085),transparent 37%),var(--sidebar);border-right:1px solid var(--border);z-index:40}
.sidebar::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:.7}
.brand,.login-brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand{padding:1px 8px 23px;border-bottom:1px solid var(--border)}
.brand>div:last-child,.login-brand>div:last-child{min-width:0}
.signet{height:44px;width:44px;flex:none;display:grid;place-items:center;overflow:hidden;color:#0d3142;border-radius:14px;background:linear-gradient(142deg,#c9f6f0 0%,#75dccf 38%,#a1b8fc 100%);box-shadow:0 9px 23px rgba(62,201,196,.17),inset 0 1px 1px #fff8}
.signet .icon{width:27px;height:27px;stroke-width:2.2}
.brand-logo{width:44px;height:44px;object-fit:contain;flex:none;border:1px solid var(--border);background:var(--panel-strong);padding:3px;border-radius:13px}
.logo-word{color:var(--heading);font-size:16px;letter-spacing:.9px;font-weight:830;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.logo-sub{color:var(--subtle);font-size:9px;font-weight:800;letter-spacing:1.8px;margin-top:3px;white-space:nowrap}
.nav-scroll{flex:1;overflow-y:auto;min-height:0;margin:14px -5px 8px;padding:0 5px 5px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.nav-group{margin-bottom:18px}
.nav-label,.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:850;color:var(--accent)}
.nav-label{margin:0 12px 9px;color:var(--subtle);letter-spacing:1.6px;font-size:9px}
.sidebar nav{display:grid;gap:3px}
.nav-item{display:flex;gap:12px;align-items:center;min-height:41px;padding:10px 12px;border-radius:11px;border:1px solid transparent;color:var(--muted);font-size:12px;font-weight:650;transition:background .15s,border-color .15s,color .15s,transform .15s}
.nav-item:hover{background:var(--panel-strong);color:var(--heading);transform:translateX(2px)}
.nav-item.active{color:var(--accent);background:linear-gradient(104deg,rgba(81,219,198,.16),rgba(105,156,236,.08));border-color:rgba(98,216,207,.18);box-shadow:inset 3px 0 var(--accent)}
.nav-icon{height:19px;width:20px;display:grid;place-items:center}.nav-icon .icon{height:18px;width:18px}
.tiny{margin-left:auto;font-size:9px;letter-spacing:.7px;font-weight:750;color:var(--subtle);border:1px solid var(--border);padding:3px 5px;border-radius:999px}
.side-foot{margin-top:auto;padding:5px 2px 0}.platform-state{position:relative;padding:15px 14px;border-radius:14px;background:linear-gradient(145deg,rgba(99,215,194,.10),rgba(81,139,224,.045));border:1px solid var(--border-strong)}
.platform-state strong{font-size:11px;color:var(--heading)}.platform-state small{display:block;margin:6px 0 0 17px;font-size:10px;line-height:1.45;color:var(--muted)}
.status-light{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:#55d8a9;box-shadow:0 0 0 3px rgba(73,207,165,.10),0 0 12px rgba(72,212,157,.46)}
.version{margin:13px 5px 0;color:var(--subtle);font-size:9px;font-weight:750;letter-spacing:1.3px}
.workspace{min-width:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.topbar{min-height:79px;padding:16px clamp(20px,3vw,44px);background:var(--topbar);border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:center;justify-content:space-between;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.breadcrumb{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px}.crumb{color:var(--subtle);font-weight:750;letter-spacing:.65px;font-size:10px}.breadcrumb strong{color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:750}.breadcrumb .icon{height:13px;width:13px;color:var(--subtle)}
.top-right{display:flex;gap:14px;align-items:center}.environment,.outline-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(104,208,193,.24);background:rgba(84,211,193,.075);color:var(--accent);border-radius:999px;padding:8px 12px;white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.75px}
.environment::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 9px rgba(85,226,199,.45)}
.profile{display:flex;gap:10px;align-items:center;padding-left:16px;border-left:1px solid var(--border)}
.avatar{height:37px;width:37px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(106,215,203,.26);color:var(--accent);background:linear-gradient(135deg,rgba(92,220,206,.19),rgba(98,142,209,.10));font-weight:850}
.who{display:grid;line-height:1.22;font-size:12px;max-width:140px}.who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who small{font-size:9px;color:var(--muted);letter-spacing:.45px;margin-top:5px}
.theme-toggle,.menu-toggle{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--panel-strong);border:1px solid var(--border-strong);border-radius:11px;color:var(--text);padding:0 12px;white-space:nowrap;font-weight:750;font-size:11px;transition:transform .15s,box-shadow .15s,background .15s}
.theme-toggle:hover,.menu-toggle:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.mode-icon{display:inline-flex}.mode-icon .icon{width:17px;height:17px}.mode-icon-moon{display:none}html[data-theme="light"] .mode-icon-sun{display:none}html[data-theme="light"] .mode-icon-moon{display:inline-flex}
.menu-toggle{display:none;padding:0 10px}.sidebar-backdrop{display:none}
.logout{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;color:var(--text);background:var(--inset);border:1px solid var(--border-strong);border-radius:10px;font-size:11px;font-weight:750;line-height:1.35;white-space:nowrap;transition:background .15s,transform .15s,border-color .15s}
.logout:hover{background:var(--panel-strong);border-color:var(--accent);transform:translateY(-1px)}.logout .icon{height:15px;width:15px}
.content{width:100%;max-width:1680px;min-width:0;padding:clamp(21px,3vw,42px) clamp(20px,3vw,44px) 0;margin:0 auto;flex:1;display:flex;flex-direction:column}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0;margin-bottom:25px}.page-title h1{font-size:clamp(24px,2.6vw,33px);line-height:1.18;letter-spacing:-1.15px;margin:7px 0 0;font-weight:820}.page-title p{color:var(--muted);font-size:12px;line-height:1.65;margin:8px 0 0;max-width:740px}
.page-title .eyebrow{display:inline-flex;align-items:center;gap:8px}.page-title .eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--accent)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:20px}
.metric,.panel,.login-card{position:relative;isolation:isolate;background:var(--panel-glass);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius);min-width:0}
.metric{overflow:hidden;padding:21px 21px 19px;min-height:157px;transition:transform .15s,border-color .15s,box-shadow .15s}.metric:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:0 20px 47px rgba(0,10,27,.13)}
.metric::after{content:"";position:absolute;pointer-events:none;z-index:-1;right:-45px;top:-65px;width:158px;height:158px;background:radial-gradient(circle,rgba(101,224,210,.09),transparent 70%)}.metric:nth-child(2)::after{background:radial-gradient(circle,rgba(130,171,246,.13),transparent 70%)}.metric:nth-child(3)::after{background:radial-gradient(circle,rgba(239,208,154,.10),transparent 70%)}
.metric-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-weight:700;font-size:11px}.metric-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid rgba(106,210,199,.19);border-radius:12px;color:var(--accent);background:rgba(95,215,200,.095)}.metric-icon .icon{width:19px;height:19px}.metric:nth-child(2) .metric-icon{color:var(--blue);background:rgba(116,168,239,.095);border-color:rgba(116,168,239,.17)}.metric:nth-child(3) .metric-icon{color:var(--gold);background:rgba(239,198,123,.075);border-color:rgba(239,198,123,.14)}
.metric-value{font-weight:850;font-size:35px;line-height:1.17;letter-spacing:-1.3px;color:var(--heading);margin-top:17px;font-variant-numeric:tabular-nums}.metric-note{font-size:11px;margin-top:7px;color:var(--subtle)}
.two-cols{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:19px}.panel{overflow:hidden;margin-bottom:19px}
.panel::before,.login-card::before{content:"";pointer-events:none;position:absolute;inset:0 0 auto;height:1px;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 88%)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border)}.panel-head h2{font-size:14px;font-weight:800;margin:0;letter-spacing:-.2px}.panel-head p{font-size:11px;margin:5px 0 0;color:var(--muted)}
.tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px solid rgba(106,201,199,.22);border-radius:999px;background:rgba(80,182,186,.08);color:var(--accent);font-size:9px;letter-spacing:.95px;font-weight:850;white-space:nowrap}
.empty{text-align:center;margin:auto;max-width:480px;padding:48px 22px 51px}.empty-mark{display:grid;place-items:center;height:64px;width:64px;margin:0 auto 17px;border:1px solid rgba(100,226,200,.20);border-radius:19px;background:linear-gradient(140deg,rgba(89,203,188,.16),rgba(104,163,238,.08));color:var(--accent)}.empty-mark .icon{height:30px;width:30px;stroke-width:1.35}.empty h3{font-size:15px;margin:0 0 7px}.empty p{color:var(--muted);font-size:12px;line-height:1.65;margin:0}
.service-row{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--border);font-size:12px}.service-row:last-child{border-bottom:0}.service-row strong{font-size:10px;letter-spacing:.45px;text-align:right}.green{color:var(--success)}.muted{color:var(--muted)}
.employee-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;padding:22px;align-items:end}.employee-form button{grid-column:1/-1;justify-self:end}.employee-form>div,.field-grid>div{min-width:0}
.employee-form label,.settings-form label,.login-card label{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:8px}.employee-form label,.settings-form label{line-height:1.4}
input:not([type=hidden]):not([type=checkbox]),select{display:block;width:100%;min-width:0;height:43px;line-height:1.2;border-radius:11px;border:1px solid var(--border-strong);color:var(--text);background:var(--input);padding:9px 13px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--subtle);opacity:1}input:focus,select:focus{border-color:var(--accent)!important;box-shadow:var(--focus);outline:none!important}
input[type=file]{height:auto;min-height:43px}input[type=file]::file-selector-button{border:1px solid var(--border);border-radius:7px;padding:5px 9px;margin-right:10px;color:var(--text);background:var(--panel-strong)}
select{cursor:pointer}input[type=checkbox]{accent-color:var(--accent);cursor:pointer}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:linear-gradient(105deg,#7ce8d3 0%,#82cae7 47%,#a6baff 100%);color:#09273a;padding:11px 19px;min-height:42px;font-size:12px;line-height:1.3;font-weight:850;box-shadow:0 8px 20px rgba(70,191,184,.14),inset 0 1px #ffffff80;transition:transform .15s,filter .15s,box-shadow .15s}
.primary:hover{filter:saturate(1.15) brightness(1.035);box-shadow:0 11px 24px rgba(70,191,184,.21);transform:translateY(-1px)}
.table-wrap{overflow:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}table{border-collapse:separate;border-spacing:0;min-width:740px;width:100%;text-align:left}th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--border);white-space:nowrap}th{color:var(--subtle);font-size:10px;font-weight:850;letter-spacing:.65px;text-transform:uppercase;background:var(--inset)}td{font-size:12px;color:var(--muted)}td strong{color:var(--heading)}tbody tr:hover{background:rgba(110,173,200,.055)}tbody tr:last-child td{border-bottom:none}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.6px;border:1px solid transparent}.pill::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}.pill-active{color:var(--success);background:rgba(66,202,150,.12);border-color:rgba(66,202,150,.22)}.mutedpill{color:var(--muted);background:var(--panel-strong);border-color:var(--border)}
.alert{font-size:12px;line-height:1.65;border:1px solid;padding:14px 17px;border-radius:12px;margin:0 0 20px}.alert p{margin:8px 0 0}.alert.error{background:rgba(181,72,98,.11);border-color:rgba(232,102,130,.32);color:var(--danger)}.alert.success{background:rgba(60,187,140,.1);border-color:rgba(75,193,151,.27);color:var(--success)}
.app-footer{position:sticky;bottom:0;z-index:5;background:var(--footer);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:63px;padding:17px 0;margin-top:auto;border-top:1px solid var(--border);font-size:10px;letter-spacing:.15px;color:var(--subtle)}.app-footer strong{color:var(--muted);font-weight:750}.footer-right{display:inline-flex;align-items:center;gap:7px}.footer-right .icon{width:13px;height:13px;color:var(--accent)}
.settings-form{padding:22px;display:grid;gap:17px}.settings-form .primary{justify-self:start}.settings-form small{display:block;color:var(--subtle);font-size:11px;margin-top:7px;line-height:1.5}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.pad-form{padding:0 22px 22px}.condensed{padding:0}.check-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.check-row label{display:inline-flex;align-items:center;gap:8px;font-size:11px;cursor:pointer;margin-bottom:0;color:var(--text)}.check-row input[type=checkbox]{height:16px;width:16px;margin:0}
.inline-form{display:inline-flex}.inline-form input[type=hidden]{display:none}.wrap-cell{white-space:normal;min-width:310px;line-height:1.7}.break-anywhere{overflow-wrap:anywhere;word-break:break-word}.permissions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:22px}.role-form{min-width:0;display:grid;gap:9px;padding:20px;background:var(--inset);border:1px solid var(--border);border-radius:15px}.role-form h3{margin:0 0 9px;font-size:14px}.role-form label{display:flex;align-items:center;gap:9px;color:var(--text);font-size:12px;overflow-wrap:anywhere}.role-form input[type=checkbox]{height:16px;width:16px}.role-form button{justify-self:start;margin-top:11px}
.login-layout{position:relative;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:30px;padding:80px 22px 35px;overflow:hidden;background:radial-gradient(ellipse 650px 370px at 50% 10%,rgba(77,179,181,.15),transparent 80%),var(--ambient)}
.login-layout::before,.login-layout::after{content:"";position:absolute;pointer-events:none;width:min(490px,80vw);height:min(490px,80vw);border-radius:50%;filter:blur(70px);opacity:.16}.login-layout::before{background:#1d9ac3;left:-210px;top:20%}.login-layout::after{background:#16a994;right:-220px;bottom:-200px}
.login-top-actions{position:absolute;z-index:2;right:clamp(20px,3vw,44px);top:24px}.login-brand{z-index:1}.login-brand .signet{width:57px;height:57px;border-radius:17px}.login-brand .signet .icon{width:33px;height:33px}.login-brand .brand-logo{width:57px;height:57px}.login-brand .logo-word{font-size:23px;max-width:300px}.login-brand .logo-sub{font-size:10px}
.login-card{z-index:1;width:min(100%,450px);padding:35px 35px 31px;border-radius:23px;box-shadow:0 35px 85px rgba(0,8,26,.19),0 0 0 1px rgba(255,255,255,.02);background:var(--panel-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.login-card .eyebrow{font-size:10px}.login-card h1{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:16px 0 8px}.login-card .lead{font-size:12px;margin:0 0 22px;color:var(--muted)}.login-card form{display:grid;gap:8px}.login-card form label{margin:12px 0 0}.login-card input:not([type=hidden]){height:49px}.login-card button{height:49px;margin-top:17px}.wide{width:100%;justify-content:space-between}.login-footer{text-align:center;color:var(--subtle);font-size:10px;border-top:1px solid var(--border);margin-top:27px;padding-top:19px}.login-tag{font-size:10px;letter-spacing:1.5px;color:var(--subtle);font-weight:750;z-index:1}
@media(min-width:861px){.topbar{position:relative;z-index:2}}
@media(max-width:1240px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.two-cols{grid-template-columns:1fr}.employee-form{grid-template-columns:repeat(2,minmax(0,1fr))}.environment{display:none}}
@media(max-width:970px){.app{grid-template-columns:225px minmax(0,1fr)}.logo-word{font-size:14px}.topbar{padding:15px 22px}.content{padding-left:22px;padding-right:22px}.top-right{gap:8px}.who{display:none}}
@media(max-width:860px){.app{display:block}.sidebar{position:fixed;transform:translateX(-102%);transition:transform .2s ease;top:0;left:0;bottom:0;width:min(285px,85vw);box-shadow:16px 0 50px rgba(0,0,0,.14)}.menu-open .sidebar{transform:translateX(0)}.sidebar-backdrop{display:block;position:fixed;inset:0;z-index:35;background:rgba(4,11,22,.55);border:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}.menu-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}.menu-toggle{display:inline-flex}.workspace,.content{min-height:0}.workspace{min-height:100vh;min-height:100dvh}.topbar{min-height:68px}.breadcrumb{margin-right:auto}.top-right{gap:9px}.profile{padding-left:9px}.content{padding-top:25px}.app-footer{margin-top:auto}}
@media(max-width:620px){.content{padding:23px 15px 0}.topbar{padding:12px 15px}.top-right{gap:7px}.top-right .theme-toggle{padding:0 10px}.top-right .theme-label{display:none}.top-right .logout{padding:9px 10px}.top-right .logout-label{display:none}.top-right .profile{border:0;padding:0}.top-right .avatar{width:32px;height:32px}.page-title{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}.page-title h1{font-size:26px}.page-title .outline-badge{font-size:9px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{min-height:145px;padding:16px}.metric-value{font-size:29px}.metric-top{font-size:10px}.metric-icon{width:32px;height:32px}.metric-icon .icon{width:17px;height:17px}.employee-form,.field-grid,.permissions-grid{grid-template-columns:1fr}.employee-form button{grid-column:1}.panel-head{padding:17px}.settings-form,.employee-form,.permissions-grid{padding:17px}.pad-form{padding:0 17px 17px}.service-row{padding:15px 17px}.app-footer{padding:17px 3px;gap:5px;font-size:9px}.footer-right{white-space:normal}.login-card{padding:28px 24px}.login-brand .logo-word{font-size:19px}}
@media(max-width:385px){.metrics{grid-template-columns:1fr}.metric{min-height:129px}.top-right .environment{display:none}.breadcrumb .crumb{display:none}.logo-word{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===============================================================
   SORTEX PULSE · UI 3B.2 / v0.2.2 · Editorial glass finish
   Soft, regular-weight typography and polished cards/controls.
   All changes are presentational; no capture or streaming behavior.
   =============================================================== */
:root {
  --bg:#091624;
  --sidebar:#0c1b2c;
  --topbar:rgba(15,29,46,.82);
  --panel:#13243a;
  --panel-strong:#1b3047;
  --panel-glass:linear-gradient(155deg,rgba(27,47,68,.97),rgba(17,32,51,.98));
  --inset:#101f31;
  --input:#12253a;
  --text:#d5e2ee;
  --heading:#f4f8fc;
  --muted:#a4b6c8;
  --subtle:#7c92aa;
  --border:rgba(164,196,223,.15);
  --border-strong:rgba(170,211,231,.26);
  --accent:#68d5c9;
  --accent-deep:rgba(104,213,201,.12);
  --blue:#a2c5ef;
  --gold:#e7c59b;
  --success:#84dbb8;
  --danger:#ef9eb1;
  --shadow:0 18px 44px rgba(0,9,24,.17),0 2px 9px rgba(0,9,24,.07);
  --ambient:radial-gradient(ellipse 60% 53% at 80% 9%,rgba(48,115,157,.155),transparent 74%),radial-gradient(ellipse 44% 50% at 18% 84%,rgba(33,153,142,.085),transparent 73%);
  --footer:rgba(12,26,43,.88);
  --radius:19px;
}
html[data-theme="light"] {
  --bg:#f1f5fa;
  --sidebar:#ffffff;
  --topbar:rgba(255,255,255,.89);
  --panel:#fff;
  --panel-strong:#f4f8fc;
  --panel-glass:linear-gradient(148deg,rgba(255,255,255,.98),rgba(248,251,255,.98));
  --inset:#f3f7fb;
  --input:#fff;
  --text:#314660;
  --heading:#182b45;
  --muted:#69809b;
  --subtle:#8193a9;
  --border:rgba(95,125,155,.14);
  --border-strong:rgba(98,140,175,.24);
  --accent:#008b87;
  --accent-deep:rgba(0,139,135,.08);
  --blue:#527bbd;
  --gold:#a77b43;
  --success:#15876d;
  --danger:#c7546e;
  --shadow:0 18px 44px rgba(23,51,91,.065),0 2px 9px rgba(23,51,91,.025);
  --ambient:radial-gradient(ellipse 55% 50% at 85% 5%,rgba(136,185,234,.16),transparent 76%),radial-gradient(ellipse 46% 47% at 12% 80%,rgba(109,203,195,.09),transparent 75%);
  --footer:rgba(252,253,255,.88);
}
/* A deliberate typography scale: regular text, medium labels, calm titles. */
body {font-family:"Segoe UI Variable","Segoe UI", "Clear Sans",Arial,sans-serif;font-size:13px;line-height:1.58;font-weight:400;letter-spacing:.005em}
strong,b,th{font-weight:500}
button,input,select,textarea{font-family:inherit;font-weight:420}
h1,h2,h3{font-weight:560}
.logo-word{font-size:16px;font-weight:550;letter-spacing:.42px}
.logo-sub{font-size:9px;font-weight:480;letter-spacing:1.6px}
.nav-label,.eyebrow{font-size:10px;font-weight:560;letter-spacing:1.7px}
.nav-label{font-size:9px;font-weight:560;letter-spacing:1.5px}
.version{font-weight:520;letter-spacing:.9px}
.nav-item{font-size:12.5px;font-weight:440;min-height:43px;border-radius:12px}
.nav-item.active{font-weight:510;background:linear-gradient(99deg,rgba(83,214,197,.14),rgba(113,176,223,.065));border-color:rgba(98,216,207,.23)}
.tiny{font-weight:500;letter-spacing:.55px}
.platform-state strong{font-weight:510;font-size:11px}
.crumb{font-weight:540;letter-spacing:.85px}
.breadcrumb strong{font-weight:520}
.environment,.outline-badge{font-weight:550;letter-spacing:.7px}
.who{font-size:12px}.who strong{font-weight:510}
.avatar{font-weight:510}
.theme-toggle,.menu-toggle,.logout{font-weight:500;font-size:11.5px}
.page-title h1{font-size:clamp(27px,2.55vw,35px);font-weight:510;letter-spacing:-1.08px;margin:5px 0 0;line-height:1.22}
.page-title p{font-size:12.5px;font-weight:400;margin-top:9px}
.metric-top{font-weight:460;font-size:12px}
.metric-value{font-weight:520;font-size:35px;letter-spacing:-1.5px}
.metric-note{font-weight:400;font-size:11.5px}
.panel-head h2{font-weight:510;font-size:15px;letter-spacing:-.12px}
.tag,.pill{font-weight:500;letter-spacing:.55px}
.empty h3{font-weight:510;font-size:16px}.empty p{font-size:12.5px}
.service-row strong{font-weight:510;font-size:10px}
.employee-form label,.settings-form label,.login-card label{font-weight:480;font-size:11.5px}
.primary{font-weight:510;font-size:12.5px}
th{font-size:10px;font-weight:540}td{font-size:12.5px}
.app-footer strong{font-weight:520}
.login-card h1{font-weight:510}
.login-tag{font-weight:520}
.role-form h3{font-weight:510}
/* Shell and navigation */
.app{grid-template-columns:255px minmax(0,1fr)}
.sidebar{padding:21px 14px 13px;background:radial-gradient(ellipse 110% 47% at 10% -8%,rgba(85,174,184,.09),transparent 82%),var(--sidebar);border-right:1px solid var(--border)}
.sidebar::before{height:1px;opacity:.6}
.brand{padding:4px 9px 22px}
.signet{background:linear-gradient(139deg,#d6fff3,#76d8d5 55%,#8faaf2);border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 23px rgba(39,175,166,.16),inset 0 1px 1px rgba(255,255,255,.9)}
.nav-scroll{margin:19px -5px 8px}
.nav-group{margin-bottom:20px}
.nav-label{margin:0 13px 10px}
.nav-item{margin:1px 0;padding:10px 13px;transition:background .16s,border-color .16s,color .16s}
.nav-item:hover{transform:none;background:var(--panel-strong)}
.nav-item.active{box-shadow:inset 2px 0 var(--accent)}
.nav-icon{color:var(--subtle)}.nav-item.active .nav-icon{color:var(--accent)}
.side-foot{padding:8px 2px 0}
.platform-state{padding:14px 13px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);background:linear-gradient(131deg,rgba(93,214,193,.075),rgba(108,148,197,.035))}
.topbar{min-height:78px;padding:15px clamp(23px,3vw,44px);position:sticky;top:0;z-index:25;background:var(--topbar);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 1px rgba(255,255,255,.017)}
.theme-toggle{background:linear-gradient(155deg,var(--panel-strong),var(--inset));border-color:var(--border-strong);height:39px;padding:0 15px}
.profile{padding-left:18px}.avatar{border-radius:13px;background:linear-gradient(145deg,rgba(100,219,200,.18),rgba(100,158,222,.075))}
.logout{min-height:39px;background:transparent;padding:9px 14px}
.content{max-width:1710px;padding:clamp(23px,3vw,40px) clamp(23px,3vw,44px) 0}
/* Editorial header in a restrained, translucent glass pane. */
.page-title{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;padding:23px 25px 24px;margin-bottom:20px;background:linear-gradient(112deg,rgba(89,163,188,.075),rgba(89,163,188,.016) 57%,rgba(86,187,168,.065));border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.page-title::before{content:"";pointer-events:none;position:absolute;z-index:-1;width:370px;height:320px;right:-110px;top:-230px;border-radius:50%;background:radial-gradient(circle,rgba(84,209,192,.135),transparent 69%)}
.page-title .eyebrow{color:var(--accent)}
.page-title .eyebrow::before{width:17px;height:1px}
.outline-badge{padding:8px 13px;letter-spacing:.55px;background:rgba(96,209,186,.075)}
/* KPI cards: soft gloss, restrained color; footer metadata aligned at bottom. */
.metrics{gap:16px;margin-bottom:18px}
.metric,.panel,.login-card{border-radius:var(--radius);background:var(--panel-glass);box-shadow:var(--shadow);border:1px solid var(--border)}
.metric{display:flex;flex-direction:column;min-height:168px;padding:22px 23px 20px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.metric::before{content:"";position:absolute;pointer-events:none;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,rgba(129,230,212,.37),transparent 75%)}
.metric::after{right:-58px;top:-75px;width:200px;height:200px;background:radial-gradient(circle,rgba(99,211,198,.115),transparent 73%)}
.metric:nth-child(2)::after{background:radial-gradient(circle,rgba(112,170,230,.115),transparent 73%)}
.metric:nth-child(3)::after{background:radial-gradient(circle,rgba(232,190,133,.09),transparent 73%)}
.metric-top{align-items:flex-start;color:var(--muted)}
.metric-icon{height:43px;width:43px;border-radius:13px;background:linear-gradient(150deg,rgba(99,225,206,.13),rgba(99,225,206,.035));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.metric:nth-child(2) .metric-icon{background:linear-gradient(150deg,rgba(125,172,235,.14),rgba(125,172,235,.035))}
.metric:nth-child(3) .metric-icon{background:linear-gradient(150deg,rgba(232,191,130,.14),rgba(232,191,130,.035))}
.metric-value{margin-top:auto;padding-top:15px}
.metric-note{margin-top:4px}
.two-cols{grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:18px}
.panel{margin-bottom:18px;box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.04)}
.panel-head{padding:20px 23px;min-height:65px}
.empty{padding:42px 22px 48px}
.empty-mark{height:63px;width:63px;border-radius:19px;background:linear-gradient(147deg,rgba(89,203,188,.155),rgba(104,163,238,.065));box-shadow:inset 0 1px rgba(255,255,255,.09)}
.service-row{padding:16px 23px;min-height:55px}
.tag{font-size:9px;text-transform:uppercase;padding:6px 11px}
.pill{text-transform:none;font-size:10.5px;padding:6px 11px}
.primary{background:linear-gradient(110deg,#86ebd4,#a5d2ee 63%,#bac5fb);border:1px solid rgba(255,255,255,.23)}
input:not([type=hidden]):not([type=checkbox]),select{border-radius:12px;background:var(--input)}
/* Footer is docked at the bottom of the main content region. */
.app-footer{position:sticky;bottom:0;min-height:61px;margin-top:auto;padding:15px 0 16px;z-index:5;font-size:10.5px;background:var(--footer);border-top:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Light palette stays luminous and readable, without heavy black text. */
html[data-theme="light"] .sidebar{background:radial-gradient(ellipse at 20% 0%,rgba(139,228,215,.15),transparent 55%),#fff}
html[data-theme="light"] .page-title{background:linear-gradient(117deg,rgba(255,255,255,.81),rgba(231,244,251,.80) 62%,rgba(222,244,239,.62));box-shadow:0 14px 38px rgba(33,78,117,.035),inset 0 1px rgba(255,255,255,.9)}
html[data-theme="light"] .metric{box-shadow:0 17px 43px rgba(36,74,104,.065),inset 0 1px rgba(255,255,255,.94)}
html[data-theme="light"] .metric::before{background:linear-gradient(90deg,rgba(20,166,150,.22),transparent 78%)}
html[data-theme="light"] .metric::after{opacity:.7}
html[data-theme="light"] .panel,html[data-theme="light"] .login-card{box-shadow:0 17px 48px rgba(33,72,115,.055),inset 0 1px rgba(255,255,255,.92)}
html[data-theme="light"] .panel::before{background:linear-gradient(90deg,rgba(255,255,255,.9),transparent 88%)}
html[data-theme="light"] .nav-item.active{background:linear-gradient(105deg,rgba(50,194,178,.12),rgba(127,180,242,.075))}
html[data-theme="light"] .theme-toggle{background:linear-gradient(145deg,#fff,#f3f8fd)}
html[data-theme="light"] .metric-icon{background:linear-gradient(130deg,rgba(93,212,194,.13),rgba(93,212,194,.04))}
html[data-theme="light"] .metric:nth-child(2) .metric-icon{background:linear-gradient(130deg,rgba(108,162,233,.13),rgba(108,162,233,.04))}
html[data-theme="light"] .metric:nth-child(3) .metric-icon{background:linear-gradient(130deg,rgba(221,181,119,.13),rgba(221,181,119,.035))}
@media(max-width:1240px){.two-cols{grid-template-columns:1fr}}
@media(max-width:970px){.app{grid-template-columns:225px minmax(0,1fr)}}
@media(max-width:860px){.app{display:block}.topbar{min-height:68px}.content{padding-top:22px}}
@media(max-width:620px){.app-footer{position:static}.page-title{padding:20px 17px}.page-title h1{font-size:26px}.metrics{gap:11px}.metric{padding:17px;min-height:158px}.metric-icon{height:35px;width:35px}.metric-value{font-size:31px}.panel-head{padding:17px}.service-row{padding:15px 17px}.app-footer{min-height:0;gap:9px;padding:15px 2px;font-size:10px}.footer-right{font-size:9px}.topbar{padding:12px 15px}}
@media(max-width:385px){.metrics{grid-template-columns:1fr}.metric{min-height:122px}}