/* Enterprise UI Baseline — implemented for the PHP/Tailwind/HTMX stack.
   Companion to the Tailwind config in partials/header.php. See
   memory/ENTERPRISE_UI_BASELINE.md for the design spec. */

:root {
  --app-bg:       #ECEFF3;
  --workspace:    #F4F8FF;
  --toolbar:      #DCE9FF;
  --header-navy:  #1F365C;
  --zebra:        #F8FBFF;
  --grid-line:    #D7DFEA;
  --hover-row:    #B7D4FF;
  --selected-row: #9FC5FF;
  --primary-blue: #3B82F6;
  --accent-orange:#EA580C;
}

/* Sample-spec base font size — tightens the whole layout to enterprise
   operations density rather than the slightly-loose default. */
body { font-size: 13px; }

/* ----- sample1.html layout primitives ---------------------------------
   The page structure the app converges to:
     <header>top-nav</header>          (already in partials/header.php)
     <main>
       <div class="topbar">page title + mode toggles + primary actions</div>
       <section class="workspace">
         <div class="content-band">
           <div class="title-band">section name + helper text</div>
           <div class="toolbar">filters + bulk actions</div>
           <div class="table-wrap"><table class="grid-table">...</table></div>
           <div class="pager">page x of y · controls</div>
         </div>
       </section>
     </main>
*/
.topbar-strip {
  min-height: 58px;
  background: var(--workspace);
  border-bottom: 1px solid var(--grid-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}
.topbar-strip h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.dark .topbar-strip { background: var(--workspace); border-bottom-color: var(--grid-line); }

.workspace { padding: 14px 0; transition: max-width 160ms ease; }

.content-band {
  background: #ffffff;
  border: 1px solid var(--grid-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.dark .content-band { background: #16243A; border-color: var(--grid-line); }

.title-band {
  min-height: 42px;
  background: var(--header-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.title-band strong { font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.title-band span   { color: #cfe0f7; font-size: 12px; }

.cb-toolbar {
  min-height: 50px;
  background: var(--toolbar);
  border-bottom: 1px solid var(--grid-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  flex-wrap: wrap;
}
.cb-toolbar-left, .cb-toolbar-right {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.cb-pager {
  min-height: 44px;
  background: #ffffff;
  border-top: 1px solid var(--grid-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  color: var(--muted, #64748b);
}
.dark .cb-pager { background: #16243A; }

/* Mode-toggle button: bordered white button that turns blue when active. */
.mode-toggle {
  height: 30px;
  border: 1px solid #b8c7da;
  border-radius: 6px;
  background: #ffffff;
  color: #12304d;
  padding: 0 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.mode-toggle.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #ffffff; }
.dark .mode-toggle { background: #16243A; color: #E4EBF5; border-color: var(--grid-line); }
.dark .mode-toggle.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #ffffff; }

/* Grid-toggle: when "Grid Off" is selected the html gets .no-grid and the
   row+column separators on grid-table fade away. */
html.no-grid table.grid-table tbody td  { border-right-color: transparent; border-bottom-color: transparent; }
html.no-grid table.grid-table tbody tr  { border-bottom-color: transparent; }

/* Width-toggle: when Wide is selected, the main container loses its
   max-width so the layout uses the full viewport. */
html.width-wide main { max-width: none !important; }

/* Fixed-height table rows for the dense sample look. */
table.grid-table tbody td {
  height: 36px;
  padding: 0 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Per-row action cluster: small bordered icon buttons. */
.actions { display: inline-flex; justify-content: flex-end; gap: 6px; }
.icon-btn {
  width: 28px; height: 28px;
  border: 1px solid #b8c7da;
  border-radius: 6px;
  background: #ffffff;
  display: inline-grid; place-items: center;
  cursor: pointer;
  color: #12304d;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}
.icon-btn:hover { background: var(--hover-row); border-color: var(--primary-blue); }
.icon-btn.danger { color: #b91c1c; }
.icon-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; }
.dark .icon-btn { background: #16243A; border-color: var(--grid-line); color: #E4EBF5; }
.dark .icon-btn:hover { background: var(--hover-row); border-color: var(--primary-blue); }

/* Dark mode palette — applied when <html class="dark"> is set. */
.dark {
  --app-bg:       #0B1220;
  --workspace:    #111C30;
  --toolbar:      #182742;
  --header-navy:  #15263F;
  --zebra:        #1B2B45;
  --grid-line:    #2B3E5F;
  --hover-row:    #355D96;
  --selected-row: #4472B8;
}

/* Dark-mode overrides for the high-traffic stock Tailwind utilities used
   across pages. Cheaper than rewriting every utility to `cls dark:cls`.
   Each rule wins via .dark scope rather than !important. */
.dark .bg-white          { background-color: #16243A; }
.dark .bg-slate-50       { background-color: #1B2B45; }
.dark .bg-slate-100      { background-color: #182742; }
.dark .bg-slate-200      { background-color: #2B3E5F; }
.dark .text-slate-900    { color: #E4EBF5; }
.dark .text-slate-700    { color: #D7DFEA; }
.dark .text-slate-600    { color: #C7D2DE; }
.dark .text-slate-500    { color: #9AAAC0; }
.dark .text-slate-400    { color: #7188A3; }
.dark .text-slate-300    { color: #4C617C; }
.dark .border-slate-100  { border-color: #2B3E5F; }
.dark .border-slate-200  { border-color: #2B3E5F; }
.dark .border-slate-300  { border-color: #3D5577; }

/* Status / banner backgrounds remain colorful in dark mode but muted. */
.dark .bg-red-50         { background-color: #3B1418; color: #FCA5A5; }
.dark .bg-red-100        { background-color: #4A1B22; }
.dark .bg-emerald-50     { background-color: #0F2A1F; color: #6EE7B7; }
.dark .bg-amber-50       { background-color: #3B2A0A; color: #FCD34D; }
.dark .bg-pink-50        { background-color: #3B1828; color: #F9A8D4; }
.dark .bg-blue-50        { background-color: #182742; }
.dark .text-pink-700     { color: #F9A8D4; }

/* HTMX request indicator */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Data grid table — opt-in via <table class="grid-table">. Provides
   the "Grid Mode" look from the baseline: visible row + column
   separators for spreadsheet-style clarity. */
table.grid-table {
  border-collapse: collapse;
}
table.grid-table thead th {
  /* Sample spec: navy header with white text — the strongest single visual
     cue that the table is "the data grid". */
  background-color: var(--header-navy);
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  border-right:  1px solid rgba(255,255,255,0.18);
  position: sticky;
  top: 0;
}
table.grid-table thead th:last-child { border-right: none; }
/* Sort links inside navy headers need to flip to white too. */
table.grid-table thead th a { color: #ffffff; }
table.grid-table thead th a:hover { color: #BFD1E8; }
table.grid-table thead th span { color: rgba(255,255,255,0.5); }
table.grid-table tbody td {
  border-right: 1px solid var(--grid-line);
}
table.grid-table tbody td:last-child { border-right: none; }
table.grid-table tbody tr { border-bottom: 1px solid var(--grid-line); }
table.grid-table tbody tr:nth-child(even) { background-color: var(--zebra); }
table.grid-table tbody tr:hover { background-color: var(--hover-row); }
table.grid-table tbody tr.is-selected { background-color: var(--selected-row); }

/* Strong-contrast hover for data rows (used by the existing hover-row class). */
tr.hover-row { transition: background-color 120ms ease, box-shadow 120ms ease; }
tr.hover-row:hover {
  background-color: var(--hover-row);
  box-shadow: inset 3px 0 0 0 var(--primary-blue);
}

/* Credit-row tint stays as a debit/credit affordance — green for credits. */
tr.credit-row { background-color: #f0fdf4; }
.dark tr.credit-row { background-color: #102A1F; }
tr.credit-row.hover-row:hover {
  background-color: #d1fae5;
  box-shadow: inset 3px 0 0 0 #059669;
}
.dark tr.credit-row.hover-row:hover { background-color: #163E2E; }

/* Locked rows: muted text + inputs become read-only-looking. */
tr.locked-row { background-color: #fafaf9; color: #57534e; }
tr.locked-row td input,
tr.locked-row td select { background-color: transparent; border-color: transparent; pointer-events: none; }
.dark tr.locked-row { background-color: #1A2438; color: #8C99AB; }

/* Selection marker for multi-select tables. */
tr.is-selected { background-color: var(--selected-row); }

/* Status badges — sample spec: 23px tall, bold, pill shape. */
.partial-badge, .paid-badge, .unpaid-badge, .over-badge {
  display: inline-block;
  min-height: 20px;
  line-height: 20px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0 9px;
}
.partial-badge { background:#fef3c7; color:#92400e; }
.paid-badge    { background:#dcfce7; color:#166534; }
.unpaid-badge  { background:#e0e7ff; color:#3730a3; }
.over-badge    { background:#fee2e2; color:#991b1b; }
.dark .partial-badge { background:#3B2A0A; color:#FCD34D; }
.dark .paid-badge    { background:#0F2A1F; color:#6EE7B7; }
.dark .unpaid-badge  { background:#1E2747; color:#A5B4FC; }
.dark .over-badge    { background:#3B1418; color:#FCA5A5; }

/* Form inputs in dark mode — keep them legible. */
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="search"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark textarea,
.dark select {
  background-color: #1B2B45;
  color: #E4EBF5;
  border-color: #3D5577;
}
.dark input::placeholder, .dark textarea::placeholder { color: #6C82A0; }