/* ============================================================
   FishDog Design System — Components
   ============================================================
   Reusable component classes built on top of tokens.css.
   Load this AFTER tokens.css.

   Naming: .fd-{component}[-{variant}][-{state}]
   All components use --fd-* tokens — never raw hex values.

   Created: 13 April 2026
   Reference: Design_System_Guide.md
   ============================================================ */


/* ============================================================
   BASE RESET
   Apply DM Sans globally when design system is loaded.
   ============================================================ */
.fd-root,
.fd-root *,
.fd-root *::before,
.fd-root *::after {
  box-sizing: border-box;
}

.fd-root {
  font-family: var(--fd-font-sans);
  color: var(--fd-text-primary);
  background-color: var(--fd-surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.fd-root,
body.fd-root #wrapper,
body.fd-root .fd-app-main {
  background-color: var(--fd-surface-0);
}

body.fd-root {
  min-height: 100vh;
}

body.fd-root #wrapper.fd-app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

body.fd-root .fd-app-main {
  flex: 1 0 auto;
}

body.fd-root .fd-card,
body.fd-root .fd-table-wrap {
  box-shadow: var(--fd-shadow-sm);
}


/* ============================================================
   BUTTONS
   Hierarchy: Primary > Secondary > Ghost > Danger
   - Primary (red): "Make something happen" — filled CTA
   - Secondary (red outline): supporting visible actions
   - Ghost (teal): inline links / tertiary actions
   - Danger (red): destructive — modals/menus ONLY
   ============================================================ */
.fd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--fd-space-sm) var(--fd-space-base);
  border-radius: var(--fd-radius-md);
  font-family: var(--fd-font-sans);
  font-size: var(--fd-text-body);
  font-weight: var(--fd-weight-medium);
  line-height: var(--fd-leading-normal);
  cursor: pointer;
  transition: all var(--fd-transition-base);
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.fd-btn:focus-visible {
  outline: 2px solid var(--fd-accent-nav-border);
  outline-offset: 2px;
}

.fd-btn:disabled,
.fd-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — filled red */
.fd-btn-primary {
  background: var(--fd-accent-primary);
  color: var(--fd-accent-primary-text);
}
.fd-btn-primary:hover {
  background: var(--fd-accent-primary-hover);
}

/* Secondary — red outline */
.fd-btn-secondary {
  background: transparent;
  color: var(--fd-accent-primary);
  border: 1.5px solid var(--fd-accent-primary);
}
.fd-btn-secondary:hover {
  background: var(--fd-accent-primary-subtle);
}

/* Ghost — teal text, no border */
.fd-btn-ghost {
  background: transparent;
  color: var(--fd-accent-nav);
  border: none;
  padding: var(--fd-space-sm) var(--fd-space-md);
}
.fd-btn-ghost:hover {
  text-decoration: underline;
}

/* Danger — destructive, modals/menus only */
.fd-btn-danger {
  background: var(--fd-danger-button);
  color: #FFFFFF;
}
.fd-btn-danger:hover {
  background: var(--fd-danger-button-hover);
}

/* Button group */
.fd-btn-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.fd-pill-filter {
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-full);
  padding: 8px 14px;
  background: var(--fd-surface-1);
  color: var(--fd-text-secondary);
  font-size: var(--fd-text-small);
  font-weight: var(--fd-weight-medium);
  line-height: 1;
  text-decoration: none;
}

.fd-pill-filter:hover {
  background: var(--fd-surface-hover);
  color: var(--fd-text-primary);
  text-decoration: none;
}

.fd-pill-filter.is-active,
.fd-pill-filter[aria-pressed="true"] {
  background: var(--fd-accent-primary-subtle);
  border-color: var(--fd-accent-primary);
  color: var(--fd-accent-primary);
}


/* ============================================================
   STATUS BADGES
   Pill-shaped. 4 states: Draft, In Progress, Complete, Archived.
   Study status mapping:
     draft       → Draft (grey)
     recruiting  → In Progress (amber)  — hover: "In Progress (Recruiting)"
     fielding    → In Progress (amber)  — hover: "In Progress (Fielding)"
     analysis    → In Progress (amber)  — hover: "In Progress (Analysis)"
     complete    → Complete (green)
     archived    → Archived (light grey) — hidden from default table view
   ============================================================ */
.fd-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--fd-radius-full);
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-medium);
  white-space: nowrap;
  line-height: var(--fd-leading-normal);
}

