/* OT-Guard portal: contemporary Control Room layout. */
:root{--border:#ffffff12;--muted:#9aadb9;--panel:#102330;--raised:#162c3a;font-family:Inter,'Segoe UI',Arial,sans-serif}
body{background:#091722}
h1,h2,.stat strong{font-family:Inter,'Segoe UI',Arial,sans-serif}
button,input,select,a{transition:background .18s,border-color .18s,color .18s,box-shadow .18s}
.login-screen{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,1fr);padding:0;background:#091722;min-height:100svh;place-items:stretch}
.login-story{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:36px clamp(32px,5vw,88px);overflow:hidden;background:radial-gradient(ellipse at 10% 80%,#1b4b5e66,transparent 65%),linear-gradient(145deg,#102d3d,#081e29 65%);border-right:1px solid #ffffff0d;min-height:100svh}
.login-story:before{content:'';position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 40%,transparent)}
.story-brand{display:flex;align-items:center;justify-content:space-between;gap:24px}
.story-brand img{width:192px;height:64px;object-fit:contain}
.portal-tag{font-size:9px;letter-spacing:.16em;color:#adc1cc;border:1px solid #ffffff20;border-radius:30px;padding:8px 11px;white-space:nowrap}
.story-copy{margin:auto 0 0;padding-top:50px;max-width:600px}
.story-kicker{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.17em;color:#c1d2dc;margin-bottom:22px;font-weight:600}
.story-kicker:before{content:'';width:6px;height:6px;border-radius:50%;background:#ed2140;box-shadow:0 0 0 5px #ed214014}
.story-copy h2{font-size:clamp(36px,4.2vw,62px);font-weight:600;line-height:1.08;letter-spacing:-.055em;margin:0 0 22px;max-width:520px}
.story-copy h2 span{color:#8faebb}
.story-copy>p{font-size:14px;line-height:1.8;max-width:380px;color:#a8bfcc}
.topology{position:relative;margin:28px 0 24px;max-width:540px}
.topology svg{display:block;width:100%;height:auto;overflow:visible}
.story-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:10px;color:#8fa9b8;padding:14px 0 0;border-top:1px solid #ffffff13;margin-top:auto}
.story-footer span:last-child{letter-spacing:.1em;font-size:9px}
.login-card{display:flex;flex-direction:column;justify-content:center;width:min(100%,440px);margin:auto;padding:48px 38px;background:none;border:0;border-radius:0;box-shadow:none;min-width:0}
.login-brand{display:none}
.login-card .eyebrow{color:#a9bbc7;font-size:9px;letter-spacing:.15em;margin-bottom:12px}
.login-card .eyebrow:before{display:none}
.login-card h1{font-size:37px;font-weight:600;letter-spacing:-.045em;margin:0 0 12px}
#login-description{font-size:13px;color:#94a9b6}
.login-card form{margin-top:32px;gap:21px}
.login-card label{font-size:12px;font-weight:500;gap:10px;color:#d3dfe5}
.login-card input{background:#102330;border:1px solid #ffffff15;border-radius:9px;min-height:50px;padding:14px;color:#f5f7f6;font-size:14px}
.login-card input:hover{border-color:#ffffff35}
.login-card input:focus-visible{outline:none;border-color:#98b4c3;box-shadow:0 0 0 3px #98b4c313}
.password-field{display:block;position:relative}
.password-field input{padding-right:48px}
.password-toggle{position:absolute;right:5px;top:5px;width:40px;height:40px;border:0;background:transparent;color:#94a9b6;display:grid;place-items:center;border-radius:6px}
.password-toggle:hover{background:#ffffff08;color:#f5f7f6}
.password-toggle svg{width:18px;height:18px;pointer-events:none}
.login-card .primary{display:flex;justify-content:space-between;align-items:center;min-height:50px;border-radius:9px;padding:14px 17px;font-size:13px;background:#c71330;box-shadow:0 5px 22px #c713301e;margin-top:3px}
.login-card .primary:hover{background:#db1738;box-shadow:0 7px 28px #c7133030}
.login-card .primary svg{width:17px;height:17px}
.login-help{font-size:11px;line-height:1.8;padding:23px 0 0;margin-top:25px;color:#9aadb9;border-color:#ffffff0d}
.login-assurance{margin-top:28px;display:flex;align-items:center;gap:7px;color:#7e96a5;font-size:10px;letter-spacing:.01em}
.login-assurance svg{width:13px;height:13px}
.sidebar{width:242px;padding:22px 16px;background:#0a1b27;border-right:1px solid #ffffff0c}
.brand{padding:0 10px}.brand img{width:190px;height:auto}
.workspace{margin:25px 0 28px;border:1px solid #ffffff0c;border-radius:10px;background:#102330;padding:12px;gap:10px}
.workspace .avatar{background:#243541;border:0;border-radius:7px;color:#cad9e2;font-size:10px;padding:10px}
.workspace div{font-size:12px;font-weight:600}.workspace small{font-size:10px;font-weight:400;color:#8fa5b3}
.nav-label{font-size:8px;letter-spacing:.15em;color:#7e95a5;margin-bottom:12px}
nav button{border:1px solid transparent;padding:13px 12px;border-radius:8px;color:#93a9b7;margin-bottom:5px;gap:12px}
nav button.active{background:linear-gradient(90deg,#ed214014,#ed214006);border-color:#ed214025;color:#f5f7f6}
nav button.active::after{content:'';margin-left:auto;width:5px;height:5px;background:#ed2140;border-radius:50%}
nav button.active:has(b)::after{display:none}
nav button:hover{background:#ffffff05}
nav b{background:#ed21401a;color:#ff99a9;border-radius:5px;padding:2px 6px}
.sidebar-bottom{border-color:#ffffff0c;padding:20px 10px 0;font-size:10px}
.sidebar-bottom small,.sidebar-bottom a{color:#7892a3;font-size:9px}
.system{color:#a5b9c4;font-size:10px}.system i{box-shadow:0 0 0 4px #54caa60c;width:5px;height:5px}
.shell{margin-left:242px;background:radial-gradient(ellipse at 90% 0%,#17324233,transparent 45%),#091722}
header{height:76px;background:#091722b3;border-color:#ffffff0b;padding:0 40px;backdrop-filter:blur(16px)}
.crumb{font-size:11px}.crumb span{opacity:.4}.crumb strong{font-weight:500}
.header-right{gap:18px}
.mode{font-size:8px;letter-spacing:.1em;color:#a7bbc7;border:1px solid #ffffff14;border-radius:30px;background:#ffffff03;padding:7px 10px}
.icon-button{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;font-size:20px}
.icon-button:hover{background:#ffffff08}
#account-button{font-size:11px;text-decoration:none;max-width:170px}
#logout-button{font-size:10px;padding:9px 12px;border-color:#ffffff18;border-radius:7px;color:#bdcdd6}
main{padding:34px 40px;max-width:1680px}
.intro{margin-bottom:30px;align-items:center;gap:24px}
.intro .eyebrow{font-size:8px;color:#90a9b8;letter-spacing:.16em;gap:8px}.intro .eyebrow:before{width:5px;height:5px;border-radius:50%}
h1{font-weight:600;font-size:30px;letter-spacing:-.04em;margin:12px 0 10px}
.intro p{font-size:12px;color:#8fa6b6;max-width:620px}
.primary,.secondary{border-radius:8px;font-size:11px;padding:11px 15px}
.primary{box-shadow:0 4px 16px #c7133010}.primary:hover{box-shadow:0 4px 18px #c7133028}
.toolbar{padding:0 0 23px;margin:0 0 24px;border-bottom:1px solid #ffffff0b}
.filters{gap:8px}
select,input{background:#102330;border-color:#ffffff15;border-radius:7px;padding:10px 12px;font-size:11px;min-height:37px}
.filters select{color:#b4c8d4;min-width:130px}
#updated{font-size:9px;color:#7f96a6}
.stats{gap:16px;margin-bottom:28px}
.stat{position:relative;border:1px solid #ffffff0e;border-radius:12px;background:linear-gradient(145deg,#132b3a,#102330);padding:22px;overflow:hidden}
.stat:after{content:'';position:absolute;inset:auto 18px 0;height:1px;background:linear-gradient(90deg,transparent,#90b8cb55,transparent)}
.stat-label{font-size:10px;color:#aec2ce}.stat strong{font-size:34px;font-weight:600;letter-spacing:-.04em;margin:20px 0 9px;line-height:1}
.stat small{font-size:9px;color:#8fa8b9}.stat .stat-icon{background:#ffffff04;border:1px solid #ffffff09;border-radius:8px;color:#a4bfce;padding:8px;font-size:13px;top:16px;right:17px}
.grid{gap:24px;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
.panel{border:1px solid #ffffff0d;border-radius:12px;background:#102330;margin-bottom:24px}
.panel-heading{padding:21px 22px;border-bottom:1px solid #ffffff0a;gap:14px}
h2{font-size:13px;font-weight:600;letter-spacing:-.015em}
.text-button{font-size:10px;text-decoration:none;color:#bacdd8}
.text-button:hover{color:#fff}
.count{font-size:9px;background:#ffffff06;color:#9eb6c5;border:1px solid #ffffff0b;border-radius:30px;padding:4px 8px}
th{background:#0d1f2b;color:#7f9aac;font-size:8px;letter-spacing:.1em;padding:12px 22px}
td{border-color:#ffffff08;font-size:11px;padding:19px 22px;color:#d2dfe7}
td small{font-size:9px;color:#829eaf;margin-top:6px}
tr.clickable:hover{background:#ffffff05}
.customer-symbol{background:#203b4b;color:#b7d3e3;border:1px solid #ffffff0a;border-radius:8px;width:32px;height:32px}
.badge{font-size:9px;border-radius:5px;background:#ffffff06;color:#bacdd7;padding:5px 7px;border:1px solid #ffffff0b}
.badge.healthy{background:#54caa60e;border-color:#54caa61c;color:#89d9bb}
.badge.critical{background:#ed214014;border-color:#ed214025;color:#ff9aaa}
.badge.high,.badge.stale{background:#ffcf7010;border-color:#ffcf7018;color:#ebc983}
.badge.offline{background:#95acc510;border-color:#95acc518;color:#a2b8c8}
.badge.medium{background:#799ef516;border-color:#799ef521;color:#afc8fd}
.alert-item{padding:19px 22px;border-color:#ffffff08}.alert-item:hover{background:#ffffff03}
.alert-meta{color:#829eaf;font-size:10px;margin-top:8px}
.panel-body{padding:22px}.panel-body p,.health{font-size:11px}
.section-note{font-size:9px;color:#7f9aab;border-color:#ffffff08;padding:15px 22px}
.protocols span{background:#ffffff04;border:1px solid #ffffff0d;color:#afc6d3;border-radius:5px;font-size:9px}
.empty{padding:42px 22px;color:#7f9aab;font-size:11px}
footer{margin-top:24px;color:#6f8b9e;border-color:#ffffff0b;font-size:8px;gap:20px;flex-wrap:wrap}
dialog{background:linear-gradient(145deg,#142c3b,#0e2230);border:1px solid #ffffff1c;border-radius:16px;padding:30px;box-shadow:0 32px 120px #0009}
dialog::backdrop{background:#020b14b3;backdrop-filter:blur(8px)}
.dialog-heading{margin-bottom:22px;gap:20px}.dialog-heading h2{font-size:21px;font-weight:600}
dialog p{font-size:12px;color:#9bb2c1}
dialog label{font-size:11px;color:#b9ccd8;gap:9px}
dialog input,dialog select{min-height:44px;background:#0a1d2a;border-color:#ffffff18;font-size:12px}
dialog input:focus-visible,dialog select:focus-visible{outline:2px solid #a9c3d3;outline-offset:2px}
.detail-card{border:1px solid #ffffff09;border-radius:9px;background:#ffffff03;padding:16px}.detail-card small{color:#819cad}.detail-card b{font-weight:500}
.form-actions{margin-top:12px;gap:10px}.form-actions button{min-height:40px}
.form-error{color:#ff9daa}
.temporary-password{border-radius:9px;border-color:#ffffff18;background:#081b28;padding:20px;font-size:17px}
#toast{background:#1a3445;color:#e7f0f5;border-color:#ffffff16;border-radius:10px;box-shadow:0 10px 45px #0005}
@media(min-width:1600px){.login-card{width:460px}.story-copy h2{font-size:68px}.topology{margin-top:35px;margin-bottom:35px}}
@media(max-width:1100px){
  .login-story{padding:30px 35px}.story-brand{gap:12px}.story-brand img{width:160px}.portal-tag{font-size:8px;padding:7px 9px}.story-copy h2{font-size:44px}.story-copy>p{font-size:13px}.story-footer{font-size:9px}
  .sidebar{width:210px;padding:20px 12px}.brand img{width:175px}.shell{margin-left:210px}header{padding:0 28px}main{padding:30px 28px}.grid{grid-template-columns:minmax(0,1fr)}.header-right{gap:12px}.stat{padding:18px}.stat strong{font-size:30px}
}
@media(max-width:850px){
  .login-screen{grid-template-columns:minmax(0,1fr)}.login-story{display:none}
  .login-card{padding:40px 30px;max-width:430px;min-height:100svh}.login-brand{display:block;width:194px;margin:0 0 44px}
  .login-card h1{font-size:36px}.login-card .eyebrow{font-size:9px}
}
@media(max-width:700px){
  .sidebar{position:static;width:auto;padding:8px 16px 0;border-right:0;border-bottom:1px solid #ffffff0c}
  .brand{padding:0}.brand img{width:158px}.workspace{display:none}.shell{margin:0}
  nav{gap:4px;margin-top:9px;padding-bottom:10px}nav button{margin:0;border:1px solid transparent;border-radius:7px;padding:10px;gap:7px;font-size:12px}nav button span{font-size:11px}nav button.active{border-color:#ed214025}nav button.active::after{display:none}
  header{height:58px;padding:0 18px}.header-right{gap:12px}#account-button{font-size:10px;max-width:135px}#logout-button{font-size:10px;padding:8px 11px}
  main{padding:26px 18px}.intro{align-items:flex-start;gap:14px;margin-bottom:23px}h1{font-size:25px;letter-spacing:-.04em}.intro p{font-size:11px}.intro .primary{font-size:10px;padding:10px 12px;margin-top:25px}.intro .eyebrow{font-size:7px}
  .toolbar{gap:14px;padding-bottom:19px;margin-bottom:20px}.filters{gap:7px}.filters select{min-width:0;max-width:160px;font-size:10px;padding:9px 10px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}.stat{padding:17px 15px;border-radius:10px}.stat strong{font-size:29px;margin-top:20px}.stat .stat-icon{font-size:11px;padding:6px;top:12px;right:12px}.stat-label{font-size:9px}.stat small{font-size:8px;line-height:1.6;display:block}
  .grid{grid-template-columns:minmax(0,1fr);gap:0}.panel{border-radius:10px;margin-bottom:18px}.panel-heading{padding:18px}.panel-heading h2{font-size:12px}.text-button{font-size:9px}
  th,td{padding:14px 18px}.empty{padding:32px 18px}dialog{padding:23px;border-radius:12px}.dialog-heading h2{font-size:20px}
  .login-card{padding:32px 28px}.login-brand{margin-bottom:36px}.login-card h1{font-size:33px}.login-card form{margin-top:28px}.login-card input{font-size:16px}
}
@media(max-width:380px){.intro{flex-wrap:wrap}.intro .primary{margin-top:0}.login-card{padding:28px 22px}.stat .stat-icon{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.ui-icon{width:17px;height:17px;display:block;flex-shrink:0}.stat-icon .ui-icon{width:17px;height:17px}#refresh .ui-icon{width:17px;height:17px}
@media(max-width:700px){nav{scrollbar-width:none}nav::-webkit-scrollbar{display:none}.primary,.secondary{min-height:40px}nav button{min-height:40px}}
/* Cleaner portal presentation: quiet surfaces and fewer visual elements. */
.login-screen{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);background:#0b1c28}
.login-story{background:#081e29;padding:32px clamp(32px,5vw,76px);min-height:100svh}
.login-story:before{display:none}.story-brand{justify-content:flex-start}.story-brand img{width:180px;height:60px}
.story-copy{margin:auto 0;padding:60px 0}.story-copy h2{font-size:clamp(36px,3.6vw,50px);font-weight:500;letter-spacing:-.045em;line-height:1.15;margin-bottom:20px}
.story-copy h2 span{color:#a3b8c4}.story-copy>p{font-size:13px;color:#98afbd;max-width:310px;line-height:1.8}
.story-footer{margin-top:0;border-top:0;padding:0;color:#819baa;font-size:10px}
.login-card .eyebrow{display:none}.login-card h1{font-size:32px}.login-card form{margin-top:30px}
.login-card .primary,.primary,.primary:hover,.login-card .primary:hover{box-shadow:none}
.login-card input,.login-card .primary{border-radius:6px}.login-assurance{display:none}
.login-help{border-top:0;padding-top:0;margin-top:26px}
.shell{background:#0b1c28}header{background:#0b1c28;backdrop-filter:none}
.stat{background:#102330;border-radius:8px}.stat:after{display:none}.stat .stat-icon{background:none;border:0;padding:4px;color:#91aab9}
.panel{border-radius:8px}.panel-heading{background:none}.workspace{background:none;border:0;padding:4px 12px;margin:25px 0}.workspace .avatar{display:none}
nav button.active{background:#ffffff05;border-color:transparent;box-shadow:inset 2px 0 #ed2140}nav button.active::after{display:none}
.mode{background:none;border:0;padding:0;color:#8fa7b6;letter-spacing:.06em}
.primary,.secondary,select,input{border-radius:6px}
.stat-label{font-size:11px}.stat small{font-size:10px}th{font-size:9px}td{font-size:12px}
.dialog-heading h2{font-weight:500}dialog{background:#102330;border-radius:10px;box-shadow:0 24px 80px #0006}dialog::backdrop{backdrop-filter:blur(4px)}
@media(max-width:850px){.login-screen{grid-template-columns:minmax(0,1fr)}.login-story{display:none}.login-card{max-width:420px}.login-brand{margin-bottom:40px}}
@media(max-width:700px){.workspace{display:none}.stat-label{font-size:10px}.stat small{font-size:9px}.login-card h1{font-size:31px}}