/* ---- Inter (self-hosted, served from /public/fonts) ----
   Variable fonts: one file per style covers every weight 100–900, so no
   per-weight downloads. font-display:swap shows fallback text immediately then
   swaps to Inter once loaded (no invisible-text flash). */
@font-face {
  font-family: 'Inter';
  src: url('/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}:root {
  /* Brand/Theme Colors */
  --theme-primary:         #1d4e74; /* Primary brand color (Top bar background) */
  --theme-primary-hover:   #acd4f2; /* Hover state for primary */
  --theme-primary-active:  #0e273b; /* Clicked/Active state for primary */
  --theme-primary-ink:     #ffffff; /* Text on primary color */

  --theme-secondary:       #1d6fb8; /* Secondary brand color (Primary buttons, links) */
  --theme-secondary-hover: #195e9c; /* Hover state for secondary */
  --theme-secondary-active:#134a7a; /* Clicked/Active state for secondary */
  --theme-secondary-ink:   #ffffff; /* Text on secondary color */

  --theme-tertiary:        #0f9d58; /* Tertiary/Accent color (FABs, Highlights, Badges) */
  --theme-tertiary-hover:  #0c7e46; /* Hover state for tertiary */
  --theme-tertiary-ink:    #ffffff; /* Text on tertiary color */

  /* Structural Surfaces & Borders */
  --surface-main:          #eef2f6; /* Slate app canvas background for high contrast */
  --surface-card:          #ffffff; /* Card/Container background */
  --surface-hover:         #f8fafc; /* Hover state for rows/menus */
  --surface-selected:      #e2e8f0; /* Active selected rows/tabs */
  --surface-disabled:      #f1f5f9; /* Disabled form inputs background */
  
  --border-color:          #cbd5e1; /* Card borders, dividers, splitters */
  --focus-ring:            rgba(29, 111, 184, 0.4); /* Outlines for tabs/accessibility */

  /* Typography */
  --text-main:             #0f172a; /* High-contrast main body text */
  --text-muted:            #64748b; /* Secondary/Muted/Timestamp text */
  --text-disabled:         #94a3b8; /* Disabled text */

  /* Shadows (Elevations) */
  --shadow-sm:             0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:             0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg:             0 10px 30px -5px rgba(15, 23, 42, 0.15);
}
* { box-sizing: border-box; }
/* Safety net: nothing on any page should force horizontal scroll on the
   whole document — a single stray wide element should clip/wrap instead of
   dragging the entire page wider than the viewport on small screens.

   Two deliberate choices here, both load-bearing:

   1. `overflow-x: clip`, NOT `hidden`. Per the CSS Overflow spec, setting
      only one axis to a non-`visible` value forces the OTHER axis's
      `visible` to compute as `auto` instead — so `overflow-x: hidden` alone
      silently turns html/body into a vertical SCROLL CONTAINER too. A
      scroll container's scrollable area is capped at its own box height,
      which is `auto` (= content height) here. On a short page (e.g. Store,
      few rows), that box is short — and anything absolutely-positioned
      inside it that needs to extend further down (the hamburger nav
      dropdown, position:absolute off the sticky topbar) gets clipped at
      that short edge instead of just overflowing visibly down the page.
      `clip` doesn't have that visible→auto side effect, so overflow-y stays
      genuinely `visible` and tall dropdowns on short pages render fine.

   2. `min-height: 100dvh` (with a `100vh` fallback for older browsers that
      don't parse `dvh`) so the html/body box is never shorter than the
      viewport regardless of content — the general "page shell always fills
      the screen, content scrolls/grows inside it" rule. `min-height`, not
      `height`: a fixed `height:100dvh` would instead CLIP pages whose
      content is taller than one screen, which is the opposite of what we
      want — min-height only ever grows the box for longer content, never
      shrinks it below viewport height for short content. */
html {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  max-width: 100%;
}
body {
  margin: 0;
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-main);
  background: var(--surface-main);
  line-height: 1.45;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  max-width: 100%;
}
/* Form controls don't inherit font-family by default — make them use Inter too. */
button, input, select, textarea { font-family: inherit; }

