/* ==========================================================================
   PB2313 Networking Convention LLC — Crew Time & Scheduling System
   Public-sector web conventions (utility banner, heavy rules, forms that look
   like forms) rendered in the PB2313 identity: navy hexagon, cyan trace.
   No decoration that isn't doing a job.
   ========================================================================== */

:root{
  --blue-90:#152f4c;   /* PB2313 navy: headers, footers */
  --blue-70:#1d4372;   /* nav, headings */
  --blue-60:#0f6098;   /* primary action */
  --blue-50:#1a7cba;
  --blue-10:#d5e9f5;
  --blue-05:#eef6fb;

  --ink:#1b1b1b;
  --ink-70:#3d4551;
  --ink-50:#565c65;
  --ink-30:#a9aeb1;
  --line:#dfe1e2;
  --line-strong:#adadad;
  --canvas:#f0f0f0;
  --paper:#ffffff;

  --cyan:#29abe2;      /* PB2313 trace: the stripe under the masthead */
  --focus:#ffbe2e;     /* focus ring, kept high-contrast on every surface */
  --green:#00a91c;
  --green-bg:#ecf3ec;
  --amber:#ffbe2e;
  --amber-bg:#faf3d1;
  --red:#b50909;
  --red-bg:#f4e3db;

  --sans:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
}
a{color:var(--blue-60)}
a:hover{color:var(--blue-70)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--focus);outline-offset:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- utility banner ------------------------------------------------------ */
.gov-banner{background:#f0f0f0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.4}
.gov-banner .inner{max-width:1100px;margin:0 auto;padding:7px 16px;display:flex;gap:9px;align-items:flex-start;color:var(--ink-70)}
.gov-banner svg{flex:none;margin-top:1px}
.gov-banner strong{font-weight:700}

/* --- masthead ------------------------------------------------------------ */
.masthead{background:var(--blue-90);color:#fff;border-bottom:5px solid var(--cyan)}
.masthead .inner{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:14px}
.seal{flex:none}
.mast-titles{line-height:1.2;min-width:0}
.mast-titles .org{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#c7d6e6}
.mast-titles .system{font-size:19px;font-weight:700;letter-spacing:-.01em}
.mast-titles .unit{font-size:12.5px;color:#c7d6e6}
.mast-right{margin-left:auto;text-align:right;font-size:12px;color:#c7d6e6;line-height:1.45}
.mast-right .who{color:#fff;font-weight:700;font-size:13.5px}
.mast-right form{display:inline}
.linkbtn{background:none;border:0;color:#7fd1ee;text-decoration:underline;padding:0;font-size:12px}
.linkbtn:hover{color:#fff}

/* --- primary nav --------------------------------------------------------- */
.gov-nav{background:var(--blue-70)}
.gov-nav .inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap}
.gov-nav a{
  color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;
  padding:12px 16px;border-bottom:4px solid transparent;
}
.gov-nav a:hover{background:var(--blue-60);color:#fff}
.gov-nav a[aria-current="page"]{background:var(--blue-60);border-bottom-color:var(--cyan)}
.gov-nav .count{
  display:inline-block;margin-left:7px;background:var(--cyan);color:#08243c;
  border-radius:2px;font-family:var(--mono);font-size:11px;padding:1px 5px;vertical-align:1px;
}

/* --- layout -------------------------------------------------------------- */
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 56px}
.wrap.narrow{max-width:640px}
.crumbs{font-size:13px;color:var(--ink-50);margin:0 0 14px}
.crumbs a{color:var(--blue-60)}
h1.page{font-size:26px;line-height:1.2;margin:0 0 4px;font-weight:700;color:var(--blue-90)}
.page-sub{margin:0 0 20px;color:var(--ink-70);font-size:14.5px}
h2.sec{font-size:18px;margin:26px 0 10px;color:var(--blue-90);font-weight:700}
h2.sec:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* --- panels (the "form" look) ------------------------------------------- */
.panel{background:var(--paper);border:1px solid var(--line-strong);margin-bottom:16px}
.panel > h3,.panel-head{
  margin:0;background:var(--blue-05);border-bottom:1px solid var(--line-strong);
  padding:9px 14px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-90);
  display:flex;align-items:center;gap:10px;
}
.panel-head .right{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink-50);font-family:var(--mono)}
.panel-body{padding:14px}
.panel-foot{border-top:1px solid var(--line);padding:10px 14px;background:#fafafa;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form-no{font-family:var(--mono);font-size:11px;color:var(--ink-50)}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--blue-60);color:#fff;border:2px solid var(--blue-60);
  padding:9px 18px;font-size:15px;font-weight:700;border-radius:2px;text-decoration:none;
}
.btn:hover{background:var(--blue-70);border-color:var(--blue-70);color:#fff}
.btn:disabled{background:#c9c9c9;border-color:#c9c9c9;color:#6d6d6d;cursor:not-allowed}
.btn.outline{background:transparent;color:var(--blue-60)}
.btn.outline:hover{background:var(--blue-05);color:var(--blue-70)}
.btn.danger{background:var(--red);border-color:var(--red)}
.btn.danger:hover{background:#8b0707;border-color:#8b0707}
.btn.sm{padding:5px 11px;font-size:13px;border-width:1px}
.btn.block{display:block;width:100%;text-align:center}

/* --- form controls ------------------------------------------------------- */
label.lbl{display:block;font-weight:700;font-size:14.5px;margin:14px 0 4px}
label.lbl .req{color:var(--red)}
.hint{font-size:13px;color:var(--ink-50);margin:0 0 5px}
input[type=text],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;padding:9px 10px;font:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--ink-50);border-radius:0;background:#fff;
}
input:focus,select:focus,textarea:focus{outline:4px solid var(--focus);outline-offset:0;border-color:var(--ink)}
textarea{resize:vertical}
.field-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field-row > div{flex:1 1 130px}

/* --- alerts -------------------------------------------------------------- */
.alert{border-left:8px solid var(--blue-60);background:var(--blue-05);padding:12px 14px;margin:0 0 16px;font-size:14.5px}
.alert h4{margin:0 0 3px;font-size:15px}
.alert.error{border-color:var(--red);background:var(--red-bg)}
.alert.warn{border-color:var(--amber);background:var(--amber-bg)}
.alert.ok{border-color:var(--green);background:var(--green-bg)}

/* --- tags ---------------------------------------------------------------- */
.tag{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border:1px solid var(--ink-30);color:var(--ink-70);background:#fff;
}
.tag.ok{border-color:var(--green);color:#0c5c1a;background:var(--green-bg)}
.tag.pend{border-color:#a67c00;color:#7a5b00;background:var(--amber-bg)}
.tag.no{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.tag.info{border-color:var(--blue-60);color:var(--blue-70);background:var(--blue-10)}

/* --- tables -------------------------------------------------------------- */
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data caption{text-align:left;font-size:13px;color:var(--ink-50);padding:0 0 8px}
table.data th{
  text-align:left;background:var(--blue-05);color:var(--blue-90);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--line-strong);
}
table.data td{padding:8px 10px;border:1px solid var(--line);vertical-align:top}
table.data tr:nth-child(even) td{background:#fafbfc}
table.data td.num,table.data th.num{text-align:right;font-family:var(--mono)}
.table-scroll{overflow-x:auto}

/* --- time clock ---------------------------------------------------------- */
.clock-box{text-align:center;padding:22px 14px}
.clock-box .assignment{font-size:17px;font-weight:700;color:var(--blue-90)}
.clock-box .window{font-family:var(--mono);font-size:13.5px;color:var(--ink-50);margin-top:2px}
.elapsed{font-family:var(--mono);font-size:46px;letter-spacing:-.02em;margin:16px 0 6px;color:var(--blue-90)}
.status-line{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-70);margin-bottom:16px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink-30);flex:none}
.dot.on{background:var(--green)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);background:var(--paper)}
.stat-row .cell{padding:12px 14px;border-right:1px solid var(--line)}
.stat-row .cell:last-child{border-right:0}
.stat-row b{display:block;font-family:var(--mono);font-size:23px;color:var(--blue-90);line-height:1.2}
.stat-row span{display:block;font-size:12px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
@media(max-width:620px){.stat-row{grid-template-columns:1fr;}.stat-row .cell{border-right:0;border-bottom:1px solid var(--line)}}

/* --- schedule gantt ------------------------------------------------------ */
.day{margin-bottom:14px}
.day.today{border-color:var(--blue-60);box-shadow:inset 0 0 0 2px var(--blue-60)}
.day .panel-head .badge-today{background:var(--blue-60);color:#fff;font-family:var(--mono);font-size:11px;padding:2px 7px}
.gantt{padding:12px 14px}
.grow{display:flex;align-items:center;gap:10px;padding:5px 0}
.grow .nm{flex:0 0 92px;font-size:13px;font-weight:600;color:var(--ink-70);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow.me .nm{color:var(--blue-70)}
.grow .track{flex:1;position:relative;height:22px;min-width:120px;border-bottom:1px solid var(--line)}
.grow .hour{position:absolute;top:0;bottom:0;width:1px;background:#eceef0}
.bar{position:absolute;top:3px;height:16px;background:var(--blue-60);border:1px solid var(--blue-70)}
.bar.u-okafor{background:#2e7d5b;border-color:#1f5c42}
.bar.u-raman{background:#7b4bb5;border-color:#5c3789}
.bar.offered{background:repeating-linear-gradient(45deg,#faf3d1,#faf3d1 6px,#f2e3a8 6px,#f2e3a8 12px);border:1px dashed #a67c00}
.grow .hrs{flex:0 0 104px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink-70)}
.grow .hrs.off{color:var(--ink-30)}
.axis{display:flex;align-items:center;gap:10px;padding-bottom:2px}
.axis .nm{flex:0 0 92px}
.axis .hrs{flex:0 0 104px}
.axis .track{flex:1;position:relative;height:14px;min-width:120px}
.axis .track span{position:absolute;top:0;font-family:var(--mono);font-size:10px;color:var(--ink-50);transform:translateX(-50%)}
@media(max-width:600px){
  .grow .nm,.axis .nm{flex-basis:64px;font-size:12px}
  .grow .hrs,.axis .hrs{flex-basis:88px;font-size:11px}
}

/* --- record list (trades, audit) ---------------------------------------- */
.record{border-top:1px solid var(--line);padding:12px 14px}
.record:first-child{border-top:0}
.record .rh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.record .rh b{font-size:15px;color:var(--blue-90)}
.record .rh .when{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink-70)}
.record .meta{font-size:13.5px;color:var(--ink-50);margin:4px 0 0}
.record .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.empty{padding:26px 16px;text-align:center;color:var(--ink-50)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}

/* --- login --------------------------------------------------------------- */
.login-wrap{max-width:460px;margin:0 auto;padding:26px 16px 60px}
.login-panel{background:var(--paper);border:1px solid var(--line-strong);border-top:8px solid var(--blue-90);padding:22px}
.login-panel h1{font-size:22px;margin:0 0 4px;color:var(--blue-90)}
.login-panel .sub{font-size:14px;color:var(--ink-50);margin:0 0 8px}
.notice-box{border:1px solid var(--line-strong);background:#fbfbfb;padding:12px 14px;font-size:12.5px;color:var(--ink-70);line-height:1.45;margin-top:22px}
.notice-box b{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:var(--blue-90);margin-bottom:5px}
.cred-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:8px}
.cred-table td{border:1px solid var(--line);padding:4px 7px}

/* --- modal --------------------------------------------------------------- */
dialog{border:1px solid var(--line-strong);border-top:8px solid var(--blue-90);padding:0;max-width:460px;width:calc(100% - 32px);color:var(--ink)}
dialog::backdrop{background:rgba(27,27,27,.6)}
.dlg{padding:18px}
.dlg h3{margin:0 0 3px;font-size:18px;color:var(--blue-90)}
.dlg .sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-50);margin:0 0 10px}
.dlg .row{display:flex;gap:10px;margin-top:16px}
.dlg .row .btn{flex:1}

/* --- footer -------------------------------------------------------------- */
.gov-foot{background:var(--blue-90);color:#c7d6e6;margin-top:40px}
.gov-foot .inner{max-width:1100px;margin:0 auto;padding:22px 16px;font-size:13px;line-height:1.6}
.gov-foot .sysline{color:#fff;font-weight:700;font-size:14px}
.gov-foot a{color:#7fd1ee}
.gov-foot .fine{margin-top:10px;font-size:11.5px;color:#8fa6bd;font-family:var(--mono)}

/* --- toast --------------------------------------------------------------- */
#toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);opacity:0;z-index:60;
  background:var(--blue-90);color:#fff;padding:12px 16px;font-size:14px;border-left:8px solid var(--cyan);
  max-width:min(520px,calc(100% - 28px));pointer-events:none;transition:opacity .18s,transform .18s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{border-left-color:#ff6b6b}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}