/* assets/css/site.css
   Shared styles for every page. Tailwind (CDN) handles layout utilities; this file holds the design tokens and the
   component classes that must look identical everywhere (buttons, fields, tables, badges, empty states).
   The staff dashboard shell (sidebar, top bar, user menu, toasts, modals, filters, overview tiles) lives in
   assets/css/app.css, loaded right after this file. */

/* ---------- Design tokens ---------- */
:root {
  --c-ink: #162839;          /* brand navy: headings, primary buttons, active nav */
  --c-ink-2: #2c3e50;        /* navy container / hover */
  --c-accent: #fc8f34;       /* brand orange: accents only (never text on white) */
  --c-accent-ink: #944a00;   /* orange that passes AA as text on white */
  --c-canvas: #f4f6f9;       /* page background behind cards */
  --c-surface: #ffffff;
  --c-subtle: #eef2f6;       /* hover / quiet fills */
  --c-border: #e2e7ee;
  --c-border-strong: #cdd5df;
  --c-text: #1f2937;
  --c-muted: #556070;        /* secondary text, 6:1 on white */
  --c-focus: #b45309;        /* focus ring, 5:1 on white */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(22, 40, 57, 0.06);
  --shadow-md: 0 6px 16px rgba(22, 40, 57, 0.10);
  --shadow-lg: 0 18px 44px rgba(22, 40, 57, 0.22);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hide the page until guard.js has verified the session (html.auth-pending is set by each page). */
html.auth-pending body {
  display: none;
}

/* clip (not hidden) so html/body do not become scroll containers: position: sticky keeps working. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Fonts: Inter for LTR, Cairo for RTL (the matching Google font is loaded by partials/head.php). */
body {
  font-family: 'Inter', 'Cairo', system-ui, sans-serif;
  color: var(--c-text);
}
[dir="rtl"] body {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}
h1, h2, h3 {
  color: var(--c-ink);
}
.text-muted {
  color: var(--c-muted);
}

/* Visible keyboard focus everywhere (mouse clicks do not show it). */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* Brand-colored focus state for all form controls. */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(22, 40, 57, 0.15);
}

/* Icons from partials/icons.php / uiIcon() */
.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
.icon-sm {
  width: 1rem;
  height: 1rem;
}
[dir="rtl"] .flip-rtl {
  transform: scaleX(-1);
}

/* ---------- Components ---------- */

/* Card: white surface with a light border. */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
@media (min-width: 640px) {
  .card {
    padding: 1.25rem;
  }
}
/* Section heading inside a card: <div class="card-head"><h2 class="card-title">..</h2><a class="link-btn">..</a></div> */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.875rem;
}
.card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.card-sub {
  font-size: 0.8125rem;
  color: var(--c-muted);
  margin-top: 0.125rem;
}