.fd-badge-draft {
  background: var(--fd-status-draft-bg);
  color: var(--fd-status-draft-text);
}

.fd-badge-progress {
  background: var(--fd-status-progress-bg);
  color: var(--fd-status-progress-text);
  border: 1px solid color-mix(in srgb, var(--fd-status-progress-text) 18%, transparent);
}

.fd-badge-complete {
  background: var(--fd-status-complete-bg);
  color: var(--fd-status-complete-text);
  border: 1px solid color-mix(in srgb, var(--fd-status-complete-text) 16%, transparent);
}

.fd-badge-archived {
  background: var(--fd-status-archived-bg);
  color: var(--fd-status-archived-text);
}


/* ============================================================
   CARDS
   Elevated content containers. Used for: tables, KPI panels,
   content sections, Perform Research columns, settings panels.
   ============================================================ */
.fd-card {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  padding: 20px;
  box-shadow: var(--fd-shadow-sm);
}

.fd-card-header {
  font-size: var(--fd-text-h3);
  font-weight: var(--fd-weight-semibold);
  color: var(--fd-text-primary);
  margin-bottom: var(--fd-space-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ============================================================
   KPI CARDS
   Summary stat cards (Total Groups, Active Studies, etc.)
   Use in a .fd-kpi-row grid.
   ============================================================ */
.fd-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fd-space-base);
  margin-bottom: var(--fd-space-lg);
}

.fd-kpi-card {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  padding: var(--fd-space-base) 20px;
}

.fd-kpi-label {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-medium);
  color: var(--fd-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wide);
}

.fd-kpi-value {
  font-size: var(--fd-text-display);
  font-weight: var(--fd-weight-bold);
  font-family: var(--fd-font-mono);
  margin-top: var(--fd-space-xs);
  color: var(--fd-text-primary);
}


/* ============================================================
   TABLE SYSTEM
   Built to layer on top of existing DataTables.
   Restyle — don't replace.
   ============================================================ */

/* Table wrapper card */
.fd-table-wrap {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  overflow: hidden;
  box-shadow: var(--fd-shadow-sm);
}

/* Toolbar row (search + count) */
.fd-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fd-space-md) 20px;
  border-bottom: 1px solid var(--fd-border);
}

.fd-table-toolbar-count {
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}

/* Search input */
.fd-search {
  display: flex;
  align-items: center;
  gap: var(--fd-space-sm);
  padding: 7px var(--fd-space-md);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-md);
  background: var(--fd-surface-1);
  width: 240px;
  transition: all var(--fd-transition-base);
}

.fd-search:focus-within {
  border-color: var(--fd-accent-nav);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

.fd-search i,
.fd-search .fa-magnifying-glass {
  color: var(--fd-text-tertiary);
  font-size: var(--fd-text-small);
}

.fd-search input {
  border: none;
  outline: none;
  background: none;
  font-family: var(--fd-font-sans);
  font-size: var(--fd-text-small);
  color: var(--fd-text-primary);
  width: 100%;
}

.fd-search input::placeholder {
  color: var(--fd-text-tertiary);
}

/* Table base */
.fd-table {
  width: 100%;
  border-collapse: collapse;
}

/* Table header */
.fd-table thead th {
  text-align: left;
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wide);
  color: var(--fd-text-secondary);
  padding: 10px var(--fd-space-base);
  border-bottom: 2px solid var(--fd-border);
  white-space: nowrap;
}