/* ---- App shell: grouped left sidebar + slim context bar ----
   (design_handoff_shell_1b, "Console" direction). The sidebar reuses the
   OLD .topbar palette exactly — var(--theme-primary) background, #dbeafe
   link ink, var(--theme-nav-highlight) active background, var(--theme-
   primary-hover) hover/active text — so all 7 theme presets and dark mode
   keep working with zero new colors. */
.appshell { display: flex; align-items: stretch; min-height: 100vh; min-height: 100dvh; }
.sidenav {
  flex: 0 0 238px; width: 238px;
  background: var(--theme-primary); color: var(--theme-primary-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh;
  z-index: 210;
}
html[data-sidenav="collapsed"] .sidenav { flex-basis: 60px; width: 60px; }
html[data-sidenav="collapsed"] .sidenav-brand .brand-text,
html[data-sidenav="collapsed"] .sidenav-group-label,
html[data-sidenav="collapsed"] .sidenav-link-label,
html[data-sidenav="collapsed"] .sidenav-link-badge,
html[data-sidenav="collapsed"] .sidenav-user-text,
html[data-sidenav="collapsed"] .sidenav-user-actions { display: none; }
html[data-sidenav="collapsed"] .sidenav-brand { justify-content: center; }
html[data-sidenav="collapsed"] .sidenav-link { justify-content: center; position: relative; }
html[data-sidenav="collapsed"] .sidenav-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: #0f172a;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
html[data-sidenav="collapsed"] .sidenav-link::before {
  content: '';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent #0f172a transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
}
html[data-sidenav="collapsed"] .sidenav-link:hover::after,
html[data-sidenav="collapsed"] .sidenav-link:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
html[data-sidenav="collapsed"] .sidenav-collapse-btn svg { transform: rotate(180deg); }

.brand-logo { max-height: 28px; max-width: 150px; display: block; }
.sidenav-brand {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 14px 16px; flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sidenav-brand .brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 16px; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.sidenav-collapse-btn {
  background: none; border: none; color: #dbeafe; cursor: pointer;
  padding: 4px; border-radius: 4px; display: flex; align-items: center; flex: 0 0 auto;
}
.sidenav-collapse-btn:hover { background: rgba(255, 255, 255, 0.12); }

.sidenav-nav {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.sidenav-nav::-webkit-scrollbar { width: 6px; }
.sidenav-nav::-webkit-scrollbar-track { background: transparent; }
.sidenav-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 999px; }
.sidenav-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }
.sidenav-group { margin-bottom: 4px; }
.sidenav-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, 0.5); padding: 12px 10px 4px; font-weight: 600; }
.sidenav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; color: #dbeafe; text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent; margin: 1px 0;
  transition: background-color .15s, color .15s;
}
.sidenav-link svg { flex: 0 0 auto; width: 18px; height: 18px; }
.sidenav-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.sidenav-link-badge {
  flex: 0 0 auto; background: var(--theme-tertiary); color: var(--theme-tertiary-ink);
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
.sidenav-link:hover { color: var(--theme-primary-hover); }
.sidenav-link.active {
  background: var(--theme-nav-highlight); color: var(--theme-primary-hover);
  font-weight: 600; border-left-color: var(--theme-primary-hover);
}

.sidenav-user {
  flex: 0 0 auto; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; gap: 10px;
}
.sidenav-user-avatar {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sidenav-user-text { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.sidenav-user-name { color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-user-meta { color: #dbeafe; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-user-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }

/* ---- Context bar: slim top strip replacing the tall .topbar on content pages ---- */
.contextbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-card); border-bottom: 1px solid var(--border-color);
  padding: 10px 20px; position: sticky; top: 0; z-index: 190;
}
.contextbar-crumb { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.contextbar-crumb .crumb-current { color: var(--text-main); font-weight: 600; }
.contextbar-search {
  flex: 1 1 auto; min-width: 0; max-width: 420px;
  display: flex; align-items: center; gap: 8px; color: var(--text-muted);
  background: var(--surface-hover); border: 1px solid var(--border-color); border-radius: 8px;
  padding: 6px 10px;
}
.contextbar-search input {
  border: none; background: none; outline: none; font-size: 14px; color: var(--text-main);
  flex: 1 1 auto; min-width: 0; font-family: inherit;
}
.contextbar-dept {
  flex: 0 0 auto; font-size: 13px; color: var(--text-main); background: var(--surface-hover);
  border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 10px;
}
.contextbar-icons { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.contextbar-icons .link-btn, .contextbar-icons button { color: var(--text-muted); }
.contextbar #notif-bell:hover { background: var(--surface-hover); }

.inline { display: inline; }
.link-btn { background: none; border: none; color: #dbeafe; cursor: pointer; text-decoration: underline; font-size: 13px; }
.chip-icon-btn { display: inline-flex; align-items: center; }

/* Hamburger menu toggle — lives in .contextbar now, hidden on desktop. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.nav-toggle:hover { background: var(--surface-hover); }

.appmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.col-main { min-width: 0; margin: 20px 24px; padding: 0; background: transparent; border: none; box-shadow: none; flex: 1 1 auto; }

/* ---- Below ~900px: sidebar becomes an off-canvas drawer ---- */
@media (max-width: 900px) {
  .sidenav {
    position: fixed; top: 0; left: 0;
    transform: translateX(-100%); transition: transform .2s ease;
    flex-basis: 260px; width: 260px;
  }
  .sidenav.drawer-open { transform: translateX(0); }
  .sidenav-collapse-btn { display: none; } /* collapse is a desktop-only affordance */
  html[data-sidenav="collapsed"] .sidenav { flex-basis: 260px; width: 260px; }
  html[data-sidenav="collapsed"] .sidenav-brand .brand-text,
  html[data-sidenav="collapsed"] .sidenav-group-label,
  html[data-sidenav="collapsed"] .sidenav-link-label,
  html[data-sidenav="collapsed"] .sidenav-link-badge,
  html[data-sidenav="collapsed"] .sidenav-user-text,
  html[data-sidenav="collapsed"] .sidenav-user-actions { display: revert; }
  .sidenav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 205; }
  .sidenav-backdrop.is-visible { display: block; }
  .nav-toggle { display: inline-flex; }
  .contextbar-search { display: none; } /* reclaim space on small screens */
  .contextbar-dept { display: none; }
  .col-main { margin: 16px; }
}

/* Full-width by default (2026-07-14 design pass, RELAY Task 024) so wide
   register tables fill the screen instead of being pinned to 1000px.
   Form / detail pages that read better in a narrow column add `.narrow`. */
.container {
  width: 100%;
  margin: 20px auto;
  padding: 0 24px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.container.narrow { max-width: 1000px; margin-left: auto; margin-right: auto; }
.footer { text-align: center; color: var(--text-muted); padding: 20px; }

/* Keyset pager (business list pages, RELAY Task 030) */
.pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 18px 0 4px; }
.pager .disabled { opacity: .45; pointer-events: none; cursor: default; }
.pager .btn:active, .pager a.btn:focus, .pager a.btn:hover {
  background: var(--theme-secondary);
  color: var(--theme-secondary-ink);
  border-color: var(--theme-secondary);
}

/* Print: neutralise the shell so paper output (checklists, registers, POs)
   is unaffected — sidebar + context bar gone, content full-width. */
@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  .appshell { display: block !important; }
  .sidenav, .contextbar, .sidenav-backdrop { display: none !important; }
  .col-main, .container, .page-card {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .page-divider, .page-head, .footer, .noprint, #notif-panel {
    display: none !important;
  }
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
  flex-wrap: wrap;
  gap: 12px;
  background: transparent;
}
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-actions form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.head-actions form select { width: auto; margin-top: 0; padding: 7px 10px; height: 36px; }
.head-actions form button { margin: 0; }
h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin: 0;
}
h2 { font-size: 15px; margin: 18px 0 8px; }

/* Standalone Page Divider Bar */
.page-divider {
  border: none;
  height: 2px;
  background: var(--border-color);
  margin: 12px 0 20px 0;
}

/* Elevated White Document Card (Starts UNDER Divider) */
.page-card {
  background: var(--surface-card);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  padding: 24px 28px;
  margin-top: 0;
  margin-bottom: 24px;
}

.card {
  background: transparent;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: none;
}
.card.empty { color: var(--text-muted); text-align: center; background: transparent; }
.muted { color: var(--text-muted); }

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 7px;
  border: 1px solid var(--border-color); background: var(--surface-card); color: var(--text-main);
  text-decoration: none; cursor: pointer; font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--surface-hover); }
.btn.primary { background: var(--theme-secondary); color: var(--theme-secondary-ink); border-color: var(--theme-secondary); }
.btn.primary:hover { background: var(--theme-secondary-hover); border-color: var(--theme-secondary-hover); }
.btn.primary:active { background: var(--theme-secondary-active); }
.btn.danger { background: #fde8e8; color: var(--theme-tertiary-hover); border-color: #f6caca; }
.btn.danger:hover { background: #fbd4d4; }

/* ---- Forms ---- */
label { display: block; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
label small { font-weight: 400; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
  background: var(--surface-card);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--theme-secondary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
/* The closed <select> box above already reads var(--text-main)/var(--surface-card)
   (inherited), but a browser's OPEN dropdown popup does not inherit those from the
   <select> automatically — <option> needs its own background/color rule, or the
   popup renders with the browser's native white regardless of theme/dark mode
   (pale dark-mode text on that white background is functionally invisible). */
select option {
  background: var(--surface-card);
  color: var(--text-main);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-disabled); color: var(--text-disabled); }

/* ---- Global Filter Bar System (CSS Grid, transparent canvas fit) ---- */
.report-filters {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  align-items: end;
  margin-bottom: 24px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.report-filters.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.report-filters .f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.report-filters label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 0;
}
.report-filters select,
.report-filters input {
  margin-top: 0;
}
.report-filters .locked {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  height: 38px;
  display: flex;
  align-items: center;
  background: var(--surface-disabled);
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
}
.report-filters .actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.report-filters .actions button,
.report-filters .actions .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Same breakpoint as .stat-row above it — one filter field per row instead
   of the auto-fit grid squeezing 2-3 narrow columns onto small screens.
   Shared across every list/register page's filter bar. */
@media (max-width: 720px) {
  .report-filters { grid-template-columns: 1fr; }
  .report-filters .actions { flex-wrap: wrap; }
}
/* ---- Form CSS Grid System (Structured Card Forms) ---- */
.form-grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  margin-bottom: 20px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.form-field.col-span-full,
.form-field.full-width {
  grid-column: 1 / -1;
}

.form-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  /* The generic `label { margin-bottom: 12px }` rule further up this file
     (site-wide, for plain non-grid forms) was leaking into every
     .form-label too, stacking with .form-field's own `gap: 6px` to make
     label→input 18px while input→hint sat at a plain, uncompounded 6px —
     the exact "some of them has its own gap property" inconsistency this
     was meant to fix. Reset to 0 so .form-field's gap is the only thing
     spacing label, input, and hint apart, uniformly. */
  margin-bottom: 0;
}
.form-label-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* A caption UNDER the input, not squeezed onto the label row next to it (that
   forced wrapping/crowding on narrow screens — e.g. "Department" + "Shared if
   blank" fighting for the same line). It's a direct child of .form-field,
   placed after .input-wrapper in markup, so .form-field's own `gap: 6px`
   (already spacing label→input) spaces input→hint too — one gap value for
   every row in the field instead of a second, different one just for this. */
.form-label-hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-muted);
}
/* Submit/Cancel row under a .form-grid-layout — used on every add/edit form
   (17 views). Had no rule of its own; buttons were spaced only by the
   incidental whitespace between tags in the HTML source, not a real gap. */
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Simple Required Asterisk (*) System ---- */
.req-star {
  color: #ef4444;
  font-weight: 700;
  margin-left: 3px;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.req-star.is-hidden {
  display: none !important;
}

.form-grid { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.form-grid th, .form-grid td { border: 1px solid var(--border-color); padding: 4px 6px; }
.form-grid th { background: var(--surface-hover); font-size: 12px; text-align: left; }
.form-grid .rownum { width: 30px; text-align: center; color: var(--text-muted); }
.form-grid input { margin: 0; border: none; border-radius: 0; }
.form-grid input.narrow { width: 80px; }
.form-grid .center { text-align: center; }

/* ---- Form Grid System (CSS Grid layout replacing old table.form-grid) ---- */
.grid-table-container {
  width: 100%;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  margin-bottom: 20px;
  position: relative;
}

.grid-table-header {
  display: grid;
  align-items: center;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main);
  gap: 12px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.grid-table-row {
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding: 8px 14px;
  gap: 12px;
  transition: background-color 0.15s ease;
}
.grid-table-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}
.grid-table-row:hover {
  background: var(--surface-hover);
}

.location-grid-cols {
  grid-template-columns: 36px minmax(0, 2.5fr) minmax(0, 2fr) minmax(0, 1.5fr) 36px;
}

.btn-row-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--surface-card, #ffffff);
  color: var(--text-muted, #64748b);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.btn-row-clear:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.materials-grid-cols {
  grid-template-columns: 36px minmax(0, 3fr) 140px 110px 60px;
}

.po-items-grid-cols {
  grid-template-columns: 36px minmax(0, 3fr) 110px 140px;
}

.grid-cell-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.grid-table-row input[type="text"],
.grid-table-row input[type="number"],
.grid-table-row select {
  margin-top: 0;
  height: 38px;
}

.grid-cell-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-cell-center input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--theme-secondary);
}

@media (max-width: 768px) {
  .location-grid-cols,
  .materials-grid-cols,
  .po-items-grid-cols {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .grid-table-header {
    display: none;
  }
}

/* ---- Data tables (Styled like modern CSS Grid containers) ---- */
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  margin-bottom: 20px;
}

table.data th,
table.data td {
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description columns exception: wrap text normally without ellipsis truncation */
table.data th.col-desc,
table.data td.col-desc,
table.data th.desc,
table.data td.desc,
table.data th.description,
table.data td.description,
table.data th.complaint,
table.data td.complaint,
table.data th.findings,
table.data td.findings,
table.data th.details,
table.data td.details,
table.data th.remarks,
table.data td.remarks,
table.data td.desc-block {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

table.data th {
  background: var(--surface-hover);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}

table.data tbody tr {
  transition: background-color 0.15s ease;
}

table.data tbody tr:hover td {
  background: var(--surface-hover);
}

table.data tbody tr:last-child td {
  border-bottom: none;
}

table.data td.desc {
  max-width: 340px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

table.data td.nowrap,
table.data th.nowrap {
  white-space: nowrap;
  width: 1%;
}

table.data a {
  color: var(--theme-secondary);
  text-decoration: none;
  font-weight: 500;
}
table.data a:hover {
  text-decoration: underline;
}

/* ---- Misc bits ---- */
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
.kv > div, .desc-block { overflow-wrap: anywhere; word-break: break-word; }
.kv .k, .desc-block .k { display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .03em; }
.desc-block { margin-top: 14px; }
.status { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-selected); color: var(--theme-primary); font-size: 12px; }

/* ---- Design system (2026-07-14, RELAY Task 024) — reusable across features.
   Built to reference/frontend-design-skill/SKILL.md; adapt per feature. ---- */
.tabnum { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
/* RELAY Task 074: when a table.data sits in a resizable .table-wrap (any
   of the 16 column-resize tables), the card-look border/rounded-corner/
   clip moves from the table itself onto the wrap. A table that grows via
   drag/auto-fit (public/js/col-resize.js) changes width on every
   interaction; keeping the rounded-corner clip mask on that same element
   left its left edge rendering incorrectly (missing/clipped) once the
   table needed to scroll, while .table-wrap's own box never changes size.
   Standalone table.data instances elsewhere (not in a .table-wrap) are
   untouched and keep their own border exactly as before. */
.table-wrap {
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.table-wrap table.data {
  border: none;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  box-sizing: border-box;
}

/* Summary stat tiles — surface the counts before the detail table. Shared
   across every list/register page (work orders, job orders, Observations, PM, CM,
   store, purchase orders, reports, admin logs, …), so this one rule covers
   all of them. */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr; } }
.stat { position: relative; overflow: hidden; background: transparent; border: 1.5px solid var(--border-color); border-radius: 10px; padding: 14px 16px; box-shadow: none; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sc, var(--theme-secondary)); }
.stat .n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .l { display: flex; align-items: center; gap: 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: 2px; }
.stat .l .d { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--theme-secondary)); }
.stat.s-open { --sc: #8a6a08; } .stat.s-closed { --sc: #15733a; }
.stat.s-notdone { --sc: #b3241f; } .stat.s-partial { --sc: #1e478f; }
/* Extra accents for stat-rows with more than 4 tiles (Work Orders' legacy
   "Open" tile, Purchase Orders' full 6-stage breakdown) — kept muted/dark
   like the 4 above so they read as part of the same fixed palette. */
.stat.s-neutral { --sc: #5b6472; } .stat.s-teal { --sc: #0f7d68; } .stat.s-violet { --sc: #6d28d9; }

/* Status pills — semantic state as form + colour (read-only display). */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-open { background: #fdf0cf; color: #8a6a08; }
.pill-closed { background: #d7f0dd; color: #15733a; }
.pill-notdone { background: #fbdcdc; color: #b3241f; }
.pill-partial { background: #d8e6fb; color: #1e478f; }
/* RELAY Task 099 — PM Log's "Finished" status (Engineer done, awaiting
   Management validation), reusing the same violet already established as
   an accent elsewhere in the app (.stat.s-violet, #6d28d9) rather than
   inventing a new hue. */
.pill-finished { background: #ede4fb; color: #6d28d9; }
/* Neutral/inactive state (RELAY Task 062 redesign) — reuses the existing
   disabled-surface tokens rather than a new hardcoded gray. */
.pill-neutral { background: var(--surface-disabled); color: var(--text-disabled); }
.status-lg { font-size: 13px; vertical-align: middle; }
.pri { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.pri-normal { background: #e5edf5; color: #1d4e74; }
.pri-fast { background: #fef3c7; color: #92600a; }
.pri-urgent { background: #fde2e1; color: #b91c1c; }
/* Observation severity (shown in the CM Register Priority column) */
.pri-low { background: #e5edf5; color: #1d4e74; }
.pri-medium { background: #fef3c7; color: #92600a; }
.pri-high { background: #fde2e1; color: #b91c1c; }
.approved-note { color: #0f6b3d; }
.approve-form { display: flex; gap: 10px; align-items: center; }
.approve-form input { margin: 0; flex: 1; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.photo-grid img { height: 120px; border-radius: 8px; border: 1px solid var(--border-color); object-fit: cover; }
.photo-add { display: flex; gap: 10px; align-items: center; }

/* ---- Notifications & Header Controls ---- */
#notif-bell, #mode-toggle {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 4px 6px; position: relative; display: flex; align-items: center;
  border-radius: 6px; transition: color 0.15s ease, background-color 0.15s ease;
}
#notif-bell:hover, #mode-toggle:hover { background: var(--surface-hover); color: var(--text-main); }
#notif-bell svg, #mode-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
#notif-badge {
  position: absolute; top: 0; right: 0;
  background: var(--theme-tertiary-hover); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 8px; display: none; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}
#notif-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 310px;
  background: var(--surface-card); border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
  z-index: 500;
}
#notif-panel.open { transform: translateX(0); }
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.notif-header-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.notif-new-pill {
  background: #fde8e8; color: var(--theme-tertiary-hover);
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
}
.notif-read-all {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--theme-secondary); text-decoration: underline;
  padding: 0;
}
.notif-list { flex: 1; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border-color);
  text-decoration: none; color: var(--text-main);
  transition: background 0.1s;
}
.notif-item:hover { background: var(--surface-hover); }
.notif-item.unread { background: #eef4fb; }
.notif-item.unread:hover { background: #ddeaf5; }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--theme-secondary); flex-shrink: 0; margin-top: 5px;
}
.notif-dot.read { background: transparent; }
.notif-msg { font-size: 13px; line-height: 1.4; margin-bottom: 3px; }
.notif-time { font-size: 11px; color: var(--text-muted); }
.notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ---- Login ---- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--theme-primary); }
.login-card { background: var(--surface-card); padding: 30px; border-radius: 12px; width: 320px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 20px; margin: 0 0 2px; }
.login-card .muted { margin-top: 0; font-size: 13px; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ---- Users page helpers ---- */
.btn.small { padding: 4px 10px; font-size: 12px; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline-form input { margin: 0; width: auto; }

/* ---- Roles & permissions ---- */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 8px 0 12px; }
.perm { font-weight: 400; margin: 0; display: flex; gap: 6px; align-items: baseline; }
.perm input { width: auto; margin: 0; }
details summary { cursor: pointer; }
@media (max-width: 700px){ .perm-grid { grid-template-columns: 1fr; } }

/* ---- Column resize handles (RELAY Task 066/071) — public/js/col-resize.js ----
   The 8px zone is the actual drag hit-target (kept wide for easy grabbing);
   ::after draws a thin, always-on divider line inside it so the column is
   discoverable without hovering — lightweight by default, brightens on
   hover/drag rather than appearing out of nowhere. */
.col-resize-handle {
  position: absolute;
  top: 0; right: -4px; bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 5;
  user-select: none;
}
.col-resize-handle::after {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px; left: 50%;
  width: 1px;
  background: var(--border-color);
  transform: translateX(-50%);
  opacity: 0.9;
}
.col-resize-handle:hover,
body.col-resizing .col-resize-handle {
  background: rgba(29, 111, 184, 0.25); /* var(--theme-secondary) at low opacity */
}
.col-resize-handle:hover::after,
body.col-resizing .col-resize-handle::after {
  background: var(--theme-secondary);
  width: 2px;
  opacity: 1;
}
body.col-resizing {
  cursor: col-resize;
  user-select: none;
}
table.data thead th {
  position: relative; /* anchors the handle inside each header cell */
}

/* ---- System-Wide Photo Thumbnail Styles ---- */
.photo-grid img,
.photo-thumb img,
.pm-photo-gallery img,
.chat-photo img,
a[href*="/uploads/"] img,
a[href*="uploads/"] img,
img[src*="/uploads/"],
img[src*="uploads/"],
img.system-photo {
  cursor: zoom-in;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.photo-grid img:hover,
.photo-thumb img:hover,
.pm-photo-gallery img:hover,
.chat-photo img:hover,
a[href*="/uploads/"]:hover img,
a[href*="uploads/"]:hover img,
img[src*="/uploads/"]:hover,
img[src*="uploads/"]:hover,
img.system-photo:hover {
  filter: brightness(1.05);
}

/* =========================================================================
   Store Module: Shopping Cards Grid & Multi-Photo Carousel System
   ========================================================================= */
.store-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 10px;
}

.store-results-info {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.store-results-info strong {
  color: var(--text-main);
  font-weight: 700;
}

.store-layout-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.store-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.store-toggle-btn.active {
  background: var(--surface-card);
  color: var(--theme-secondary);
  box-shadow: var(--shadow-sm);
}

.store-toggle-btn svg {
  width: 15px;
  height: 15px;
}

.store-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.store-item-card {
  background: var(--surface-card);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.store-item-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #93c5fd;
}

.store-item-card.is-disabled {
  opacity: 0.85;
  background: var(--surface-hover);
}

.store-card-photo-stage {
  position: relative;
  width: 100%;
  height: 190px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

[data-mode="dark"] .store-card-photo-stage {
  background: #0f172a;
}

.store-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.store-carousel-track::-webkit-scrollbar {
  display: none;
}

.store-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
}

.store-carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
  border-radius: 4px;
}

.store-item-card:hover .store-carousel-slide img {
  transform: scale(1.02);
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.carousel-nav-btn:hover {
  background: rgba(29, 111, 184, 0.95);
}

.carousel-nav-btn.prev { left: 6px; }
.carousel-nav-btn.next { right: 6px; }

.store-card-photo-stage:hover .carousel-nav-btn {
  opacity: 1;
}

.carousel-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.5);
  padding: 3px 6px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.carousel-dot.active {
  background: #ffffff;
  transform: scale(1.2);
}

.card-top-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 11;
  pointer-events: none;
}

.card-select-cb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--theme-secondary);
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.card-photo-count-badge {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.store-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
}

.store-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-secondary);
  background: rgba(29, 111, 184, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
}

.tag-department {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.store-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.store-card-title:hover {
  color: var(--theme-secondary);
  text-decoration: underline;
}

.store-card-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.spec-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

.spec-value {
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spec-value.highlight-qty {
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-primary);
}

.spec-value.is-low {
  color: #dc2626;
}

.spec-value.spec-empty {
  color: var(--text-disabled);
  font-weight: 400;
}

.store-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  gap: 8px;
}

.status-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.status-badge-inline.status-active {
  background: #dcfce7;
  color: #15803d;
}

.status-badge-inline.status-disabled {
  background: #f1f5f9;
  color: #64748b;
}

.status-badge-inline.status-low-pill {
  background: #fee2e2;
  color: #b91c1c;
}

.btn-card-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-card-open:hover {
  background: var(--theme-secondary);
  color: #ffffff;
  border-color: var(--theme-secondary);
}

@media (max-width: 640px) {
  .store-cards-grid {
    grid-template-columns: 1fr;
  }
}