/* ============================================================================
   NAKAGAWA — shell.css  |  SIDEBAR, TOPBAR, SWITCHERS, PAGE FRAME, GRID, TILES
   ----------------------------------------------------------------------------
   Ported verbatim from SHELL_REFERENCE.html (Phase 0 Part D).

   LOAD ORDER — every page, without exception:
       1. manage/css/tokens.css
       2. manage/css/shell.css    <-- this file, SECOND
       3. everything else

   This file OWNS these selectors. Nothing later may override them:
       .sb .sb-brand .sb-modtag .sb-nav .sb-group .sb-link .sb-empty .sb-foot
       .tb .tb-spacer .crumb
       .dd .dd-btn .dd-menu .dd-item .dd-sep
       .user .avatar .user-meta
       .main .page .page-head
       .btn .btn-primary .btn-ghost
       .card .card-bar .search .count .card-foot .pager
       table.grid .num .wt .pill .pill-on .pill-off .rowact .iconbtn
       .tiles .tile
       .select2-* (theme)
   plus the global reset: * html body a :focus-visible

   The Select2 theme lives HERE, not in a third stylesheet - a third file is one
   more load-order dependency to get wrong. It was moved out of nakagawa.css
   before that file was retired to .old in this part.

   Icons are Font Awesome 4.7 (<i class="fa fa-*">) inside the .ic span, which
   keeps its own sizing so the icon inherits it. tblroles.icon (migration 04)
   stores the fa-* class name.

   RULE: no literal colours. Tokens only.
   ============================================================================ */

/* ============================================================
   shell.css — sidebar, topbar, module switcher, page frame
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-main);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- sidebar ---------- */
.sb{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--shell-800);
  display:flex;flex-direction:column;
  z-index:40;
}
.sb-brand{
  height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
  overflow:hidden;
}
.sb-brand b{
  color:var(--white);font-size:16px;font-weight:600;letter-spacing:.055em;
}
.sb-brand img {
    max-width: 100%;
    height: 25px;
    transition: height .14s ease;
}
body.sb-collapsed .sb-brand img {
    height: 44px;
    width: auto;
    max-width: 56px;
}
.sb-modtag{
  padding:16px 18px 8px;
  color:var(--sidebar-text);
  font-size:11.5px;
  letter-spacing:.03em;
}
.sb-modtag strong{
  display:block;color:var(--white);font-size:14.5px;font-weight:500;letter-spacing:0;
}
.sb-nav{flex:1;overflow-y:auto;padding:4px 0 20px}

/* Group header. Masters will hold 23 pages after Phase 1, so the sidebar
   is built for groups from the start rather than reworked later. */
.sb-group{
  padding:14px 18px 5px;
  color:var(--shell-600);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sb-group:first-child{padding-top:6px}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--shell-600);border-radius:3px}

.sb-link{
  display:flex;align-items:center;gap:11px;
  padding:9px 18px 9px 15px;
  color:var(--sidebar-text);
  font-size:13.5px;
  border-left:3px solid transparent;
  transition:background .12s,color .12s;
}
.sb-link:hover{background:var(--shell-700);color:var(--white)}
.sb-link.is-active{
  background:var(--shell-700);
  color:var(--white);
  border-left-color:var(--accent);
  font-weight:500;
}
.sb-link .ic{width:17px;text-align:center;font-size:14px;opacity:.85;flex-shrink:0}
.sb-link.is-active .ic{color:var(--accent-hover);opacity:1}

