/* portal-shell.css — unified visual language across 6 portals. Loaded AFTER portal-specific CSS. Do NOT edit custom-overrides.css. */

/* ========== SHARED TOKENS ========== */
:root {
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  /* radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 4px 10px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg: 0 12px 28px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.06);

  /* motion */
  --transition-base: 160ms cubic-bezier(.2,.7,.3,1);
  --transition-slow: 260ms cubic-bezier(.2,.7,.3,1);

  /* focus */
  --focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb), .22);

  /* brand — per-portal file overrides these */
  --brand-primary: #D46E2A;
  --brand-primary-rgb: 212,110,42;
  --brand-primary-hover: #B85B21;
  --brand-primary-tint: rgba(212,110,42,.10);
  --brand-primary-fg: #ffffff;
  --brand-logo-tint: #D46E2A;

  /* surfaces */
  --surface: #ffffff;
  --surface-muted: #F7F8FA;
  --border: rgba(34,48,63,.10);

  /* ink */
  --ink: #1F2937;
  --ink-2: #5C6B7A;
  --ink-3: #8A97A4;
}

/* ========== PRIMARY BUTTON ========== */
html body .btn.btn-primary,
html body button.btn-primary,
html body a.btn-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-fg) !important;
  border-radius: var(--radius-md);
  padding: var(--space-3) calc(var(--space-4) + 2px);
  font-weight: 600;
  letter-spacing: .1px;
  box-shadow: 0 1px 2px rgba(var(--brand-primary-rgb), .18);
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
html body .btn.btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-primary:hover {
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  box-shadow: 0 6px 14px rgba(var(--brand-primary-rgb), .28);
  transform: translateY(-1px);
}
html body .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(var(--brand-primary-rgb), .22);
}
html body .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 6px 14px rgba(var(--brand-primary-rgb), .22);
}

/* ========== CONTENT CARD ========== */
html body .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-color var(--transition-slow);
}
html body .card:hover { box-shadow: var(--shadow-md); }
html body .card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) calc(var(--space-4) + 4px);
  font-weight: 600;
  color: var(--ink);
}
html body .card > .card-body { padding: var(--space-4); }
html body .card.card-interactive:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-primary-rgb), .35);
}

/* ========== PAGE HEADER (new drop-in component) ========== */
.th-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.th-page-header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-hover));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: .9;
}
.th-page-header__title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.th-page-header__crumbs { font-size: .82rem; color: var(--ink-2); margin-top: 2px; }
.th-page-header__crumbs a { color: var(--ink-2); text-decoration: none; }
.th-page-header__crumbs a:hover { color: var(--brand-primary-hover); }
.th-page-header__actions { display: flex; gap: var(--space-2); align-items: center; }

/* ========== DATA TABLE ========== */
html body .table {
  --bs-table-bg: var(--surface);
  --bs-table-border-color: var(--border);
  color: var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
html body .table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
html body .table > thead > tr > th {
  background: var(--surface-muted);
  color: var(--ink-2);
  font-weight: 600;
  font-size: .8rem;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
}
html body .table > tbody > tr:hover > * { background: var(--brand-primary-tint); }
html body .table.table-dark > thead > tr > th { background: var(--ink); color: #fff; }

/* ========== ALERT ========== */
html body .alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
  font-size: .92rem;
}
html body .alert-primary { background: var(--brand-primary-tint); border-color: rgba(var(--brand-primary-rgb), .28); color: var(--brand-primary-hover); }
html body .alert-success { background: rgba(40,167,111,.08); border-color: rgba(40,167,111,.28); color: #1b7a4a; }
html body .alert-warning { background: rgba(255,171,0,.08); border-color: rgba(255,171,0,.32); color: #8a6100; }
html body .alert-danger  { background: rgba(229,72,77,.08);  border-color: rgba(229,72,77,.32);  color: #b32328; }
html body .alert .btn-close:focus-visible { box-shadow: var(--focus-ring); }

/* ========== FORM CONTROL ========== */
html body .form-control,
html body .form-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) calc(var(--space-3) + 2px);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
html body .form-control::placeholder { color: var(--ink-3); }
html body .form-control:hover,
html body .form-select:hover { border-color: rgba(var(--brand-primary-rgb), .35); }
html body .form-control:focus,
html body .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
html body .form-control:disabled { background: var(--surface-muted); color: var(--ink-3); }

/* ========== MODAL ========== */
html body .modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
html body .modal-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
html body .modal-header .modal-title { font-weight: 700; color: var(--ink); }
html body .modal-body { padding: var(--space-6); color: var(--ink); }
html body .modal-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); gap: var(--space-2); }
html body .modal-backdrop.show { opacity: .5; }

/* ========== GLOBAL FOCUS RING ========== */
html body a:focus-visible,
html body button:focus-visible,
html body [role="button"]:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}