/* Page heading block: <div class="page-head"><div><h1 class="page-title">..</h1><p class="page-sub">..</p></div><div class="page-actions">buttons</div></div>
   Secondary (outline) buttons first, the one primary action last, so it sits on the end side. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.25rem;
}
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
[dir="rtl"] .page-title {
  letter-spacing: 0;
}
.page-sub {
  font-size: 0.875rem;
  color: var(--c-muted);
  margin-top: 0.25rem;
  max-width: 48rem;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 639.98px) {
  .page-title {
    font-size: 1.25rem;
  }
  .page-actions {
    width: 100%;
  }
  .page-actions > .btn-primary {
    flex: 1 1 auto;
  }
}

/* Buttons. Hierarchy: btn-primary (one per view) > btn-accent (highlight) > btn-outline (secondary)
   > btn-ghost (row / quiet actions) ; btn-danger only inside confirmation dialogs; btn-icon for compact row actions. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.375rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn .icon {
  width: 1rem;
  height: 1rem;
}
.btn-primary {
  background: var(--c-ink);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--c-ink-2);
}
.btn-accent {
  background: var(--c-accent);
  color: var(--c-ink);
}
.btn-accent:hover:not(:disabled) {
  background: #e97f26;
}
.btn-outline {
  background: #ffffff;
  border-color: var(--c-border-strong);
  color: #374151;
}
.btn-outline:hover:not(:disabled) {
  background: #f7f9fb;
  border-color: #b8c2cf;
  color: var(--c-ink);
}
.btn-ghost {
  background: transparent;
  color: var(--c-ink);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--c-subtle);
}
.btn-danger {
  background: #dc2626;
  color: #ffffff;
}
.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}
.btn-ghost-danger {
  background: transparent;
  color: #b91c1c;
}
.btn-ghost-danger:hover:not(:disabled) {
  background: #fef2f2;
}
.btn-sm {
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
}
/* Icon-only button: always give it aria-label + title (the item name, e.g. "Delete Acme"). */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}
.btn-icon:hover:not(:disabled) {
  background: var(--c-subtle);
  color: var(--c-ink);
}
.btn-icon.is-danger {
  color: #b91c1c;
}
.btn-icon.is-danger:hover:not(:disabled) {
  background: #fef2f2;
  color: #991b1b;
}
.btn-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (pointer: coarse) {
  .btn-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
/* Group of row actions (end of a table row / card footer). */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
td.cell-actions .row-actions {
  flex-wrap: nowrap;
}
.link-btn {
  color: var(--c-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(22, 40, 57, 0.35);
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--c-accent-ink);
  text-decoration-color: currentColor;
}

/* Form controls: <label class="field-label">..</label><input class="field"> */
.field {
  width: 100%;
  min-height: 2.375rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: #ffffff;
  color: var(--c-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field:hover:not(:disabled):not(:focus) {
  border-color: #b3bdca;
}
.field::placeholder {
  color: #8a94a3;
}
/* Inline validation: shown once the user has interacted with the field (or tried to submit). */
.field:user-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
}
.field-hint {
  font-size: 0.75rem;
  color: var(--c-muted);
  margin-top: 0.3rem;
  line-height: 1.45;
}
.field-error {
  font-size: 0.75rem;
  color: #b91c1c;
  margin-top: 0.3rem;
}

/* Small tag/chip (e.g. program tags) */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: #eff4f8;
  color: var(--c-ink-2);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Empty / loading / error placeholder (a table cell, a <p> in a grid, a panel).
   Default = empty (inbox icon); add .is-loading (spinner) or .is-error (warning icon). */
.empty-state,
table.data-table td.empty-state {
  padding: 2.25rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.empty-state::before,
table.cards-table td.empty-state::before {
  content: '';
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.625rem;
  background-color: #b6c0cc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.empty-state.is-error::before,
table.cards-table td.empty-state.is-error::before {
  background-color: #dc2626;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.empty-state.is-error {
  color: #991b1b;
}
.empty-state.is-loading::before,
table.cards-table td.empty-state.is-loading::before {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 2.5px solid #d5dce5;
  border-top-color: var(--c-ink);
  border-radius: 9999px;
  animation: imc-spin 0.8s linear infinite;
}
.empty-action {
  margin-top: 0.875rem;
}
@keyframes imc-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Data table ----------
   Usage: <div class="table-wrap"><table class="data-table cards-table">..</table></div>
   (.table-wrap scrolls inside the card so the navy header stays visible; <div class="overflow-x-auto"> still works
   for small tables in dialogs). Add data-label="Column" on each <td> for the mobile card layout (.cards-table).
   Long text: <td class="cell-truncate" title="full text">. Row actions: <td class="cell-actions"><div class="row-actions">. */
.table-wrap {
  overflow: auto;
  max-height: min(70vh, 52rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #ffffff;
  overscroll-behavior: contain;
}
table.data-table {
  width: 100%;
  background: #ffffff;
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
}
table.data-table th,
table.data-table td {
  text-align: start;
  padding: 0.7rem 0.875rem;
  vertical-align: middle;
}
table.data-table tbody td {
  border-bottom: 1px solid #edf0f4;
}
table.data-table tbody tr:last-child td {
  border-bottom: 0;
}
table.data-table tbody tr {
  transition: background-color 0.12s ease;
}
table.data-table tbody tr:hover {
  background: #f6f8fb;
}
table.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--c-ink);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--c-accent);
  white-space: nowrap;
}
table.data-table thead th .sort-arrow {
  color: var(--c-accent);
}
table.data-table td.cell-truncate,
table.data-table .cell-truncate {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.data-table td.cell-actions {
  width: 1%;
  white-space: nowrap;
}
table.data-table td.cell-nowrap {
  white-space: nowrap;
}

/* ---------- KPI cards ---------- */
.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  text-align: start;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kpi-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
}
.kpi-card .kpi-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-label {
  font-size: 0.8rem;
  color: var(--c-muted);
}
.kpi-card.is-active {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 1px var(--c-ink), var(--shadow-sm);
  background: #f8fafc;
}
.kpi-card-sm {
  padding: 0.6rem 0.75rem;
  gap: 0.125rem;
}
.kpi-card-sm .kpi-count {
  font-size: 1.125rem;
}
.kpi-card-sm .kpi-label {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Status badges (statusBadge() in ui.js) ----------
   Always text + a colored dot, never color alone. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.0625rem 0.625rem 0.0625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
[dir="rtl"] .badge {
  padding: 0.0625rem 0.5rem 0.0625rem 0.625rem;
}
.badge::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}
.badge-active    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.badge-future    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.badge-suspended { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.badge-expired   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.badge-revoked   { background: #eef0f3; color: #374151; border-color: #d6dbe1; }

/* Progress bar used by distribution charts */
.bar-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: #eef1f4;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 9999px;
}

/* Mobile card layout for any table opted into it via .cards-table */
@media (max-width: 640px) {
  .table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  table.cards-table {
    background: transparent;
  }
  table.cards-table thead {
    display: none;
  }
  table.cards-table, table.cards-table tbody, table.cards-table tr, table.cards-table td {
    display: block;
    width: 100%;
  }
  table.cards-table tr {
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
    padding: 0.375rem 0;
  }
  table.cards-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    text-align: start;
    border-bottom: 0;
    padding: 0.4rem 0.875rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  table.cards-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--c-muted);
    flex-shrink: 0;
  }
  table.cards-table td:not([data-label]):not(.empty-state)::before {
    content: none;
  }
  table.cards-table td.empty-state {
    display: block;
  }
  table.data-table td.cell-truncate {
    max-width: none;
    white-space: normal;
  }
  table.data-table td.cell-actions {
    width: 100%;
    border-top: 1px solid #edf0f4;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
  }
  table.cards-table td.cell-actions .row-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ---------- Print ---------- */
.print-only {
  display: none;
}
@media print {
  .no-print,
  header,
  footer,
  #toast-container {
    display: none !important;
  }
  .print-only {
    display: block;
  }
  body {
    background: #ffffff !important;
  }
  .card {
    border: 0;
    box-shadow: none;
  }
  .table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
  }
  table.data-table thead th {
    position: static;
    background: #ffffff;
    color: #162839;
    border-bottom: 2px solid #162839;
  }
  html, body {
    overflow: visible;
  }
}