.sb-empty{
  margin:10px 18px;padding:14px;
  border:1px dashed var(--shell-600);border-radius:var(--radius);
  color:var(--sidebar-text);font-size:12.5px;line-height:1.5;
}
.sb-foot{
  padding:12px 18px;
  border-top:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.sb-foot a{color:var(--sidebar-text);font-size:12.5px;display:flex;align-items:center;gap:9px}
.sb-foot a:hover{color:var(--white)}

/* ---------- topbar ---------- */
.tb{
  position:fixed;top:0;right:0;left:var(--sidebar-w);height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  padding:0 20px;
  z-index:30;
}
.tb-spacer{flex:1}
.crumb{color:var(--text-muted);font-size:12.5px;white-space:nowrap}
.crumb b{color:var(--text-main);font-weight:500}
.crumb span{margin:0 7px;color:var(--border-strong)}

/* ---------- dropdown: vanilla JS, no Bootstrap ---------- */
.dd{position:relative}
.dd-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 12px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  font-family:var(--font-sans);font-size:13px;color:var(--text-main);
  cursor:pointer;
  transition:border-color .12s;
}
.dd-btn:hover,.dd.open .dd-btn{border-color:var(--accent)}
.dd-btn .ic{color:var(--accent);font-size:13px}
.dd-btn .car{color:var(--text-muted);font-size:10px;margin-left:2px}
.dd-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  min-width:216px;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 12px 28px rgba(var(--shell-900-rgb),.13);
  padding:5px 0;
  z-index:60;
}
.dd-menu.right{left:auto;right:0}
.dd.open .dd-menu{display:block}
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 15px;
  color:var(--text-main);font-size:13px;
  white-space:nowrap;
}
.dd-item:hover{background:var(--bg);color:var(--accent-deep)}
.dd-item .ic{width:16px;text-align:center;color:var(--text-muted);font-size:13px}
.dd-item.is-current{color:var(--accent-deep);font-weight:500;background:var(--accent-tint)}
.dd-item.is-current .ic{color:var(--accent)}
.dd-sep{height:1px;background:var(--border);margin:5px 0}

/* ---------- user chip ---------- */
.user{display:flex;align-items:center;gap:9px}
.avatar{
  width:31px;height:31px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;flex-shrink:0;
}
.user-meta{line-height:1.25}
.user-meta b{display:block;font-size:12.5px;font-weight:500}
.user-meta span{font-size:11px;color:var(--text-muted)}

/* ---------- page frame ---------- */
.main{margin-left:var(--sidebar-w);padding-top:var(--topbar-h);min-height:100vh}
.page{padding:22px 24px 40px;max-width:1500px}
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:18px;
}
.page-head h1{margin:0;font-size:21px;font-weight:500;letter-spacing:-.01em}
.page-head p{margin:3px 0 0;color:var(--text-muted);font-size:13px}

.btn{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 15px;
  border-radius:var(--radius);border:1px solid transparent;
  font-family:var(--font-sans);font-size:13px;font-weight:500;
  cursor:pointer;transition:background .12s,border-color .12s;
}
.btn-primary{background:var(--accent);color:var(--white)}
.btn-primary:hover{background:var(--accent-deep);color:var(--white)}
.btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text-main)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ---------- card ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.card-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.search{
  position:relative;flex:1;max-width:340px;
}
.search input{
  width:100%;height:34px;
  padding:0 12px 0 33px;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:13px;color:var(--text-main);
  background:var(--surface);
}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.search .ic{position:absolute;left:11px;top:9px;color:var(--text-muted);font-size:13px}
.count{margin-left:auto;color:var(--text-muted);font-size:12.5px}
.count b{color:var(--text-main);font-weight:500}

/* ---------- table ---------- */
table.grid{width:100%;border-collapse:collapse}
/* The header is styled through TWO selector sets on purpose.

   ASP.NET GridView does NOT emit <thead>. It renders the header as a plain <tr>
   directly inside <table>, so "table.grid thead th" matched nothing and the
   header lost its background entirely - the sort links then fell through to the
   global a{color:var(--accent)} rule and rendered teal on white. The body was
   unaffected because browsers auto-insert <tbody>, but never <thead>.

   The code-behind now forces a real thead (UseAccessibleHeader +
   HeaderRow.TableSection). The .gridhead fallback below means that if that call
   is ever dropped from a new page, the header still renders correctly instead of
   silently losing its styling. Do not remove one and keep the other. */
table.grid thead th,
table.grid > tbody > tr.gridhead > th,
table.grid > tbody > tr.gridhead > td{
  background:var(--shell-800);
  color:var(--text-invert);
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
  text-align:left;padding:10px 14px;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.06);
}
table.grid thead th:last-child,
table.grid > tbody > tr.gridhead > th:last-child{border-right:none}

