/* ======================================================================================
   THE HOUSE LOOK — assets/css/house.css (owner rulings R268–R273, Oct 5 2026)
   ======================================================================================
   ONE look for every page, taken from the dashboard: its western lettering on page titles, its palette, the card
   box's buttons, one table, the card box for every box, and one notice bar under the black strip.
   Loaded by includes/header.php on every page, with assets/css/dash-modal.css (the box) and assets/js/house.js
   (the box's ×, the notice bar). Rules: db/notes/reference/design.md.

   ⚠ ONE CLASS EACH, NO STRONGER RULES. A page is moved ONTO these classes and its own look is removed; nothing
   here is written to outrank a page's own rule (the ruling: "Do not add stronger site-wide rules to outrank page
   styles"). If a page still looks different, its own rule is still there — remove it, do not outweigh it.
   ====================================================================================== */

/* ---- the palette: the dashboard's own colours ------------------------------------------------------------------ */
:root {
  --h-ink: #0f172a;      /* headings, strong text */
  --h-ink-2: #1f2937;    /* the greeting, page titles */
  --h-text: #334155;     /* body text */
  --h-text-2: #475569;
  --h-muted: #64748b;
  --h-edge: #94a3b8;     /* the dashboard's box edge */
  --h-line: #cbd5e1;     /* control edges */
  --h-line-2: #e2e8f0;   /* rules between rows */
  --h-wash: #f1f5f9;     /* table heads, hovers */
  --h-wash-2: #f8fafc;   /* the page */
  --h-main: #1e293b;     /* the main button */
  --h-main-hover: #0f172a;
  --h-link: #1d4ed8;
  --h-blue: #2563eb;
  --h-green: #16a34a;
  --h-orange: #ea580c;
  --h-purple: #7c3aed;
  --h-red: #b91c1c;
  --h-red-dark: #991b1b;
  --h-red-wash: #fee2e2;
  --h-amber: #92400e;
  --h-amber-wash: #fffbeb;
  --h-ok: #065f46;
  --h-ok-wash: #ecfdf5;
  --h-ok-edge: #10b981;
}
body { background: var(--h-wash-2); color: var(--h-text); }
a { color: var(--h-link); }

/* ---- a. page titles: the dashboard's western lettering ------------------------------------------------------- */
.page-title {
  font-family: 'Rye', 'Playbill', 'Smokum', 'Copperplate', 'Copperplate Gothic Bold', 'Rockwell', 'Bookman Old Style', Georgia, serif;
  font-size: 2rem; line-height: 1.15; font-weight: 400; letter-spacing: .5px; color: var(--h-ink-2); margin: 0 0 12px;
}

/* ---- c. one button set: the dashboard card box's ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--h-line); background: #fff; color: var(--h-text);
  font-size: .9rem; font-weight: 600; line-height: 1.25; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--h-wash); color: var(--h-text); text-decoration: none; }
.btn-primary { background: var(--h-main); border-color: var(--h-main); color: #fff; }
.btn-primary:hover { background: var(--h-main-hover); border-color: var(--h-main-hover); color: #fff; }
.btn-danger { background: var(--h-red); border-color: var(--h-red); color: #fff; }
.btn-danger:hover { background: var(--h-red-dark); border-color: var(--h-red-dark); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
.btn:disabled, .btn[disabled], .btn.disabled { opacity: .55; cursor: default; }

/* ---- d. one table -------------------------------------------------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; color: var(--h-text); }
.data-table th { text-align: left; background: var(--h-wash); color: var(--h-ink); font-weight: 700;
  padding: 8px 8px; border-bottom: 1px solid var(--h-line); vertical-align: bottom; }
.data-table td { padding: 6px 8px; border-bottom: 1px solid var(--h-line-2); vertical-align: top; }
.data-table tbody tr:hover td { background: var(--h-wash-2); }

/* ---- f. the notice bar, just under the black strip ----------------------------------------------------------- */
.page-notice-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 1200; display: flex; flex-direction: column; }
.page-notice { padding: 10px 16px; font-size: .95rem; font-weight: 600; line-height: 1.4; border-bottom: 2px solid;
  box-shadow: 0 2px 6px rgba(15,23,42,.15); }
.page-notice-ok { background: var(--h-ok-wash); border-color: var(--h-ok-edge); color: var(--h-ok); }
.page-notice-err { background: var(--h-red-wash); border-color: #ef4444; color: var(--h-red-dark); }
/* A notice drawn by the server sits in the page until house.js lifts it into the bar. */
.page-notice[data-waiting] { margin: 0 0 12px; border: 1px solid; border-radius: 6px; }