.fd-table thead th.fd-col-num {
  text-align: right;
  font-family: var(--fd-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Table body rows */
.fd-table tbody tr {
  border-bottom: 1px solid var(--fd-border-subtle, var(--fd-border));
  cursor: pointer;
  transition: background var(--fd-transition-fast);
}

.fd-table tbody tr:hover {
  background: var(--fd-accent-nav-subtle);
}

.fd-table tbody tr:last-child {
  border-bottom: none;
}

/* Selected row (checkbox checked) */
.fd-table tbody tr.fd-row-selected {
  background: var(--fd-accent-nav-subtle);
  border-left: 3px solid var(--fd-accent-nav-border);
}

/* Table cells */
.fd-table tbody td {
  padding: 14px var(--fd-space-base);
  font-size: var(--fd-text-body);
  vertical-align: top;
}

/* Numeric cells — right-aligned, monospace */
.fd-table tbody td.fd-col-num {
  text-align: right;
  font-family: var(--fd-font-mono);
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Row: name + description pattern */
.fd-row-name {
  font-weight: var(--fd-weight-medium);
  color: var(--fd-text-primary);
}

.fd-row-desc {
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
  margin-top: 2px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 320px;
}

/* Row: link (teal) */
.fd-row-link {
  color: var(--fd-accent-nav);
  text-decoration: none;
}
.fd-row-link:hover {
  color: var(--fd-accent-nav-hover);
  text-decoration: underline;
}

/* Row: date */
.fd-row-date {
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}

/* Row: creator name */
.fd-row-creator {
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}


/* ============================================================
   CHECKBOX
   Teal when checked (navigation accent).
   16x16px, used in table first column for multi-select.
   ============================================================ */
.fd-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #D1D5DB;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--fd-transition-base);
  flex-shrink: 0;
}

[data-bs-theme="dark"] .fd-checkbox,
[data-app-theme="dark"] .fd-checkbox {
  border-color: #4B5563;
}

.fd-checkbox.fd-checked {
  background: var(--fd-accent-nav);
  border-color: var(--fd-accent-nav);
  color: #FFFFFF;
}

.fd-checkbox.fd-checked i {
  font-size: 10px;
}

.fd-checkbox:focus-visible {
  outline: 2px solid var(--fd-accent-nav-border);
  outline-offset: 2px;
}


/* ============================================================
   THREE-DOT ACTION MENU
   Reuses the existing conversation-list dropdown pattern.
   ⋮ button → dropdown with actions, divider, danger zone.
   ============================================================ */

/* Trigger button */
.fd-actions-btn {
  background: none;
  border: none;
  color: var(--fd-text-tertiary);
  cursor: pointer;
  padding: var(--fd-space-xs) var(--fd-space-sm);
  border-radius: var(--fd-radius-sm);
  font-size: 16px;
  transition: all var(--fd-transition-base);
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fd-actions-btn:hover {
  background: var(--fd-surface-hover);
  color: var(--fd-text-primary);
}

.fd-actions-btn:focus-visible {
  outline: 2px solid var(--fd-accent-nav-border);
  outline-offset: 2px;
}

/* Dropdown panel */
.fd-dropdown {
  position: absolute;
  right: 0;
  background-color: var(--fd-surface-2);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  padding: var(--fd-space-xs) 0;
  box-shadow: var(--fd-shadow-md);
  min-width: 180px;
  z-index: 50;
  opacity: 1;
  backdrop-filter: none;
}

.dropdown-menu.fd-dropdown {
  background-color: var(--fd-surface-2);
  opacity: 1;
  backdrop-filter: none;
}

html.dark .dropdown-menu.fd-dropdown,
html[data-app-theme="dark"] .dropdown-menu.fd-dropdown,
body.dark .dropdown-menu.fd-dropdown {
  background-color: var(--fd-surface-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

/* Dropdown item */
.fd-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--fd-space-sm);
  padding: var(--fd-space-sm) var(--fd-space-base);
  font-size: var(--fd-text-body);
  color: var(--fd-text-primary);
  cursor: pointer;
  transition: background var(--fd-transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.fd-dropdown-item:hover {
  background: var(--fd-surface-hover);
}

.fd-dropdown-item:focus-visible {
  background: var(--fd-surface-hover);
  outline: none;
}

.fd-dropdown-item i {
  width: 18px;
  text-align: center;
  color: var(--fd-text-secondary);
  font-size: var(--fd-text-body);
}

/* Danger item (Delete) */
.fd-dropdown-item-danger {
  color: var(--fd-danger);
}
.fd-dropdown-item-danger:hover {
  background: var(--fd-danger-bg);
}
.fd-dropdown-item-danger i {
  color: var(--fd-danger);
}

/* Dropdown divider */
.fd-dropdown-divider {
  border-top: 1px solid var(--fd-border);
  margin: var(--fd-space-xs) 0;
}


/* ============================================================
   LEFT NAVIGATION
   Sidebar: logo, org context, grouped nav items, bottom items.
   Active state uses the approved red pill with white text.
   ============================================================ */
.fd-nav {
  width: 240px;
  background: var(--fd-surface-nav, var(--fd-surface-1));
  border-right: 1px solid var(--fd-border);
  box-shadow: var(--fd-shadow-sm);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
}

/* Logo header */
.fd-nav-header {
  padding: 20px var(--fd-space-base) var(--fd-space-base);
  border-bottom: 1px solid var(--fd-border);
  display: flex;
  align-items: center;
  gap: var(--fd-space-md);
}

.fd-nav-logo {
  color: var(--fd-accent-primary);
  font-size: 24px;
}

.fd-nav-brand {
  font-weight: var(--fd-weight-bold);
  font-size: var(--fd-text-h2);
  color: var(--fd-accent-primary);
}

/* Org context */
.fd-nav-org {
  padding: var(--fd-space-base);
  border-bottom: 1px solid var(--fd-border);
}

.fd-nav-org-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--fd-radius-md);
  background: var(--fd-accent-nav);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fd-weight-semibold);
  font-size: var(--fd-text-small);
  margin-right: 10px;
  vertical-align: middle;
}

.fd-nav-org-name {
  font-weight: var(--fd-weight-semibold);
  font-size: var(--fd-text-body);
  display: inline;
  vertical-align: middle;
}

/* Section labels ("RESEARCH", "DATA") */
.fd-nav-section {
  font-size: var(--fd-text-overline);
  font-weight: var(--fd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wider);
  color: var(--fd-text-tertiary);
  padding: 20px var(--fd-space-base) var(--fd-space-sm);
}

/* Nav items list */
.fd-nav-items {
  list-style: none;
  padding: 0 var(--fd-space-sm);
  margin: 0;
}

/* Individual nav item */
.fd-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--fd-space-sm) var(--fd-space-md);
  border-radius: var(--fd-radius-md);
  font-size: var(--fd-text-body);
  color: var(--fd-text-secondary);
  cursor: pointer;
  transition: all var(--fd-transition-base);
  border-left: 3px solid transparent;
  margin-bottom: 2px;
  text-decoration: none;
}

