/* Coco Spirits SOP – theme on top of Bootstrap 5.3 */
:root {
  /* brand: coral */
  --coco-teal: #ff5757;              /* accent (name kept for compatibility) */
  --coco-teal-rgb: 255, 87, 87;
  --coco-teal-dark: #e84444;
  --coco-sidebar: #ff5757;
  --coco-sand: #ff5757;
  --coco-sand-light: #ffe8e8;
  --bs-primary: var(--coco-teal);
  --bs-primary-rgb: var(--coco-teal-rgb);
  --bs-link-color: #d93a3a;          /* darker coral for readable text links */
  --bs-link-color-rgb: 217, 58, 58;
  --bs-link-hover-color: #b82e2e;
  --bs-body-font-size: .925rem;
  --sidebar-w: 240px;
}

.btn-primary {
  --bs-btn-bg: var(--coco-teal);
  --bs-btn-border-color: var(--coco-teal);
  --bs-btn-hover-bg: var(--coco-teal-dark);
  --bs-btn-hover-border-color: var(--coco-teal-dark);
  --bs-btn-active-bg: var(--coco-teal-dark);
  --bs-btn-active-border-color: var(--coco-teal-dark);
  --bs-btn-disabled-bg: var(--coco-teal);
  --bs-btn-disabled-border-color: var(--coco-teal);
}
.btn-outline-primary {
  --bs-btn-color: var(--coco-teal);
  --bs-btn-border-color: var(--coco-teal);
  --bs-btn-hover-bg: var(--coco-teal);
  --bs-btn-hover-border-color: var(--coco-teal);
  --bs-btn-active-bg: var(--coco-teal);
  --bs-btn-active-border-color: var(--coco-teal);
}
.btn-accent { background: var(--coco-sand); border-color: var(--coco-sand); color: #fff; }
.btn-accent:hover { background: var(--coco-teal-dark); border-color: var(--coco-teal-dark); color: #fff; }
.text-bg-primary { background-color: var(--coco-teal) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #ff9a9a; box-shadow: 0 0 0 .2rem rgba(var(--coco-teal-rgb), .2);
}
.form-check-input:checked { background-color: var(--coco-teal); border-color: var(--coco-teal); }
.page-link { color: var(--bs-link-color); }
.active > .page-link, .page-link.active { background-color: var(--coco-teal); border-color: var(--coco-teal); }
.nav-pills .nav-link.active { background-color: var(--coco-teal); }

/* ---------- logo (from the Monopole label) ---------- */
:root { --coco-gold: #a27d37; --coco-cream: #eae5da; }
.coco-logo { text-align: center; color: var(--coco-gold); font-family: 'Bodoni Moda', 'Bodoni 72', 'Didot', Georgia, serif; line-height: 1; }
.coco-logo-word { font-weight: 400; letter-spacing: .37em; padding-left: .37em; } /* padding balances trailing letter-spacing */
.coco-logo-sub { letter-spacing: .12em; padding-left: .12em; margin-top: .35em; }
.coco-logo-rule { height: 1px; background: var(--coco-gold); margin: .55em auto 0; width: 88%; }
.coco-logo-tag { font-family: var(--bs-body-font-family); letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; font-weight: 600; margin-top: .6em; }
.coco-logo-sm { background: var(--coco-cream); border-radius: .5rem; padding: .85rem .5rem .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.coco-logo-sm .coco-logo-word { font-size: 1.85rem; }
.coco-logo-sm .coco-logo-sub { font-size: .55rem; }
.coco-logo-sm .coco-logo-tag { font-size: .58rem; }
.coco-logo-lg .coco-logo-word { font-size: 3rem; }
.coco-logo-lg .coco-logo-sub { font-size: .8rem; }
.coco-logo-lg .coco-logo-tag { font-size: .7rem; }

/* ---------- layout ---------- */
body.app { background: var(--bs-tertiary-bg); }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--coco-sidebar) !important; color: #fff; flex-shrink: 0; }
@media (max-width: 991.98px) { .sidebar { --bs-offcanvas-width: min(260px, 80vw); } } /* the slide-out menu on phones/tablets: Bootstrap's 400px default covers an iPhone */
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; }
}
.sidebar-inner { display: flex; flex-direction: column; height: 100%; padding: 1rem .75rem; overflow-y: auto; }
.brand { display: block; text-decoration: none; padding: .1rem .1rem .9rem; }
.brand small { display: block; font-weight: 500; font-size: .7rem; color: rgba(255,255,255,.85); letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav { flex: 1; }
.sidebar-nav .nav-heading { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.72); margin: 1rem .6rem .3rem; font-weight: 600; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .65rem; color: #fff; padding: .42rem .6rem; border-radius: .45rem; font-size: .9rem; }
.sidebar-nav .nav-link i { font-size: 1.05rem; opacity: .85; width: 1.2rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar-nav .nav-link.active { background: #fff; color: #d93a3a; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sidebar-nav .nav-link.active i { opacity: 1; }
.sidebar-user { border-top: 1px solid rgba(255,255,255,.3); padding-top: .75rem; margin-top: .75rem; }
.sidebar-user .user-toggle { color: #fff; }
.sidebar .dropdown-menu { --bs-dropdown-link-color: #212529; --bs-dropdown-link-hover-color: #212529; color: #212529; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #d93a3a; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.topbar-add { color: var(--coco-teal-dark); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.topbar-add.dropdown-toggle-split { border-left: 1px solid rgba(var(--coco-teal-rgb), .35); }
.topbar { position: sticky; top: 0; z-index: 1030; background: var(--coco-sidebar); display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; }
.brand-sm { color: #fff; font-weight: 700; text-decoration: none; }
/* back bar: only in the Home Screen app on phones/tablets, which has no browser back button */
.app-footer { display: none; }
@media (max-width: 991.98px) {
  body.standalone .app-footer {
    display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -2px 8px rgba(0,0,0,.05);
    padding: .25rem .5rem calc(.25rem + env(safe-area-inset-bottom));
  }
  body.standalone .app-footer-back { color: var(--coco-teal); font-weight: 600; text-decoration: none; padding: .45rem .6rem; }
  body.standalone .app-footer-back .bi { font-size: 1.05em; vertical-align: -.05em; }
  body.standalone .content { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } /* nothing hides behind the bar */
}
.content { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 3rem; }
@media (max-width: 575.98px) { .content { padding: 1rem .75rem 3rem; } }

/* ---------- page furniture ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.page-header h1 { font-size: 1.45rem; margin: 0; font-weight: 650; }
.page-header .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.page-header .subtitle { color: var(--bs-secondary-color); font-size: .88rem; width: 100%; margin-top: -.4rem; }
.card { border: 1px solid var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-header { background: transparent; font-weight: 600; }
/* keep tables inside the card's rounded corners – a responsive wrapper must still scroll sideways (overflow-x: auto
   clips to the rounded border too), otherwise wide tables are cut off on phones */
.card > .table-responsive, .card > .table, .card > form > .table-responsive { border-radius: var(--bs-card-inner-border-radius); overflow: hidden; }
.card > .table-responsive, .card > form > .table-responsive { overflow-x: auto; overflow-y: hidden; }
.card > .table-responsive:not(:first-child), .card > .table:not(:first-child), .card > form:not(:first-child) > .table-responsive { border-top-left-radius: 0; border-top-right-radius: 0; }
.card > .table-responsive:not(:last-child), .card > .table:not(:last-child), .card > form:not(:last-child) > .table-responsive { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.card > .table { border-collapse: separate; border-spacing: 0; }
.card .table-card > :last-child > tr:last-child > * { border-bottom-width: 0; }
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; }
.table thead th a { color: inherit; text-decoration: none; }
.table thead th a:hover { color: var(--bs-link-color); }
.table-card { margin: 0; }
.table-card td, .table-card th { vertical-align: middle; }
/* a row that opens something always shades on hover, whether or not its table has .table-hover */
.table tr.clickable, .table tr[data-href] { cursor: pointer; }
.table > tbody > tr.clickable:hover > *, .table > tbody > tr[data-href]:hover > * { --bs-table-color-state: var(--bs-table-hover-color); --bs-table-bg-state: var(--bs-table-hover-bg); }
/* products everywhere: "Name (750ml)" with the SKU on the line below (product_label() / Coco.productLabel) */
.product-sku { font-size: .78rem; font-weight: 400; line-height: 1.3; }
.product-label a { text-decoration: none; }
.product-label a:hover { text-decoration: underline; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* numeric columns are centred, header and cells; text columns stay left */
.table-card thead th.num, .table-card thead th.text-end, .table-card thead th.text-center,
.table-card td.num, .table-card td.text-end:not([colspan]), .table-card td.text-center { text-align: center; }
.table-card > tfoot > tr > td { border-top: 2px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.table-centred thead th { text-align: center; }
.table-centred thead th.text-start { text-align: left; }
.table-centred td.num { text-align: center; }
.mono { font-family: var(--bs-font-monospace); font-size: .85em; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.stat-card i.stat-icon { font-size: 1.6rem; color: var(--coco-sand); }
.min-w-0 { min-width: 0; } /* lets a flex child shrink below its content */
/* dashboard tiles size to their own width: a narrow tile (half-width on a phone) drops the icon and scales the amount to fit */
.dash-tile { container-type: inline-size; }
.dash-tile .stat-value { white-space: nowrap; }
@container (max-width: 230px) {
  .dash-tile i.stat-icon { display: none; }
  .dash-tile .stat-value { font-size: clamp(1rem, 12cqi, 1.6rem); }
}
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 150px; }
.filter-bar > .fb-note { display: flex; align-items: center; gap: .25rem; min-height: 31px; } /* a line of text in the bar sits on the same centre line as the small inputs and buttons beside it */
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.dl-grid dt { font-weight: 500; color: var(--bs-secondary-color); }
.dl-grid dd { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.4rem; border-left: 2px solid var(--bs-border-color); margin-left: .4rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--coco-teal); }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: var(--coco-sand); }
.status-steps { display: flex; gap: .25rem; flex-wrap: wrap; }
.status-steps .step { font-size: .75rem; padding: .25rem .6rem; border-radius: 1rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.status-steps .step.done { background: rgba(var(--coco-teal-rgb), .14); color: #d93a3a; }
.status-steps .step.current { background: var(--coco-teal); color: #fff; }
.lines-table input.form-control, .lines-table select.form-select { padding: .25rem .45rem; font-size: .88rem; }
/* receipt / PO lines: inputs line up across the row even when some cells have a second line under them (cases, Parts) */
.lines-table tr.line-row > td { vertical-align: top; }
.lines-table tr.line-row > td.line-total, .lines-table tr.line-row > td:last-child { padding-top: .9rem; }
.autocomplete { position: relative; }
/* Coco.autocomplete wraps its input: inside an input group the wrapper stretches like an input and the input fills it
   (otherwise the input shrinks and leaves a gap, e.g. the report Product filter) */
.input-group > .autocomplete { flex: 1 1 auto; width: 1%; min-width: 0; }
.autocomplete > .form-control, .filter-bar .autocomplete > .form-control { width: 100%; min-width: 0; }
.autocomplete-menu { position: fixed; z-index: 1060; max-height: 320px; overflow-y: auto; } /* placed by Coco.autocomplete */
.autocomplete-menu .list-group-item { cursor: pointer; }
.autocomplete-menu .list-group-item.active { background: var(--coco-teal); border-color: var(--coco-teal); }

/* ---------- mobile work screens (pick / driver) ---------- */
.work-screen { width: 100%; }  /* full width like every other page; touch-friendly controls below */
.page-header .back-link { color: var(--bs-body-color); font-size: 1.4rem; line-height: 1; text-decoration: none; margin-right: -.25rem; }
.page-header .back-link:hover { color: var(--bs-link-color); }
.work-card { border-radius: .8rem; }
.work-card .big-qty { font-size: 2rem; font-weight: 700; }
.btn-xl { padding: .9rem 1.2rem; font-size: 1.1rem; border-radius: .6rem; }
.pick-line.done { opacity: .6; }
.pick-line.short { border-left: 4px solid var(--bs-warning) !important; }
.pick-line.ok { border-left: 4px solid var(--bs-success) !important; }
#scanner-region { width: 100%; max-width: 480px; margin: 0 auto; border-radius: .6rem; overflow: hidden; }
.signature-pad { width: 100%; height: 200px; border: 2px dashed var(--bs-border-color); border-radius: .5rem; touch-action: none; background: #fff; }

/* ---------- auth ---------- */
body.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(circle at 20% 10%, #ff7a7a 0, transparent 45%), radial-gradient(circle at 90% 90%, #e84444 0, transparent 40%), var(--coco-sidebar); }
.auth-card { width: 100%; max-width: 420px; background: var(--coco-cream, #eae5da); border-radius: 1rem; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.brand-title { font-weight: 800; color: #1f1f1f; letter-spacing: .01em; }
.brand-sub { color: #d93a3a; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }

/* ---------- print documents ---------- */
@media print {
  .sidebar, .topbar, .no-print, .page-header .actions, .alert { display: none !important; }
  .content { padding: 0; }
  body.app { background: #fff; }
  .card { border: none; box-shadow: none; }
}

/* section label used between groups of cards (instead of ad-hoc h2/h6) */
.nav-heading-muted, .section-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }

/* ---------- consistency rules ---------- */
/* document numbers in page titles use the normal heading font, not monospace */
.page-header h1 .mono, .page-header h1.mono { font-family: inherit; font-size: inherit; letter-spacing: .01em; }
/* tags in a table are all the same width (longer ones grow); .badge-fit opts a tag out */
.table td .badge:not(.badge-fit) { display: inline-block; min-width: 5.5rem; text-align: center; }
.page-header h1 .badge { font-size: .55em; vertical-align: middle; font-weight: 600; }
.status-menu .dropdown-item { padding-top: .4rem; padding-bottom: .4rem; }
.page-header h1 .status-menu .badge { font-size: .9rem; padding: .4em .75em; } /* easy to read and tap */
.status-menu .dropdown-item.active, .status-menu .dropdown-item:active { background: var(--bs-tertiary-bg); color: inherit; }
.page-header h1 .dropdown > .btn { font-size: inherit; line-height: 1; vertical-align: middle; } /* status picker keeps the badge the same size */
/* header actions: one coloured primary action, everything else neutral */
.page-header .actions .btn-outline-primary, .page-header .actions .btn-light {
  --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: #adb5bd;
}
.page-header .actions .btn-outline-secondary { --bs-btn-bg: #fff; --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: #adb5bd; }
/* breadcrumb/eyebrow line above titles */
.page-header .text-muted.small a { color: inherit; text-decoration: none; }
.page-header .text-muted.small a:hover { color: var(--bs-link-color); text-decoration: underline; }
/* nav tabs: neutral inactive tabs, coral active underline. The grey line is drawn inside the tab row and the
   underline sits on top of it, so nothing hangs below the row – rows that scroll sideways (overflow-auto) no longer
   get a vertical scrollbar or a gap between the underline and the line */
.nav-tabs { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--bs-border-color); overflow-y: hidden; }
.nav-tabs.overflow-auto { overflow-x: auto; overflow-y: hidden; }
.nav-tabs .nav-link { color: var(--bs-secondary-color); margin-bottom: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--bs-body-color); border-bottom-color: var(--bs-border-color); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--bs-body-color); font-weight: 600; background: transparent; border-bottom-color: var(--coco-teal); }
/* stat cards: equal height in a row */
.row > [class*="col"] > .stat-card { height: 100%; }

/* ---------- mobile consistency ---------- */
.brand-sm { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; letter-spacing: .3em; font-size: 1.05rem; }
.brand-sm small { font-family: var(--bs-body-font-family); letter-spacing: .12em; font-size: .6rem; opacity: .85; margin-left: .35rem; }
@media (max-width: 767.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }
}
@media (max-width: 575.98px) {
  .filter-bar { gap: .4rem; }
  .filter-bar > * { flex: 1 1 calc(50% - .4rem); }
  .filter-bar > input[type=search], .filter-bar > input[type=text], .filter-bar > .form-control:first-child { flex-basis: 100%; }
  .filter-bar .form-control, .filter-bar .form-select { min-width: 0; width: 100%; }
  .filter-bar > .btn, .filter-bar > .form-check { flex: 0 0 auto; }
  .page-header h1 { font-size: 1.25rem; }
}

/* impersonation banner */
.impersonation-bar { position: sticky; top: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: -1.25rem -1.5rem 1rem; padding: .6rem 1.5rem; background: #2b2b2b; color: #fff; font-size: .9rem; }
.impersonation-bar .bi-person-badge { color: var(--coco-teal); font-size: 1.1rem; }
@media (max-width: 991.98px) { .impersonation-bar { top: 46px; } }
@media (max-width: 575.98px) { .impersonation-bar { margin: -1rem -.75rem 1rem; padding: .6rem .75rem; } }

/* sidebar count badges + small note boxes */
.sidebar-nav .nav-badge { margin-left: auto; background: #fff; color: #d93a3a; border-radius: 1rem; font-size: .7rem; font-weight: 700; padding: .05rem .45rem; }
.sidebar-nav .nav-link.active .nav-badge { background: #d93a3a; color: #fff; }
.sidebar-nav .nav-badge.nav-badge-info { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); font-weight: 600; } /* a total, not work waiting */
.sidebar-nav .nav-link.active .nav-badge.nav-badge-info { background: transparent; color: #d93a3a; border-color: #d93a3a; }
.notes-box { background: var(--bs-tertiary-bg); border-left: 3px solid var(--coco-teal); border-radius: .25rem; padding: .4rem .6rem; }

/* choice cards (e.g. New order → choose the order type) */
/* a card that opens something lifts on hover / keyboard focus (whole-card links, or a card whose body is the link) */
a.card, .card:has(> a.card-body) { transition: box-shadow .15s; }
a.card:hover, a.card:focus-visible, .card:has(> a.card-body:hover), .card:has(> a.card-body:focus-visible) { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.choice-card { display: block; height: 100%; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.choice-card:hover, .choice-card:focus-visible { color: inherit; border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.choice-card .choice-icon { font-size: 1.75rem; color: var(--bs-primary); line-height: 1; }
.choice-card .choice-title { font-weight: 650; font-size: 1.05rem; }

/* sortable column headings */
th .sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
th .sort-link:hover { color: var(--bs-primary); }
th .sort-link.sorted { color: var(--bs-emphasis-color); }
th .sort-link .bi { font-size: .7em; vertical-align: .1em; }

/* pull to refresh (Home Screen app): a coral band out of the top bar, the page slides down under it */
.ptr { position: fixed; right: 0; top: 0; left: 0; height: 0; z-index: 1020; overflow: hidden; pointer-events: none;
  background: var(--coco-sidebar); display: flex; align-items: flex-end; justify-content: center; }
.ptr.ptr-back, .content.ptr-back { transition: height .25s ease, transform .25s ease; }
.ptr-circle { width: 38px; height: 38px; margin-bottom: 14px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--coco-teal);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .15s, color .15s; }
/* far enough to refresh: a touch bigger and darker */
.ptr-circle.ready, .ptr-circle.spinning { transform: scale(1.12); color: var(--coco-teal-dark); }
.ptr-circle.spinning .bi { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media print { .ptr { display: none !important; } }

/* ------------------------------------------------------------------ phones (see "phones" in app.js) */
.actions-more, .fb-toggle { display: none; }
.actions-more .dropdown-item .bi { width: 1.3rem; display: inline-block; }
/* summary cards: amounts shrink to fit a half-width card instead of breaking mid-number */
.stat-card { container-type: inline-size; }
@container (max-width: 230px) {
  .stat-card .stat-value { font-size: clamp(1rem, 11cqi, 1.6rem); overflow-wrap: normal; }
}
@media (max-width: 575.98px) {
  /* header: title and buttons share one row; secondary buttons live in the ⋯ menu */
  .page-header > :not(.actions):not(.subtitle) { flex: 1 1 0; min-width: 0; }
  .page-header .actions { flex-wrap: nowrap; gap: .35rem; align-self: flex-start; }
  .page-header .actions .btn { white-space: nowrap; }
  .page-header .actions > .phone-hide { display: none !important; }
  .actions-more { display: block; }

  /* filters: search box, Filters button and search button on one row; the rest folds away */
  .fb-toggle { display: inline-flex; align-items: center; gap: .3rem; }
  .filter-bar.fb-ready > input[type=search], .filter-bar.fb-ready > input[type=text] { flex: 1 1 0; min-width: 0; }
  .filter-bar.fb-ready:not(.fb-open) > .fb-more { display: none !important; }
  .filter-bar.fb-open .fb-toggle { background: var(--bs-secondary-bg); }

  /* status steps on one sideways-scrolling line */
  .status-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .status-steps::-webkit-scrollbar { display: none; }
  .status-steps .step { white-space: nowrap; }

  /* tables: each row a card – title first, then "label  value" lines */
  table.stack > thead { display: none; }
  table.stack, table.stack > tbody, table.stack > tbody > tr, table.stack > tbody > tr > td { display: block; width: 100%; }
  table.stack > tbody > tr { padding: .6rem .9rem; border-bottom: 1px solid var(--bs-border-color); }
  table.stack > tbody > tr:last-child { border-bottom: 0; }
  /* the row, not its cells, carries the colour, so hover and tap fill the whole card edge to edge */
  table.stack > tbody > tr { background: var(--bs-table-bg); }
  table.stack > tbody > tr > td { background: transparent !important; box-shadow: none !important; }
  table.stack.table-hover > tbody > tr:hover, table.stack > tbody > tr[data-href]:hover, table.stack > tbody > tr.clickable:hover,
  table.stack > tbody > tr[data-href]:active { background: var(--bs-table-hover-bg, rgba(0,0,0,.075)); }
  table.stack > tbody > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .1rem 0; border: 0; text-align: right; }
  table.stack > tbody > tr > td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; color: var(--bs-secondary-color); font-size: .78rem; }
  table.stack > tbody > tr > td:not([data-label])::before { content: none; }
  table.stack > tbody > tr > td:not([data-label]) { justify-content: flex-end; }
  table.stack .stack-val { min-width: 0; }
  table.stack > tbody > tr > td.stack-title { display: block; text-align: left; font-weight: 600; padding-bottom: .3rem; }
  table.stack > tbody > tr > td.stack-title .small, table.stack > tbody > tr > td.stack-title .text-muted { font-weight: 400; }
  table.stack > tbody > tr > td.stack-full { display: block; text-align: left; }
  table.stack > tbody > tr > td.empty-state { text-align: center; }
  table.stack > tbody > tr > td.stack-skip, table.stack > tbody > tr > td:empty { display: none; }
  table.stack > tfoot, table.stack > tfoot > tr { display: block; }
  table.stack > tfoot > tr { display: block; padding: .6rem .9rem; }
  table.stack > tfoot > tr + tr { border-top: 1px solid var(--bs-border-color); }
  /* a list's totals are their own card under the rows' card */
  .card:has(> .table-responsive > table.stack > tfoot), .card:has(> table.stack > tfoot) { border: 0; background: transparent; box-shadow: none; }
  table.stack:has(> tfoot) > tbody, table.stack > tfoot { border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, var(--bs-border-color)); border-radius: var(--bs-card-border-radius, .5rem); overflow: hidden; }
  table.stack:has(> tfoot) > tbody { background: var(--bs-card-bg, var(--bs-body-bg)); }
  table.stack > tfoot { margin-top: .75rem; background: var(--bs-tertiary-bg); }
  table.stack > tfoot > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; width: 100%; padding: .1rem 0; border: 0; text-align: right; background: transparent; }
  table.stack > tfoot > tr > td[data-label]::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; color: var(--bs-secondary-color); font-size: .78rem; font-weight: 400; }
  table.stack > tfoot > tr > td.stack-title { display: block; text-align: left; padding-bottom: .3rem; }
  table.stack > tfoot > tr > td:empty { display: none; }
  .table-responsive:has(> table.stack) { overflow: visible; }
  /* a card's heading line shouldn't sit right on top of its first row-card */
  .card-header + .table-responsive:has(> table.stack), .card-header + table.stack { padding-top: .6rem; }
  /* the row colour follows the card's rounded corners at its top and bottom */
  .card > .table-responsive:first-child > table.stack > tbody > tr:first-child,
  .card > table.stack:first-child > tbody > tr:first-child { border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); }
  .card > .table-responsive:last-child > table.stack:not(:has(> tfoot)) > tbody > tr:last-child,
  .card > table.stack:last-child:not(:has(> tfoot)) > tbody > tr:last-child { border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); }
}
/* iPhone zooms in on any text field smaller than 16px when it's tapped: on touch screens every field is at least 16px.
   (Pinch-to-zoom still works – the viewport isn't locked.) */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .form-control, .form-select { font-size: max(16px, 1em) !important; }
}

/* while the on-screen keyboard is up (app.js): the top bar stops being pinned and sits at the top of the page like any
   other part of it (so it can't jump about as the phone moves the page under the keyboard); no Back bar over the page */
body.keyboard-open .app-footer { display: none !important; }
body.keyboard-open .topbar { position: relative; }

/* order editor on a phone: each line is a small card, one thing per row – product across the top (remove at its right)
   with its code, case size and stock on one line; quantity (bottles and cases side by side); the price beside the
   override box, where it comes from underneath; then discount beside the line total */
@media (max-width: 575.98px) {
  #linesTable, #linesTable > tbody { display: block; width: 100%; min-width: 0 !important; }
  #linesTable > thead { display: none; }
  #linesTable > tbody > tr.main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .75rem; padding: .75rem .9rem; position: relative; }
  #linesTable > tbody > tr.main > td { display: block; border: 0; padding: 0; width: auto !important; }
  #linesTable > tbody > tr.main > td.ln { display: none; }
  #linesTable > tbody > tr.main > td.c-prod { grid-column: 1 / -1; padding-right: 2rem; }
  #linesTable > tbody > tr.main > td.c-rm { position: absolute; top: .7rem; right: .9rem; }
  #linesTable > tbody > tr.main > td.c-price { text-align: left; }
  #linesTable > tbody > tr.main > td.c-prod .product-sku, #linesTable > tbody > tr.main > td.c-prod > .case-info,
  #linesTable > tbody > tr.main > td.c-prod > .avail { display: inline; font-size: .8rem; }
  #linesTable > tbody > tr.main > td.c-prod > .case-info::before, #linesTable > tbody > tr.main > td.c-prod > .avail:not(:empty)::before { content: ' · '; color: var(--bs-secondary-color); }
  #linesTable > tbody > tr.main > td.c-prod .form-check { display: block; margin-top: .35rem; }
  #linesTable > tbody > tr.main > td.c-qty, #linesTable > tbody > tr.main > td.c-price { grid-column: 1 / -1; }
  #linesTable > tbody > tr.main > td.c-qty { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; }
  #linesTable > tbody > tr.main > td.c-qty::before, #linesTable > tbody > tr.main > td.c-qty > .qty-hint,
  #linesTable > tbody > tr.main > td.c-qty > .invalid-feedback { grid-column: 1 / -1; }
  #linesTable > tbody > tr.main > td.c-qty > .input-group.mt-1 { margin-top: 0 !important; }
  #linesTable > tbody > tr.main > td.c-price { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; align-items: start; }
  #linesTable > tbody > tr.main > td.c-price::before, #linesTable > tbody > tr.main > td.c-price > .invalid-feedback { grid-column: 1 / -1; }
  #linesTable > tbody > tr.main > td.c-price > .price { grid-column: 1; grid-row: 2; align-self: center; font-size: 1.05rem; }
  #linesTable > tbody > tr.main > td.c-price > .override { grid-column: 2; grid-row: 2; margin-top: 0 !important; }
  #linesTable > tbody > tr.main > td.c-price > .src { grid-column: 1 / -1; grid-row: 3; margin-top: .3rem; line-height: 1.5; white-space: normal; }
  #linesTable > tbody > tr.main > td.c-total { text-align: right; align-self: end; }
  #linesTable > tbody > tr.main:not(:has(> td.c-disc)) > td.c-total { grid-column: 1 / -1; }
  #linesTable > tbody > tr.main > td.c-total .total { font-size: 1.05rem; }
  #linesTable > tbody > tr.main > td.c-qty::before, #linesTable > tbody > tr.main > td.c-price::before,
  #linesTable > tbody > tr.main > td.c-disc::before { display: block; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
  #linesTable > tbody > tr.main > td.c-qty::before { content: 'Quantity'; }
  #linesTable > tbody > tr.main > td.c-price::before { content: 'Price ex VAT'; }
  #linesTable > tbody > tr.main > td.c-disc::before { content: 'Discount %'; }
  #linesTable > tbody > tr.main > td.c-total::before { content: 'Line total'; display: block; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
  #linesTable .override, #linesTable .disc { text-align: left !important; }
  #linesTable > tbody > tr.override-row > td:first-child { display: none; }
  #linesTable > tbody > tr.override-row > td { display: block; padding: 0 .9rem .75rem; border: 0; }
  #linesTable > tbody > tr.override-row .form-select, #linesTable > tbody > tr.override-row .note { width: 100% !important; max-width: none !important; }
  #linesTable > tbody { border-bottom: 1px solid var(--bs-border-color); }
  #linesTable > tbody#emptyLines > tr > td { display: block; }
}

/* money in tables and reports, Excel's Accounting format (acct()): the currency symbol at the left of the cell, the
   number at the right, negatives in brackets, zero as a dash; positives keep an invisible ")" so the digits line up */
.acct { display: flex; justify-content: space-between; gap: .35em; white-space: nowrap; font-variant-numeric: tabular-nums; } /* a block that fills the cell (Safari won't stretch an inline one), so every B$ sits at the column's left edge */
.acct .rp { visibility: hidden; }
@media (max-width: 575.98px) { table.stack .acct { display: inline-flex; } } /* only where tables become cards on a phone: label, then the amount */

/* tables of form fields on a phone (app.js marks them .stack-form): each row a card, a label over each field, two
   fields to a row, text boxes and lists across the card, the remove button or tick box in its top corner */
@media (max-width: 575.98px) {
  table.stack-form > thead { display: none; }
  table.stack-form, table.stack-form > tbody { display: block; width: 100%; min-width: 0 !important; }
  table.stack-form > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem .75rem; padding: .8rem .9rem; position: relative; border-bottom: 1px solid var(--bs-border-color); }
  table.stack-form > tbody > tr:last-child { border-bottom: 0; }
  table.stack-form > tbody > tr > td { display: block; border: 0; padding: 0; width: auto !important; min-width: 0; text-align: left; background: transparent; box-shadow: none; }
  table.stack-form > tbody > tr > td:empty, table.stack-form > tbody > tr > td.d-none { display: none; }
  table.stack-form > tbody > tr > td.stack-title { grid-column: 1 / -1; padding-right: 2.2rem; font-weight: 600; }
  table.stack-form > tbody > tr > td.stack-title .small, table.stack-form > tbody > tr > td.stack-title .text-muted { font-weight: 400; }
  table.stack-form > tbody > tr > td.stack-wide, table.stack-form > tbody > tr > td.stack-full { grid-column: 1 / -1; }
  table.stack-form > tbody > tr > td.stack-corner { position: absolute; top: .7rem; right: .9rem; }
  table.stack-form > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .2rem; font-weight: 400; }
  table.stack-form > tbody > tr > td .input-group { justify-content: flex-start !important; flex-wrap: nowrap; }
  table.stack-form > tbody > tr > td input, table.stack-form > tbody > tr > td select { max-width: none !important; text-align: left !important; }
  table.stack-form > tbody > tr > td .acct { display: inline-flex; }
  table.stack-form > tfoot, table.stack-form > tfoot > tr { display: block; }
  table.stack-form > tfoot > tr { display: flex; justify-content: flex-end; gap: 1rem; padding: .4rem .9rem; }
  table.stack-form > tfoot > tr > td, table.stack-form > tfoot > tr > th { display: block; border: 0; padding: 0; }
  .table-responsive:has(> table.stack-form) { overflow: visible; }
}

/* ---------- customer portal (/portal) ---------- */
body.portal { background: #f6f4ef; min-height: 100vh; display: flex; flex-direction: column; }
.portal-bar { background: var(--coco-cream); border-bottom: 2px solid var(--coco-gold); padding-top: .5rem; padding-bottom: .5rem; }
.portal-bar .navbar-brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--coco-gold); font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; }
.portal-word { font-size: 1.6rem; letter-spacing: .37em; padding-left: .37em; }
.portal-sub { font-size: .5rem; letter-spacing: .3em; padding-left: .3em; margin-top: .3em; }
.portal-bar .nav-link { color: #4a4337; }
.portal-bar .nav-link:hover { color: var(--coco-gold); }
.portal-bar .nav-link.active { color: var(--coco-gold); font-weight: 600; }
.portal-user { color: #4a4337; }
.portal-main { padding-top: 1.5rem; padding-bottom: 2rem; flex: 1 0 auto; }
.portal-foot { margin-top: auto; background: var(--coco-cream); border-top: 2px solid var(--coco-gold); }
.portal-foot .portal-foot-brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--coco-gold); font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; }
.portal-foot .portal-foot-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--coco-gold); margin-bottom: .6rem; }
.portal-foot a { color: #4a4337; }
.portal-foot a:hover { color: var(--coco-gold); }
.portal-foot i.bi { color: var(--coco-gold); }
.portal-foot-base { border-top: 1px solid rgba(162, 125, 55, .35); padding: .8rem 0 1rem; text-align: center; }
.portal .steps { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.portal .steps li { color: var(--bs-secondary-color); }
.portal .steps li.done { color: var(--bs-success); font-weight: 600; }
.portal .steps li i { margin-right: .3rem; }
body.portal .portal-preview { background: #fff3cd; border-bottom: 1px solid #e0c35a; color: #664d03; padding: .5rem 0; font-size: .88rem; position: sticky; top: 0; z-index: 1030; }

.dl-acct dd { max-width: 12rem; margin: 0; } /* accounting figures: currency symbol at the left edge, digits right-aligned */
.dl-acct { min-width: 7.5rem; }