table.grid thead th a,
table.grid > tbody > tr.gridhead > th a{
  color:var(--text-invert);display:inline-flex;align-items:center;gap:5px;
}
table.grid thead th a:hover,
table.grid > tbody > tr.gridhead > th a:hover{color:var(--accent-hover)}

/* the header must never pick up the row-hover background */
table.grid > tbody > tr.gridhead:hover > th,
table.grid > tbody > tr.gridhead:hover > td{background:var(--shell-800)}

table.grid thead th .sort,
table.grid > tbody > tr.gridhead > th .sort{opacity:.45;font-size:9px}

/* ---- report TOTAL and SUBTOTAL rows -------------------------------------
   Every report page since migration 24 sets CssClass = "grid-total" on the
   footer, and NOTHING HAS EVER DEFINED IT - PurchaseReports, FxDifferences,
   ProductionReports, ArReports, ApReports and LedgerReports all set a class
   that did nothing, so a totals row has been rendering as an ordinary row on
   every one of them.  Found while adding the inventory reports.  Tokens only
   (SECTION 5B): no literal colour. */
table.grid tr.grid-total > td,
table.grid tfoot tr > td{
  background:var(--accent-tint);
  font-weight:600;
  border-top:2px solid var(--accent);
  border-bottom:none;
}
table.grid tr.grid-subtotal > td{
  background:var(--bg);
  font-weight:600;
  border-top:1px solid var(--border-strong);
}
table.grid tbody td{
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  vertical-align:middle;
}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid tbody tr:hover{background:var(--bg)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.wt{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-main)}
.wt i{color:var(--text-muted);font-style:normal;font-size:11.5px;margin-left:2px}

.pill{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:11.5px;font-weight:500;
}
.pill-on{background:var(--success-tint);color:var(--success)}
.pill-off{background:var(--danger-tint);color:var(--danger)}
/* .pill-ok, .pill-warn, .pill-danger and .note HAD NEVER BEEN DEFINED - migration 61.
   Only .pill-on and .pill-off existed, while 15 pages emit pill-warn, 10 emit
   pill-danger, 9 emit pill-ok and 20 wrap explanatory copy in .note - so every one
   of those has been rendering as a plain grey pill or an unstyled div.  Found while
   checking RULE 11.2 item 2 for AuditLog.aspx.  The third instance of this class of
   defect: grid-total was undefined until Phase 10 Part A, msg-warn until migration
   60.  Tokens only - SECTION 5B. */
.pill-ok{background:var(--success-tint);color:var(--success)}
.pill-warn{background:var(--warning-tint);color:var(--warning)}
.pill-danger{background:var(--danger-tint);color:var(--danger)}
.pill-info{background:var(--info-tint);color:var(--info)}
.note{background:var(--info-tint);border-left:3px solid var(--info);padding:10px 14px;border-radius:var(--radius);font-size:13px;color:var(--text-main);margin:0 0 14px}

.rowact{display:flex;gap:6px}
.iconbtn{
  width:28px;height:28px;border-radius:var(--radius);
  border:1px solid var(--border-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:12px;cursor:pointer;
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-deep)}
.iconbtn.danger:hover{border-color:var(--danger);color:var(--danger)}

.card-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;border-top:1px solid var(--border);
  color:var(--text-muted);font-size:12.5px;
}
.pager{display:flex;gap:5px}
.pager a{
  min-width:29px;height:29px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  color:var(--text-main);font-size:12.5px;
}
.pager a:hover{border-color:var(--accent);color:var(--accent-deep)}
.pager a.on{background:var(--accent);border-color:var(--accent);color:var(--white)}

