@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&display=swap');

:root {
  /* Simon's preferred look (2026-08-05): white + blue, with the same grey
     already used for the dashboard's stat tiles carried through the header
     and nav too, instead of solid blue blocks. --blue stays for buttons,
     links and accents - that's the "and blue" half of white+blue. */
  --navy: #641E1E;       /* was navy blue #0F2A4A - now the tile grey */
  --navy-dark: #4A1616;  /* one step darker, for hover states */
  --blue: #C62828;
  --tile: #641E1E;
  --tile-num: #F5E9E9;
  --tile-label: #C9A6A6;
  --nav-bg: #7A2A2A;     /* lighter grey than the header, for the nav strip */
  --bg: #F4F6F9;
  --card: #FFFFFF;
  --border: #DCE3EC;
  --text: #1B2733;
  --muted: #64748B;
  --danger: #C0392B;
  --ok: #1E8E3E;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.topbar {
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}
header.topbar a { color: white; text-decoration: none; }
header.topbar .brand { font-weight: 700; font-size: 1.1rem; }
nav.mainnav { display: flex; gap: 8px; align-items: center; background: var(--nav-bg); padding: 10px 16px; flex-wrap: wrap; }
nav.mainnav a { color: white; text-decoration: none; font-size: 0.92rem; display: inline-block; }

/* ---- Grouped nav (stage-1 revamp): 5 dropdown groups + 2 direct links ----
   Every top-level item is the same simple pill (Simon 2026-08-16: "a nice
   simple pill button that matches through the system") - radius matching
   .pill, and the section you are IN goes solid --blue, the same blue as
   every .btn in the system. Hover/open is just a brighter wash. */
.navgroup summary, nav.mainnav a.navdirect, nav.nav-flat a {
  display: inline-block; cursor: pointer; user-select: none; list-style: none;
  color: white; font-size: 0.92rem; line-height: 1.2;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}
.navgroup summary::-webkit-details-marker { display: none; }
.navgroup summary::marker { content: ""; }
.navgroup summary::after { content: " ▾"; font-size: 0.72em; opacity: 0.75; }
.navgroup summary:hover, .navgroup[open] summary,
nav.mainnav a.navdirect:hover, nav.nav-flat a:hover {
  background: rgba(255,255,255,0.24);
}
.navgroup[data-here] summary, nav.mainnav a.navdirect.active, nav.nav-flat a.active {
  background: var(--blue); border-color: var(--blue);
}
.navgroup { position: relative; }
.navmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 250;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  min-width: 200px; padding: 6px 0;
}
nav.mainnav .navmenu a {
  display: block; color: var(--text); padding: 10px 18px; font-size: 0.92rem;
}
nav.mainnav .navmenu a:hover { background: var(--bg); color: var(--text); }
nav.mainnav .navmenu a.active { color: var(--blue); font-weight: 600; }
/* The flat strip is the under-700px stand-in; hidden on bigger screens. */
nav.nav-flat { display: none; }

/* ---- Page tabs: two screens presented as one module (Quotes | Inbox) ---- */
.page-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin: 0 0 16px; }
.page-tabs a {
  padding: 9px 20px; text-decoration: none; color: var(--muted); font-size: 0.95rem;
  border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0;
}
.page-tabs a:hover { color: var(--text); }
.page-tabs a.active {
  background: var(--card); border-color: var(--border); color: var(--navy);
  font-weight: 600; position: relative; top: 2px; padding-bottom: 11px;
}
.count-badge {
  display: inline-block; min-width: 20px; text-align: center;
  background: var(--blue); color: white; border-radius: 10px;
  font-size: 0.78rem; font-weight: 700; padding: 2px 7px; margin-left: 4px;
  vertical-align: 1px;
}
.topbar-settings.active { background: rgba(255,255,255,0.18); border-radius: 4px; padding: 4px 8px; }

/* ---- Incoming-call banner: same yellow as the Ringing pill, because
   ringing is deliberately the loudest thing in the system. Fixed over
   everything - a call doesn't care which screen you were on. ---- */
#callBanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 13px 18px; background: #FEF08A; color: #854D0E;
  box-shadow: 0 2px 12px rgba(0,0,0,0.28);
  animation: callFlash 1.1s ease-in-out infinite;
}
#callBanner[hidden] { display: none; }
#callBanner a { color: #854D0E; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
#callBanner button {
  border: none; background: rgba(0,0,0,0.10); color: #854D0E;
  border-radius: 999px; width: 32px; height: 32px; cursor: pointer;
  font-size: 1rem; line-height: 1; flex: 0 0 auto;
}
#callBanner button:hover { background: rgba(0,0,0,0.18); }
@keyframes callFlash { 0%, 100% { background: #FEF08A; } 50% { background: #FDE047; } }
@media (prefers-reduced-motion: reduce) { #callBanner { animation: none; } }

main { max-width: 1750px; margin: 24px auto; padding: 0 20px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 18px; }
h1 { color: var(--navy); font-size: 1.5rem; margin: 0 0 12px; }
h2 { color: var(--navy); font-size: 1.15rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
tr:hover td { background: #FAFBFD; }

.btn {
  display: inline-block; background: var(--blue); color: white; border: none; padding: 8px 16px;
  border-radius: 6px; text-decoration: none; font-size: 0.9rem; cursor: pointer;
}
.btn:hover { background: var(--navy-dark); }
.btn.secondary { background: white; color: var(--navy); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 0.8rem; }
/* Rounded action buttons - Simon 2026-08-16, first tried on the quote page's
   empty-state "Add Line" / "Add Line From PDF" pair: "this is a theme i want
   through the system". Deliberately a MODIFIER, not a change to the base
   .btn radius - the plain square corners stay everywhere else until each
   module gets its own streamlining pass, so this doesn't silently restyle
   every button in the app in one go. */
.btn.pill { border-radius: 999px; padding: 10px 22px; font-size: 0.95rem; }

/* Queued-file chips - the accumulate-across-multiple-picks file inputs on
   the quote page (Add Line, Add Line From PDF). Each chip is one file
   staged for upload; the × removes just that one. */
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: 0.82rem; color: var(--text); max-width: 260px;
}
.file-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-x {
  border: none; background: rgba(0,0,0,0.08); color: var(--text);
  border-radius: 999px; width: 20px; height: 20px; line-height: 1; padding: 0;
  cursor: pointer; font-size: 0.85rem; flex: 0 0 auto;
}
.file-chip-x:hover { background: rgba(0,0,0,0.16); }

.pill { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.pill.Draft { background: #E5E7EB; color: #374151; }
.pill.Sent { background: #DBEAFE; color: #1E40AF; }
.pill.Won { background: #DCFCE7; color: #15803D; }
.pill.Lost { background: #FEE2E2; color: #B91C1C; }
.pill.Expired { background: #F3E8FF; color: #7E22CE; }
.pill.Open { background: #DBEAFE; color: #1E40AF; }
.pill.Complete { background: #DCFCE7; color: #15803D; }
.pill.Cancelled { background: #FEE2E2; color: #B91C1C; }
.pill.Part-shipped { background: #FEF3C7; color: #92400E; }
.pill.In-progress { background: #FEF3C7; color: #92400E; }
.pill.Part-received { background: #FEF3C7; color: #92400E; }
.pill.Waiting { background: #FEF3C7; color: #92400E; }
.pill.Received { background: #DCFCE7; color: #15803D; }
.pill.Investigating { background: #FEF3C7; color: #92400E; }
.pill.Closed { background: #DCFCE7; color: #15803D; }
.pill.Overdue { background: #FEE2E2; color: #B91C1C; }
.pill.Due-Soon { background: #FEF3C7; color: #92400E; }
.pill.OK { background: #DCFCE7; color: #15803D; }
.pill.Never-calibrated { background: #FEE2E2; color: #B91C1C; }
.pill.In-Stock { background: #DCFCE7; color: #15803D; }
.pill.Low-Stock { background: #FEF3C7; color: #92400E; }

/* Phone calls (Yay.com telephony). Ringing is deliberately the loudest of
   them - it is the only one that means "do something right now". */
.pill.Ringing { background: #FEF08A; color: #854D0E; }
.pill.Answered { background: #DBEAFE; color: #1E40AF; }
.pill.Completed { background: #DCFCE7; color: #15803D; }
.pill.Missed { background: #FEE2E2; color: #B91C1C; }
.pill.Voicemail { background: #F3E8FF; color: #7E22CE; }
.pill.Fax { background: #E0E7FF; color: #3730A3; }
.pill.Out-of-Stock { background: #FEE2E2; color: #B91C1C; }
.pill.ISO-Approved { background: #DCFCE7; color: #15803D; }
.pill.ISO-Pending { background: #FEF3C7; color: #92400E; }
.pill.Internal { background: #E5E7EB; color: #374151; }
.pill.External { background: #FEF3C7; color: #92400E; }

form.stacked label { display: block; margin: 10px 0 4px; font-size: 0.85rem; color: var(--muted); }
form.stacked input, form.stacked select, form.stacked textarea {
  width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.92rem;
}
form.stacked textarea { min-height: 70px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 180px; }

/* Shared "Details" card treatment, used on every module's header card: every
   input/select lands on the same baseline no matter how long its label is or
   whether it wraps, and a darker grey divider separates fields and rows so a
   wide card doesn't read as one undifferentiated jumble. */
.details-card .row { align-items: flex-end; }
.details-card .row > div { min-height: 34px; }
.details-card .row > div:not(:last-child) { border-right: 1px solid var(--border); padding-right: 16px; }
.details-card .row + .row { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.details-card label { display: block; margin: 0 0 4px; font-size: 0.85rem; color: var(--muted); }
.details-card input, .details-card select, .details-card textarea {
  width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.92rem;
}
.details-card input[type="checkbox"] { width: auto; }
.details-card .value { padding: 8px 0; font-size: 0.92rem; }

/* Groups a details-card's fields under a small grey caption (same visual
   language as a table header) instead of one long undifferentiated row -
   used on record view pages that outgrew a single row of fields. */
.details-card .subhead {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--muted);
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border);
}
.details-card .subhead:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.stat-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-tile {
  background: var(--tile); color: white; border-radius: 8px; padding: 16px 20px; min-width: 140px; flex: 1;
  text-align: center;
}
.stat-tile .num {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.8rem; color: var(--tile-num);
  text-decoration: none;
}
.stat-tile .label { font-size: 0.78rem; text-transform: uppercase; color: var(--tile-label); margin-top: 4px; text-decoration: none; }
a.stat-tile, a.stat-tile:hover, a.stat-tile:visited { text-decoration: none; }
a.stat-tile { display: block; transition: transform 0.1s ease, box-shadow 0.1s ease; }
a.stat-tile:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.25); transform: translateY(-1px); }

.flash { background: #DCFCE7; border: 1px solid #86EFAC; color: #15803D; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.error { background: #FEE2E2; border: 1px solid #FCA5A5; color: #B91C1C; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.warning { background: #FEF3C7; border: 1px solid #FCD34D; color: #92400E; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-weight: 500; }

.muted { color: var(--muted); }
.mono { font-family: 'IBM Plex Mono', monospace; }
a.link { color: var(--blue); text-decoration: none; }
a.link:hover { text-decoration: underline; }

/* Saved contact rows (customers/suppliers) - locked by default so a stray
   click can't mis-type over a correct email/phone; "Unlock to Edit" removes
   this. Same visual language as the VAT-number greyout. */
input[readonly] { background: #eee; color: #888; }

/* ==========================================================================
   PHONE / TABLET  (added 2026-08-15)

   Until now this stylesheet had no media queries at all and base.html had no
   viewport tag, so a phone rendered the desktop page shrunk to illegibility.

   The device that drove the sizes is Simon's Galaxy Z Fold 6, which is really
   two devices in one and reports two very different CSS viewports:

     OPEN  (inner 7.6" screen)  ~884 x 774 CSS px - nearly SQUARE, and wide
                                enough to be treated as a small desktop. Almost
                                everything already fits; it just needs tighter
                                padding and a nav that doesn't wrap to 4 rows.
     CLOSED (cover screen)      ~344 x 882 CSS px - narrower than an iPhone SE.
                                Everything has to go single-column here.

   Both breakpoints are plain width queries, so folding and unfolding reflows
   the page live - there is no "phone version" to switch into. The numbers are
   deliberately not set to 884/344 exactly: a breakpoint sitting on the exact
   device width flips back and forth with the scrollbar/toolbar, so each one
   sits well clear of the widths it is meant to catch, and every ordinary phone
   and tablet falls out of the same two rules.
   ========================================================================== */

/* ---- Small-desktop and below: the Fold OPEN, tablets, laptops ---- */
@media (max-width: 1100px) {
  main { margin: 14px auto; padding: 0 14px; }

  /* Swipeable strip rules for the FLAT nav only (it takes over under 700px).
     They must never touch .nav-grouped: overflow-x:auto turns the bar into a
     scroll box, and a scroll box CLIPS anything hanging outside it - the
     dropdown menus would open invisibly. The grouped bar is 7 entries and
     simply wraps on the rare width where it doesn't fit. */
  nav.nav-flat {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.nav-flat::-webkit-scrollbar { display: none; }
  nav.nav-flat a { flex: 0 0 auto; }

  .card { padding: 14px; margin-bottom: 14px; }
  th, td { padding: 6px 8px; }
  table { font-size: 0.86rem; }

  /* Two fields across rather than five squeezed ones. */
  .row > div { min-width: 45%; }
  .stat-tile { min-width: 118px; padding: 14px 12px; }
  .stat-tile .num { font-size: 1.5rem; }
}

/* ---- Phones and the Fold's COVER screen ---- */
@media (max-width: 700px) {
  header.topbar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }
  header.topbar .brand { font-size: 1rem; }
  main { margin: 12px auto; padding: 0 10px; }
  h1 { font-size: 1.25rem; }

  nav.mainnav { padding: 8px; }
  nav.nav-flat a { padding: 12px 18px; }   /* pills stay ≥44px tall to tap */

  /* Phone widths get the flat swipeable strip; dropdowns need room to hang
     and a 344px cover screen has none. Same links, one finger-swipe row. */
  nav.nav-grouped { display: none; }
  nav.nav-flat { display: flex; }

  /* Wide record tables can't be made to fit 344px and are not worth mangling
     into stacked cards - a quote line grid read as a pile of cards is worse
     than one you swipe. So the table keeps its shape and scrolls sideways
     INSIDE its own box; the page itself never scrolls sideways. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* One field per row, full width. */
  .row { gap: 10px; }
  .row > div { min-width: 100%; }
  .details-card .row > div:not(:last-child) {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
  }
  .stat-strip { gap: 10px; }
  .stat-tile { min-width: calc(50% - 5px); }

  /* Fingers, not mouse pointers. */
  .btn { padding: 12px 18px; font-size: 0.95rem; }
  .btn.small { padding: 9px 14px; font-size: 0.85rem; }

  /* 16px is the threshold below which iOS Safari zooms the whole page in when
     a field is focused, and then leaves it zoomed. Costs nothing on Android.
     Deliberately every field, not just the ones inside .stacked/.details-card
     forms - the inline-edit boxes in the quote and order line grids are bare
     inputs in table cells, and they are the ones you actually type into most.
     !important is doing real work here rather than papering over a mistake: a
     media query adds no specificity, so this loses to ".details-card input"
     (0.92rem) above and to the scoped <style> blocks several templates carry.
     Matching all of them by selector would mean repeating this rule in a dozen
     places and re-repeating it every time a page grows a style block. */
  input, select, textarea { font-size: 16px !important; }
}

/* ---- Anything driven by a FINGER, at any width ----

   This one is not a width query on purpose. The Fold's open screen is 884px
   wide, which sails past both breakpoints above and gets the desktop layout -
   correctly, because everything fits. But it is still a touch screen, and the
   desktop layout's Edit/Delete/Set links in the quote line grid come out 23px
   tall, well under the ~40px a fingertip can hit reliably. Width tells you how
   much room there is; it tells you nothing about what is doing the pointing.
   (pointer: coarse is false for a mouse, true for touch, so a desktop PC keeps
   its compact rows.) */
@media (pointer: coarse) {
  .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.small { min-height: 36px; padding: 6px 12px; }

  /* The bare <a>/<button> actions inside table rows - Edit, Delete, Set, View,
     and the per-line Drg (drawing) links. Padding rather than a fixed height,
     so the row grows only as much as it must: 10px either side of an 18px line
     box lands every one of them on 38px. */
  td a, td button, td label { display: inline-block; padding: 10px 6px; }

  /* Inline-edit fields in the line grids, and every form field. */
  input, select, textarea { min-height: 38px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 22px; height: 22px; }

  .navgroup summary, nav.mainnav a.navdirect, nav.nav-flat a { padding: 12px 18px; }  /* pills ≥44px */
  nav.mainnav .navmenu a { padding: 13px 18px; }         /* menu rows ≥44px   */
}

/* Installed to the home screen there is no browser chrome, so the page runs
   under the status bar and the gesture bar. Pad by whatever the device says
   those are - zero on anything that doesn't have them. */
@media (display-mode: standalone) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  main { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}