/* ════════════════════════════════════════════════════════════════════════
   CrewHub staff portal — classic PHP admin theme (phpMyAdmin-style).

   Loaded LAST in every page <head>, after each page's own <style> block.
   Nine of the staff pages still carry their own duplicated copy of the old
   dark chrome; rather than editing all of them, this sheet re-points the
   shared CSS variables and re-skins the shared component classes. Equal
   specificity + later source order means this wins. The variable names are
   unchanged, so the ~300 inline var(--x) references in the pages follow
   automatically.

   Palette: body #f5f5f5 · panels #fff/#999 · table heads #6a7ba2 · Verdana.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────
   Also matched on [data-theme] so a stale dark/light attribute on <html>
   (from the retired toggle, still in some visitors' localStorage) can't
   resurrect the old palette. */
:root,
:root[data-theme='dark'],
:root[data-theme='light'] {
  --bg:      #f5f5f5;
  --panel:   #ffffff;
  --panel2:  #ebebeb;
  --text:    #000000;
  --muted:   #666666;
  --muted2:  #333333;
  --accent:  #235a81;
  --green:   #008000;
  --red:     #cc0000;
  --amber:   #906000;
  --purple:  #5a3a8a;
  --border:  #999999;
  --border2: #666666;
  --radius:  0;
  --font:    Verdana, Tahoma, Arial, sans-serif;
  --mono:    'Courier New', Courier, monospace;
  /* classic pma table-header blue-gray */
  --head:    #6a7ba2;
  --stripe:  #eeeeee;
}

/* ── Retro reset ────────────────────────────────────────────────────────
   One blanket rule flattens every rounded corner, shadow, blur and
   transition across all nine duplicated stylesheets. !important is doing
   real work here: it saves re-declaring radius on ~60 component classes. */
* {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.45;
}