.fd-nav-item:hover {
  background: var(--fd-surface-hover);
  color: var(--fd-text-primary);
}

.fd-nav-item.fd-active,
.fd-nav-item.active {
  background: var(--fd-accent-primary);
  color: var(--fd-accent-primary-text);
  font-weight: var(--fd-weight-semibold);
  border-left-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fd-accent-primary-hover) 70%, transparent);
}

.fd-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.fd-nav-item.fd-active i,
.fd-nav-item.active i {
  color: inherit;
}

/* Bottom section (Settings, User) — pinned to bottom */
.fd-nav-bottom {
  margin-top: auto;
  padding: var(--fd-space-base) var(--fd-space-sm);
  border-top: 1px solid var(--fd-border);
}


/* ============================================================
   TOP HEADER BAR
   The persistent bar with logo, login, settings.
   Needs a bottom border to separate from page content.
   ============================================================ */
.fd-header {
  border-bottom: 1px solid var(--fd-border);
  background: var(--fd-surface-1);
}

body.fd-root #header.fd-header,
body.fd-root [data-app-header="authenticated"] {
  --cnvs-header-bg: var(--fd-surface-1);
  --cnvs-header-sticky-bg: var(--fd-surface-1);
  --cnvs-header-border-color: var(--fd-border);
  --cnvs-header-transparent-border-color: var(--fd-border);
  background: var(--fd-surface-1);
  border-bottom: 1px solid var(--fd-border);
}

body.fd-root #header.fd-header #header-wrap,
body.fd-root #header.fd-header.full-header.transparent-header #header-wrap,
body.fd-root #header.fd-header.sticky-header #header-wrap {
  background: var(--fd-surface-1);
  border-bottom: 1px solid var(--fd-border);
}

body.fd-root #header.fd-header #header-wrap > .container,
body.fd-root #header.fd-header.full-header.transparent-header #header-wrap > .container,
body.fd-root #header.fd-header.sticky-header #header-wrap > .container,
body.fd-root #header.fd-header .header-row,
body.fd-root #header.fd-header.full-header.transparent-header .header-row,
body.fd-root #header.fd-header.sticky-header .header-row {
  background: var(--fd-surface-1);
}

html[data-app-theme="dark"] body.fd-root #header.fd-header #header-wrap.not-dark,
html[data-app-theme="dark"] body.fd-root #header.fd-header.sticky-header #header-wrap.not-dark {
  --fd-border: #374151;
  --fd-surface-1: #1F2937;
  background: var(--fd-surface-1);
  border-bottom-color: var(--fd-border);
}


/* ============================================================
   PAGE LAYOUT
   Consistent page header pattern for all authenticated screens.
   ============================================================ */
.fd-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fd-space-lg);
}

.fd-page-title {
  font-size: var(--fd-text-h1);
  font-weight: var(--fd-weight-bold);
  color: var(--fd-text-primary);
  line-height: var(--fd-leading-snug);
  letter-spacing: var(--fd-tracking-snug);
}

