:root{
  --bg:#05070C;
  --card:#0E1629;
  --text:#EAF0FF;
  --muted:#AAB6D6;
  --line:#1D2A48;

  /* Brighter, more readable accents on black */
  --accent:#5AE4A8;
  --accent2:#2D8CFF;           /* brighter blue */
  --accent2-strong:#58A6FF;    /* hover/focus glow */
  --warn:#FFC857;
  --bad:#FF5A7A;

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}

/* Utility muted text (used for loading + helper placeholders) */
.muted{
  color: var(--muted);
  font-size: 13px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--text);
  background: var(--bg);
}

/* Background layer used for bay mode tints */
.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -200px, rgba(45,140,255,.20), transparent),
    var(--bg);
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(5,7,12,.92);
  border-bottom:1px solid rgba(29,42,72,.70);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.topbar-inner{
  max-width:none;
  margin:0;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
  position:relative; /* anchor top-right actions reliably */
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto;
  flex:0 0 auto;
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

@media (max-width: 700px){
  /* On small screens, let actions drop below rather than overlapping the title */
  .topbar-inner{ flex-wrap:wrap; }
  .top-actions{ position:static; transform:none; width:100%; justify-content:flex-end; }
}

.btn.tabbtn{
  height:36px;
  padding:0 12px;
  border-radius:12px;
  font-weight:800;
}

.btn.tabbtn.active{
  background: linear-gradient(135deg, rgba(45,140,255,.38), rgba(90,228,168,.18));
  border-color: rgba(255,255,255,.12);
}

.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(45,140,255,.45), rgba(90,228,168,.22));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

.title{ font-size:18px; font-weight:900; letter-spacing:.2px; }
.sub{ font-size:13px; color:var(--muted); margin-top:2px; }

.container{
  max-width:1100px;
  margin:0 auto;
  padding:22px 20px 60px;
  display:flex;
  flex-direction:column;
  /* Space between top-level views */
  gap:40px;
}

/* Space between cards inside each tab view */
#viewOrders,
#viewQuality,
#viewPrep{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.card{
  background: rgba(14,22,41,.90);
  border:1px solid rgba(29,42,72,.90);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card-h{
  padding:18px 18px 10px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
}

.card h2{ margin:0; font-size:18px; }
.card p{ margin:6px 0 0; color:var(--muted); font-size:13px; }

/* Section headings inside results (Entered Order / Related Orders)
   Match the same size/weight/left alignment as "Find your order". */
