:root{--bg:#f4f7fb;--surface:#fff;--surface2:#f8fafc;--sidebar:#122033;--sidebar2:#182a43;--text:#172033;--muted:#718096;--line:#e5ebf2;--primary:#18a65b;--primary2:#0f8d4c;--info:#3b82f6;--cyan:#14b8a6;--warning:#f59e0b;--danger:#ef5350;--purple:#7c5cff;--shadow:0 8px 24px rgba(31,45,61,.07);--shadow2:0 18px 45px rgba(31,45,61,.10);--radius:14px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg)!important;color:var(--text)!important;font-size:14px;line-height:1.5}body{background:#f4f7fb!important}a{color:var(--info)!important;text-decoration:none}a:hover{color:#2563eb!important}
/* Modern SaaS application shell */
.app-sidebar{position:fixed!important;z-index:1100;left:0;top:0;bottom:0;width:242px;background:linear-gradient(180deg,#122033 0%,#0e1a2b 100%)!important;color:#d9e4f0!important;padding:18px 14px!important;overflow-y:auto;box-shadow:8px 0 28px rgba(18,32,51,.08)!important}.brand{padding:6px 10px 24px!important}.brand-mark{font-size:24px!important;font-weight:900!important;letter-spacing:-1px!important;color:#fff!important}.brand-mark span{font-style:italic}.brand-mark b{color:#39c977!important}.brand-sub{font-size:10px!important;color:#8fa1b5!important;margin-top:2px!important}.sidebar-section{font-size:10px!important;color:#72849a!important;font-weight:800!important;letter-spacing:1px!important;padding:12px 10px 6px!important}.side-link{display:flex!important;align-items:center!important;gap:10px!important;min-height:42px!important;padding:10px 11px!important;margin:3px 0!important;border-radius:9px!important;color:#b7c5d5!important;font-weight:650!important;font-size:13px!important;border:1px solid transparent!important}.side-link:hover,.side-link.active{background:#1c3553!important;color:#fff!important;border-color:#27466a!important}.side-link.active{background:linear-gradient(90deg,#149b55,#1aae62)!important;box-shadow:0 6px 14px rgba(24,166,91,.20)!important}.side-ico{width:19px!important;text-align:center!important;color:#8fa5bc!important;font-size:15px!important}.side-link.active .side-ico{color:#fff!important}.chev{margin-left:auto;color:#8ea2b7!important}.side-sub{display:block!important;padding:8px 10px 8px 40px!important;color:#93a5b9!important;font-size:12px!important;border-radius:8px!important}.side-sub:hover{background:#182c45!important;color:#fff!important}.sidebar-bottom{margin-top:22px!important;padding-top:14px!important;border-top:1px solid #263b55!important}.server-chip{display:flex!important;align-items:center!important;gap:9px!important;background:#172a42!important;border:1px solid #29425f!important;border-radius:11px!important;padding:10px!important}.server-chip b{display:block!important;color:#fff!important;font-size:12px!important}.server-chip small{display:block!important;color:#7f94aa!important;font-size:10px!important}.live-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:#26c76f!important;box-shadow:0 0 0 4px rgba(38,199,111,.12)!important}.logout-link{display:block!important;padding:10px!important;margin-top:7px!important;color:#aebdd0!important;font-size:12px!important}.logout-link:hover{color:#fff!important}
.app-topbar{position:fixed!important;z-index:1000;left:242px;right:0;top:0;height:68px;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--line)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 28px!important;backdrop-filter:blur(10px)!important}.topbar-left,.topbar-right{display:flex!important;align-items:center!important;gap:16px!important}.topbar-title{font-weight:800!important;font-size:16px!important;color:#172033!important}.menu-toggle{display:none!important;border:0!important;background:transparent!important;color:#516174!important;font-size:20px!important}.global-search{height:38px!important;min-width:310px!important;border:1px solid #dce4ed!important;background:#f8fafc!important;border-radius:9px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 12px!important;color:#516174!important}.global-search span{font-size:12px!important;color:#8a98a9!important}.top-date{font-size:11px!important;color:#738196!important}.top-date b{color:#26364b!important;margin-left:5px!important}.user-chip{display:flex!important;align-items:center!important;gap:9px!important;padding-left:12px!important;border-left:1px solid var(--line)!important}.user-avatar{width:34px!important;height:34px!important;border-radius:50%!important;background:#e5f7ed!important;color:#0f8d4c!important;display:grid!important;place-items:center!important;font-weight:800!important}.user-chip b{display:block!important;font-size:12px!important}.user-chip small{display:block!important;color:#8a97a8!important;font-size:10px!important}
.wrap{max-width:none!important;margin:0!important;padding:92px 28px 35px 270px!important}.app-page .top{position:fixed!important;left:242px!important;right:0!important;top:0!important;height:68px!important;background:#fff!important;color:var(--text)!important;border-bottom:1px solid var(--line)!important;padding:0 28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;z-index:1000!important;box-shadow:0 4px 18px rgba(24,39,75,.04)!important}.app-page .top b{font-size:16px!important;color:#172033!important}.app-page .top a{color:#53657a!important;margin-left:16px!important}.app-page .wrap{max-width:none!important;margin:0!important;padding:92px 28px 35px 270px!important}.app-page .app-sidebar{display:block!important}
/* Generic components */
.card,.panel,.box,.stat,.membership,.devicebox{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;padding:18px!important}.card{margin:14px 0!important}.grid{gap:14px!important}.n{color:var(--text)!important;font-size:30px!important;font-weight:800!important}h1{color:var(--text)!important;font-size:28px!important;font-weight:800!important;letter-spacing:-.5px!important}h2{color:var(--text)!important;font-size:16px!important;font-weight:800!important}h3{color:var(--text)!important}p,.muted,.note{color:var(--muted)!important}label{color:#506176!important;font-weight:700!important;font-size:12px!important}
input,select,textarea{background:#fff!important;color:#26364b!important;border:1px solid #d8e1eb!important;border-radius:9px!important;padding:10px 11px!important;outline:none!important;box-shadow:none!important}input::placeholder,textarea::placeholder{color:#9aa6b5!important}input:focus,select:focus,textarea:focus{border-color:#72c79a!important;box-shadow:0 0 0 3px rgba(24,166,91,.10)!important}button,.btn{background:var(--primary)!important;color:#fff!important;border:1px solid var(--primary)!important;border-radius:9px!important;padding:9px 14px!important;font-weight:750!important;cursor:pointer!important;box-shadow:none!important}.btn:hover,button:hover{background:var(--primary2)!important}.btn.blue{background:var(--info)!important;border-color:var(--info)!important}.btn.red,.danger{background:var(--danger)!important;border-color:var(--danger)!important}.btn.small{padding:7px 10px!important;font-size:11px!important}.ok{background:#ecfdf3!important;border:1px solid #b7ebca!important;color:#147a43!important;border-radius:9px!important;padding:11px!important}.bad{background:#fff1f1!important;border:1px solid #f5c1c1!important;color:#b42318!important;border-radius:9px!important;padding:11px!important}.warn{background:#fff8e8!important;border:1px solid #f2d08a!important;color:#9a6700!important;border-radius:9px!important;padding:11px!important}
table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;overflow:hidden!important}th{background:#f8fafc!important;color:#68778a!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.35px!important;font-weight:800!important}th,td{padding:11px 12px!important;border-bottom:1px solid #edf1f5!important;text-align:left!important}td{color:#334155!important}tbody tr:hover td,tr:hover td{background:#f8fbf9!important}tr:last-child td{border-bottom:0!important}.dash-table{max-height:300px!important;overflow:auto!important}
/* Dashboard */
.dashhead{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;padding:0 0 18px!important}.dashhead h1{margin:0!important}.crumb{color:#8b98a8!important;font-size:12px!important}.dash-actions{display:flex!important;align-items:center!important;gap:12px!important}.searchbox{background:#fff!important;border:1px solid #dbe3ec!important;color:#7a8899!important;border-radius:9px!important;padding:10px 14px!important;width:250px!important}.datebox{font-size:11px!important;color:#7b8797!important}.grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important}.metric{min-height:108px!important;position:relative!important;overflow:hidden!important}.metric .label{color:#718096!important;font-size:12px!important}.metric .value{color:#172033!important;font-size:28px!important;font-weight:850!important;margin-top:8px!important}.metric .sub{color:#8b98a8!important;font-size:10px!important;margin-top:3px!important}.metric .icon{position:absolute!important;right:15px!important;top:16px!important;width:42px!important;height:42px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:#eef6ff!important;color:var(--info)!important;font-size:18px!important}.metric.green .icon{background:#e9f8ef!important;color:#159b55!important}.metric.blue .icon{background:#eaf3ff!important;color:#3b82f6!important}.metric.amber .icon{background:#fff6df!important;color:#d88900!important}.metric.red .icon{background:#fff0f0!important;color:#df4b4b!important}.metric.purple .icon{background:#f2eeff!important;color:#7255df!important}.metric.cyan .icon{background:#e8fbf8!important;color:#0e9e91!important}.section{margin-top:14px!important}.section-title{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:12px!important}.section-title h2{margin:0!important;font-size:15px!important}.view{font-size:11px!important;color:var(--info)!important}.dashboard-cols{display:grid!important;grid-template-columns:1.25fr 1fr .8fr!important;gap:14px!important}.two-cols{display:grid!important;grid-template-columns:1.25fr .8fr!important;gap:14px!important}.mini-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important}.mini{padding:12px!important;border:1px solid #e6ebf2!important;border-radius:10px!important;text-align:center!important;background:#f8fafc!important}.mini b{display:block!important;font-size:21px!important;margin-bottom:3px!important}.status,.badge,.badge2,.queue-status{display:inline-flex!important;align-items:center!important;padding:4px 8px!important;border-radius:999px!important;font-size:10px!important;font-weight:800!important}.s-online,.s-success,.badge2.active,.queue-status.s-success{background:#e8f8ef!important;color:#128548!important}.s-offline,.s-failed,.badge2.expired,.queue-status.s-failed{background:#fff0f0!important;color:#c43e3e!important}.s-sync,.s-sent,.queue-status.s-sent{background:#fff6df!important;color:#a56a00!important}.s-queued,.queue-status.s-queued{background:#eaf3ff!important;color:#2563c7!important}.activity{display:flex!important;gap:10px!important;padding:9px 0!important;border-bottom:1px solid #edf1f5!important}.dot{width:7px!important;height:7px!important;border-radius:50%!important;background:#22b86a!important;margin-top:6px!important;flex:0 0 auto}.dot.red{background:#ef5350!important}.dot.amber{background:#f59e0b!important}.activity small{color:#8996a7!important}.sysrow{display:flex!important;justify-content:space-between!important;padding:10px 0!important;border-bottom:1px solid #edf1f5!important;font-size:12px!important}.sysrow span{color:#77869a!important}.sysrow b{color:#2b3a4d!important}.online-led{display:inline-block!important;width:7px!important;height:7px!important;border-radius:50%!important;background:#22b86a!important;margin-right:6px!important}.chart{height:180px!important;display:flex!important;align-items:end!important;gap:10px!important;padding:18px 5px 8px!important;border:0!important;background:linear-gradient(180deg,#fff,#fbfcfe)!important}.bar{flex:1!important;display:flex!important;flex-direction:column!important;justify-content:end!important;align-items:center!important;height:100%!important;gap:6px!important}.bar i{display:block!important;width:70%!important;max-width:34px!important;background:linear-gradient(180deg,#62d795,#18a65b)!important;border-radius:5px 5px 0 0!important;min-height:3px!important}.bar span,.bar b{font-size:10px!important;color:#8491a1!important}.empty{color:#8996a7!important;padding:20px!important;text-align:center!important}.pagination a,.pagination span,.filter{background:#fff!important;border:1px solid #dce4ed!important;color:#627187!important;border-radius:7px!important}.pagination .active,.filter.active{background:#18a65b!important;color:#fff!important;border-color:#18a65b!important}
/* Employee / lifecycle */
.kpis{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:13px!important}.kpi{background:#fff!important}.kpi .ico{background:#eaf3ff!important;color:#3b82f6!important;border:1px solid #d7e8ff!important}.kpi:nth-child(2) .ico{background:#e9f8ef!important;color:#18a65b!important}.kpi:nth-child(3) .ico{background:#fff6df!important;color:#d88900!important}.kpi:nth-child(4) .ico{background:#fff0f0!important;color:#df4b4b!important}.kpi:nth-child(5) .ico{background:#f2eeff!important;color:#7255df!important}.kpi-label{color:#718096!important}.kpi-value{color:#172033!important}.kpi-sub{color:#8b98a8!important}.layout{gap:14px!important}.panel-head{border-bottom:1px solid var(--line)!important;padding-bottom:12px!important}.emp-name{color:#172033!important}.emp-code{color:#8b98a8!important}.avatar{background:#eaf3ff!important;color:#2563c7!important;border:1px solid #d5e6fb!important}.details .detail{border-bottom-color:#edf1f5!important}.timeline .step i{background:#f1f5f9!important;border-color:#cfd9e5!important}.timeline .step.done i{background:#e9f8ef!important;border-color:#8ad2aa!important}.queue-action{background:#f8fafc!important;border-color:#e2e8f0!important}
/* Login: no application sidebar */
body.login-page{background:linear-gradient(135deg,#f4f8fb 0%,#edf7f1 100%)!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:100vh!important}.login-shell{width:min(980px,94vw)!important;display:grid!important;grid-template-columns:1.05fr .95fr!important;background:#fff!important;border:1px solid #e2e9f0!important;border-radius:24px!important;box-shadow:var(--shadow2)!important;overflow:hidden!important}.login-brand{padding:48px!important;background:linear-gradient(150deg,#122033,#1b3552)!important;color:#fff!important;display:flex!important;flex-direction:column!important;justify-content:center!important}.login-brand .brand-mark{font-size:38px!important}.login-brand h1{color:#fff!important;font-size:30px!important;margin:18px 0 8px!important}.login-brand p{color:#b9c9da!important;max-width:380px!important}.login-features{margin-top:24px!important;display:grid!important;gap:10px!important}.login-feature{display:flex!important;gap:10px!important;align-items:center!important;color:#d9e6f2!important;font-size:12px!important}.login-feature i{width:28px!important;height:28px!important;border-radius:8px!important;background:#1e8f55!important;display:grid!important;place-items:center!important;font-style:normal!important}.login-form{padding:48px!important}.login-form h2{font-size:24px!important;margin:0 0 6px!important}.login-form .sub{color:#8794a5!important;font-size:12px!important;margin-bottom:22px!important}.login-form input{width:100%!important;margin:6px 0!important;height:46px!important}.login-form button{width:100%!important;height:46px!important;margin-top:10px!important}.login-error{background:#fff0f0!important;color:#b42318!important;border:1px solid #f2c0c0!important;border-radius:9px!important;padding:10px!important;margin-bottom:12px!important}.login-help{color:#8b98a8!important;font-size:11px!important;margin-top:16px!important;text-align:center!important}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)!important}.dashboard-cols,.two-cols{grid-template-columns:1fr!important}.kpis{grid-template-columns:repeat(3,1fr)!important}}@media(max-width:760px){.app-sidebar{transform:translateX(-100%);transition:.2s}.sidebar-open .app-sidebar{transform:translateX(0)}.app-topbar{left:0!important;padding:0 15px!important}.app-page .top{left:0!important}.menu-toggle{display:block!important}.topbar-title{display:none}.global-search{min-width:0!important;width:180px!important}.top-date,.user-chip small{display:none}.wrap,.app-page .wrap{padding:84px 14px 25px!important}.grid,.kpis{grid-template-columns:1fr 1fr!important}.login-shell{grid-template-columns:1fr!important}.login-brand{padding:28px!important}.login-form{padding:30px!important}.login-brand h1{font-size:24px!important}}@media(max-width:520px){.grid,.kpis{grid-template-columns:1fr!important}.global-search{display:none!important}.login-brand{display:none!important}.login-shell{width:92vw!important}.login-form{padding:28px 22px!important}}

/* Unified Modern SaaS compatibility shell for legacy Phase 1-5 pages */
body:not(.login-page){background:#f6f8fb!important;color:#162235!important;overflow-x:hidden!important}
body:not(.login-page) > .top, body:not(.login-page) > .nav{display:none!important}
body:not(.login-page) .saas-content{margin-left:242px!important;padding:94px 28px 36px!important;min-height:100vh!important}
body:not(.login-page) .saas-page-wrap{margin-left:0!important;max-width:none!important;padding:92px 28px 36px 270px!important}
body:not(.login-page) .saas-page-wrap > *{max-width:100%!important}
.app-sidebar .active-sub{display:block!important;background:#e8f8ef!important;color:#087443!important;border-radius:8px!important;font-weight:800!important}
.app-sidebar .side-sub{display:block!important;margin:2px 8px!important;padding:8px 10px 8px 40px!important;color:#91a3b7!important;font-size:11px!important;border-radius:8px!important}
.app-sidebar .side-sub:hover{background:#182c45!important;color:#fff!important}
.saas-content h1,.saas-page-wrap h1{color:#142238!important}.saas-content h2,.saas-page-wrap h2{color:#18263a!important}
.saas-content .top,.saas-page-wrap .top{display:none!important}
/* Override legacy inline dark/light components */
.saas-page-wrap .panel,.saas-page-wrap .card,.saas-content .panel,.saas-content .card{background:#fff!important;color:#172033!important;border-color:#e3e9f0!important;box-shadow:0 8px 24px rgba(31,45,61,.06)!important}
.saas-page-wrap .filter,.saas-page-wrap .navlinks a,.saas-content .filter{background:#fff!important;color:#53657a!important;border-color:#dbe4ed!important}
.saas-page-wrap .filter.active,.saas-page-wrap .navlinks a.active{background:#e8f8ef!important;color:#087443!important;border-color:#b7e5ca!important}
.saas-page-wrap .kpi .ico{background:#eaf3ff!important;border-color:#d5e6fb!important;color:#2563c7!important}.saas-page-wrap .kpi:nth-child(2) .ico{background:#e9f8ef!important;border-color:#bce8cd!important;color:#149653!important}.saas-page-wrap .kpi:nth-child(3) .ico{background:#fff6df!important;border-color:#f0d797!important;color:#b77900!important}.saas-page-wrap .kpi:nth-child(4) .ico{background:#fff0f0!important;border-color:#f1c8c8!important;color:#c43e3e!important}.saas-page-wrap .kpi:nth-child(5) .ico{background:#f2eeff!important;border-color:#d9ceff!important;color:#7255df!important}
.saas-page-wrap .emp-name{color:#172033!important}.saas-page-wrap .emp-code{color:#8491a1!important}.saas-page-wrap .avatar{background:#eaf3ff!important;border-color:#d5e6fb!important;color:#2563c7!important}.saas-page-wrap .detail,.saas-page-wrap .queue-action,.saas-page-wrap .check{background:#f8fafc!important;border-color:#e1e8ef!important;color:#26364b!important}.saas-page-wrap .detail span,.saas-page-wrap .note{color:#7a899b!important}.saas-page-wrap .queue-status{border:1px solid transparent!important}.saas-page-wrap .queue-status.success{background:#e8f8ef!important;color:#087443!important}.saas-page-wrap .queue-status.sent{background:#eaf3ff!important;color:#2563c7!important}.saas-page-wrap .queue-status.queued{background:#fff6df!important;color:#a56a00!important}.saas-page-wrap .queue-status.failed{background:#fff0f0!important;color:#b42318!important}
.saas-page-wrap .btn{background:#fff!important;color:#42566d!important;border-color:#d6e1eb!important}.saas-page-wrap .btn.primary,.saas-page-wrap button:not(.red):not(.blue){background:#18a65b!important;color:#fff!important;border-color:#18a65b!important}.saas-page-wrap .btn.blue{background:#3b82f6!important;color:#fff!important;border-color:#3b82f6!important}.saas-page-wrap .btn.red{background:#ef5350!important;color:#fff!important;border-color:#ef5350!important}
.saas-page-wrap table th{background:#f8fafc!important;color:#65758a!important}.saas-page-wrap table td{color:#334155!important}.saas-page-wrap table tr:hover td{background:#f8fbf9!important}
@media(max-width:760px){body:not(.login-page) .saas-content{margin-left:0!important;padding:84px 14px 25px!important}.saas-page-wrap{padding-left:14px!important;padding-right:14px!important}.app-sidebar{transform:translateX(-100%)!important}.sidebar-open .app-sidebar{transform:translateX(0)!important}}