.fd-page-subtitle {
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
  margin-top: var(--fd-space-xs);
}


/* ============================================================
   PAGE SHELLS
   Shared wrappers for remaining authenticated pages.
   ============================================================ */
.fd-page-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: var(--fd-space-lg) 0 var(--fd-space-2xl);
}

.fd-page-shell-wide {
  width: min(1360px, calc(100% - 32px));
}

.fd-page-shell-study-flow {
  width: calc(100% - 32px);
  max-width: 100%;
}

.fd-page-shell-full {
  width: min(1480px, calc(100% - 32px));
}

.fd-page-shell-narrow {
  width: min(860px, calc(100% - 32px));
}

.fd-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--fd-space-sm);
  font-size: var(--fd-text-overline);
  font-weight: var(--fd-weight-semibold);
  letter-spacing: var(--fd-tracking-wider);
  text-transform: uppercase;
  color: var(--fd-text-tertiary);
}

.fd-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fd-space-sm);
  align-items: center;
}

.fd-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--fd-space-md);
  color: var(--fd-accent-nav);
  text-decoration: none;
  font-size: var(--fd-text-small);
  font-weight: var(--fd-weight-medium);
}

.fd-page-back:hover {
  color: var(--fd-accent-nav-hover);
  text-decoration: underline;
}

.fd-shell-grid {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: var(--fd-space-lg);
  align-items: start;
}

.fd-shell-sidebar,
.fd-shell-main {
  min-width: 0;
}

.fd-panel {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  box-shadow: var(--fd-shadow-sm);
  overflow: hidden;
}

.fd-panel + .fd-panel {
  margin-top: var(--fd-space-lg);
}

.fd-panel-header {
  padding: 20px 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fd-space-md);
}

.fd-panel-title {
  font-size: var(--fd-text-h2);
  font-weight: var(--fd-weight-semibold);
  color: var(--fd-text-primary);
  line-height: var(--fd-leading-snug);
}

.fd-panel-subtitle {
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
  margin-top: 6px;
}

.fd-panel-body {
  padding: 20px;
}

.fd-panel-header + .fd-panel-body {
  padding-top: var(--fd-space-base);
}

.fd-panel-muted {
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 38%),
    linear-gradient(180deg, var(--fd-surface-1), var(--fd-surface-nav));
}

.fd-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fd-space-md);
}

.fd-stat-card {
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  background:
    radial-gradient(circle at top right, rgba(230, 57, 70, 0.06), transparent 36%),
    linear-gradient(180deg, var(--fd-surface-1), var(--fd-surface-nav));
  padding: var(--fd-space-base);
}

.fd-stat-label {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wide);
  color: var(--fd-text-secondary);
}

.fd-stat-value {
  margin-top: 6px;
  font-size: var(--fd-text-h1);
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-tight);
  color: var(--fd-text-primary);
}

.fd-stat-meta {
  margin-top: 6px;
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}

.fd-empty-state {
  border: 1px dashed var(--fd-border);
  border-radius: var(--fd-radius-lg);
  padding: var(--fd-space-lg);
  background: var(--fd-surface-nav);
  color: var(--fd-text-secondary);
  text-align: center;
}

.fd-hero-panel {
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 40%),
    linear-gradient(180deg, var(--fd-surface-1), var(--fd-surface-nav));
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  box-shadow: var(--fd-shadow-sm);
  padding: 24px;
}

.fd-content-card {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  box-shadow: var(--fd-shadow-sm);
  padding: 24px;
}

.fd-section-grid {
  display: grid;
  gap: var(--fd-space-lg);
}

.fd-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fd-space-lg);
}

.fd-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fd-space-lg);
}

.fd-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--fd-space-md);
}

.fd-metric-card {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  box-shadow: var(--fd-shadow-sm);
  padding: 18px 20px;
}

.fd-metric-label {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wide);
  color: var(--fd-text-secondary);
}

.fd-metric-value {
  margin-top: 8px;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1;
  font-weight: var(--fd-weight-bold);
  color: var(--fd-text-primary);
}

.fd-metric-note {
  margin-top: 8px;
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}

.fd-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--fd-radius-full);
  border: 1px solid var(--fd-border);
  background: var(--fd-surface-nav);
  color: var(--fd-text-primary);
  font-size: var(--fd-text-small);
  font-weight: var(--fd-weight-medium);
  line-height: 1.2;
}

