:root{--ink:#152f34;--sub:#516c72;--dark:#102f35;--teal:#086e66;--light:#e4f3ed;--line:#d9e2e2;--paper:#fff;--bg:#f3f6f5;--orange:#a85823;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d99035;outline-offset:2px}
button{border:0;background:none}
button:disabled{opacity:.48;cursor:default}
.shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
aside{background:linear-gradient(150deg,#143940,#0c252b 80%);color:#d2e3e1;padding:30px 16px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:3}
.brand{display:flex;align-items:center;gap:10px;color:white;font-size:25px;font-weight:650;letter-spacing:-1.35px;padding:0 6px 32px}
.brand b{color:#81e4bb;font-weight:750}
.logo{height:39px;width:39px;display:grid;place-items:center;border:1px solid #6bcca7;border-radius:12px;background:#154c47;color:#a4f4cb;font-size:35px;line-height:1;font-family:Arial}
.navtitle,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#8da9aa;margin:14px 10px 12px}
.navtitle{font-size:9px}
.sidefoot{margin-top:auto;border-top:1px solid #325054;padding:18px 5px 2px;font-size:12px;color:#bfd1ce}
.dot{display:inline-block;background:#71d5a7;width:7px;height:7px;border-radius:100%;margin-right:6px}
#nav{overflow:auto}
#nav button{display:flex;align-items:center;width:100%;color:#d5e2df;text-align:left;margin:3px 0;padding:10px 12px;border-radius:7px;gap:12px;font-size:14px}
#nav button:hover{background:#21454a}
#nav button.active{color:#aaf2cd;background:#204d4c;box-shadow:inset 3px 0 #80deac}
#nav svg,.metric svg,.ico svg,.button svg{width:19px;height:19px;vertical-align:middle;flex:none}
header{height:67px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:#fff;padding:0 clamp(16px,3.5vw,60px);font-size:13px;color:var(--sub)}
header i{font-style:normal;color:#afbfbc;padding:0 9px}
header strong{color:var(--ink)}
main{max-width:1600px;padding:30px clamp(16px,3.5vw,60px) 50px;margin:auto}
.mode,.button,.icon,.tab{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:9px 13px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.35}
.mode{color:var(--teal);background:#eff8f3;border-color:#c8e3d8}
.button:hover,.icon:hover,.tab:hover{border-color:#82b9ae}
.primary{background:#086b60;border-color:#086b60;color:#fff}
.primary:hover{background:#045c53}
.quiet{color:var(--teal)}
.ico{display:inline-flex}
.mobile{display:none}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 24px}
.metric{text-align:left;background:white;border:1px solid var(--line);border-radius:10px;padding:16px 16px 13px;position:relative}
.metric:hover,.metric.active{border-color:#82b9ae}
.metric small{color:var(--sub);font-weight:600}
.metric strong{display:block;font-size:29px;margin-top:7px;letter-spacing:-1px}
.metric .ico{position:absolute;right:13px;bottom:14px;border-radius:8px;padding:7px;background:#eaf3ee;color:#3c7565}
.metric:nth-child(2) .ico{background:#fff1df;color:#965d20}
.metric:nth-child(3) .ico{background:#e9eff9;color:#466da0}
.metric:nth-child(4) .ico{background:#faeae4;color:#996042}
.heading,.row,.bar,.split,.formfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.heading{margin-bottom:20px}
.heading .eyebrow{color:var(--teal);margin:0 0 9px}
.heading p,.hint{color:var(--sub);line-height:1.55}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.panelhead{padding:19px 20px 10px}
.panelhead h2,h2{font-size:21px;letter-spacing:-.5px;margin:0}
.panelhead h2 span,.count{font-size:12px;vertical-align:middle;margin-left:6px;padding:3px 7px;border-radius:5px;background:#edf2f0;color:var(--sub)}
.bar{flex-wrap:wrap;justify-content:flex-start;padding:10px 20px 16px;align-items:stretch}
.bar .search{flex:1;min-width:min(200px,100%)}
.search,input:not([type=checkbox]):not([type=file]),select,textarea{background:#fff;border:1px solid #c9d7d5;border-radius:6px;padding:9px 10px;min-width:0}
.search{display:flex;align-items:center;gap:7px}
.search input:not([type=checkbox]){border:0;width:100%;padding:0;outline:none}
.tablewrap{overflow:auto}
table{width:100%;border-spacing:0;text-align:left}
th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#577075;background:#f6f8f7;white-space:nowrap}
td,th{padding:12px 13px;border-top:1px solid #e4eae8}
td:first-child,th:first-child{padding-left:20px}
td{font-size:13px}
tbody tr:hover{background:#f8fbf9}
.idcell{display:flex;align-items:center;gap:11px}
.avatar{width:37px;height:37px;flex:none;display:grid;place-items:center;background:#dceee4;color:#2d6550;border-radius:10px;font-weight:700}
.avatar.g1{background:#e2eef5;color:#39657b}
.avatar.g2{background:#eae6f4;color:#695384}
.avatar.g3{background:#f8eadc;color:#80572c}
.avatar.g4{background:#e1eeeb;color:#29665a}
.link{padding:0;text-align:left;color:#164f4b;font-weight:650}
.link:hover{text-decoration:underline}
.meta{display:block;font-size:12px;color:var(--sub);margin-top:3px}
.pill{font-size:11px;border-radius:15px;padding:4px 8px;display:inline-block;white-space:nowrap;background:#e6f2eb;color:#276049;font-weight:650}
.pill.warn{background:#fff0d7;color:#84541d}
.pill.bad{background:#fce6df;color:#923c30}
.pill.blue{background:#e5eef9;color:#315c8d}
.pill.gray{background:#e9eded;color:#4c6265}
.panelbottom{padding:12px 20px;border-top:1px solid var(--line);color:var(--sub);font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.empty{text-align:center;padding:34px 16px}
.empty h3{margin:0 0 7px}
.empty p{color:var(--sub)}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:13px;width:min(730px,calc(100% - 22px));max-height:90vh;overflow:auto;padding:0;box-shadow:0 20px 75px #102e3555}
dialog::backdrop{background:#09272f72}
.dlghead,.dlgcontent,.formfoot{padding:18px 23px}
.dlghead{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.dlghead h2{margin:0}
.dlghead .eyebrow{margin:0 0 6px;color:var(--teal)}
.formfoot{justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line);background:#f8faf9}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.grid label,.field{display:flex;flex-direction:column;gap:5px;color:var(--sub);font-size:12px;font-weight:650}
.wide{grid-column:1/-1}
textarea{resize:vertical;min-height:60px}
.block{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.block h3,.dlgcontent h3{font-size:15px;margin:0 0 10px}
.doc{padding:10px 0;border-bottom:1px solid #e8edeb}
.doc:last-child{border-bottom:0}
.docedit{border:1px solid var(--line);border-radius:7px;padding:10px;margin:7px 0;background:#f9fbfa}
.docedit .grid{grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.docedit input{width:100%}
.guard-post{display:grid;grid-template-columns:minmax(0,2fr) minmax(110px,1fr) auto;align-items:end;gap:12px;margin-top:12px}
.guard-post label{display:grid;gap:5px}
.guard-post input,.guard-post select{width:100%;min-width:0}
@media(max-width:540px){.guard-post{grid-template-columns:minmax(0,1fr) auto}.guard-post label:first-child{grid-column:1/-1}}
.fileline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px}
.fileline input{max-width:235px}
.boxrow{padding:16px 20px;border-top:1px solid var(--line)}
.summary{background:#eef6f2;border:1px solid #d2e4db;border-radius:8px;padding:12px 14px;color:#335d50;line-height:1.55}
.danger{color:#99493c}
.data-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.tile{padding:18px;border:1px solid var(--line);background:white;border-radius:10px}
.tile h3{margin:0 0 8px}
.data-actions + .panel{margin-top:18px}
.tile p{color:var(--sub);min-height:42px;line-height:1.5}
#notice{position:fixed;right:18px;bottom:18px;z-index:10;max-width:min(460px,90vw);background:#152f34;color:white;padding:12px 16px;border-radius:8px;box-shadow:0 4px 20px #102f3533}
#notice:empty{display:none}
.errors{color:#913b2e;white-space:pre-line}
.filelink{color:#075f58}
.checkline{display:flex;gap:8px;align-items:center}
.checkline input{accent-color:var(--teal)}
.details{margin:0}
.details dt{font-size:12px;color:var(--sub)}
.details dd{margin:4px 0 0;overflow-wrap:anywhere}
.details p{white-space:pre-wrap}
.nowrap{white-space:nowrap}
#print{display:none}
@media(max-width:1060px){.shell{grid-template-columns:189px minmax(0,1fr)}
.brand{font-size:22px}
.hero{padding:24px}
.metric{padding:12px}
.metric .ico{padding:5px}
.metric small{font-size:11px}
}
@media(max-width:780px){.shell{display:block}
aside{display:none}
.navopen aside{display:flex;position:fixed;top:54px;left:0;width:225px;height:calc(100dvh - 54px);box-shadow:8px 8px 35px #1235}
.mobile{display:inline-flex}
header{height:54px;gap:7px;padding:0 12px}
header>span{margin-right:auto}
header>span i,header>span strong{display:none}
.mode{font-size:12px;padding:7px}
.metrics{grid-template-columns:1fr 1fr}
.hero-art{display:none}
.bar{padding:10px}
.panelhead{padding:15px 12px}
.row,.heading,.split{flex-wrap:wrap}
main{padding:18px 12px 30px}
.grid{gap:10px}
.docedit .grid{grid-template-columns:1fr 1fr}
.docedit .grid label:first-child{grid-column:1/-1}
}
@media(max-width:480px){.grid{grid-template-columns:1fr}
.dlgcontent,.dlghead,.formfoot{padding:14px}
.metrics{gap:8px}
.hero{padding:20px}
.bar select{max-width:100%;flex:1}
.metric strong{font-size:23px}
.panelhead .actions{width:100%}
}
@media print{@page{size:A4;margin:16mm}
body{color:#111;background:#fff;font:10.5pt Arial,sans-serif}
.shell,#notice,dialog,dialog::backdrop{display:none!important}
#print{display:block}
#print section{page-break-before:always}
#print section:first-child{page-break-before:auto}
#print h1{font-size:18pt}
#print h2{font-size:13pt;margin:14pt 0 5pt}
#print table{width:100%;border-collapse:collapse}
#print td,#print th{border:1px solid #aaa;padding:6pt;font-size:9pt;color:#111}
#print p{white-space:pre-wrap;overflow-wrap:anywhere}
#print tr{break-inside:avoid}
}

[hidden]{display:none!important}
.auth-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(125deg,#102f36,#1b554c);padding:18px}
.auth-card{width:min(100%,410px);background:white;border-radius:16px;padding:32px;box-shadow:0 15px 60px #081d2850}
.login-password{display:grid;gap:7px}
.password-input{display:flex;align-items:stretch}
.password-input input{min-width:0;flex:1;border-radius:7px 0 0 7px}
.password-input button{padding:0 12px;border:1px solid #c7d5d3;border-left:0;border-radius:0 7px 7px 0;background:#f1f7f5;color:#145954;font:inherit;font-weight:600;cursor:pointer}
.password-input button:focus-visible{outline:2px solid #146c63;outline-offset:1px}
.auth-card h1{margin:22px 0 5px;font-size:27px;letter-spacing:-1px}.auth-card p{color:var(--sub);margin:0 0 22px}
.auth-card form,.auth-card label{display:grid;gap:7px}.auth-card form{gap:15px}.auth-card label{font-weight:600}.auth-card small{color:var(--sub);font-weight:400}
.lockmark{background:#114541;color:white;display:inline-block;border-radius:9px;padding:8px 12px;font-size:20px;font-weight:bold;letter-spacing:-1px}.lockmark span{color:#91e5bb;margin-left:3px}.exit-btn{display:block;color:#a5e5ca;text-decoration:underline;padding:8px 0}
@media(max-width:550px){header{flex-wrap:wrap;height:auto;min-height:54px}header>span{display:none}}
@media print{.auth-screen{display:none!important}}

.app-version{font-size:12px;font-weight:600;line-height:1.4;margin:8px 0 2px}
.login-version{color:var(--sub);text-align:center;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
.candidate-photo{width:38px;height:38px;flex:none;border-radius:8px;object-fit:cover;background:#e2eee9;color:#27634f}
.candidate-photo.large{width:84px;height:96px;border-radius:10px;font-size:24px}
.candidate-photo.initials{display:inline-grid;place-items:center;font-weight:650}
.candidate-tabs{margin-bottom:20px}.candidate-summary{display:flex;align-items:center;gap:16px;margin:10px 0 20px}

.attachment-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.record-attachment{margin-top:6px;flex-wrap:wrap}.record-attachment .button{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.attachment-name,#attachment-title{overflow-wrap:anywhere}
#attachment-viewer{width:min(1060px,calc(100% - 24px));max-height:94vh}
.attachment-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.attachment-head>div{min-width:0}.attachment-head button{flex:none}
#attachment-title{margin:3px 0 0;color:var(--sub);font-size:13px}
#attachment-content{display:grid;place-items:center;overflow:auto;background:#f0f4f3;min-height:150px;padding:10px}
#attachment-content img{display:block;max-width:100%;max-height:72vh;object-fit:contain}
#attachment-content iframe{width:100%;height:71vh;background:white;border:0}
@media(max-width:540px){.attachment-row{grid-template-columns:1fr}.attachment-head{padding:12px}.attachment-head button{font-size:12px}}

.vacancy-hour-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:4px 8px}.vacancy-hour-options .checkline{padding:6px 2px;cursor:pointer}.vacancy-shifts{min-width:0;border:1px solid var(--line);border-radius:7px;margin:0 0 12px;padding:10px 12px}.vacancy-shifts legend{font-size:12px;color:var(--sub);padding:0 5px}.duty-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.duty-line + .duty-line{border-top:1px solid var(--line)}
.duty-line strong{font-weight:600}.duty-line .meta{white-space:pre-wrap;overflow-wrap:anywhere}
#duty-live-info:not(:empty){padding:8px 16px;color:var(--sub)}
.vacancy-memo{white-space:pre-wrap;overflow-wrap:anywhere}.vacancy-shifts .checkline{white-space:nowrap}

.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr));gap:16px}.info-card{font:inherit;text-align:left;color:var(--ink,#183036);background:white;border:1px solid #cfddda;border-radius:14px;padding:22px;display:grid;gap:10px;cursor:pointer}.info-card:hover,.info-card:focus-visible{border-color:#168071;background:#f6fbf9}.info-card .ico{color:#087266}.info-card strong{font-size:1.15rem}.info-card span:not(.ico){color:#526768;line-height:1.5}.info-card small{color:#12675a;font-weight:650}#nav button.nav-child{padding-left:28px} .schedule-task{display:block;white-space:pre-wrap;overflow-wrap:anywhere}.roster-filters{flex-wrap:wrap}.roster-filters select{max-width:100%}.roster-filters label{min-width:135px}
.bar label[hidden],.grid label[hidden]{display:none}
#nav{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#537571 transparent}.roster-filters label select{min-width:0;width:100%}.roster-filters label{max-width:min(100%,330px)}
@media screen {
/* Layout and identity */
:root {
  --ink: #162e37;
  --sub: #50666e;
  --teal: #076254;
  --line: #d9e2e2;
  --bg: #f3f6f6;
  --nav-bg: #102c35;
  --mint: #8fe5c5;
  --shadow: 0 3px 12px rgb(32 59 62 / 4%);
  font-family: "Segoe UI", Arial, sans-serif;
}
.shell { grid-template-columns: 252px minmax(0,1fr); }
.workspace { min-width: 0; }
aside { background: var(--nav-bg); padding: 23px 15px 14px; height:100dvh; }
.brand, .scene-brand, .auth-brand { display:flex; align-items:center; gap:11px; letter-spacing:-1.1px; }
.brand { padding:2px 9px 23px; border-bottom:1px solid #34505a; width:100%; }
.brand-emblem {
  display:grid; place-items:center; flex:0 0 auto; width:36px; height:40px;
  color:var(--mint); background:none;
}
.brand-emblem svg { width:100%; height:100%; stroke-width:1.6; }
.brand-name { font-size:23px; font-weight:650; color:#fff; }
.brand-name b { color:var(--mint); font-weight:730; }
.navtitle { color:#adc1c7; letter-spacing:.13em; font-size:10px; margin:25px 11px 10px; }
#nav { flex:1 1 auto; padding:0 2px 12px; }
#nav button, .nav-group summary {
  min-height:41px; display:flex; align-items:center; width:100%; gap:11px;
  text-align:left; font-size:13px; line-height:1.4; font-weight:550;
  letter-spacing:0; color:#dce7e8; padding:9px 11px; margin:2px 0; border-radius:7px;
}
#nav .ico { color:#a1c3c5; }
#nav button.active { color:#e1fff1; background:#20504f; box-shadow:inset 3px 0 var(--mint); }
#nav button.active .ico { color:var(--mint); }
.nav-main { padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #34505a; }
.nav-group summary { list-style:none; cursor:pointer; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary::after {
  content:""; margin-left:auto; width:6px; height:6px; flex:none;
  border:solid #a4c3c8; border-width:0 1.5px 1.5px 0; transform:rotate(-45deg);
}
.nav-group[open]>summary::after { transform:rotate(45deg); }
.nav-group summary:hover, #nav button:hover { background:#1c4049; }
.nav-group .nav-links { margin:2px 2px 8px 20px; border-left:1px solid #396069; padding-left:7px; }
#nav .nav-links button { min-height:34px; font-size:12px; padding:7px 8px; gap:8px; }
#nav .nav-links svg { width:15px; height:15px; }
.sidefoot { margin-top:7px; border-top:1px solid #34505a; padding:14px 8px 0; }
.account-line { display:flex; align-items:center; gap:9px; color:#eef7f7; font-weight:600; overflow-wrap:anywhere; }
.account-icon { flex:none; width:30px; height:30px; background:#23464c; color:#baf2dc; border-radius:50%; display:grid; place-items:center; }
.account-icon svg { width:16px; height:16px; }
.sidefoot .app-version { font-size:11px; font-weight:400; color:#b4c8cb; margin:8px 0; }
.account-actions { display:flex; gap:14px; flex-wrap:wrap; }
.exit-btn { color:#b8dcdb; font-size:12px; padding:4px 0; text-decoration:none; }
.exit-btn:hover { color:white; text-decoration:underline; }
.menu-scrim { display:none; }
header { height:66px; justify-content:flex-start; gap:11px; padding:0 clamp(18px,2.6vw,44px); }
.breadcrumb { display:flex; align-items:center; white-space:nowrap; min-width:0; }
.breadcrumb strong { overflow:hidden; text-overflow:ellipsis; }
.top-actions { margin-left:auto; display:flex; gap:9px; align-items:center; flex:none; }
header svg { width:17px; height:17px; }
header .mode { background:#eef7f3; color:#206458; border-color:#cee4da; }
main { padding:25px clamp(18px,2.6vw,44px) 44px; }
.button, .icon, .mode, .tab { border-radius:7px; min-height:36px; font-weight:600; }
.primary { background:#096756; border-color:#096756; }
.primary:hover { background:#064c41; border-color:#064c41; }
:focus-visible, .search:focus-within { outline:2px solid #338c80; outline-offset:2px; }
aside :focus-visible { outline-color:var(--mint); }

/* Overview and records */
.hero {
  display:flex; isolation:isolate; align-items:center; overflow:hidden; position:relative;
  min-height:199px; padding:29px clamp(22px,2.7vw,42px); color:white;
  background:#103237; border-radius:14px; margin:0 0 16px;
}
.hero-copy { position:relative; z-index:1; width:56%; }
.hero-photo {
  position:absolute; inset:0 0 0 40%; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,#103237 0%,rgb(16 50 55 / 47%) 25%,transparent 59%),
             url("/security-lobby.jpg") 74% 39% / cover no-repeat;
}
.hero h1 { margin:0; font-size:clamp(31px,3vw,47px); line-height:1.17; letter-spacing:-.043em; font-weight:660; }
.hero p { font-size:14px; line-height:1.55; max-width:45ch; margin:10px 0 0; color:#e0eceb; }
.hero .hero-date { display:flex; align-items:center; gap:7px; margin:0 0 13px; font-weight:550; font-size:12px; color:#b6e6d4; }
.hero-date svg { width:15px; height:15px; }
.heading { margin:5px 0 21px; }
.heading h1 { margin:0; font-weight:680; font-size:clamp(27px,2.5vw,38px); line-height:1.2; }
.heading p { margin:6px 0 0; }
.metrics { gap:12px; margin:0 0 22px; }
.metric {
  padding:16px 17px; min-height:98px; border-radius:11px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; column-gap:6px;
}
.metric small { display:block; grid-column:1/-1; font-size:12px; color:#4b626a; }
.metric strong { font-size:30px; line-height:1.1; font-weight:680; align-self:end; font-variant-numeric:tabular-nums; }
.metric .ico { position:static; align-self:end; justify-self:end; padding:7px; border-radius:9px; color:#216552; background:#e2f2eb; }
.metric.active { box-shadow:inset 0 0 0 1px #398b79; }
.panel,.tile,.info-card { border-radius:12px; box-shadow:var(--shadow); }
.panel+.panel { margin-top:16px; }
.panelhead { padding:19px 21px 12px; }
.panelhead h2 { font-size:20px; font-weight:670; }
.panelhead h2 span,.count { display:inline-block; font-size:11px; color:#365c57; background:#e8f2ee; border-radius:20px; padding:3px 9px; }
.bar { padding:8px 21px 15px; gap:8px; }
.bar select,.bar .search { min-height:36px; font-size:13px; }
#listarea>.bar { background:#f8faf9; border-top:1px solid #e6ecea; padding:9px 21px; }
#listarea>.bar .button,#listarea>.bar select { min-height:31px; padding-top:5px; padding-bottom:5px; font-size:12px; }
.search svg { color:#5c7778; width:17px; height:17px; }
.search input:focus-visible { outline:none; }
.tablewrap { max-width:100%; }
th { background:#f0f4f4; color:#4c656d; font-size:10.5px; letter-spacing:.055em; }
td { color:#233d44; line-height:1.45; }
td,th { padding:12px; border-top-color:#e2e9e8; }
td:first-child,th:first-child { padding-left:20px; }
td:last-child,th:last-child { padding-right:20px; }
td .quiet { min-height:28px; padding:4px 10px; color:#226456; }
td .meta { font-size:11.5px; }
.avatar { border-radius:9px; width:34px; height:36px; }
.pill { font-size:11px; }
.panelbottom { font-variant-numeric:tabular-nums; }
.hint { font-size:12px; }
.empty { padding:31px 18px; }
.empty h3 { color:#344f52; }
.info-card { display:flex; flex-direction:column; align-items:flex-start; }
.info-card > .ico { padding:9px; background:#e9f3ee; border-radius:9px; }
.info-card small { margin-top:auto; }
.roster-filters label { display:grid; gap:5px; font-size:12px; font-weight:600; color:var(--sub); }
.duty-line { padding:8px 0; }
.grid { gap:16px; }
.grid label,.field { color:#435d64; font-size:13px; }
.grid :is(input,textarea,select) { font-weight:400; }
input[type=checkbox] { accent-color:var(--teal); }
dialog { border-radius:14px; max-height:90dvh; box-shadow:0 18px 72px #0b292e45; }
dialog .dlghead,.attachment-head { background:#fff; }
dialog .dlghead { position:sticky; top:0; z-index:2; }
dialog .formfoot { position:sticky; bottom:0; z-index:1; }
dialog .dlgcontent { padding-top:20px; padding-bottom:22px; }
dialog::backdrop { background:rgb(13 35 43 / 58%); }

/* Sign in */
.auth-screen { padding:clamp(16px,4vw,60px); background:#eaf0ee; }
.auth-layout {
  display:grid; grid-template-columns:1.04fr 1fr; width:min(100%,960px); min-height:484px;
  border:1px solid #cad8d3; border-radius:18px; overflow:hidden; background:white; box-shadow:0 20px 65px #213d3919;
}
.auth-scene {
  position:relative; padding:30px; background:linear-gradient(180deg,rgb(6 37 40 / 68%),transparent 37%,rgb(6 37 40 / 22%)),
    url("/security-lobby.jpg") 76% center / cover;
}
.auth-card { align-self:center; width:100%; padding:clamp(28px,3.5vw,52px); border:0; border-radius:0; box-shadow:none; }
.auth-card h1 { font-size:clamp(25px,2.6vw,36px); line-height:1.18; margin:0 0 8px; color:var(--ink); }
.auth-card label,.login-password label { color:var(--ink); font-size:13px; }
.auth-card form { gap:16px; }
.auth-card input,.auth-card #login-submit { min-height:42px; }
.auth-brand { display:none; }
.login-version { font-size:11px; margin-top:21px; font-weight:500; }
.errors:empty { display:none; }

@media(max-width:1120px) {
  .shell { grid-template-columns:215px minmax(0,1fr); }
  aside { padding-left:10px; padding-right:10px; }
  .hero-copy { width:60%; }
  .metrics { gap:8px; }
  .metric { padding:12px; }
  .metric small { font-size:11.5px; }
}
@media(max-width:780px) {
  .shell { display:block; }
  .workspace>header { position:sticky; top:0; z-index:4; height:55px; min-height:55px; padding:0 12px; flex-wrap:nowrap; }
  .mobile { display:inline-flex; }
  .breadcrumb span,.breadcrumb i,.refresh span { display:none; }
  .breadcrumb strong { font-size:12px; }
  .top-actions { gap:5px; }
  header .mode { font-size:11px; }
  aside { display:none; }
  .navopen aside { position:fixed; display:flex; z-index:5; inset:55px auto 0 0; height:calc(100dvh - 55px); width:min(285px,85vw); padding:15px; }
  .navopen .menu-scrim { display:block; position:fixed; z-index:4; inset:55px 0 0; background:#102b3266; width:100%; }
  body.navopen { overflow:hidden; }
  .brand { padding-bottom:12px; }
  .navtitle { margin-top:15px; }
  main { padding:15px 12px 32px; }
  .hero { min-height:170px; padding:22px; }
  .hero h1 { font-size:29px; }
  .hero-copy { width:63%; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:16px; }
  .metric { min-height:81px; }
  .metric strong { font-size:25px; }
  .panelhead { padding:16px 14px 9px; }
  .bar,#listarea>.bar { padding-left:14px; padding-right:14px; }
}
@media(max-width:620px) {
  .auth-layout { grid-template-columns:1fr; width:min(100%,430px); min-height:0; }
  .auth-scene { height:126px; padding:20px; background-position:75% 36%; }
  .auth-card { padding:25px; }
  .scene-brand { gap:7px; }
  .scene-brand .brand-emblem { width:30px; height:32px; }
}
@media(max-width:480px) {
  .hero { min-height:166px; padding:18px; }
  .hero-copy { width:74%; }
  .hero h1 { font-size:26px; }
  .hero p { font-size:12px; }
  .hero .hero-date { font-size:10.5px; margin-bottom:9px; }
  .hero-photo { left:45%; background-position:0 0,76% 40%; }
  .panelhead,.formfoot { gap:8px; }
  .panelhead h2 { font-size:18px; }
  .panelhead .actions { width:auto; }
  .bar .search { flex-basis:100%; }
  .grid { gap:12px; }
  .bar select { max-width:100%; }
  dialog { max-height:94dvh; }
  .auth-screen { padding:12px; }
}
@media(max-height:510px) {
  .navopen aside { overflow-y:auto; }
  .navopen #nav { flex:1 0 auto; }
  dialog .dlghead,dialog .formfoot { position:static; }
}
}