/* ============================================================
   Well Faster BOL — application chrome (modern sidebar UI)
   NOTE: the Bill of Lading *document* styles (.bol-doc / .bd-*)
   further down are unchanged and must stay pixel-faithful.
   ============================================================ */
:root{
  --navy:#1f2d50;
  --navy-2:#27396a;
  --ink:#1b1f29;
  --muted:#6b7280;
  --line:#e4e8f0;
  --bg:#f5f7fb;
  --card:#fff;
  --danger:#b3261e;
  --accent:#3b5bd9;
  --accent-soft:#eef2ff;
  --radius:14px;
  --radius-sm:9px;
  --side-w:250px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 12px 34px rgba(20,30,60,.12);
  --doc-label:#2b4a86;     /* italic blue box labels on the BOL */
  --doc-line:#9aa6bf;      /* blue-grey borders on the BOL */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; font-size:15px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.center{text-align:center}
.strong{font-weight:600}
.small{font-size:13px; margin:0 0 12px}
.inline{display:inline}

/* ---- Sidebar ---- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--side-w);
  background:linear-gradient(180deg,#22315a 0%, #1a2748 100%);
  color:#cdd6ea; display:flex; flex-direction:column; padding:18px 14px; z-index:20;
}
.side-brand{
  display:flex; align-items:center; gap:10px; color:#fff; font-size:18px;
  padding:6px 8px 18px; text-decoration:none;
}
.side-brand:hover{text-decoration:none}
.side-logo{width:34px; height:34px; border-radius:9px; background:#fff; padding:2px}
.side-brand strong{color:#fff}
.side-nav{display:flex; flex-direction:column; gap:4px}
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:#c3cde4; font-weight:500; font-size:14.5px; text-decoration:none; transition:background .12s,color .12s;
}
.side-nav a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.side-nav a.active{background:rgba(255,255,255,.14); color:#fff}
.side-nav svg{width:18px; height:18px; flex:none; opacity:.9}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.10)}
.side-user{display:flex; align-items:center; gap:10px; padding:4px 6px 12px}
.side-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:none;
}
.side-userinfo{display:flex; flex-direction:column; min-width:0}
.side-name{color:#fff; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-email{color:#8f9cbd; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-signout{
  display:flex; align-items:center; gap:9px; width:100%; background:transparent; border:0;
  color:#aab6d6; font:inherit; font-size:14px; cursor:pointer; padding:9px 12px; border-radius:10px; text-align:left;
}
.side-signout:hover{background:rgba(255,255,255,.07); color:#fff}
.side-signout svg{width:17px; height:17px; flex:none}

/* ---- Main area ---- */
.app-main{margin-left:var(--side-w); min-height:100vh}
body.is-guest .app-main{margin-left:0}
.content{max-width:1080px; margin:0 auto; padding:30px 30px 60px}
body.is-guest .content{max-width:none; padding:0}

.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px}
.page-head h1{margin:0; font-size:26px; font-weight:700; letter-spacing:-.01em}
.head-actions{display:flex; gap:8px}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; text-decoration:none;
  border:0; border-radius:var(--radius-sm); padding:10px 17px; font:inherit; font-weight:600; cursor:pointer;
  transition:background .12s,box-shadow .12s,transform .02s; box-shadow:var(--shadow);
}
.btn:hover{background:var(--navy-2); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:7px 13px; font-size:13.5px}
.btn-block{width:100%; justify-content:center; margin-top:10px; padding:11px}
.btn-ghost{background:#fff; color:var(--navy); border:1px solid var(--line); box-shadow:none}
.btn-ghost:hover{background:#f4f6fb}

/* ---- Cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ---- Flash ---- */
.flash{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; border:1px solid transparent}
.flash-success{background:#e8f6ee; color:#1e6b3a; border-color:#c2e6cf}
.flash-error{background:#fdeceb; color:#9b1c16; border-color:#f3c7c4}

/* ---- Auth (guest) ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 500px at 50% -10%, #e9eefb 0%, var(--bg) 60%); padding:24px}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:36px 34px; width:100%; max-width:400px; box-shadow:var(--shadow-lg)}
.auth-logo{width:60px; height:60px; display:block; margin:0 auto 10px; border-radius:14px}
.auth-card h1{margin:.2em 0; text-align:center; font-size:23px}
.auth-card label{display:block; margin:16px 0; font-size:13.5px; font-weight:600; color:#374151}
.auth-card input{width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; font:inherit; font-weight:400; background:#fff}
.auth-card input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* ---- Dashboard table ---- */
.empty{background:#fff; border:1px dashed #c9d0de; border-radius:var(--radius); padding:56px 24px; text-align:center; box-shadow:var(--shadow)}
.empty p{color:var(--muted); margin:0 0 16px}
.grid{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.grid th,.grid td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px}
.grid thead th{background:#f7f9fc; color:#5a647e; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody tr:hover{background:#f8fafd}
.grid td.nowrap,.grid th.nowrap{white-space:nowrap}
.grid td.wrap{white-space:normal; word-break:break-word; min-width:170px; color:#374151}
.actions{white-space:nowrap}
.actions a,.actions .link{margin-right:12px; font-size:13.5px; font-weight:500}
.actions-col{width:1%}
.badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:#eef1f7; color:#46506b}
.badge-admin{background:var(--accent-soft); color:var(--accent)}
.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0}
.link:hover{text-decoration:underline}
.link.danger{color:var(--danger)}
.danger{color:var(--danger)}

/* ---- BOL form ---- */
.bol-form fieldset.card{border:1px solid var(--line); padding:20px 22px; margin-bottom:20px}
.bol-form legend{font-weight:700; color:var(--navy); padding:0 8px; font-size:15px}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.bol-form label{display:flex; flex-direction:column; font-size:13px; font-weight:600; color:#374151}
.bol-form label span{margin-bottom:6px}
.bol-form .field-wide{grid-column:1 / -1}
.bol-form input,.bol-form textarea,.bol-form select,.copy-from select{padding:10px 11px; border:1px solid var(--line);
  border-radius:9px; font:inherit; font-weight:400; resize:vertical; background:#fff}
.bol-form input:focus,.bol-form textarea:focus,.bol-form select:focus,.copy-from select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.bol-form textarea{font-family:Consolas,Menlo,monospace; font-size:13px}
.form-actions{display:flex; gap:10px; margin:8px 0 40px}
@media (max-width:640px){ .field-grid{grid-template-columns:1fr} }

/* Copy-from panel */
.copy-from{padding:18px 22px; margin-bottom:20px}
.copy-from .copy-label{display:flex; flex-direction:column; font-size:13px; font-weight:600; color:#374151; max-width:500px}
.copy-from .copy-label span{margin-bottom:6px}
.copy-from .small{margin:10px 0 0}

/* Container editor (repeatable rows) */
.table-scroll{overflow-x:auto}
.container-editor{width:100%; border-collapse:collapse; margin-bottom:14px}
.container-editor th{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
  color:#5a647e; text-align:left; padding:6px 6px; border-bottom:1px solid var(--line)}
.container-editor td{padding:5px 6px 5px 0; vertical-align:middle}
.container-editor input{width:100%; min-width:95px; padding:9px; border:1px solid var(--line);
  border-radius:8px; font:inherit; font-weight:400}
.container-editor input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.container-editor .ce-actions{width:1%; text-align:center; padding-right:0}
.container-editor .ce-remove{font-size:18px; line-height:1; color:var(--danger); padding:4px 8px}
.container-editor .ce-remove:hover{color:#7d1a15}

/* ---- Document preview frame ---- */
.doc-preview{background:#4c5057; padding:26px; border-radius:var(--radius); overflow:auto;
  display:flex; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* ---- Responsive: sidebar becomes a top bar ---- */
@media (max-width:860px){
  .sidebar{position:static; width:auto; flex-direction:row; align-items:center; flex-wrap:wrap; padding:10px 14px; gap:8px}
  .side-brand{padding:4px 4px}
  .side-nav{flex-direction:row; margin-left:8px}
  .side-foot{margin:0 0 0 auto; padding:0; border:0; display:flex; align-items:center; gap:8px}
  .side-user{display:none}
  .app-main{margin-left:0}
  .content{padding:22px 18px 50px}
}

/* ============================================================
   The Bill of Lading document itself
   ============================================================ */
.bol-doc{
  background:#fff; color:#000; width:8.5in; min-height:11in; padding:0.45in 0.4in;
  font-family:Arial,Helvetica,sans-serif; font-size:8.5pt; line-height:1.25;
}
.bol-doc *{box-sizing:border-box}

/* Letterhead */
.bd-head{display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:8px}
.bd-head-left{display:flex; gap:12px; align-items:flex-start; flex:1.6}
.bd-logo{width:62px; height:62px}
.bd-company-name{font-size:18pt; font-weight:700; letter-spacing:-.3px; line-height:1.05}
.bd-company-addr{font-size:9pt; margin-top:3px}
.bd-head-mid{flex:1; text-align:left; font-size:10pt; padding-top:34px}
.bd-head-right{flex:.9; text-align:right}
.bd-draft{color:#f08a82; font-size:15pt; font-weight:700; letter-spacing:1px}
.bd-title{color:var(--navy); font-size:16pt; font-weight:700}

/* Boxed grid */
.bd-grid{display:flex; border:1px solid var(--doc-line); border-bottom:0}
.bd-foot-grid{border-top:0}
.bd-col{display:flex; flex-direction:column}
.bd-col-left{flex:1.32; border-right:1px solid var(--doc-line)}
.bd-col-right{flex:1}
.bd-cell{border-bottom:1px solid var(--doc-line); padding:3px 6px 6px; min-height:34px}
.bd-col .bd-cell:last-child{border-bottom:0}
.bd-row2{display:flex; border-bottom:1px solid var(--doc-line)}
.bd-row2:last-child{border-bottom:0}
.bd-row2 .bd-cell{flex:1; border-bottom:0}
.bd-row2 .bd-cell:first-child{border-right:1px solid var(--doc-line)}
.bd-label{color:var(--doc-label); font-style:italic; font-size:7.5pt; font-weight:600; margin-bottom:2px}
.bd-val{font-weight:700; font-size:8pt; white-space:pre-wrap}

/* Particulars bar + table */
.bd-bar{background:#eef1f7; border:1px solid var(--doc-line); border-top:0;
  text-align:center; font-weight:700; color:var(--navy); font-size:8.5pt; padding:3px}
.bd-bar-left{text-align:left; padding-left:8px}
.bd-particulars,.bd-container,.bd-freight{width:100%; border-collapse:collapse}
.bd-particulars th,.bd-particulars td,
.bd-container th,.bd-container td{border:1px solid var(--doc-line); padding:4px 6px; vertical-align:top}
.bd-particulars thead th{font-size:7pt; color:var(--navy); text-align:center; background:#f6f8fc}
.bd-particulars td{font-weight:700; white-space:pre-wrap}
.bd-particulars .c-marks{width:16%}
.bd-particulars .c-pkgs{width:12%}
.bd-particulars .c-desc{width:48%}
.bd-particulars .c-wt{width:13%; text-align:right}
.bd-particulars .c-meas{width:11%; text-align:right}
.bd-particulars tbody td{height:120px}

.bd-container{border-top:0}
.bd-container th{font-size:7pt; color:var(--navy); background:#f6f8fc; text-align:center}
.bd-container td{text-align:center; font-weight:700; height:24px}

/* Footer grid */
.bd-foot-grid .bd-col-left{flex:1; border-right:1px solid var(--doc-line)}
.bd-foot-grid .bd-col-right{flex:1.1}
.bd-movement{display:flex; flex-direction:column; gap:6px; min-height:50px}
.bd-movement-type{font-weight:700}
.bd-quote{font-weight:700}
.bd-bltype{align-self:flex-end; font-size:11pt}
.bd-freight{border-top:1px solid var(--doc-line)}
.bd-freight th,.bd-freight td{border:1px solid var(--doc-line); padding:4px 6px; font-size:7.5pt}
.bd-freight th{color:var(--navy); text-align:center; width:22%}
.bd-freight th:first-child{width:56%; text-align:left}
.bd-freight-note{font-weight:700; height:30px}
.bd-total{font-weight:700}
.bd-clause{font-size:6.8pt; line-height:1.3; padding:6px 8px}
.bd-clause p{margin:0 0 5px}
.bd-agent-line{font-weight:700; font-size:7.5pt}
.bd-sign{display:flex; align-items:flex-end; justify-content:space-between; margin:6px 0 2px}
.bd-sign-by{flex:1}
.bd-sign-line{display:inline-block; width:60%; border-bottom:1px solid #000; height:1px; margin-left:4px}
.bd-for-company{text-align:right; font-size:6.5pt; margin-bottom:6px}
.bd-attn{font-size:6.6pt}

/* ---- Print ---- */
@media print{
  @page{size:Letter; margin:0}
  body{background:#fff}
  .bol-doc{width:8.5in; padding:0.45in 0.4in; box-shadow:none}
}