.fd-code-block {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--fd-radius-lg);
  border: 1px solid var(--fd-border);
  background: color-mix(in srgb, var(--fd-surface-nav) 88%, #0f172a 12%);
  color: var(--fd-text-primary);
  font-family: var(--fd-font-mono);
  font-size: var(--fd-text-small);
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.fd-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fd-space-base);
}

.fd-meta-label {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wide);
  color: var(--fd-text-secondary);
  margin-bottom: 6px;
}

.fd-meta-value {
  color: var(--fd-text-primary);
  font-size: var(--fd-text-body);
  font-weight: var(--fd-weight-medium);
}

.fd-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fd-progress-label {
  min-width: 124px;
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}

.fd-progress-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 12px;
  border-radius: var(--fd-radius-full);
  overflow: hidden;
  background: color-mix(in srgb, var(--fd-border) 80%, var(--fd-surface-nav) 20%);
}

.fd-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fd-accent-nav), color-mix(in srgb, var(--fd-accent-nav) 72%, white 28%));
}

.fd-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fd-space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.fd-admin-nav-panel {
  margin-bottom: var(--fd-space-lg);
}

.fd-admin-nav-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fd-space-md);
}

.fd-admin-title {
  font-size: var(--fd-text-h2);
  line-height: var(--fd-leading-snug);
  font-weight: var(--fd-weight-semibold);
  color: var(--fd-text-primary);
}

.fd-admin-subtitle {
  margin-top: 6px;
  font-size: var(--fd-text-small);
  color: var(--fd-text-secondary);
}

.fd-admin-tabbar,
.fd-admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fd-admin-subnav {
  margin-top: 14px;
}

.fd-admin-tab,
.fd-admin-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--fd-radius-full);
  border: 1px solid var(--fd-border);
  background: var(--fd-surface-1);
  color: var(--fd-text-secondary);
  text-decoration: none;
  font-size: var(--fd-text-small);
  font-weight: var(--fd-weight-medium);
  line-height: 1.2;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.fd-admin-tab:hover,
.fd-admin-subtab:hover {
  color: var(--fd-text-primary);
  border-color: color-mix(in srgb, var(--fd-accent-nav) 36%, var(--fd-border));
  background: color-mix(in srgb, var(--fd-accent-nav) 8%, var(--fd-surface-nav));
  text-decoration: none;
}

.fd-admin-tab.active,
.fd-admin-subtab.active {
  background: var(--fd-accent-primary);
  border-color: var(--fd-accent-primary);
  color: var(--fd-accent-primary-text);
  box-shadow: 0 12px 24px rgba(230, 57, 70, 0.16);
}

.fd-admin-tab.active:hover,
.fd-admin-subtab.active:hover {
  color: var(--fd-accent-primary-text);
  background: var(--fd-accent-primary-hover);
  border-color: var(--fd-accent-primary-hover);
}

.fd-admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.fd-admin-filter-actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.fd-admin-filter-span-2 { grid-column: span 2; }
.fd-admin-filter-span-3 { grid-column: span 3; }
.fd-admin-filter-span-4 { grid-column: span 4; }
.fd-admin-filter-span-5 { grid-column: span 5; }
.fd-admin-filter-span-6 { grid-column: span 6; }
.fd-admin-filter-span-8 { grid-column: span 8; }
.fd-admin-filter-span-12 { grid-column: 1 / -1; }

.fd-admin-meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fd-space-base);
}

.fd-admin-meta-item {
  min-width: 0;
}

.fd-admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fd-admin-list > li + li {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fd-border);
}

.fd-admin-stack {
  display: grid;
  gap: var(--fd-space-lg);
}


/* ============================================================
   FORM + CONTENT NORMALIZATION
   Only active inside fd-page-shell wrappers.
   ============================================================ */
.fd-page-shell .btn {
  border-radius: var(--fd-radius-md);
  font-size: var(--fd-text-body);
  font-weight: var(--fd-weight-medium);
  transition: all var(--fd-transition-base);
}

.fd-page-shell .btn-primary {
  background: var(--fd-accent-primary);
  border-color: var(--fd-accent-primary);
  color: var(--fd-accent-primary-text);
}

.fd-page-shell .btn-primary:hover,
.fd-page-shell .btn-primary:focus {
  background: var(--fd-accent-primary-hover);
  border-color: var(--fd-accent-primary-hover);
}

.fd-page-shell .btn-outline-primary {
  color: var(--fd-accent-primary);
  border-color: var(--fd-accent-primary);
}