.sectionHdr{
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.searchrow{
  padding:0 18px 14px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Portal search sizing (closer to Ops feel) */
#orderNumber{ flex: 0 0 220px; max-width: 260px; }
#customerWord{ flex: 1 1 auto; min-width: 240px; }
#btnSearch, #btnClear{ flex: 0 0 auto; }

@media (max-width: 820px){
  .searchrow{ flex-wrap:wrap; }
  #orderNumber{ flex: 1 1 180px; max-width:none; }
  #customerWord{ flex: 1 1 260px; }
}

.input{
  flex:1;
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(29,42,72,.95);
  background: rgba(8,12,20,.88);
  color:var(--text);
  outline:none;
  font-size:14px;
}

.input:focus{
  border-color: rgba(88,166,255,.95);
  box-shadow: 0 0 0 4px rgba(45,140,255,.22);
}

.btn{
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(29,42,72,.95);
  background: rgba(8,12,20,.88);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:14px; /* ensure <button> and <a> render identically */
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn:hover{
  border-color: rgba(88,166,255,.70);
  box-shadow: 0 0 0 4px rgba(45,140,255,.14);
}

.btn.primary{
  background: linear-gradient(135deg, rgba(45,140,255,.38), rgba(90,228,168,.18));
  border-color: rgba(255,255,255,.12);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.status{
  padding:0 18px 14px;
  color:var(--muted);
  font-size:13px;
}
.status.good{ color: rgba(90,228,168,.95); }
.status.warn{ color: var(--warn); }
.status.bad{ color: var(--bad); }

.results{
  padding:0 18px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ------------------------------
   Orders (Portal) – Ops-like layout
   Keep the Portal layout (card + inset spacing),
   but use the Ops colour scheme and pill styling.
   ------------------------------ */

.orderpill{
  border:1px solid rgba(29,42,72,.90);
  background: rgba(8,12,20,.78);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.orderpill:hover{
  border-color: rgba(88,166,255,.60);
  background: rgba(8,12,20,.88);
}

.orderpill .top{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.orderpill .title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .2px;
}

.orderpill .sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.orderpill .sub.small{ font-size: 12px; opacity: .92; }

.orderpill .meta{
  text-align: right;
  min-width: 340px;
}

.orderpill .meta-row{
  display:flex;
  justify-content:flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

/* In the order pill header we use flex gaps, so remove the global pill margins */
.orderpill .meta-row .pill{ margin:0 !important; }

/* Make status pills (On Hire / Payment Due etc.) match the metric pill size */
.orderpill .meta-row:not(.meta-sub) .pill{
  font-size: 12px;
  padding: 6px 10px;
}

.orderpill .meta-sub{ margin-top: 12px; }

/* Make metric pills consistent (avoid inline styles in JS) */
.pill.metric{
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(45,140,255,.10);
  border-color: rgba(255,255,255,.10);
}

.pill.good{ background: rgba(90,228,168,.12); border-color: rgba(90,228,168,.22); }
.pill.warn{ background: rgba(255,200,87,.12); border-color: rgba(255,200,87,.24); }
.pill.bad{  background: rgba(255,90,122,.12); border-color: rgba(255,90,122,.24); }

.orderpill .expand{
  margin-top: 14px;
  display:none;
}

.orderpill.open .expand{ display:block; }

.equipbox{
  border:1px solid rgba(29,42,72,.85);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 14px;
}

/* Keep long equipment lists from making the whole page enormous */
.equip-list{
  max-height: 360px;
  overflow: auto;
  padding-right: 6px;
}

.equip-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.equip-grid{ display:flex; flex-direction:column; gap:6px; }
.equip-row{ display:flex; gap:10px; }
.equip-qty{ width: 34px; font-weight: 900; color: rgba(234,240,255,.92); }
.equip-name{ color: rgba(234,240,255,.90); }

.mapWrap{
  margin-top: 12px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(29,42,72,.85);
  background: rgba(0,0,0,.14);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.box{
  border:1px solid rgba(29,42,72,.85);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 14px;
}

.box h3{ margin:0 0 6px 0; font-size: 16px; }
.small{ font-size: 12px; }

.noteText{
  width:100%;
  min-height: 86px;
  margin-top: 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(8,12,20,.70);
  color: rgba(234,240,255,.92);
  padding: 10px 12px;
  font: inherit;
  outline: none;
  resize: vertical;
}

.noteText:focus{
  border-color: rgba(88,166,255,.80);
  box-shadow: 0 0 0 4px rgba(45,140,255,.18);
}

.btn.red{
  margin-top: 10px;
  background: rgba(255, 60, 60, .18);
  border-color: rgba(255, 90, 90, .35);
}

.btn.red:hover{
  border-color: rgba(255, 90, 90, .65);
  box-shadow: 0 0 0 4px rgba(255, 60, 60, .14);
}

@media (max-width: 900px){
  .orderpill .meta{ min-width: 0; text-align:left; }
  .orderpill .meta-row{ justify-content:flex-start; }
  .grid2{ grid-template-columns: 1fr; }
}

.result{
  width:100%;
  text-align:left;
  border-radius:16px;
  border:1px solid rgba(29,42,72,.90);
  background: rgba(8,12,20,.85);
  padding:14px 14px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--text);
}

.result:hover{
  border-color: rgba(88,166,255,.75);
  background: rgba(8,12,20,.94);
}

.r-title{ font-weight:900; font-size:14px; }
.r-sub{ color:var(--muted); font-size:13px; margin-top:12px; margin-bottom:12px; }
.r-right{ text-align:right; min-width:170px; }
.r-date{ font-size:12px; }
.dim{ color:rgba(170,182,214,.75); }

.pill{
  display:inline-block;
  /* Use margin rather than relying on container flex gaps.
     This keeps consistent spacing everywhere (headers, lists, wrapped rows). */
  margin: 0 10px 10px 0 !important;
  padding:2px 8px;
  font-size:11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(234,240,255,.95);
  background: rgba(45,140,255,.14);
}

/* Small status badge used in the Orders search list (legacy app.js) */
.badge{
  display:inline-block;
  margin-left:10px;
  padding:2px 8px;
  font-size:11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(90,228,168,.10);
  color: rgba(234,240,255,.95);
}

.weightbox{
  margin:0 18px 14px;
  border-radius:16px;
  border:1px solid rgba(29,42,72,.90);
  background: rgba(8,12,20,.85);
  padding:14px;
  display:flex;
  align-items:baseline;
  gap:12px;
}

.wbig{ font-size:28px; font-weight:950; }
.wsub{ color:var(--muted); font-size:13px; }

.tablewrap{
  padding:0 18px 18px;
  overflow:auto;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: rgba(8,12,20,.85);
  border:1px solid rgba(29,42,72,.90);
  border-radius:16px;
  overflow:hidden;
}

.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(29,42,72,.80);
  font-size:13px;
}

.table thead th{
  font-size:12px;
  color:rgba(170,182,214,.98);
  background: rgba(8,12,20,.95);
  position:sticky;
  top:0;
  text-align:left;
}

.table td.num, .table th.num{ text-align:right; }
.table tr:last-child td{ border-bottom:none; }

@media (max-width: 720px){
  .r-right{ display:none; }
  .actions{ justify-content:flex-start; }
}

/* Tabs */
/* legacy tab styles removed (now uses header buttons) */

/* Badges under results */
.r-badges{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}

/* Data quality rows */
.qCols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:12px;padding:0 18px 18px;}
.qCol{padding:14px;border:1px solid rgba(255,255,255,0.10);border-radius:16px;background:rgba(0,0,0,0.18);}
.qCol h3{margin:0 0 10px 0;font-size:16px;}
.qList{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;padding-right:6px;}
.qRow{display:flex;justify-content:space-between;gap:10px;}
.qName{font-weight:500;font-size:13px;line-height:1.35;color:rgba(234,240,255,.92);}
.qMeta{display:flex;gap:8px;align-items:center;}

@media (max-width: 900px){
  .qCols{grid-template-columns:1fr;}
}

/* --------------------
   Prep bays
--------------------- */

.prepGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 10px;
  box-sizing: border-box;
}

.prepCard{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: inherit;
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.prepCard:hover{
  border-color: rgba(255,255,255,0.18);
}

.prepCardTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.prepCardTitle{
  font-size: 18px;
  font-weight: 700;
}

.orderCard{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px;
  margin-top: 12px;
  background: rgba(0,0,0,0.16);
}

/* Per-order mode colours (Prep Bays) */
.orderCard{ position: relative; }
.orderCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius: 16px 0 0 16px;
  opacity: 0.95;
}
.orderCard.mode-prepping{ border-color: rgba(255,80,80,0.35); }
.orderCard.mode-prepping::before{ background: #ff0000; }
.orderCard.mode-check{ border-color: rgba(255,170,60,0.35); }
.orderCard.mode-check::before{ background: #ff8c00; }
.orderCard.mode-deprepping{ border-color: rgba(70,160,255,0.40); }
.orderCard.mode-deprepping::before{ background: #0090ff; }
.orderCard.mode-ready{ border-color: rgba(80,255,160,0.35); }
.orderCard.mode-ready::before{ background: #00ff00; }

/* Prep management queues */
.prepQueues{
  padding-left: 14px;
  padding-right: 14px;
}

.queueBox{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,0.10);
}
.queueTitle{ font-size: 13px; letter-spacing: .2px; margin-bottom: 10px; }

/* Limit height so large queues don't make the whole page huge */
.queueScroll{
  max-height: clamp(220px, 42vh, 520px);
  overflow-y: auto;
  padding-right: 6px; /* leaves room for scrollbar without clipping content */
}
.queueRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.queueRow:first-child{ border-top: none; padding-top: 0; }

.orderControls .btn{ padding: 8px 10px; }

.orderCardTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.orderTitle{
  font-size: 16px;
  font-weight: 700;
}

.prepItems{
  margin: 10px 0 0 0;
  padding-left: 18px;
}

.pillrow{ display:flex; gap:10px; flex-wrap:wrap; }
.label{ display:block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin: 12px 0 6px; opacity: 0.75; }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }

.btn.active{ box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset; }

/* Screen tint when bay open */
/* Bay screen: make mode extremely obvious for warehouse use (primary colours). */
body.screen-mode.bay-picking .bg{
  background: #ff0000;
}

body.screen-mode.bay-ready .bg{
  background: #00ff00;
}


/* Full-screen warehouse mode: /prep/bay/<n> */
body.screen .top-actions{ display:none; }
body.screen #viewPrep > section.card:first-child{ display:none; }
body.screen #btnBackToBays{ display:none; }
body.screen #btnSaveBayName{ display:none; }
body.screen #btnAssignOrder{ display:none; }
body.screen #prepAssign{ display:none; }
body.screen .split{ display:block; }
body.screen .split > div:first-child{ display:none; }
body.screen .split > div:last-child{ display:none; }
body.screen .container{ padding-top: 18px; }

.pillrow > .btn{ margin: 0 10px 10px 0 !important; }

.prepCard.picking{ border-color: rgba(255,80,80,0.35); }
.prepCard.ready{ border-color: rgba(80,255,160,0.35); }


/* Bay header (warehouse screens): left name, centered mode, right fulfillment */
.bayHeader{
  display:flex;
  align-items:center;
  width:100%;
  gap:12px;
  margin:0;
}
#prepBayName{ flex:0 0 auto; }
#prepBayModeLabel{ flex:1 1 auto; text-align:center; letter-spacing: .08em; }
#prepBayFtLabel{ flex:0 0 auto; text-align:right; letter-spacing: .08em; }


/* Notes (Prep Bay) */
.orderNotes{ margin: 12px 0 16px 0; }

.orderNotes .notesRow{
  display:flex;
  gap:12px;
  align-items:center;
}
.orderNotes .textarea{
  flex:1;
  min-height:44px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.92);
  font: inherit;
  outline: none;
  resize: vertical;
}
.orderNotes .textarea:focus{
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.labelPad{ padding: 0 18px; }




.btn.danger{
  border-color: rgba(255,90,90,.45);
}
.btn.danger:hover{
  border-color: rgba(255,90,90,.75);
  box-shadow: 0 0 0 4px rgba(255,90,90,.14);
}

.orderNotesTop{
  margin: 12px 0 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
}

.notesBox{
  margin-top: 8px;
  padding: 12px 18px;
  white-space: pre-wrap;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.orderNotes .notesBox{
  margin-top: 8px;
}



.notesRowLine{margin-top:6px; line-height:1.35;}
.notesRowLine:first-child{margin-top:0;}

.buildTag{ margin-left:10px; font-size:12px; opacity:.65; }


/* Calendar tab */
.cal-list{display:flex;flex-direction:column;gap:10px;}
.cal-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.18);}
.cal-left strong{font-size:14px;}
.cal-right{white-space:nowrap;}
@media (max-width: 700px){.cal-row{flex-direction:column;align-items:flex-start;}.cal-right{white-space:normal;}}
.sync-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.transportRow{ display:flex; align-items:center; justify-content:flex-start; gap:14px; margin-top:12px; }

/* In most parts of the UI, .pill uses margins for spacing.
   Inside the transport row we want true vertical centering between the
   button + checkbox, so remove those margins and use flex alignment. */
.transportRow .pill{ margin:0 !important; display:inline-flex; align-items:center; line-height:1; }
.transportRow .transportChk{ margin:0; align-items:center; }
.transportRow .transportChk input{ width:18px; height:18px; }
/* UK-TDL mailto button loading state */
button.pill[data-tdl-loading="1"]{ opacity: .75; position: relative; padding-right: 40px; overflow: hidden; }
button.pill[data-tdl-loading="1"]::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.85);
  animation: swSpin 0.9s linear infinite;
}
@keyframes swSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.transportChk{ display: flex; align-items: center; gap: 10px; font-size: 12px; opacity: .9; user-select: none; line-height: 1; }
.transportChk span{ display:inline-block; transform: translateY(0); }
.transportChk input{ margin: 0; }
button.pill{ cursor: pointer; }
button.pill:disabled{ cursor: not-allowed; }


/* --- Portal overrides (no tabs) --- */
.topbar .tabs{display:none !important;}
/* Ensure inner cards inset from edges like Ops */
.wrap{max-width: 1320px; margin: 0 auto; padding: 26px 18px 80px;}
.card{margin-left:0; margin-right:0;}
/* Search section spacing */
.search-row{gap:14px;}