:root{
  --ink:#101B2D; --ink-soft:#5B6472; --paper:#F7F3EA; --paper-2:#EFE9D9; --paper-3:#E4DCC5;
  --brass:#B8842E; --brass-dark:#8E6520; --teal:#1E6B67; --teal-dark:#154E4B;
  --line:#D9D0B8; --danger:#A63A2E; --warn:#8A6D1F; --success:#2F6B4F; --white:#FFFFFF;
  --shadow: 0 1px 2px rgba(16,27,45,.06), 0 6px 20px rgba(16,27,45,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; line-height:1.45; min-height:100vh;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:12.5px;}

#appwrap{min-height:100vh; display:flex; flex-direction:column;}

/* ---------- top bar with inline nav ---------- */
.topbar{
  background:var(--ink); color:var(--paper); display:flex; align-items:center; gap:22px;
  padding:0 18px; border-bottom:3px solid var(--brass); flex-wrap:wrap; min-height:52px;
}
.brandmark{display:flex; align-items:center; gap:9px; padding:7px 0;}
.brandmark .seal{width:28px;height:28px;border-radius:50%;border:2px dashed var(--brass);
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:10px;color:var(--brass);transform:rotate(-6deg);flex-shrink:0;}
.brandmark .titles h1{font-size:15px;color:var(--paper);line-height:1.05;}
.brandmark .titles .sub{font-size:9px;color:#9AA6B8;letter-spacing:.13em;text-transform:uppercase;margin-top:1px;}

.topnav{display:flex; gap:2px; flex:1; flex-wrap:wrap;}
.topnav .navitem{
  padding:16px 14px; font-size:13px; font-weight:600; color:#AEB8C8;
  border-bottom:3px solid transparent; margin-bottom:-3px; white-space:nowrap;
}
.topnav .navitem:hover{color:var(--paper); background:rgba(255,255,255,.05);}
.topnav .navitem.active{color:var(--paper); border-bottom-color:var(--brass);}

.who{display:flex; align-items:center; gap:9px; font-size:12px; color:#C9D0DC; padding:7px 0;}
.who .badge{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:3px 9px; border-radius:20px; font-size:10px; letter-spacing:.04em; text-transform:uppercase;}
.who .badge.dept{background:var(--brass); border-color:var(--brass); color:#fff; font-weight:700;}
.who .whoname{color:#C9D0DC; text-decoration:underline; text-underline-offset:3px;}
.who .signout{border:1px solid rgba(255,255,255,.3); color:var(--paper); padding:5px 11px; border-radius:6px;}
.who .signout:hover{background:rgba(255,255,255,.1);}

/* full width — no side rail */
.main{flex:1; min-width:0; padding:16px 18px 50px; width:100%;}

.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap;}
.pagehead h2{font-size:19px;}
.pagehead .eyebrow{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-dark); font-weight:700; margin-bottom:3px;}
.pagehead .actions{display:flex; gap:7px; flex-wrap:wrap; align-items:center;}

/* ---------- buttons ---------- */
.btn{display:inline-block; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:8px 14px; border-radius:6px; font-size:12px; font-weight:600;}
.btn:hover{background:#1c2c47;}
.btn.secondary{background:transparent; color:var(--ink); border-color:var(--line);}
.btn.secondary:hover{border-color:var(--ink);}
.btn.brass{background:var(--brass); border-color:var(--brass); color:#fff;}
.btn.brass:hover{background:var(--brass-dark);}
.btn.teal{background:var(--teal); border-color:var(--teal); color:#fff;}
.btn.teal:hover{background:var(--teal-dark);}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn.warn{background:var(--warn); border-color:var(--warn); color:#fff;}
.btn.small{padding:4px 9px; font-size:11px;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

/* ---------- tables ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); padding:16px;}
.ledger{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.ledger thead th{background:var(--ink); color:var(--paper); text-align:left; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:8px 9px; font-weight:600; white-space:nowrap;}
.ledger tbody td{padding:8px 9px; border-top:1px solid var(--line); font-size:12px; vertical-align:top;}
.ledger tbody tr:nth-child(even){background:#FBF9F3;}
.ledger tbody tr.clickable:hover{background:var(--paper-3); cursor:pointer;}
.reftag{font-family:'IBM Plex Mono'; font-weight:600; color:var(--teal-dark); font-size:11.5px; white-space:nowrap;}
.tba{color:#9AA0A8; font-style:italic;}

.stamp{display:inline-block; padding:2px 9px; border-radius:20px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:1.5px dashed currentColor; white-space:nowrap;}
.stamp.open{color:var(--teal-dark); background:rgba(30,107,103,.08);}
.stamp.completed{color:var(--danger); background:rgba(166,58,46,.08);}
.stamp.cancelled{color:#6B6B6B; background:rgba(0,0,0,.05);}

.empty{text-align:center; padding:40px 20px; color:var(--ink-soft); border:1px dashed var(--line); border-radius:9px; background:var(--paper-2);}
.empty .big{font-family:'Space Grotesk'; font-size:14px; color:var(--ink); margin-bottom:5px;}

/* ---------- compact 12-column form grid ---------- */
.fgrid{display:grid; grid-template-columns:repeat(12, 1fr); gap:9px 10px;}
.fgrid .f{display:flex; flex-direction:column; min-width:0;}
.fgrid .f > label{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fgrid input, .fgrid select, .fgrid textarea{
  width:100%; padding:5px 7px; border:1px solid var(--line); border-radius:5px; background:var(--white); color:var(--ink);
  height:28px;
}
.fgrid textarea{height:auto; min-height:44px; resize:vertical;}
.fgrid input:focus, .fgrid select:focus, .fgrid textarea:focus{outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass);}
.fgrid input.err{border-color:var(--danger); background:rgba(166,58,46,.05);}
.fgrid input.ok{border-color:var(--success);}
/* width spans */
.w1{grid-column:span 1;} .w2{grid-column:span 2;} .w3{grid-column:span 3;}
.w4{grid-column:span 4;} .w5{grid-column:span 5;} .w6{grid-column:span 6;}
.w12{grid-column:span 12;}
/* narrow inputs stay narrow even in a wider cell */
input.date{max-width:110px;} input.qtybox{max-width:52px; text-align:center;}
input.cntr{max-width:135px; text-transform:uppercase; font-family:'IBM Plex Mono'; letter-spacing:.02em;}

fieldset.block{border:1px solid var(--line); border-radius:8px; padding:12px 14px 14px; margin:0 0 12px; background:var(--white);}
fieldset.block > legend{font-family:'Space Grotesk'; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-dark); font-weight:700; padding:0 7px;}
.blockhint{font-size:10.5px; color:var(--ink-soft); margin:-2px 0 9px;}

/* repeating line rows (shippers / containers) */
.linerow{display:grid; grid-template-columns:repeat(12,1fr); gap:7px 9px; padding:8px; border:1px solid var(--paper-3); border-radius:6px; margin-bottom:7px; background:#FBF9F3; align-items:end;}
.linerow .lineno{grid-column:span 12; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brass-dark); margin-bottom:-2px;}
.cntrmsg{font-size:10px; margin-top:2px; min-height:12px;}
.cntrmsg.bad{color:var(--danger);}
.cntrmsg.good{color:var(--success);}

.totalbox{display:inline-flex; align-items:baseline; gap:7px; background:var(--paper-2); border:1px dashed var(--line); padding:5px 11px; border-radius:6px; font-size:12px;}
.totalbox b{font-family:'Space Grotesk'; font-size:15px;}

/* ---------- detail view ---------- */
.dgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:9px 14px;}
.dgrid .d{min-width:0;}
.dgrid .dk{font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700;}
.dgrid .dv{font-size:12.5px; margin-top:1px; word-break:break-word;}
.section-title{font-family:'Space Grotesk'; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brass-dark); margin:16px 0 8px; padding-top:12px; border-top:1px solid var(--line); font-weight:700;}
.changelog{display:flex; flex-direction:column;}
.cl-entry{display:flex; gap:10px; padding:7px 0; border-bottom:1px dotted var(--line); font-size:11.5px;}
.cl-entry:last-child{border-bottom:none;}
.cl-entry .cl-time{width:118px; flex-shrink:0; color:var(--ink-soft); font-family:'IBM Plex Mono'; font-size:10px;}

.formfoot{display:flex; justify-content:flex-end; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); align-items:center;}
.formfoot .spacer{flex:1;}

.toast{padding:9px 14px; border-radius:7px; font-size:12.5px; margin-bottom:12px; border-left:4px solid var(--brass); background:var(--paper-2);}
.toast.err{border-left-color:var(--danger); background:rgba(166,58,46,.08); color:var(--danger);}
.toast ul{margin:5px 0 0; padding-left:18px;}

.note{font-size:11px; color:var(--ink-soft); background:var(--paper-2); border:1px dashed var(--line); padding:7px 10px; border-radius:6px; margin-bottom:12px;}
.helptext{font-size:10.5px;color:var(--ink-soft);}

.tabs{display:flex; margin-bottom:12px; border-bottom:1px solid var(--line);}
.tabs a{padding:8px 3px; margin-right:16px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs a.active{color:var(--ink); border-bottom-color:var(--brass);}

.searchbar{display:flex; gap:7px; margin-bottom:12px; max-width:520px;}
.searchbar input{flex:1; padding:7px 10px; border:1px solid var(--line); border-radius:6px;}
.pager{display:flex; align-items:center; justify-content:space-between; margin-top:11px; font-size:12px; color:var(--ink-soft);}
.pagerbtns{display:flex; gap:8px; align-items:center;}

.userrow{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:var(--white); margin-bottom:7px;}
.userrow .u-name{font-weight:600; font-size:12.5px;}
.userrow .u-meta{font-size:11px; color:var(--ink-soft); margin-top:3px;}
.pill{display:inline-block; padding:2px 7px; border-radius:12px; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-right:5px;}
.pill.super_admin{background:#2A1E3D;color:#D9C9F5;} .pill.admin{background:#1E3D2A;color:#C9F5D9;}
.pill.user{background:#1E2E3D;color:#C9E0F5;} .pill.customer{background:#3D2E1E;color:#F5DFC9;}
.pill.imports{background:var(--teal);color:#fff;} .pill.exports{background:var(--brass);color:#fff;}

/* ---------- login ---------- */
.loginwrap{flex:1; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 15% 20%, rgba(184,132,46,.10), transparent 40%),
             radial-gradient(circle at 85% 80%, rgba(30,107,103,.12), transparent 45%), var(--ink);
  padding:40px 20px; min-height:100vh;}
.loginpanel{width:100%; max-width:880px; background:var(--paper); border-radius:13px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4); display:grid; grid-template-columns:1.05fr 1fr;}
.loginleft{background:var(--ink); color:var(--paper); padding:40px 36px; display:flex; flex-direction:column; justify-content:space-between;}
.loginleft .sealbig{width:72px;height:72px;border-radius:50%;border:2.5px dashed var(--brass);display:flex;align-items:center;justify-content:center;
  transform:rotate(-8deg);font-family:'Space Grotesk';font-weight:700;color:var(--brass);font-size:20px;margin-bottom:20px;}
.loginleft h1{font-size:24px;line-height:1.15;}
.loginleft p{color:#AEB8C8;font-size:12.5px;margin-top:11px;max-width:34ch;}
.loginright{padding:40px 36px; display:flex; flex-direction:column; justify-content:center;}
.loginright .eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dark);font-weight:700;margin-bottom:5px;}
.loginright h2{font-size:19px;margin-bottom:18px;}
.loginright .field{margin-bottom:13px;}
.loginright .field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:4px;font-weight:700;}
.loginright .field input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--white);}
.loginerr{background:rgba(166,58,46,.1);border:1px solid var(--danger);color:var(--danger);padding:8px 11px;border-radius:6px;font-size:12px;margin-bottom:12px;}

@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{position:absolute; left:0; top:0; width:100%;}
}

@media (max-width: 1100px){
  .w1,.w2{grid-column:span 3;} .w3,.w4{grid-column:span 4;} .w5,.w6{grid-column:span 6;}
}
@media (max-width: 720px){
  .topbar{align-items:flex-start;}
  .topnav{order:3; width:100%; overflow-x:auto;}
  .topnav .navitem{padding:10px 11px;}
  .fgrid .f, .linerow > *{grid-column:span 12 !important;}
  .loginpanel{grid-template-columns:1fr;} .loginleft{display:none;}
}

/* ---------- password strength meter & rules ---------- */
.pwrules{font-size:10.5px; color:var(--ink-soft); background:var(--paper-2); border:1px dashed var(--line);
  padding:6px 9px; border-radius:6px; margin:-4px 0 12px; line-height:1.35;}
.pwmeter{margin:5px 0 2px;}
.pwbar{height:4px; background:var(--paper-3); border-radius:3px; overflow:hidden;}
.pwbar span{display:block; height:100%; width:0; border-radius:3px; transition:width .15s ease, background .15s ease;}
.pwbar span.weak{background:var(--danger);}
.pwbar span.ok{background:var(--brass);}
.pwbar span.strong{background:var(--success);}
.pwmsg{font-size:10.5px; margin-top:3px; min-height:13px;}
.pwmsg.bad{color:var(--danger);}
.pwmsg.ok{color:var(--brass-dark);}
.pwmsg.good{color:var(--success);}
.loginright .g-recaptcha{transform:scale(0.92); transform-origin:0 0; margin-bottom:2px;}

/* ---------- notification bell ---------- */
.bell{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; color:#C9D0DC; border:1px solid rgba(255,255,255,.18);}
.bell:hover{background:rgba(255,255,255,.1); color:#fff;}
.bell.has{color:var(--brass); border-color:var(--brass);}
.bellcount{position:absolute; top:-5px; right:-6px; background:var(--danger); color:#fff;
  font-size:9px; font-weight:700; line-height:1; padding:3px 5px; border-radius:9px; min-width:15px; text-align:center;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.newdot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--danger); margin-right:6px;}

/* ---------- dashboard ---------- */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:6px;}
.statcard{background:var(--white); border:1px solid var(--line); border-radius:9px; padding:14px 16px; box-shadow:var(--shadow);}
.statcard.wide{grid-column:span 2;}
.statlabel{font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--brass-dark); font-weight:700;}
.statbig{font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; line-height:1.05; margin-top:4px;}
.statsub{font-size:11.5px; color:var(--ink-soft);}
.statrow{display:flex; gap:12px; margin-top:9px; padding-top:8px; border-top:1px dotted var(--line); font-size:11.5px; color:var(--ink-soft); flex-wrap:wrap;}
.statfoot{margin-top:7px; font-size:11px; color:var(--ink-soft);}
.statlinks{margin-top:9px; display:flex; gap:10px;}
.statlinks a{font-size:11.5px; font-weight:600; color:var(--teal-dark); text-decoration:underline; text-underline-offset:2px;}

/* ---------- report column picker ---------- */
.colgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:5px;}
.colpick{display:flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid var(--line);
  border-radius:6px; background:#FBF9F3; font-size:12px; cursor:pointer; user-select:none;}
.colpick:hover{border-color:var(--brass);}
.colpick.on{background:rgba(184,132,46,.12); border-color:var(--brass); font-weight:600;}
.colpick input{margin:0; flex-shrink:0;}
.colpick span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}