/* portal.css — the portal's one shared stylesheet. Loaded by portal/templates/base.html.

   TWO PARTS, and the split is the point:

   PART 1 — the global rules that used to live in base.html's inline <style> block, moved here
   VERBATIM (6 Oct 2026). They apply to every page exactly as before. Their comments are kept
   because they record measurements and decisions; nothing in this part was re-tuned.

   PART 2 — the layout standard (docs/SPEC_LAYOUT.md, Kostas 6 Oct 2026). Every rule is scoped
   under `body.ly`. base.html sets `ly` on every page EXCEPT the driver screens, which set
   `{% set legacy_layout = true %}` and therefore render exactly as they did before this file
   existed (rule 1 of the standard). Do not add an unscoped rule to Part 2. */

/* ══ PART 1 — global rules, moved verbatim from base.html ═════════════════════════════════ */
:root {
  --arto-green:       #c0b561;
  --arto-green-dark:  #a89e4e;
  --arto-dark:        #231f20;
}
body                           { background: #fcfcfc; font-family: 'Merriweather Sans', sans-serif; color: var(--arto-dark); }
.navbar                        { background: var(--arto-green) !important; }
.navbar .nav-link,
.navbar .navbar-brand          { color: #fff !important; }
.navbar .nav-link:hover        { color: rgba(255,255,255,.8) !important; }
.navbar .nav-link.active,
.navbar .nav-link.fw-semibold  { color: #fff !important; }
.navbar-toggler                { border-color: rgba(255,255,255,.5); }
.navbar-toggler-icon           { filter: brightness(0) invert(1); }
.navbar-brand img              { height: 40px; }

/* Dropdown menu */
.navbar .dropdown-menu         { border: none; border-radius: 8px;
                                 box-shadow: 0 4px 20px rgba(35,31,32,.15);
                                 padding: 6px 0; min-width: 200px; }
.navbar .dropdown-item         { font-size: .9rem; padding: .45rem 1.1rem;
                                 color: var(--arto-dark); }
.navbar .dropdown-item:hover   { background: rgba(192,181,97,.12); color: var(--arto-dark); }
.navbar .dropdown-item.active  { background: var(--arto-green); color: #fff; font-weight: 600; }
/* Keep dropdown toggle arrow white */
.navbar .dropdown-toggle::after { border-top-color: rgba(255,255,255,.85); }
/* Active group: underline the toggle label */
.navbar .nav-link.group-active  { border-bottom: 2px solid rgba(255,255,255,.7);
                                  padding-bottom: calc(.5rem - 2px); }

/* Buttons */
.btn-primary, .btn-primary:active {
  background: var(--arto-green); border-color: var(--arto-green);
  color: #fff; font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus             { background: var(--arto-green-dark); border-color: var(--arto-green-dark); color: #fff; }
.btn-outline-secondary         { border-color: var(--arto-green); color: var(--arto-dark); }
.btn-outline-secondary:hover   { background: var(--arto-green); border-color: var(--arto-green); color: #fff; }

/* Cards */
.card                          { border-radius: 10px; border: none;
                                 box-shadow: 0 2px 14px rgba(35,31,32,.08); }
.stand-hdr                     { background: var(--arto-green); color: #fff;
                                 border-radius: 10px 10px 0 0;
                                 padding: .55rem 1rem; }
.badge-tmrw                    { background: var(--arto-green); color: #fff; }
table thead th                 { background: #f0f0ee; font-size: .88rem; }

/* ── Mobile (≤767px) ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Prevent iOS auto-zoom on input focus */
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], select, textarea {
    font-size: 16px !important;
  }
  /* Touch-friendly tap targets */
  .btn        { min-height: 42px; }
  .btn-sm     { min-height: 36px; }
  .btn-xs     { min-height: 30px; }
  /* More breathing room in nav collapse */
  .navbar-nav .nav-link     { padding: .55rem .25rem; }
  .navbar-nav .dropdown-item { padding: .65rem 1.2rem; font-size: .95rem; min-height: 42px; display: flex; align-items: center; }
  /* Tighter page heading */
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
  /* Cards: reduce shadow and padding on mobile */
  .card         { border-radius: 8px; box-shadow: 0 1px 6px rgba(35,31,32,.08); }
  .card-body    { padding: .75rem; }
  .stand-hdr    { padding: .45rem .75rem; font-size: .9rem; }
  /* Tables: allow horizontal scroll, no forced white-space wrap */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* Flash messages */
  .alert { font-size: .9rem; }
  /* Navbar brand: slightly smaller logo on small phones */
  .navbar-brand img { height: 32px; }
  /* Navbar toggler: bigger tap area */
  .navbar-toggler { padding: .4rem .7rem; }
  /* Stack page header actions below title on tiny screens */
  .page-hdr-actions { width: 100%; justify-content: flex-start !important; }
}

/* ── Tablet (768px–991px) ──────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .btn     { min-height: 38px; }
  .btn-sm  { min-height: 32px; }
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="password"], select {
    font-size: 15px !important;
  }
}

/* ── Desktop (≥992px) ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
  /* Slightly denser nav items on wide screens */
  .navbar-nav { gap: .15rem; }
  .navbar-nav .nav-link { font-size: .82rem; padding: .4rem .55rem; }
  /* Tighter table density */
  .table-sm td, .table-sm th { padding: .22rem .5rem; }
  /* Card header padding */
  .stand-hdr { padding: .5rem 1.1rem; }
}

/* ── Large desktop (≥1400px) ──────────────────────────────────────────── */
@media (min-width: 1400px) {
  .navbar-nav .nav-link { font-size: .85rem; padding: .4rem .65rem; }
}
/* ── Shell B — the left sidebar (WORKORDER_04, step 1) ─────────────────────
   Inert for every role the rollout has not switched: nothing below matches unless
   base.html rendered the `sidebar_on` branch, so an unswitched session is unaffected
   by this block entirely. Mobile-first — the rail is an off-canvas drawer by default
   and only becomes a fixed column, with the collapse affordance, at ≥992px.

   PALETTE — WHITE RAIL, GOLD AS AN ACCENT ONLY (owner, 2026-08-14). The rail was a solid
   olive-gold fill; it is now white, and gold appears only as the active-item accent, in the
   logo and in the alert badges. Two consequences that are not taste:
     · the brand gold `--arto-green` (#c0b561) measures 2.10:1 on white, so it can never be
       a TEXT colour here. `--sb-accent` (#7A6A22) is the text-safe gold — 5.37:1 on white,
       5.00:1 on the #FBF7E6 active tint.
     · `.sb-sec-btn` is position:sticky and its background must stay OPAQUE (it is why that
       rule carried a background at all). White, not transparent.

   TEXT CONTRAST IS NOT THE WHOLE CHECK, and the parts that are not text are where this
   recolour actually broke things. A CONTROL'S BOUNDARY has its own floor (WCAG 1.4.11,
   3:1): on white the brief's #EAE8E1 hairline measures 1.23:1 and the #F7F6F2 fill 1.08:1,
   so the search box and the two head buttons stopped reading as controls at all — on the
   olive rail they were white boxes on gold and unmissable. They therefore take #93918A as
   their edge (3.15:1, still one of the owner's own tokens). That is a DELIBERATE DEVIATION
   from the brief's "search box border #EAE8E1", recorded here because it is the one place
   this file does not do what the brief literally says.

   Ratios are computed and pinned in `db/tests/test_sidebar_theme.py`, which also holds the
   one measured exception kept as specified: the placeholder at 2.92:1. The NARROW TOP BAR
   (`.sb-bar`) deliberately stays gold with white text — it is the page's bar, not the rail,
   and it is what the unswitched navbar looks like to everyone else.

   NO `--sb-*` PALETTE VARIABLES. A first cut declared eight and then wrote the hex literal
   into every rule, so editing a token would have changed nothing on screen. One source of
   truth: the literals, pinned by the test. */
:root { --sb-w: 250px; --sb-w-min: 62px; }

/* The box-shadow is not decoration. White rail on the #fcfcfc body is 1.03:1 and the 1px
   border is 1.20:1 against it; expanded, the content cards carry their own edges and it
   survives, but COLLAPSED to 62px it is nine icons floating in the page margin — and the
   collapsed state persists in localStorage and is re-applied before first paint, so
   whoever collapses it once lives there. Elevation rather than a darker rule: reaching 3:1
   with a border needs ~#949188, which draws as a hard line down every page. */
.sb { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); z-index: 1040;
      background: #FFFFFF; color: #2E2C26; display: flex; flex-direction: column;
      border-right: 1px solid #EAE8E1; box-shadow: 1px 0 3px rgba(0,0,0,.05);
      transform: translateX(-100%);
      transition: transform .2s ease, width .15s ease, visibility .2s ease; }
body.sb-open .sb { transform: none; }
/* `transform` moves the rail off screen but leaves every link FOCUSABLE — tabbing on a
   phone walked ~90 invisible items before reaching the page. `visibility` removes it from
   the tab order and the accessibility tree; the desktop rule below restores it. */
@media (max-width: 991.98px) {
  .sb              { visibility: hidden; }
  body.sb-open .sb { visibility: visible; }
}
/* THE RAIL'S SPACE IS TAKEN OUT OF THE BODY, NOT OFF THE CONTAINER. `.sb-main` is a
   `container-fluid` — width:100% — so a left MARGIN made every desktop page exactly one
   rail wider than the window: measured 1530px in a 1280px viewport, which put the right
   250px of every table (status, total, actions) off screen. Padding the body shrinks the
   content box instead, and the rail is position:fixed so it does not move. */
body.sb-shell { transition: padding-left .15s ease; }

.sb-head { display: flex; align-items: center; gap: .5rem; padding: .8rem .7rem;
           border-bottom: 1px solid #EAE8E1; }
/* Unchanged on purpose: "keep the existing brand gold for the logo". RENDERED on both
   grounds rather than read off the file — logo.svg is a traced SVG carrying an <image> and
   a feColorMatrix, not flat ink, and it draws as a WHITE DISC medallion with a black ring,
   black "ARTO" and gold wheat. On olive the disc popped; on white the disc disappears and
   the mark survives on its black ring. It reads. */
.sb-brand img { height: 34px; }
/* #93918A, not the #EAE8E1 hairline — a control needs a perceivable boundary. See the
   1.4.11 note at the top of this block. */
.sb-collapse, .sb-close { margin-left: auto; width: 28px; height: 28px; line-height: 1;
               cursor: pointer; background: #F7F6F2;
               border: 1px solid #93918A; color: #6E6C64; border-radius: 6px; }
/* Collapse is a DESKTOP affordance. Below the breakpoint the drawer is either open or
   shut, so a control that only sets a desktop-only class is a control that lies. */
.sb-collapse { display: none; }
.sb-close    { display: inline-flex; align-items: center; justify-content: center;
               min-width: 44px; min-height: 44px; }
.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .35rem 0 1rem; }

.sb-sec-btn, .sb-settings { display: flex; align-items: center; gap: .6rem; width: 100%;
                            text-align: left; background: none; border: 0; color: #2E2C26;
                            font-weight: 600;
                            padding: .55rem .8rem; font-size: .88rem; cursor: pointer;
                            text-decoration: none; min-height: 42px; }
/* Sticky so the label of the list you are scrolling does not leave with it — Sales is 25
   items and its heading scrolled away after four. Needs an opaque background (it was
   `none`); the `.active` rule below still wins because it comes after. */
.sb-sec-btn { position: sticky; top: 0; z-index: 1; background: #FFFFFF; }
.sb-sec-btn:hover, .sb-settings:hover { background: #F7F6F2; color: #2E2C26; }
/* The active pair. The tint alone is 1.07:1 against white — near-invisible — so the state
   is carried by the GOLD TEXT plus a 3px inset accent bar, not by the fill.
   THE INSET IS LOAD-BEARING, NOT DECORATION: collapsed to 62px the label is hidden and the
   tint contributes nothing, so the bar is the entire "you are here" on the icon rail.
   `_sidebar.html` sets `.sb-sec-btn.active` server-side whenever the current page is one of
   the section's items, so the icon strip does receive it. Do not remove it. */
.sb-sec-btn.active, .sb-settings.active { background: #FBF7E6; color: #7A6A22; font-weight: 600;
                                          box-shadow: inset 3px 0 0 #7A6A22; }
.sb-ico   { flex: 0 0 22px; width: 22px; text-align: center; font-size: 1rem; }
.sb-lbl   { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-caret { color: #6E6C64; transition: transform .15s ease; }
.sb-sec.open > .sb-sec-btn .sb-caret { transform: rotate(90deg); }
/* Transparent, not a tint: on the olive rail the darker panel was what separated the items
   from their heading; on white that job is done by the indent and the lighter item colour. */
.sb-list { list-style: none; margin: 0; padding: 0; display: none; background: transparent; }
.sb-sec.open .sb-list { display: block; }
.sb-item  { display: block; padding: .45rem .8rem .45rem 2.35rem; font-size: .83rem;
            color: #6E6C64; font-weight: 400; text-decoration: none; min-height: 38px; }
/* The text moves too. The fill alone is 1.08:1 — an 8% shift, gone on a bakery laptop at
   half brightness — and Sales carries four adjacent "Orders — …" labels where the hover
   band is the last check before clicking. `.sb-sec-btn:hover` kept its colour change; only
   the sub-item had lost it. `.sb-item.active` follows this rule at equal specificity, so
   hovering the current row still reads as gold. */
.sb-item:hover  { background: #F7F6F2; color: #2E2C26; }
.sb-item.active { background: #FBF7E6; color: #7A6A22; font-weight: 600;
                  box-shadow: inset 3px 0 0 #7A6A22; }

.sb-filter { padding: .5rem .6rem .35rem; }
.sb-filter input { font-size: .82rem; background: #F7F6F2; border: 1px solid #93918A;
                   color: #2E2C26; }
.sb-filter input::placeholder { color: #93918A; }
.sb-empty { font-size: .78rem; color: #6E6C64; padding: .5rem .9rem; margin: 0; }
.sb-personal { border-top: 1px solid #EAE8E1; padding-top: .2rem; }
.sb-foot { border-top: 1px solid #EAE8E1; padding: .55rem .8rem;
           display: flex; align-items: center; gap: .5rem; }
.sb-who  { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb-who-name { font-size: .8rem; font-weight: 600; color: #2E2C26;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Was opacity:.75 over white text. On a white rail an opacity that low lands at ~3:1, so the
   role chip states its colour instead of inheriting a faded one. */
.sb-who-role { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
               color: #6E6C64; }
.sb-logout { margin-left: auto; color: #6E6C64; text-decoration: none; font-size: .8rem;
             display: flex; align-items: center; gap: .35rem; }
.sb-logout:hover { color: #2E2C26; text-decoration: underline; }

/* Narrow: a top bar with a burger, and a scrim behind the open drawer. */
.sb-bar { display: flex; align-items: center; gap: .7rem; background: var(--arto-green);
          padding: .5rem .8rem; position: sticky; top: 0; z-index: 1035; margin-bottom: .75rem; }
.sb-burger { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
             color: #fff; border-radius: 6px; padding: .1rem .55rem; font-size: 1.15rem;
             line-height: 1.35; cursor: pointer; }
.sb-bar-out { margin-left: auto; color: #fff; text-decoration: none; font-size: .8rem;
              background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
              border-radius: 6px; padding: .15rem .55rem; }
.sb-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1039; }
@media (max-width: 991.98px) {
  /* 44px targets for one-handed use in a bakery. NARROW ONLY: the desktop 38/42px density
     is right for an 87-item rail and inflating it there would cost a section per screen. */
  .sb-burger  { padding: .35rem .75rem; min-height: 44px; min-width: 44px; }
  .sb-bar-out { min-height: 44px; display: inline-flex; align-items: center; }
  .sb-item    { min-height: 44px; padding-top: .6rem; padding-bottom: .6rem; }
  .sb-sec-btn { min-height: 48px; }
  .sb-logout  { min-height: 44px; }
}

@media (min-width: 992px) {
  .sb { transform: none; }
  .sb-collapse { display: inline-block; }
  .sb-close    { display: none; }
  body.sb-shell { padding-left: var(--sb-w); }
  .sb-main  { padding-top: 1rem; }
  .sb-scrim { display: none !important; }
  /* COLLAPSED TO ICONS. Every rule is scoped to this breakpoint on purpose: on a phone the
     drawer is already hidden, so a collapsed rail there would be a second hidden state with
     no way back to the labels. */
  html.sb-collapsed .sb   { width: var(--sb-w-min); }
  html.sb-collapsed body.sb-shell { padding-left: var(--sb-w-min); }
  html.sb-collapsed .sb-filter,
  html.sb-collapsed .sb-brand,
  html.sb-collapsed .sb-lbl,
  html.sb-collapsed .sb-caret,
  html.sb-collapsed .sb-list,
  html.sb-collapsed .sb-who  { display: none; }
  /* (0,3,1) — beats `.sb-sec.open .sb-list` at (0,3,0). Without this the OPEN rule wins
     and a collapsed rail renders its item labels wrapped over 62px. */
  html.sb-collapsed .sb-sec.open .sb-list { display: none; }
  html.sb-collapsed .sb-head { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed .sb-collapse { margin-left: 0; }
  html.sb-collapsed .sb-sec-btn,
  html.sb-collapsed .sb-settings,
  html.sb-collapsed .sb-foot { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed .sb-logout { margin-left: 0; }
}

/* ── Print: the page IS the report ────────────────────────────────────────
   Printed/PDF output shows only the content block, full width. Per-template
   print rules hide `nav.navbar` but predate the sidebar shell, so a switched
   session printed the rail as a 250px column beside every report table. The
   rail's space is a padding-left on body.sb-shell, and the ≥992px media query
   that sets it still matches on landscape paper — hence the !important, which
   also outweighs the (0,2,2) `html.sb-collapsed body.sb-shell` rule. */
@media print {
  .sb, .sb-bar, .sb-scrim, .navbar,
  .visually-hidden-focusable { display: none !important; }
  body.sb-shell { padding-left: 0 !important; }
  .sb-main { padding-top: 0 !important; }
  .container-fluid { max-width: 100% !important;
                     padding-left: 0 !important; padding-right: 0 !important; }
}

/* ══ PART 2 — the layout standard (body.ly only) ══════════════════════════════════════════ */

/* THE ONE WIDTH SETTING. `.page-wrap` is the main content wrapper and the navbar's inner row
   in base.html; both read --maxw. Driver screens (no `ly`) keep the 1,600px they always had;
   every other screen fills the space beside the sidebar up to 1,680px and centres beyond. */
:root   { --maxw: 1600px; }
body.ly { --maxw: 1680px; }
.page-wrap { max-width: var(--maxw); margin: 0 auto; }

body.ly {
  --ly-olive: #BDB56A; --ly-olive-d: #8a8344; --ly-cream: #f7f2e2;
  --ly-ink: #1f1f1f; --ly-muted: #6b6b6b; --ly-line: #e4e1d6; --ly-bg: #faf9f5;
  --ly-red: #c8373b; --ly-green: #3f7a4f; --ly-green-bg: #e3f0e5;
  --ly-amber: #b86e00; --ly-amber-bg: #fbefd2; --ly-brown: #9a6a12; --ly-blue: #2457c5;
  background: var(--ly-bg);
}

/* ── Tables: figures never wrap (rule 5) ─────────────────────────────────────────────────
   Every cell is one line: dates, amounts, order and invoice numbers. A column of long text
   (names, addresses, emails) is marked `.wrap` and may break. base.html also marks, at load
   and whenever a script adds rows, any unmarked cell holding more than 32 characters of
   spaced text — so a screen not yet converted cannot be pushed off the page by one long
   hotel name. A cell can opt out of that with `.nowrap`. */
body.ly .page-wrap table td,
body.ly .page-wrap table th { white-space: nowrap; }
body.ly .page-wrap table td.wrap,
body.ly .page-wrap table th.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; }

/* ── Page header: title, one line saying what this is, the buttons ─────────────────────── */
.ly .ly-head { display: flex; justify-content: space-between; align-items: flex-start;
               gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ly .ly-head > div:first-child { min-width: 0; }
.ly .ly-head h1 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.25; }
.ly .ly-sub { margin: 2px 0 0; color: var(--ly-muted); font-size: .88rem; }
.ly .ly-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.ly .ly-btns .btn { white-space: nowrap; padding: 6px 12px; font-size: .9rem; min-height: 0; }
.ly .ly-btns .btn.ly-gear { padding: 6px 10px; }
.ly .ly-more { display: none; }           /* the phone's "More" — see the ≤760px block */

/* ── Panel: a white box with the gold header bar ───────────────────────────────────────── */
.ly .ly-panel { background: #fff; border: 1px solid var(--ly-line); border-radius: 10px;
                margin-bottom: 16px; }
.ly .ly-panel > .ly-hd { background: var(--ly-olive); color: #fff; font-weight: 600;
                         padding: 9px 14px; border-radius: 9px 9px 0 0; display: flex;
                         justify-content: space-between; align-items: center; gap: 10px;
                         flex-wrap: wrap; }
.ly .ly-panel > .ly-hd a { color: #fff; }
.ly .ly-panel > .ly-bd { padding: 14px; }
.ly .ly-panel > .ly-bd.flush { padding: 0; }

/* ── Tiles: label (what the number is), value, source line (where it comes from) ──────── */
.ly .ly-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
                gap: 12px; margin-bottom: 16px; }
.ly .ly-tile { border: 1px solid var(--ly-line); border-radius: 8px; padding: 12px 14px;
               background: #fff; min-width: 0; }
.ly .ly-tile .l { font-size: 12px; color: var(--ly-muted); text-transform: uppercase;
                  letter-spacing: .03em; }
.ly .ly-tile .v { font-size: 22px; font-weight: 700; margin: 2px 0; white-space: nowrap;
                  font-variant-numeric: tabular-nums; }
.ly .ly-tile .s { color: var(--ly-muted); font-size: 12.5px; }
.ly .ly-tile.edge-green { border-left: 4px solid var(--ly-green); }
.ly .ly-tile.edge-red   { border-left: 4px solid var(--ly-red); }
.ly .ly-tile.edge-brown { border-left: 4px solid var(--ly-brown); }
.ly .ly-tile.edge-blue  { border-left: 4px solid var(--ly-blue); }
.ly .ly-tile.edge-grey  { border-left: 4px solid #777; }

/* ── Page tabs (an underline bar). Works on <a>, <button> and Bootstrap .nav-link ───────── */
.ly .ly-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ly-line);
               margin: 0 0 12px; padding: 0; list-style: none; overflow-x: auto;
               flex-wrap: nowrap; scrollbar-width: none; }
.ly .ly-tabs li { flex: none; }
.ly .ly-tabs a, .ly .ly-tabs button, .ly .ly-tabs .nav-link {
  display: block; padding: 8px 12px; white-space: nowrap; color: var(--ly-blue);
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  text-decoration: none; font-size: .92rem; }
.ly .ly-tabs .active, .ly .ly-tabs [aria-selected="true"] {
  color: var(--ly-ink); font-weight: 600; border-bottom-color: var(--ly-olive-d); }

/* ── Table box: white, ruled, scrolls sideways when it must ────────────────────────────── */
.ly .ly-tw { overflow-x: auto; background: #fff; border: 1px solid var(--ly-line);
             border-radius: 8px; -webkit-overflow-scrolling: touch; }
.ly .ly-tw > .table { margin: 0; }
.ly .ly-tw .table th { font-size: 12.5px; color: var(--ly-muted); font-weight: 600;
                       padding: 8px 10px; border-bottom: 1px solid var(--ly-line);
                       background: #fcfbf7; }
.ly .ly-tw .table td { padding: 9px 10px; border-bottom: 1px solid #f0eee6; vertical-align: middle; }
.ly .ly-tw .table tr:last-child td { border-bottom: 0; }
.ly .num { text-align: right; font-variant-numeric: tabular-nums; }
.ly .t-red { color: var(--ly-red); } .ly .t-amb { color: var(--ly-amber); }
.ly .t-mut { color: var(--ly-muted); }
.ly a.lk { color: var(--ly-blue); text-decoration: none; }
.ly a.lk:hover { text-decoration: underline; }
.ly .ly-hint { display: none; font-size: 12px; color: var(--ly-muted); text-align: right;
               margin: 6px 4px 0; }

/* ── Order line items (a form's items table) ───────────────────────────────────────────── */
.ly .ly-items th { font-size: 12.5px; color: var(--ly-muted); font-weight: 600; padding: 8px 10px;
                   border-bottom: 1px solid var(--ly-line); background: #fcfbf7; }
.ly .ly-items td { padding: 8px 10px; border-bottom: 1px solid #f0eee6; vertical-align: middle; }

/* ── A list you act on: a table on a laptop, stacked cards on a phone ──────────────────── */
.ly .ly-cards { display: none; }
.ly .ly-card { display: block; background: #fff; border: 1px solid var(--ly-line);
               border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; color: inherit;
               text-decoration: none; }
.ly .ly-card .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ly .ly-card .r + .r { margin-top: 2px; }
.ly .ly-card .t { font-weight: 600; }
.ly .ly-card .m { color: var(--ly-muted); font-size: .88rem; }

/* ── Two-column body and two-column form ───────────────────────────────────────────────── */
.ly .ly-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
                gap: 16px; align-items: start; }
.ly .ly-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ly .ly-formgrid .full { grid-column: 1 / -1; }
.ly .ly-formgrid label, .ly .ly-label { display: block; font-size: 12.5px; color: var(--ly-muted);
                                        margin-bottom: 3px; }
.ly .ly-note { font-size: 12.5px; color: var(--ly-muted); margin-top: 8px; }
.ly .ly-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.ly .ly-kv > dt, .ly .ly-kv > dd { padding: 9px 10px; border-bottom: 1px solid #f0eee6; margin: 0; }
.ly .ly-kv > dt { color: var(--ly-muted); font-weight: 400; padding-right: 22px; }
.ly .ly-kv > dd { overflow-wrap: anywhere; }

/* ── Filters: search stays on a phone, the rest go behind "Filters" ────────────────────── */
.ly .ly-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.ly .ly-fbtn { display: none; }
.ly .ly-filters .ly-keep input[type="search"] { width: 20rem; max-width: 100%; }

/* ══ Phone (≤760px) — rule 3 of the standard ══════════════════════════════════════════════ */
@media (max-width: 760px) {
  .ly .ly-head h1 { font-size: 19px; }
  /* Title and buttons share the row, as in every phone mockup: the title block takes what
     the buttons leave and its subtitle wraps. */
  .ly .ly-head { gap: 10px; }
  .ly .ly-head > div:first-child { flex: 1 1 9rem; }
  .ly .ly-head .ly-btns { flex: none; flex-wrap: nowrap; }
  /* Page buttons: the main action stays, the rest go under "More". */
  .ly .ly-btns .ly-sec { display: none !important; }
  .ly .ly-more { display: inline-block; }
  .ly .ly-grid2, .ly .ly-formgrid { grid-template-columns: minmax(0, 1fr); }
  .ly .ly-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ly .ly-tile .v { font-size: 18px; }
  .ly .ly-tile { padding: 10px 12px; }
  /* A list you act on becomes cards. */
  .ly .ly-listtable { display: none !important; }
  .ly .ly-cards { display: block; }
  /* A big report table keeps its table, scrolls, and pins its first column. */
  /* `.pin` on the scrolling box. Only the FIRST header row's first cell is pinned: a grouped
     header's second row starts with a data column, not the label column. */
  .ly .pin tbody td:first-child, .ly .pin tfoot td:first-child,
  .ly .pin thead tr:first-child th:first-child {
    position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--ly-line); }
  .ly .pin thead tr:first-child th:first-child { background: #fcfbf7; }
  .ly .pin td.wrap:first-child { min-width: 8.5rem; max-width: 10rem; }
  .ly .ly-hint { display: block; }
  /* Filters: search stays, the rest open from the Filters button. */
  .ly .ly-filters > :not(.ly-keep):not(.ly-fbtn) { display: none; }
  .ly .ly-filters.open > :not(.ly-keep):not(.ly-fbtn) { display: flex; width: 100%; }
  .ly .ly-filters .ly-keep { flex: 1 1 auto; min-width: 0; }
  .ly .ly-filters .ly-keep input[type="search"] { width: auto; flex: 1 1 auto; }
  .ly .ly-btns .btn { min-height: 42px; }
  .ly .ly-fbtn { display: inline-block; }
  /* Order line items stack: the product on its own line, qty × price = total under it. */
  .ly .ly-items thead { display: none; }
  .ly .ly-items tr { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
                     border-bottom: 1px solid #f0eee6; padding: 6px 4px; }
  .ly .ly-items td { border: 0 !important; padding: 4px 6px; }
  .ly .ly-items td:first-child { grid-column: 1 / -1; }
}

/* ── The narrow-screen top bar (sidebar roles): white, ☰ · page title · logo ───────────── */
.ly .sb-bar { background: #fff; border-bottom: 1px solid var(--ly-line); gap: .5rem; }
.ly .sb-bar .sb-burger { background: none; border: 0; color: var(--ly-ink); font-size: 1.5rem;
                         padding: 0 .4rem; }
.ly .sb-bar-title { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 700;
                    font-size: 15px; color: var(--ly-ink); white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
.ly .sb-bar-logo img { height: 30px; display: block; }

@media print {
  .ly .ly-more, .ly .ly-fbtn { display: none !important; }
}