/* ---- 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:          #f4f6f8; /* App main background */
  --surface-card:          #ffffff; /* Card/Container background */
  --surface-hover:         #f0f3f6; /* Hover state for rows/menus */
  --surface-selected:      #e5edf5; /* Active selected rows/tabs */
  --surface-disabled:      #eef1f4; /* Disabled form inputs background */
  
  --border-color:          #d7dce2; /* Card borders, dividers, splitters */
  --focus-ring:            rgba(29, 111, 184, 0.4); /* Outlines for tabs/accessibility */

  /* Typography */
  --text-main:             #1f2933; /* Main body text */
  --text-muted:            #6b7280; /* Secondary/Muted/Timestamp text */
  --text-disabled:         #9ca3af; /* Disabled text */

  /* Shadows (Elevations) */
  --shadow-sm:             0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:             0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:             0 10px 40px -10px rgba(0, 0, 0, 0.25);
}
* { box-sizing: border-box; }
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;
}
/* Form controls don't inherit font-family by default — make them use Inter too. */
button, input, select, textarea { font-family: inherit; }

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px 18px;
  background: var(--theme-primary); color: var(--theme-primary-ink);
  padding: 10px 20px;
  position: sticky; top: 0; z-index: 200;
  box-shadow: var(--shadow-sm);
}
.topbar .brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 17px; display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo { max-height: 32px; max-width: 180px; display: block; }
/* Nav takes the middle space and wraps BETWEEN items (never mid-word): each
   link stays on one line, extra links flow to a tidy second row. */
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; }
.topbar nav a { color: #dbeafe; text-decoration: none; white-space: nowrap; line-height: 1.35; padding: 8px; border-radius: 4px; transition: background-color 0.15s, color 0.15s; }
.topbar nav a:hover { color: var(--theme-primary-hover);}
.topbar nav a.active { background: var(--theme-nav-highlight); color: var(--theme-primary-hover); font-weight: 600; }
.user-chip { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; flex: 0 0 auto; }
.link-btn { background: none; border: none; color: #dbeafe; cursor: pointer; text-decoration: underline; font-size: 13px; }
.inline { display: inline; }

/* 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: 24px 0; padding: 0 24px; }
.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);
}

/* ---- Resizable 2-column app shell (RELAY Task 025 → 2-col Task 028) ----
   main.grid-2col = [ col-main | splitter | col-left ]
   The left column (visually right) is a narrow ~15% panel; its width lives in a CSS var the drag
   JS (js/layout.js) updates. The main column is minmax(0,1fr) so it takes the
   rest (~85%) and its content reflows. Default split is 85% / 15% via the 15%
   var default; dragging switches --col-left to a px value. Content lives in
   .col-main. */
:root { --col-left: 15%; }
.grid-2col {
  display: grid;
  grid-template-columns: var(--col-left) 6px minmax(0, 1fr);
  align-items: stretch;              /* splitter spans the full content height */
}
.col-left { min-width: 0; order: 1; }
.col-splitter { order: 2; }
.col-main { min-width: 0; margin: 24px 0; padding: 0 24px; order: 3; }  /* mirrors old .container */

/* Sidebar-right modifier class swap rules */
.grid-2col.sidebar-right {
  grid-template-columns: minmax(0, 1fr) 6px var(--col-left);
}
.grid-2col.sidebar-right .col-left { order: 3; }
.grid-2col.sidebar-right .col-main { order: 1; }

/* Divider: a thin rule with a clear thumb in the middle. Resizing works anywhere on the divider. */
.col-splitter { position: relative; cursor: col-resize; align-self: stretch; background: transparent; border: 0; padding: 0; width: 6px; z-index: 10; }
.col-splitter::before { content: ""; position: absolute; inset: 0 2px; border-radius: 3px; background: var(--border-color); transition: background .12s; }
.col-splitter::after { 
  content: ""; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 14px; 
  height: 38px; 
  background: var(--surface-card); 
  border: 1px solid var(--border-color); 
  border-radius: 4px; 
  box-shadow: var(--shadow-sm); 
  background-image: radial-gradient(var(--text-muted) 1px, transparent 1px);
  background-size: 4px 4px;
  background-repeat: repeat-y;
  background-position: center;
  transition: border-color .12s, background-color .12s;
  z-index: 11;
}
.col-splitter:hover::before, .col-splitter:focus-visible::before, .col-splitter.dragging::before { background: var(--theme-secondary); }
.col-splitter:hover::after, .col-splitter:focus-visible::after, .col-splitter.dragging::after { border-color: var(--theme-secondary); background-color: var(--surface-hover); }
.col-splitter:focus-visible { outline: 2px solid var(--theme-secondary); outline-offset: 1px; }
body.resizing { cursor: col-resize; user-select: none; }

/* Narrow screens: stack to a single column, drop the splitter + side panel. */
@media (max-width: 1000px) {
  .grid-2col { grid-template-columns: 1fr; }
  .col-splitter, .col-left { display: none; }
  .col-main { padding: 0 18px; }
}

/* Print: neutralise the shell so paper output (checklists, registers, POs)
   is unaffected — side panel + divider gone, content full-width. */
@media print {
  .grid-2col { display: block; }
  .col-splitter, .col-left { display: none !important; }
  .col-main { margin: 0 !important; padding: 0 !important; }
}

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.head-actions { display: flex; gap: 8px; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 18px 0 8px; }

.card {
  background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 18px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.card.empty { color: var(--text-muted); text-align: center; }
.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], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px;
  font-size: 14px; font-weight: 400; margin-top: 4px; background: var(--surface-card);
  color: var(--text-main);
}
input:disabled { background: var(--surface-disabled); color: var(--text-disabled); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; }
.alert { background: #fde8e8; color: var(--theme-tertiary-hover); border: 1px solid #f6caca; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }

.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; }

/* ---- Data tables ---- */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { border-bottom: 1px solid var(--border-color); padding: 8px 10px; text-align: left; font-size: 14px; }
table.data th { background: var(--surface-hover); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #475569; }
table.data tbody { background: #ffffff; }
table.data td.desc { max-width: 320px; 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; }

/* ---- 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; }

/* Summary stat tiles — surface the counts before the detail table. */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { position: relative; overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.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; }

/* 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; }
.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; }
/* QS 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 ---- */
#notif-bell {
  background: none; border: none; cursor: pointer; color: #fff;
  padding: 4px 6px; position: relative; display: flex; align-items: center;
  border-radius: 6px;
}
#notif-bell:hover { background: rgba(255,255,255,0.12); }
#notif-bell 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: #fff; 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; } }