.fd-page-shell .btn-outline-primary:hover,
.fd-page-shell .btn-outline-primary:focus {
  background: var(--fd-accent-primary-subtle);
  border-color: var(--fd-accent-primary);
  color: var(--fd-accent-primary);
}

.fd-page-shell .btn-outline-secondary,
.fd-page-shell .btn-outline-dark {
  color: var(--fd-text-primary);
  border-color: var(--fd-border);
  background: var(--fd-surface-1);
}

.fd-page-shell .btn-outline-secondary:hover,
.fd-page-shell .btn-outline-secondary:focus,
.fd-page-shell .btn-outline-dark:hover,
.fd-page-shell .btn-outline-dark:focus {
  background: var(--fd-surface-hover);
  border-color: var(--fd-border);
  color: var(--fd-text-primary);
}

.fd-page-shell .btn-link {
  color: var(--fd-accent-nav);
}

.fd-page-shell .btn-link:hover,
.fd-page-shell .btn-link:focus {
  color: var(--fd-accent-nav-hover);
}

.fd-form-shell label,
.fd-page-shell .form-label,
.fd-page-shell .small.form-label {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-semibold);
  letter-spacing: var(--fd-tracking-wide);
  text-transform: uppercase;
  color: var(--fd-text-secondary);
}

.fd-form-shell .form-control,
.fd-form-shell .form-select,
.fd-form-shell .custom-select,
.fd-form-shell select,
.fd-form-shell textarea,
.fd-form-shell input:not([type="checkbox"]):not([type="radio"]),
.fd-page-shell .form-control,
.fd-page-shell .form-select,
.fd-page-shell .custom-select {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-md);
  color: var(--fd-text-primary);
  box-shadow: none;
  min-height: 42px;
}

.fd-form-shell textarea,
.fd-page-shell textarea.form-control {
  min-height: 120px;
}

.fd-form-shell .form-control:focus,
.fd-form-shell .form-select:focus,
.fd-form-shell .custom-select:focus,
.fd-page-shell .form-control:focus,
.fd-page-shell .form-select:focus,
.fd-page-shell .custom-select:focus {
  border-color: var(--fd-accent-nav);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

[data-bs-theme="dark"] .fd-form-shell .form-control:focus,
[data-bs-theme="dark"] .fd-form-shell .form-select:focus,
[data-bs-theme="dark"] .fd-form-shell .custom-select:focus,
[data-app-theme="dark"] .fd-form-shell .form-control:focus,
[data-app-theme="dark"] .fd-form-shell .form-select:focus,
[data-app-theme="dark"] .fd-form-shell .custom-select:focus,
[data-bs-theme="dark"] .fd-page-shell .form-control:focus,
[data-bs-theme="dark"] .fd-page-shell .form-select:focus,
[data-bs-theme="dark"] .fd-page-shell .custom-select:focus,
[data-app-theme="dark"] .fd-page-shell .form-control:focus,
[data-app-theme="dark"] .fd-page-shell .form-select:focus,
[data-app-theme="dark"] .fd-page-shell .custom-select:focus {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}

.fd-page-shell .form-text,
.fd-page-shell .text-muted,
.fd-form-shell .form-text {
  color: var(--fd-text-secondary) !important;
}

.fd-page-shell .alert {
  border-radius: var(--fd-radius-lg);
  border: 1px solid var(--fd-border);
}

.fd-admin-shell .alert {
  border-color: transparent;
}

.fd-page-shell .list-group-item {
  border-color: var(--fd-border);
  background: var(--fd-surface-1);
}

.fd-page-shell .table:not(.dataTable) {
  color: var(--fd-text-primary);
  margin-bottom: 0;
}

.fd-page-shell .table:not(.dataTable) thead th {
  font-size: var(--fd-text-caption);
  font-weight: var(--fd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fd-tracking-wide);
  color: var(--fd-text-secondary);
  border-bottom-color: var(--fd-border);
  white-space: nowrap;
}

.fd-page-shell .table:not(.dataTable) td,
.fd-page-shell .table:not(.dataTable) th {
  border-top-color: var(--fd-border-subtle);
  vertical-align: middle;
}

.fd-admin-shell .table td,
.fd-admin-shell .table th {
  vertical-align: middle;
}

.fd-admin-shell .list-group-item {
  border-color: var(--fd-border);
}

.fd-page-shell .dataTables_wrapper .dataTables_filter,
.fd-page-shell .dataTables_wrapper .dataTables_length,
.fd-page-shell .dataTables_wrapper .dataTables_info,
.fd-page-shell .dataTables_wrapper .dataTables_paginate {
  color: var(--fd-text-secondary);
  font-size: var(--fd-text-small);
}

.fd-page-shell .dataTables_wrapper .dataTables_filter label,
.fd-page-shell .dataTables_wrapper .dataTables_length label {
  font-weight: var(--fd-weight-medium);
  color: var(--fd-text-secondary);
}

.fd-page-shell .dataTables_wrapper .dataTables_filter input,
.fd-page-shell .dataTables_wrapper .dataTables_length select {
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-md);
  color: var(--fd-text-primary);
  min-height: 38px;
  padding: 6px 10px;
  box-shadow: none;
}