/* Disabled inputs (e.g. a locked roster after results are approved) must look read-only. */
.field:disabled,
.field[readonly] {
  background-color: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

/* "Insert variable" button + menu (campaign editor). The menu is appended to <body> and uses position:fixed so
   a scrolling modal body cannot clip it; z-index sits above modals (z-60). */
.var-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  min-height: 1.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #ffffff;
  color: #162839;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.var-btn:hover,
.var-btn[aria-expanded="true"] {
  background: #f3f4f6;
  border-color: #162839;
}
.var-btn:focus-visible,
.var-item:focus-visible {
  outline: 2px solid #fc8f34;
  outline-offset: 1px;
}
.var-btn-icon {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #944a00;
}
.var-menu {
  position: fixed;
  z-index: 200;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(22, 40, 57, 0.18);
  padding: 0.25rem;
}
.var-item {
  display: block;
  width: 100%;
  text-align: start;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
}
.var-item:hover,
.var-item:focus {
  background: #f3f4f6;
}
.var-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.var-item-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #162839;
}
.var-item-token {
  font-size: 0.6875rem;
  color: #944a00;
  background: #fff4e6;
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}
.var-item-desc,
.var-item-example {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.var-item-example bdi {
  color: #374151;
}

/* Respect "reduce motion": no transitions, no spinner rotation beyond a slow pulse. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .empty-state.is-loading::before,
  table.cards-table td.empty-state.is-loading::before {
    animation: none !important;
    border-top-color: #d5dce5;
    background: var(--c-ink);
    -webkit-mask: none;
    mask: none;
    border-radius: 9999px;
    transform: scale(0.5);
  }
}