/* ---------- metric tiles (dashboard) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.tile{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:14px 16px;
}
.tile .lbl{color:var(--text-muted);font-size:12px}
.tile .val{font-size:23px;font-weight:500;margin-top:3px;font-variant-numeric:tabular-nums}
.tile .val.muted{color:var(--border-strong)}
.tile .sub{font-size:11.5px;color:var(--text-muted);margin-top:2px}

/* ---------- Select2 theme (moved out of nakagawa.css before it is retired) ---------- */
.select2-container--default .select2-selection--single{
  height:34px;border:1px solid var(--border-strong);border-radius:var(--radius);
  background:var(--surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:32px;padding-left:11px;color:var(--text-main);font-size:13px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:32px}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--accent);
}
.select2-dropdown{
  border:1px solid var(--border);border-top:2px solid var(--accent);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 12px 28px rgba(var(--shell-900-rgb),.13);
}
.select2-container--default .select2-results__option{font-size:13px;padding:8px 12px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--accent-tint);color:var(--accent-deep);
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid var(--border-strong);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:13px;padding:6px 9px;
}

/* ---------- filters, messages and the add/edit form ----------
   SHELL_REFERENCE.html shows only the list view. These four groups have no
   reference equivalent but are needed by every list page's toolbar filters,
   message banner and view2 form. Added in step 0.2 so that step 0.3 can retire
   nakagawa.css without breaking the forms. Tokens only, styled to match the
   reference. */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- clickable tiles + empty state (dashboards, step 0.3) ---------- */
a.tile{display:block;text-decoration:none;color:var(--text-main);transition:border-color .12s,box-shadow .12s}
a.tile:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(var(--shell-900-rgb),.07);color:var(--text-main)}
.tile-ic{
  width:38px;height:38px;border-radius:var(--radius);
  background:var(--accent-tint);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:11px;
}
.tile .nm{font-size:14.5px;font-weight:500}
.empty{
  padding:26px 18px;text-align:center;
  color:var(--text-muted);font-size:13px;
  border:1px dashed var(--border-strong);border-radius:var(--radius);
}

.rowact-cell{width:1%;white-space:nowrap}
.form-inner{display:flex;flex-wrap:wrap;gap:16px;flex:1 1 100%}

.filter{display:flex;flex-direction:column;gap:4px;min-width:150px}
.filter label{
  font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin:0;
}
.filter select,.filter input{
  height:34px;padding:0 10px;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:13px;color:var(--text-main);background:var(--surface);
}
.filter select:focus,.filter input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}

.msg{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin:0 0 14px}
.msg:empty{display:none}
.msg-ok{background:var(--success-tint);color:var(--success);border:1px solid var(--success)}
.msg-err{background:var(--danger-tint);color:var(--danger);border:1px solid var(--danger)}
/* .msg-warn and .msg-info HAD NEVER BEEN DEFINED - migration 60.  StockEmail.aspx,
   UserRoles.aspx, the read-only banner and six code-behinds all emit `msg msg-warn`,
   so every warning in this project has been rendering as a plain unstyled box while
   the tint tokens for it sat unused.  The same class of defect as `grid-total`,
   which was undefined until Phase 10 Part A.  Tokens only - SECTION 5B. */
.msg-warn{background:var(--warning-tint);color:var(--warning);border:1px solid var(--warning)}
.msg-info{background:var(--info-tint);color:var(--info);border:1px solid var(--info)}

.form{display:flex;flex-wrap:wrap;gap:16px;padding:16px}
.fld{display:flex;flex-direction:column;gap:5px;flex:1 1 220px;min-width:200px}
.fld.wide{flex:1 1 100%}
.fld.half{flex:1 1 45%}
.fld label{
  font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin:0;
}
.fld label .req{color:var(--danger);margin-left:2px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:8px 10px;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:13px;color:var(--text-main);background:var(--surface);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.fld .hint{font-size:11.5px;color:var(--text-muted)}
.fld-radio{display:inline-flex;align-items:center;gap:16px;padding-top:5px}
.fld-radio label{text-transform:none;font-size:13px;font-weight:400;color:var(--text-main)}
.form-foot{
  display:flex;gap:10px;padding:13px 16px;
  border-top:1px solid var(--border);background:var(--bg);
}
.sub-head{
  font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);margin:6px 0 0;padding:0 16px;flex:1 1 100%;
}