.fd-page-shell .dataTables_wrapper .dataTables_filter input:focus,
.fd-page-shell .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--fd-accent-nav);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
  outline: none;
}

.fd-page-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--fd-radius-md) !important;
  border: 1px solid transparent !important;
  color: var(--fd-text-secondary) !important;
  background: transparent !important;
}

.fd-page-shell .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--fd-border) !important;
  background: var(--fd-surface-hover) !important;
  color: var(--fd-text-primary) !important;
}

.fd-page-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.fd-page-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: var(--fd-accent-nav) !important;
  background: var(--fd-accent-nav-subtle) !important;
  color: var(--fd-accent-nav) !important;
}

.fd-page-shell .dropzone {
  border: 1px dashed var(--fd-border);
  border-radius: var(--fd-radius-lg);
  background: var(--fd-surface-nav);
}

.fd-page-shell .dropzone .dz-message {
  color: var(--fd-text-secondary);
}

@media (max-width: 991.98px) {
  .fd-admin-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-admin-filter-span-2,
  .fd-admin-filter-span-3,
  .fd-admin-filter-span-4,
  .fd-admin-filter-span-5,
  .fd-admin-filter-span-6,
  .fd-admin-filter-span-8,
  .fd-admin-filter-span-12 {
    grid-column: span 2;
  }

  .fd-page-shell,
  .fd-page-shell-wide,
  .fd-page-shell-full,
  .fd-page-shell-narrow {
    width: min(100%, calc(100% - 24px));
    padding-top: var(--fd-space-base);
  }

  .fd-page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--fd-space-md);
  }

  .fd-shell-grid {
    grid-template-columns: 1fr;
  }

  .fd-grid-2,
  .fd-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .fd-admin-filter-grid {
    grid-template-columns: 1fr;
  }

  .fd-admin-filter-span-2,
  .fd-admin-filter-span-3,
  .fd-admin-filter-span-4,
  .fd-admin-filter-span-5,
  .fd-admin-filter-span-6,
  .fd-admin-filter-span-8,
  .fd-admin-filter-span-12 {
    grid-column: span 1;
  }
}


/* ============================================================
   FOOTER
   Slim single-line utility footer. No logo, no stats, no address.
   ============================================================ */
.fd-footer {
  text-align: center;
  padding: var(--fd-space-xl) var(--fd-space-base) var(--fd-space-base);
  font-size: var(--fd-text-caption);
  color: var(--fd-text-tertiary);
  margin-top: auto;
}

.fd-footer a {
  color: var(--fd-text-tertiary);
  text-decoration: none;
}

.fd-footer a:hover {
  text-decoration: underline;
}


/* ============================================================
   LINKS (inline / general)
   All non-button links use teal.
   ============================================================ */
.fd-link {
  color: var(--fd-accent-nav);
  text-decoration: none;
  transition: color var(--fd-transition-base);
}

.fd-link:hover {
  color: var(--fd-accent-nav-hover);
  text-decoration: underline;
}

.fd-link:focus-visible {
  outline: 2px solid var(--fd-accent-nav-border);
  outline-offset: 2px;
}


/* ============================================================
   FORM INPUTS
   Consistent input styling with teal focus ring.
   ============================================================ */
.fd-input {
  font-family: var(--fd-font-sans);
  font-size: var(--fd-text-body);
  color: var(--fd-text-primary);
  background: var(--fd-surface-1);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-md);
  padding: var(--fd-space-sm) var(--fd-space-md);
  transition: all var(--fd-transition-base);
  width: 100%;
}

.fd-input::placeholder {
  color: var(--fd-text-tertiary);
}

.fd-input:focus {
  outline: none;
  border-color: var(--fd-accent-nav);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

[data-bs-theme="dark"] .fd-input:focus,
[data-app-theme="dark"] .fd-input:focus {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}