.app-layout{min-height:100vh;display:grid;grid-template-columns:242px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:30px 20px 22px;border-right:1px solid #273246;background:#0b111a;display:flex;flex-direction:column}
.side-nav{display:grid;gap:8px;margin-top:44px}
.side-nav a{display:flex;gap:13px;align-items:center;padding:12px;border-radius:12px;color:#8b96aa;text-decoration:none;transition:.16s ease}
.side-nav a>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#151e2b;color:#aab4c5}
.side-nav a div{font-size:14px;font-weight:600}
.side-nav a small{display:block;margin-top:1px;color:#596478;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.side-nav a:hover,.side-nav a.active{color:#eef2f8;background:#192332}
.side-nav a.active>span{background:#9bf26d;color:#0b130d}
.side-nav a.active small{color:#8490a5}
.side-logout{margin-top:auto;text-align:center;text-decoration:none}
.page-content{min-width:0}
.page-content>.shell{padding-top:54px}
.shell.wide{max-width:1480px}
.output-panel{overflow:visible}
.output-panel .table-wrap{border-radius:0 0 18px 18px}
.output-table{min-width:1100px}
.output-table th,.output-table td{min-width:132px;vertical-align:middle}
.output-table th:first-child,.output-table td:first-child{min-width:145px}
.output-table th.today{color:#9bf26d}
.output-table th b{display:block;font-size:10px;letter-spacing:.08em;margin-top:2px}
.output-table td strong.segment-num{display:block;font-size:17px;color:#eef2f8}
.output-table td small{display:block;color:#778297;font-size:11px;margin-top:3px;white-space:nowrap}
.output-table .no-data{color:#566174}
.sticky-col{position:sticky;left:0;z-index:2;background:#111823!important}
.output-table thead .sticky-col{z-index:3}
.output-table tfoot td{background:#151e2b;font-weight:600;border-top:1px solid #344158}
.mini-off{display:inline-block;margin-left:7px;padding:2px 5px;border-radius:4px;background:#313846;color:#9ba5b5;font-size:10px}
.primary:disabled{opacity:.65;cursor:wait}
.stat small{font-size:14px;color:#7f899c}
.actual-user{color:#9bf26d;font-weight:700;cursor:text;border-radius:4px;padding:1px 4px;transition:background .15s ease,box-shadow .15s ease}.actual-user:hover{background:#1d3323}.actual-user.editing{outline:0;background:transparent;box-shadow:0 2px 0 #9bf26d;color:#c4ffad;min-width:42px;display:inline-block}.output-table td.no-data .actual-user{display:inline-block;color:#9bf26d}
.past-user{color:#eef2f8;cursor:text;border-radius:4px;padding:1px 4px}.past-user:hover{background:#1b2534}.past-user.editing{outline:0;background:transparent;box-shadow:0 2px 0 #eef2f8;min-width:42px;display:inline-block}
.output-table td.no-data .actual-user.no-user{color:#ff6262}
.hero-actions{display:flex;align-items:center;gap:10px}.status.unknown{color:#9ba5b5}.status.unknown:before{background:#6a7280}
.clock-button{border:1px solid #396b42;background:#162a1b;color:#9bf26d;border-radius:12px;padding:12px 16px;font-weight:700}.clock-button:hover{background:#1d3824}.clock-button:disabled{opacity:.6;cursor:wait}

@media(max-width:800px){
  .app-layout{display:block}
  .sidebar{position:relative;width:100%;height:auto;padding:16px;display:flex;flex-direction:row;align-items:center;gap:14px;border-right:0;border-bottom:1px solid #273246}
  .sidebar .brand strong{display:none}
  .side-nav{display:flex;margin:0;gap:4px;overflow:auto}
  .side-nav a{padding:8px 10px;white-space:nowrap}
  .side-nav a>span,.side-nav a small{display:none}
  .side-logout{display:none}
  .page-content>.shell{padding-top:28px}
  .output-panel{margin-left:-16px;margin-right:-16px;border-radius:0}
  .panel-head{align-items:flex-start;gap:10px;flex-direction:column}
}