/* ---------- sidebar collapse toggle (step 0.7) ----------
   SHELL_REFERENCE.html was not updated with this block, so the rules below are
   written from the four-point spec, not copied from the reference. Behaviour is
   as specified: 60px icon-only rail, labels hidden, choice persisted.

   The whole collapse works by overriding ONE token. .sb, .tb and .main are all
   already sized from var(--sidebar-w), so redefining it on body.sb-collapsed
   moves all three together and nothing can drift out of step. */
body.sb-collapsed{ --sidebar-w:60px; }

.sb-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  color:var(--text-muted);font-size:14px;cursor:pointer;
  transition:border-color .12s,color .12s;
}
.sb-toggle:hover{border-color:var(--accent);color:var(--accent-deep)}

/* the sidebar animates with the rail so the collapse does not jump */
.sb{transition:width .14s ease}
.tb,.main{transition:left .14s ease,margin-left .14s ease}

/* ---- collapsed state: icons only ---- */
body.sb-collapsed .sb-brand{padding:0;justify-content:center;overflow:hidden;}
body.sb-collapsed .sb-brand b{font-size:0}
body.sb-collapsed .sb-brand b::first-letter{font-size:16px}

body.sb-collapsed .sb-modtag{display:none}
body.sb-collapsed .sb-group{
  /* keep the grouping rhythm without the words */
  height:1px;padding:0;margin:9px 14px;overflow:hidden;
  background:var(--shell-600);color:transparent;
}
body.sb-collapsed .sb-link{
  justify-content:center;
  padding-left:0;padding-right:0;
  border-left-width:0;border-right:3px solid transparent;
}
body.sb-collapsed .sb-link.is-active{
  border-left-width:0;border-right-color:var(--accent);
}
body.sb-collapsed .sb-link .lbl,
body.sb-collapsed .sb-foot .lbl{display:none}
body.sb-collapsed .sb-link .ic,
body.sb-collapsed .sb-foot .ic{width:auto}
body.sb-collapsed .sb-empty{display:none}
body.sb-collapsed .sb-foot{padding:12px 0;text-align:center}
body.sb-collapsed .sb-foot a{justify-content:center;gap:0}

@media(max-width:900px){
  /* the rail is already hidden at this width - the toggle would do nothing */
  .sb-toggle{display:none}
  body.sb-collapsed{ --sidebar-w:0px; }
}

@media(max-width:900px){
  :root{--sidebar-w:0px}
  .sb{transform:translateX(-236px)}
  .tb{left:0}
  .main{margin-left:0}
}

/* ==========================================================================
   SIDEBAR WORDMARK AS A LINK        Phase Polish Part A
   --------------------------------------------------------------------------
   .sb-brand became an <a> so the one thing on every screen that looks like a
   home button now behaves like one.  Bootstrap 3.3.7 is still loaded and its
   a:hover sets a blue and an underline, so both are overridden here - shell.css
   loads LAST and wins that tie (Section 4).
   ========================================================================== */
a.sb-brand{
  text-decoration:none;
  transition:background .12s ease;
}
a.sb-brand:hover,
a.sb-brand:focus{
  text-decoration:none;
  background:var(--shell-700);
}
a.sb-brand:hover b{ color:var(--white); }

/* ==========================================================================
   DASHBOARD CHARTS                  Phase Polish Part A
   --------------------------------------------------------------------------
   Deliberately the .card shell the rest of the system uses - same surface,
   same border, same radius - so a chart reads as part of the page rather than
   as something bolted on.  Tokens only; not one literal colour (Section 5B).
   ========================================================================== */
.charts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:14px;
  margin-bottom:22px;
}
.chart-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 16px 10px;
  min-width:0;              /* or a canvas refuses to shrink inside the grid */
}
.chart-card h3{
  margin:0 0 2px;
  font-size:13.5px;font-weight:500;
  color:var(--text-main);
}
.chart-card .chart-sub{
  font-size:11.5px;color:var(--text-muted);
  margin:0 0 10px;
}
/* The canvas is sized by its wrapper, never by an attribute: Chart.js reads
   the parent box, and a fixed height here is what makes it responsive without
   growing a pixel on every redraw. */
.chart-box{ position:relative; height:230px; }
.chart-box canvas{ display:block; width:100% !important; height:100% !important; }

