/* ==========================================================
   GuestLog — Shared Stylesheet  v1.0
   Location: /public_html/assets/app.css
   ========================================================== */

/* ---- Variables ---- */
:root {
  --bg:      #F5F6F8;
  --surface: #fff;
  --border:  #E1E4E9;
  --text:    #171A21;

  /* Short aliases used in dashboard / guests / transport / hotel */
  --ts: #666D7A;  --tm: #9AA0AB;
  --ac: #2B6E63;  --ab: #E5F0EC;
  --wa: #B4740E;  --wb: #FBF0DD;
  --su: #1E8E5A;  --sb: #E5F5EC;
  --er: #C0392B;  --eb: #FDECEA;
  --r:  10px;     --rs: 7px;

  /* Long aliases used in event / users / audit */
  --text-secondary: #666D7A;  --text-muted:   #9AA0AB;
  --accent:         #2B6E63;  --accent-bg:    #E5F0EC;
  --warning:        #B4740E;  --warning-bg:   #FBF0DD;
  --success:        #1E8E5A;  --success-bg:   #E5F5EC;
  --error:          #C0392B;  --error-bg:     #FDECEA;
  --radius:  10px;  --radius-sm: 7px;
  --shadow:  0 1px 3px rgba(0,0,0,.06);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* ---- Base ---- */
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px; height: 56px;
  position: sticky; top: 0; z-index: 50;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px;
  text-decoration: none; color: var(--text);
}
/* .bm = short alias, .brand-mark = long alias */
.brand-mark, .bm {
  width: 30px; height: 30px; background: var(--ac);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 15px;
}
/* .tnav = short alias, .topbar-nav = long alias */
.topbar-nav, .tnav { display: flex; gap: 2px; margin-left: 24px; }
.topbar-nav a, .tnav a {
  font-size: 13px; padding: 6px 12px; border-radius: var(--rs);
  color: var(--ts); text-decoration: none; font-weight: 500;
}
.topbar-nav a:hover, .tnav a:hover { background: var(--bg); color: var(--text); }
.topbar-nav a.active, .tnav a.act  { background: var(--ab); color: var(--ac); }

.spacer { flex: 1; }

/* .uinfo = short alias, .user-info = long alias */
.user-info, .uinfo { font-size: 13px; color: var(--ts); display: flex; align-items: center; gap: 10px; }
.user-info .name,  .user-info .uname,  .user-info .un,
.uinfo .name,      .uinfo .uname,      .uinfo .un { font-weight: 500; color: var(--text); }

/* .rb = short alias, .role-badge = long alias */
.role-badge, .rb {
  font-size: 11px; padding: 2px 8px; border-radius: 99px;
  background: var(--ab); color: var(--ac); font-weight: 500;
}
/* .lo = short alias, .btn-logout = long alias */
.btn-logout, .lo {
  font-size: 12px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: var(--rs);
  background: var(--surface); color: var(--ts); text-decoration: none;
}

/* ================================================================
   PAGE LAYOUT
   ================================================================ */
.page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 60px; }
/* Data pages (tables and lists) fill the screen rather than sitting in a
   fixed reading column. On anything wider than the old 1100px cap that was
   several hundred pixels of dead space down each side, while the table
   itself still had to scroll for its own columns.

   Nothing here is keyed to a device, and it deliberately isn't: max-width is
   a CEILING, so any screen narrower than it simply fills. A tablet held
   upright (~810px) or a small laptop is already below the ceiling and is
   therefore untouched by this — which is why portrait needs no special
   casing here and stays exactly as it was for the separate UI planned for
   it. The ceiling only ever applies to a large monitor, where it stops a
   table row growing so wide that the eye loses the row between the first
   column and the last.

   Side padding is deliberately left at the inherited 24px so the page title
   lines up with the topbar's own 24px — the topbar has always been full
   width, so a narrow centred column below it never lined up with it. */