a { color: var(--accent); text-decoration: underline; }
a:hover { color: #cc0000; }
a:visited { color: #4a2d6b; }

/* Native scrollbars, not 4px slivers. */
::-webkit-scrollbar { width: auto; height: auto; }
::-webkit-scrollbar-thumb { background: initial; }

/* The theme toggle is retired — old admins had one theme. */
.theme-btn, .theme-toggle-fixed { display: none !important; }

/* ── Layout ─────────────────────────────────────────────────────────────*/
.sidebar {
  width: 180px;
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.sb-brand {
  padding: 8px 10px;
  background: var(--head);
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.sb-brand img { width: 24px; height: 24px; }
.sb-brand-name { font-size: 12px; font-weight: bold; color: #ffffff; letter-spacing: 0; }
.sb-brand-sub  { font-size: 10px; color: #d5dcea; font-family: var(--mono); }
.sb-nav { padding: 4px 0; }
.sb-item {
  margin: 0;
  padding: 4px 10px;
  gap: 6px;
  font-size: 11px;
  font-weight: normal;
  color: var(--accent);
  text-decoration: underline;
}
.sb-item:hover { background: var(--stripe); color: #cc0000; }
.sb-item.active {
  background: var(--head);
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}
.sb-item svg { width: 12px; height: 12px; }
.sb-badge {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 0 4px;
  font-family: var(--mono);
}
.sb-footer { padding: 4px 0; border-top: 1px solid var(--border); }
.sb-footer a {
  margin: 0; padding: 4px 10px; gap: 6px;
  font-size: 11px; font-weight: normal;
  color: var(--accent); text-decoration: underline;
}
.sb-footer a:hover { background: var(--stripe); color: #cc0000; }
.sb-footer a svg { width: 12px; height: 12px; }

.topbar {
  height: auto;
  min-height: 0;
  padding: 4px 10px;
  background: var(--head);
  border-bottom: 1px solid var(--border);
  color: #ffffff;
}
.topbar-title { font-size: 12px; font-weight: bold; color: #ffffff; }
.topbar-right { gap: 8px; }
.topbar-right span { color: #e8ecf5 !important; }
.content { padding: 10px; }

/* ── Cards ──────────────────────────────────────────────────────────────*/
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 8px;
  margin-bottom: 10px;
}
.card-header {
  margin: -8px -8px 8px;
  padding: 4px 8px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.card-title {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  color: var(--text);
  text-transform: none;
}

/* ── Tables ─────────────────────────────────────────────────────────────*/
table { border-collapse: collapse; border: 1px solid var(--border); }
th {
  background: var(--head);
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 1px;
}
td {
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
tr:last-child td { border-bottom: 1px solid #cccccc; }
tr:hover td { background: #ffffcc !important; }

/* Zebra striping. Tables run through table_enhancer.php hide rows for
   pagination, so nth-child (which counts hidden rows) leaves pages with
   broken or absent stripes — those tables get an .alt class per visible
   row instead, and the [data-tbl-done] guard hands over between the two. */
tbody tr:nth-child(even) > td { background: var(--stripe); }
table[data-tbl-done] tbody tr > td { background: #ffffff; }
table[data-tbl-done] tbody tr.alt > td { background: var(--stripe); }

.mono { font-family: var(--mono); }

/* ── Stat tiles ─────────────────────────────────────────────────────────*/
.stat-grid { gap: 6px; margin-bottom: 10px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); padding: 6px 8px; }
.stat-val { font-size: 16px; font-weight: bold; font-family: var(--mono); }
.stat-lbl { font-size: 10px; color: var(--muted); }

/* ── Badges ─────────────────────────────────────────────────────────────*/
.badge {
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 4px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font-family: var(--font);
}
.badge-green  { background: #e2f2e2; border-color: #008000; color: #005000; }
.badge-amber  { background: #fdf3dc; border-color: #906000; color: #704800; }
.badge-red    { background: #fbe3e3; border-color: #cc0000; color: #990000; }
.badge-muted  { background: var(--stripe); border-color: var(--border); color: var(--muted2); }
.badge-blue   { background: #dfe8f2; border-color: #235a81; color: #1a4460; }
.badge-purple { background: #e8e0f2; border-color: #5a3a8a; color: #452c6a; }

/* ── Buttons ────────────────────────────────────────────────────────────*/
.btn, .tbl-pager button, button.btn {
  padding: 2px 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: normal;
  border: 1px solid var(--border);
  background: #e0e0e0;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  gap: 4px;
}
.btn:hover, .tbl-pager button:hover:not(:disabled):not(.cur) {
  background: #d0d0d0;
  border-color: #666666;
  color: var(--text);
}
.btn:active { background: #c4c4c4; }
.btn-primary { background: #dfe8f2; border-color: #235a81; color: #1a4460; font-weight: bold; }
.btn-primary:hover { background: #cfdcec; opacity: 1; }
.btn-secondary { background: #e0e0e0; border-color: var(--border); color: var(--text); }
.btn-danger  { background: #fbe3e3; border-color: #cc0000; color: #990000; }
.btn-danger:hover { background: #f5d0d0; }
.btn-amber   { background: #fdf3dc; border-color: #906000; color: #704800; }
.btn-sm, .btn-xs { padding: 1px 6px; font-size: 10px; }

/* ── Tabs ───────────────────────────────────────────────────────────────*/
.entity-tabs, .mapping-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding: 4px 4px 0;
  background: var(--panel2);
}
.entity-tabs a, .mapping-tabs a {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: normal;
  color: var(--accent);
  background: #e0e0e0;
  border: 1px solid var(--border);
  border-bottom: none;
  margin-bottom: 0;
  text-decoration: none;
}
.entity-tabs a:hover, .mapping-tabs a:hover { background: #d0d0d0; color: #cc0000; }
.entity-tabs a.active, .mapping-tabs a.active {
  background: var(--panel);
  color: var(--text);
  font-weight: bold;
  border-bottom: 1px solid var(--panel);
  margin-bottom: -1px;
}

/* ── Alerts ─────────────────────────────────────────────────────────────*/
.alert {
  padding: 4px 8px;
  font-size: 11px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.alert-success { background: #e2f2e2; border-color: #008000; color: #005000; }
.alert-error   { background: #fbe3e3; border-color: #cc0000; color: #990000; }

/* ── Modals ─────────────────────────────────────────────────────────────*/
.modal-overlay { background: rgba(0, 0, 0, .45); }
.modal { background: var(--panel); border: 2px solid var(--border); padding: 0; }
.modal-header {
  margin: 0 0 10px;
  padding: 4px 8px;
  background: var(--head);
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 12px; font-weight: bold; color: #ffffff; }
.modal-close { color: #ffffff; font-size: 14px; }
.modal-close:hover { color: #ffcccc; }
.modal > *:not(.modal-header) { padding-left: 10px; padding-right: 10px; }
.modal-footer {
  margin-top: 10px;
  padding: 6px 10px;
  gap: 6px;
  background: var(--panel2);
  border-top: 1px solid var(--border);
}

/* ── Form fields ────────────────────────────────────────────────────────*/
.field { margin-bottom: 6px; }
.field label {
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin-bottom: 2px;
}
.field input, .field select, .field textarea, .tbl-search {
  padding: 2px 4px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
}
.field input:focus, .field select:focus, .tbl-search:focus {
  border-color: var(--accent);
  background: #ffffe0;
}
.form-row { gap: 6px; }

/* ── Permissions grid ───────────────────────────────────────────────────*/
.perm-group-label {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.perm-module {
  background: var(--panel);
  border: 1px solid #cccccc;
  padding: 4px 6px;
  margin-bottom: 3px;
}
.perm-module-name { font-size: 11px; font-weight: bold; }
.perm-action {
  padding: 1px 5px;
  font-size: 10px;
  font-weight: normal;
  border: 1px solid #cccccc;
  background: var(--panel2);
  gap: 4px;
}
.perm-action:has(input:checked)             { background: #dfe8f2; border-color: #235a81; color: #1a4460; }
.perm-action.act-read:has(input:checked)    { background: #e2f2e2; border-color: #008000; color: #005000; }
.perm-action.act-delete:has(input:checked)  { background: #fbe3e3; border-color: #cc0000; color: #990000; }
.perm-action.act-modify:has(input:checked)  { background: #fdf3dc; border-color: #906000; color: #704800; }

/* ── Table enhancer chrome ──────────────────────────────────────────────
   Structure lives here rather than in includes/table_enhancer.php: that
   file prints its <style> into the body, which would land after this sheet
   and win on source order. Same reason mapping_tabs.php no longer carries
   its own tab CSS. */
.tbl-tools {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; margin: 0 0 6px; flex-wrap: wrap;
}
.tbl-search { width: 160px; outline: none; flex-shrink: 0; }
.card-header .tbl-search { margin-left: auto; }
.tbl-count { font-size: 10px; color: var(--muted); white-space: nowrap; }
.tbl-pager { display: flex; align-items: center; gap: 2px; margin-top: 6px; flex-wrap: wrap; }
.tbl-pager button { min-width: 20px; font-weight: normal; }
.tbl-pager button.cur {
  background: var(--head); border-color: var(--head);
  color: #ffffff; font-weight: bold; cursor: default;
}
.tbl-pager button:disabled { opacity: .35; cursor: default; }
.tbl-pager .dots { font-size: 10px; color: var(--muted); padding: 0 2px; }
.tbl-pager .tbl-range { margin-left: auto; }
.tbl-empty-msg { text-align: center; padding: 10px; font-size: 11px; color: var(--muted); }