/* A chart drawn from a worked example, not from the client's own figures.
   Amber rather than neutral, and it says so in words - a sample that looks
   like a reading is worse than no chart. */
.chart-sample{
  background:var(--warning-tint);
  border:1px solid var(--warning);
  border-radius:var(--radius);
  padding:9px 12px;
  font-size:12px;color:var(--text-main);
  margin-bottom:14px;
}
.chart-sample i{ color:var(--warning);margin-right:7px; }
.chart-card.is-sample{ border-style:dashed; }

/* Cost withheld by the permission matrix.  NOT the sample treatment - these
   are different facts and must not look alike. */
.chart-locked{
  height:230px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;text-align:center;
  color:var(--text-muted);font-size:12.5px;
  background:var(--bg);
  border-radius:var(--radius);
}
.chart-locked i{ font-size:21px;opacity:.5; }

@media (max-width:640px){
  .charts{grid-template-columns:1fr}
  .chart-box{height:200px}
}

/* ---------------------------------------------------------------------------
   FORM SECTIONS - the standard structure for a master form.
   Established Phase 13 Part 1 (Items.aspx). Every later part reuses these
   four classes rather than inventing its own layout.

   Why they exist: .fld is flex:1 1 220px, so a long form wraps into a ragged
   column whose labels and controls do not line up. .grid2 puts the fields on a
   fixed two-column grid instead, so labels sit at one width and controls at
   another, with even vertical rhythm.

   Usage:
       <div class="form">
         <div class="form-sec">
           <div class="sec-head">Identification</div>
           <div class="grid2">
             <div class="fld">...</div>
             <div class="fld wide">...</div>      full width
             <div class="fld num">...</div>       right-aligned number
           </div>
         </div>
       </div>
   Tokens only. No literal colour.
   --------------------------------------------------------------------------- */
.form-sec{flex:1 1 100%}
.sec-head{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-main);margin:0 0 12px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.form-sec + .form-sec .sec-head{margin-top:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;align-items:start}
.grid2 .fld{flex:none;min-width:0}
.grid2 .fld.wide{grid-column:1 / -1}
.fld.num input{text-align:right}

@media (max-width:760px){
  .grid2{grid-template-columns:1fr}
}

/* ===========================================================================
   ALL-PAGES UI SWEEP (Phase 13)                          tokens only, no hex
   ===========================================================================

   FIX 2 - FILTER AND FORM INPUT TEXT IS ALWAYS VISIBLE.
   One rule, every page. It exists because the pages do not agree on where the
   class goes: 63 list pages wrap the search box in <div class="search">, 8 put
   CssClass="search" on the INPUT itself (so the .search input rule never
   matched them), and 4 retired hr_* pages use Bootstrap's .form-control. Every
   shape is named here, and shell.css loads last so it wins each tie.

   -webkit-text-fill-color is not decoration: Chrome and Safari paint autofilled
   text with their own colour and ignore `color`, which is one real way typed
   text goes invisible. Setting both makes the token win either way.           */

.card input[type="text"],
.card input[type="search"],
.card input[type="date"],
.card input[type="number"],
.card input[type="password"],
.card textarea,
.card select,
.search input,
input.search,
.filter input,
.filter select,
.fld input,
.fld select,
.fld textarea,
.card .form-control{
  color:var(--text-main);
  background:var(--surface);
  -webkit-text-fill-color:var(--text-main);
}

/* placeholders stay readable but subordinate */
.card input::placeholder,
.card textarea::placeholder,
input.search::placeholder{color:var(--text-muted);opacity:1}

/* the 8 pages that put the class on the input never picked up the geometry the
   wrapper rule carries, so give it to them here rather than editing 8 pages */
input.search{
  height:34px;padding:0 10px;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:13px;
}