.page.wide { max-width: 1860px; }
/* .ph = short alias, .page-head = long alias */
.page-head, .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title, .pt { font-size: 20px; font-weight: 600; }
.page-subtitle, .ps { font-size: 13px; color: var(--ts); margin-top: 2px; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  border-radius: var(--rs); cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none;
}
.btn:hover { background: var(--bg); }
/* .btn.p = short alias, .btn.primary = long alias */
.btn.primary, .btn.p { background: var(--ac); color: #fff; border-color: var(--ac); }
.btn.primary:hover, .btn.p:hover { opacity: .9; }
/* .btn.d = short alias, .btn.danger = long alias */
.btn.danger, .btn.d { background: var(--eb); color: var(--er); border-color: #f5c6c6; }
.btn.danger:hover, .btn.d:hover { opacity: .9; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.warning { background: var(--wb); color: var(--wa); border-color: #e8c97a; }
.btn.warning:hover { opacity: .9; }
.btn.success { background: var(--sb); color: var(--su); border-color: #9fd4b4; }
.btn.success:hover { opacity: .9; }
.btn.at { background: var(--ab); color: var(--ac); border-color: var(--ac); }

/* ================================================================
   ALERTS
   ================================================================ */
/* .al = short alias, .alert = long alias */
.alert, .al { padding: 10px 14px; border-radius: var(--rs); font-size: 13px; margin-bottom: 16px; }
.alert.error,   .al.e  { background: var(--eb); color: var(--er); }
.alert.success, .al.ok { background: var(--sb); color: var(--su); }

/* ================================================================
   STAT GRID
   ================================================================ */
/* .sg = short alias, .stat-grid = long alias */
.stat-grid, .sg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
/* Explicit column overrides (event.php) */
.stat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
/* .sc = short, .stat-card = long */
.stat-card, .sc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow);
}
.stat-label, .sl { font-size: 11px; color: var(--ts); margin-bottom: 4px; }
.stat-value, .sv { font-size: 22px; font-weight: 600; }
.stat-sub        { font-size: 11px; color: var(--tm); margin-top: 3px; }

/* ================================================================
   CARD
   ================================================================ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.card-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 500; color: var(--ts);
}
.card-body { padding: 14px 16px; }
/* Bolder card header variant (hotel) */
.ch {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.section-label { font-size: 12px; font-weight: 500; color: var(--ts); margin: 20px 0 10px; }

/* ================================================================
   TABLES
   ================================================================ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 9px 10px;
  color: var(--ts); font-weight: 500; font-size: 12px;
  border-bottom: 1px solid var(--border); background: var(--bg); white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }

/* ================================================================
   PILLS
   ================================================================ */
.pill { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 500; display: inline-block; white-space: nowrap; }
/* Guest record status */
.pill.complete  { background: var(--sb); color: var(--su); }
.pill.missing   { background: var(--wb); color: var(--wa); }
.pill.hold      { background: #F0F1F4;  color: var(--ts); }
.pill.cancelled { background: var(--eb); color: var(--er); }
/* Transport leg status */
.pill.pending    { background: var(--wb); color: var(--wa); }
.pill.ongoing    { background: var(--ab); color: var(--ac); }
.pill.finished   { background: var(--sb); color: var(--su); }
.pill.assigned   { background: #EEF2FF;  color: #4F46E5; }
.pill.unassigned { background: #F0F1F4;  color: var(--ts); }
/* Hotel / occupancy */
.pill.in     { background: var(--sb); color: var(--su); }
.pill.out    { background: var(--ab); color: var(--ac); }
.pill.single { background: #F0F1F4;  color: var(--ts); }
.pill.double { background: #EEF2FF;  color: #4F46E5; }
/* Generic / system */
.pill.success  { background: var(--sb); color: var(--su); }
.pill.warning  { background: var(--wb); color: var(--wa); }
.pill.neutral  { background: #F0F1F4;  color: var(--ts); }
.pill.error    { background: var(--eb); color: var(--er); }
.pill.active   { background: var(--sb); color: var(--su); }
.pill.inactive { background: #F0F1F4;  color: var(--ts); }
.pill.admin       { background: #EEF2FF; color: #4F46E5; }
.pill.staff       { background: var(--ab); color: var(--ac); }
.pill.super_admin { background: #FFF7ED; color: #C2410C; }

/* ================================================================
   MODAL
   ================================================================ */
/* .mo = short alias, .modal-overlay = long alias */
.modal-overlay, .mo {
  position: fixed; inset: 0; background: rgba(15,17,21,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.hidden { display: none !important; }
.modal-overlay.hidden, .mo.hidden { display: none; }
/* .md = short alias, .modal = long alias */
.modal, .md {
  background: var(--surface); border-radius: var(--r); width: 100%; max-width: 560px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2); max-height: 90vh;
  display: flex; flex-direction: column;
}
.modal.sm, .md.sm { max-width: 380px; }
.modal.lg         { max-width: 640px; }
.modal.xl         { max-width: 780px; max-height: 92vh; }
/* .mh = short alias, .modal-head = long alias */
.modal-head, .mh {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-head h2, .mh h2 { font-size: 15px; font-weight: 600; }
/* Form inside a flex-column modal must participate in the layout */
.modal > form, .md > form { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* .mb = short alias, .modal-body = long alias */
.modal-body, .mb { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; }
/* .mf = short alias, .modal-foot = long alias */
.modal-foot, .mf {
  padding: 16px 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
}
/* .mc = short alias, .modal-close = long alias */
.modal-close, .mc { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ts); line-height: 1; }
.modal-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-tabs button {
  font-size: 13px; padding: 10px 14px; border: none;
  border-bottom: 2px solid transparent; background: none;
  cursor: pointer; font-family: inherit; color: var(--ts); font-weight: 500; margin-bottom: -1px;
}
.modal-tabs button.active { color: var(--ac); border-bottom-color: var(--ac); }

/* ================================================================
   FORM FIELDS
   ================================================================ */
/* .fi = short alias, .field = long alias */
.field, .fi { margin-bottom: 14px; }
.field label, .fi label { display: block; font-size: 12px; font-weight: 500; color: var(--ts); margin-bottom: 4px; }
.field input,    .fi input,
.field select,   .fi select,
.field textarea, .fi textarea {
  width: 100%; padding: 9px 12px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--rs);
  background: var(--surface); color: var(--text);
}
.field input:focus,    .fi input:focus,
.field select:focus,   .fi select:focus,
.field textarea:focus, .fi textarea:focus { outline: none; border-color: var(--ac); }
.field textarea, .fi textarea { resize: vertical; min-height: 72px; }
/* .fgr = short alias, .field-row = long alias */
.field-row, .fgr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 2-col form grid used inside modals (transport / guests detail) */
.fg     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fg .s2 { grid-column: span 2; }
.hint              { font-size: 11px; color: var(--tm); margin-top: 3px; }
.required, .req    { color: var(--er); }

/* ================================================================
   EVENT SUB-HEADER  (guests / transport / hotel pages)
   ================================================================ */
.ev-head  { margin-bottom: 8px; }
.ev-title { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.ev-meta  { font-size: 12px; color: var(--ts); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* Inline status chip used alongside ev-meta */
.spill { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; display: inline-block; }

/* ================================================================
   EVENT SUB-TABS  (guests / transport / hotel pages)
   ================================================================ */
.etabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; margin-top: 6px; }
.etabs a {
  font-size: 13px; font-weight: 500; padding: 10px 16px;
  text-decoration: none; color: var(--ts); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.etabs a:hover { color: var(--text); }
.etabs a.act   { color: var(--ac); border-bottom-color: var(--ac); }
/* Unsettled-count badge on a tab (Review Queue). Red because it is work
   waiting on a person, not a neutral total. */
.tabdot {
  display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px;
  background: var(--er); color: #fff; border-radius: 99px;
  font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center;
  vertical-align: 1px;
}

/* ================================================================
   BACK LINK
   ================================================================ */
/* .bk = short alias, .back-link = long alias — a real bordered button now,
   not plain text with an arrow in front of it, so it reads as clickable
   the same way every other button on the page does. */
.back-link, .bk {
  font-size: 12.5px; font-weight: 500; color: var(--ts); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px;
  padding: 7px 14px; border-radius: var(--rs); border: 1px solid var(--border);
  background: var(--surface);
}
.back-link:hover, .bk:hover { color: var(--ac); border-color: var(--ac); background: var(--ab); }

/* ================================================================
   FILTER BAR  (guests / transport / hotel pages)
   ================================================================ */
.fb  { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.si  {
  padding: 7px 10px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--rs);
  background: var(--surface); color: var(--text); width: 200px;
}
.si:focus { outline: none; border-color: var(--ac); }
.dw  { position: relative; }
.db  {
  padding: 7px 12px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--rs);
  background: var(--surface); color: var(--text);
  cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.db:hover { background: var(--bg); }
.db.hs    { border-color: var(--ac); color: var(--ac); background: var(--ab); }
.dm {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs);
  box-shadow: 0 4px 16px rgba(0,0,0,.1); min-width: 180px; z-index: 30; display: none; padding: 4px 0;
}
.dm.open { display: block; }
.dm .di  { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.dm .di:hover { background: var(--bg); }
.dm .di input { accent-color: var(--ac); width: 14px; height: 14px; flex-shrink: 0; }
.dhr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.sa-row button {
  width: 100%; padding: 6px 14px; font-size: 12px; text-align: left;
  border: none; background: none; cursor: pointer; color: var(--ac); font-family: inherit; font-weight: 500;
}
.sa-row button:hover { background: var(--bg); }

/* ================================================================
   BULK ACTION BAR  (guests / transport pages)
   ================================================================ */
.bab {
  display: none; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--ab); border: 1px solid var(--ac);
  border-radius: var(--rs); margin-bottom: 10px; font-size: 13px;
}
.bab.vis  { display: flex; }
.bab select { padding: 5px 10px; font-family: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: var(--rs); }
.sbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--ts); }

/* ================================================================
   CLICKABLE TABLE ROWS  (guests / transport / hotel)
   ================================================================ */
tr.dr              { cursor: pointer; }
tr.dr:last-child td { border-bottom: none; }
tr.dr:hover td     { background: #f0f7f5; }
tr.dr.sel  td      { background: #e8f3f0; }
tr.dr.locked td    { opacity: .55; }
/* Status row tint (guests list) — kept visible even when selected/hovered,
   since the whole point is to make these guests stand out at a glance. */
tr.dr.dr-cancelled td { background: #FDECEA; }
tr.dr.dr-hold td       { background: #FFF3E0; }
tr.dr.dr-cancelled:hover td, tr.dr.dr-cancelled.sel td { background: #FBDFDC; }
tr.dr.dr-hold:hover td, tr.dr.dr-hold.sel td           { background: #FFE9CC; }

/* ================================================================
   PERMISSIONS TABLE  (users page)
   ================================================================ */
.perm-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.perm-table th { padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); font-weight: 500; text-align: center; }
.perm-table th:first-child { text-align: left; }
.perm-table td { padding: 6px 10px; border: 1px solid var(--border); text-align: center; }
.perm-table td:first-child { text-align: left; font-weight: 500; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty { text-align: center; padding: 60px; color: var(--ts); }
.empty .ico, .empty .icon { font-size: 36px; margin-bottom: 12px; }
.empty h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty p  { font-size: 13px; }

/* ================================================================
   FOOTER
   ================================================================ */
footer { text-align: center; font-size: 11px; color: var(--tm); margin-top: 40px; }

/* ================================================================
   PASSWORD TOGGLE  (show-password checkbox)
   ================================================================ */
.show-pw { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--ts); cursor: pointer; user-select: none; }
.show-pw input[type=checkbox] { width: auto; margin: 0; cursor: pointer; }

/* ================================================================
   ROLE CHECKBOXES  (multi-select event roles)
   ================================================================ */
.role-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.check-label input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }

/* ================================================================
   PHONE PREFIX INPUT  (shared across pages with phone fields)
   ================================================================ */
.ph-inp { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--rs); overflow:hidden; background:var(--surface); }
.ph-pre { padding:9px 10px; font-size:13px; color:var(--text-secondary); background:var(--bg); border-right:1px solid var(--border); white-space:nowrap; font-weight:500; }
.ph-inp input { flex:1; border:none; outline:none; padding:9px 10px; font-family:inherit; font-size:13px; background:transparent; color:var(--text); min-width:0; }
.ph-inp:focus-within { border-color:var(--ac); }

/* ================================================================
   PAGINATION  (.pg / .pg-info)
   ================================================================ */
.pg     { display:flex; gap:4px; margin-top:16px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pg a, .pg span { padding:6px 12px; border:1px solid var(--border); border-radius:var(--rs); font-size:13px; text-decoration:none; color:var(--ts); }
.pg a:hover { background:var(--bg); }
.pg .cur    { background:var(--ac); color:#fff; border-color:var(--ac); }
.pg-info    { font-size:13px; color:var(--ts); margin-top:10px; text-align:center; }

/* ================================================================
   USER METRIC CARDS  (.um-stats / .um-stat)
   ================================================================ */
.um-stats { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.um-stat  { flex:1; min-width:110px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 20px; }
.um-stat-num { font-size:26px; font-weight:700; color:var(--text); line-height:1; }
.um-stat-lbl { font-size:12px; color:var(--text-secondary); margin-top:4px; font-weight:500; }
.um-stat.um-active   .um-stat-num { color:#16a34a; }
.um-stat.um-disabled .um-stat-num { color:#dc2626; }

/* ================================================================
   SORTABLE TABLE HEADERS
   ================================================================ */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { background:rgba(0,0,0,.03); }
th.sortable .sort-ic { font-size:10px; color:var(--text-secondary); margin-left:4px; opacity:.4; }
th.sortable.asc .sort-ic, th.sortable.desc .sort-ic { opacity:1; }
th.sortable.asc  .sort-ic::after { content:'↑'; }
th.sortable.desc .sort-ic::after { content:'↓'; }
th.sortable:not(.asc):not(.desc) .sort-ic::after { content:'⇅'; }

/* ── Status x Category matrix (guest list) ──────────────────────
   Replaces the old .sg/.sc/.sv stat cards. Rendered by renderMatrix()
   in guests.php. Counts every guest in the event (NOT filtered) so it
   stays a stable navigation panel; the selected cell is highlighted
   and clicking it again clears the filter. */
.mtx-wrap { margin-bottom: 20px; overflow-x: auto; }
.mtx {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
  min-width: 380px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.mtx th, .mtx td {
  padding: 11px 18px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.mtx thead th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ts);
  background: var(--bg);
  padding-top: 10px;
  padding-bottom: 10px;
}
.mtx thead th.mlbl { text-align: left; }
.mtx .mlbl {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  padding-right: 28px;
}
.mtx tbody td:not(.mlbl) { font-size: 14px; font-weight: 600; }
/* Totals: quieter background, heavier figure — reads as a summary edge */
.mtx .mtot { font-weight: 700; background: var(--bg); }
.mtx tr.msum td { font-weight: 700; background: var(--bg); }
.mtx tr.msum td:not(.mlbl) { font-size: 14px; }
.mtx tbody tr:last-child td { border-bottom: none; }
.mtx tbody tr:hover td:not(.mtot) { background: rgba(43,110,99,.035); }
.mtx .mz { color: var(--ts); opacity: .4; font-weight: 400; }

/* Only non-zero cells navigate — filtering to an empty set is a dead end */
.mtx .mclick { cursor: pointer; }
.mtx .mclick:hover { background: rgba(43,110,99,.12) !important; color: var(--ac); }
/* Currently-selected cell. Click it again to clear. */
.mtx .mon {
  background: var(--ac) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.mtx .mon:hover { background: var(--ac) !important; color: #fff !important; opacity: .9; }

.mdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 9px; vertical-align: middle;
}
.mdot.ok   { background: #1E8E5A; }
.mdot.warn { background: #B4801F; }
.mdot.hold { background: #C2751A; }
.mdot.canc { background: #B3261E; }

/* ── Date fields: display DD-MMM-YYYY (26-Aug-2026) ───────────────────────
   Chrome renders <input type="date"> from the machine's locale — 26-08-2026
   on an India-configured PC — and offers no way to override that.

   The input itself is deliberately left ALONE: same name, same YYYY-MM-DD
   value, same calendar picker, same validation. Nothing that reads or submits
   it can tell the difference. Only its visible text is covered by a label in
   the app's own format. Rebuilding the control instead would have meant
   redoing submission and validation for every date in the app.

   See initDateFields() in assets/app.js. */
.gdatew { position: relative; display: block; }
.gdatew.gdatew-inline { display: inline-block; vertical-align: middle; }

/* Hide the browser's own text — never the calendar button. */
.gdatew > input[type=date] { color: transparent; }
.gdatew > input[type=date]::-webkit-datetime-edit { color: transparent; }
.gdatew > input[type=date]::-webkit-calendar-picker-indicator { opacity: 1; }

/* While focused the user is typing into the real control, so let the
   browser's own editor show through and take our label out of the way. */
.gdatew.gdate-edit > input[type=date] { color: inherit; }
.gdatew.gdate-edit > input[type=date]::-webkit-datetime-edit { color: inherit; }
.gdatew.gdate-edit > .gdatel { display: none; }

/* right offset keeps a long date clear of the calendar icon */
.gdatel {
  position: absolute; left: 0; top: 0; bottom: 0; right: 28px;
  display: flex; align-items: center;
  color: var(--text); pointer-events: none;
  white-space: nowrap; overflow: hidden;
}
.gdatew.gdate-empty > .gdatel { color: var(--ts); }