/* ---------------------------------------------------------------------------
   FIX 4 (appearance half) - ACTIVE / BLOCK AS A SEGMENTED TOGGLE.

   Purely CSS, so it reaches all 26 pages that use .fld-radio without editing
   one of them. The markup is already uniform: ASP.NET renders a RadioButton as
   <input type="radio"> followed by its <label>, none of them carries a
   CssClass, and every group in the project is a two-option pair - so
   `input:checked + label` is safe everywhere.

   Replacing the CONTROL rather than its appearance would mean editing 52 pages
   and is deliberately NOT done here - see the report.
   --------------------------------------------------------------------------- */
.fld-radio{
  display:inline-flex;align-items:stretch;gap:0;
  margin-top:5px;padding:0;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  overflow:hidden;
}
.fld-radio input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.fld-radio label{
  margin:0;padding:6px 15px;cursor:pointer;
  font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--text-muted);background:var(--surface);
  border-left:1px solid var(--border);
  transition:background .15s ease,color .15s ease;
}
.fld-radio label:first-of-type{border-left:none}
.fld-radio label:hover{background:var(--bg)}
.fld-radio input[type="radio"]:checked + label{
  background:var(--accent);color:var(--white);border-left-color:var(--accent);
}
.fld-radio input[type="radio"]:focus-visible + label{
  box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.45);
}

/* Phase 13 Part 24 - .fld-radio also wraps single CHECKBOXES on 13 pages (base
   currency, default counter, VAT, import / export, head office ...). The
   segmented-toggle box above is meant for the two-option Active / Block radio
   pair only, so a span holding a checkbox goes back to a plain tick + label.
   :has() is the scope; a browser without it keeps the toggle look - no worse
   than before. Tokens only. */
.fld-radio:has(input[type="checkbox"]){
  align-items:center;gap:8px;margin-top:0;padding-top:5px;
  border:none;border-radius:0;overflow:visible;
}
.fld-radio:has(input[type="checkbox"]) label{
  padding:0;border-left:none;background:transparent;
  color:var(--text-main);font-size:13px;font-weight:400;
}
.fld-radio:has(input[type="checkbox"]) label:hover{background:transparent}

/* Phase 13 Part 5 - a second card stacked under the first, without an inline margin. Tokens only. */
.card.card-gap{margin-top:18px}
.cell-sub{font-size:11px;color:var(--text-muted)}
/* Phase 13 Part 6 - item image thumbnails. Tokens only. */
img.thumb{display:block;max-width:64px;max-height:48px;border:1px solid var(--border);border-radius:var(--radius)}
img.thumb-lg{display:block;margin-top:8px;max-width:160px;max-height:120px;border:1px solid var(--border);border-radius:var(--radius)}

/* Phase 13 Part 27 - the Items grid: a narrow row-number column, and a barcode
   cell carrying the number above its own Code 39 bars.  The bars are an inline
   SVG filled with currentColor, so the ink is the token on .bc-svg and there is
   no hardcoded colour and no font to install. */
table.grid th.sno,
table.grid td.sno{width:34px;min-width:34px;max-width:34px;padding-left:6px;padding-right:6px}
.bc-no{display:block;font-size:11.5px;letter-spacing:.5px;color:var(--text-muted)}
.bc-svg{display:block;height:30px;margin-top:3px;color:var(--text-main)}
/* Phase 13 Part 8 - a document totals block, replacing inline styles. Tokens only. */
.totals{max-width:420px;margin-left:auto;font-size:13px}
.totals .trow{display:flex;justify-content:space-between;padding:4px 0}
.totals .trow.tgrand{padding:8px 0;border-top:1px solid var(--border);font-size:15px;font-weight:600}
.totals .trow.tmuted{color:var(--text-muted);font-size:11.5px}

/* Phase 13 Part 29 - the first modal in this project: a server-rendered overlay,
   shown by making an asp:Panel visible. No JavaScript, no third-party dialog, and
   no inline style. Tokens only. */
.modal-wrap{
  position:fixed;inset:0;z-index:900;
  background:rgba(var(--shell-900-rgb),.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow:auto;
}
.modal-card{
  width:100%;max-width:960px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:16px 18px 18px;
}
.modal-card .card-bar:first-child{margin-bottom:4px}
@media (max-width:760px){
  .modal-wrap{padding:16px 10px}
  .modal-card{padding:12px 12px 14px}
}