/* Destinella Admin -- design tokens (business-admin-design-system, Razor+Bootstrap5 idiom).
   Single source of truth: semantic CSS custom properties only. Never hardcode raw hex/px in
   markup or component CSS below -- always reference one of these tokens. */
:root {
  /* Semantic color tokens (light) */
  --color-surface: #ffffff;
  --color-surface-muted: #f5f6f8;
  --color-border: #dee2e6;
  --color-text: #1b1f24;
  --color-text-muted: #5c6470;
  --color-accent: #2f5fda;
  --color-accent-contrast: #ffffff;
  --color-success: #1e7e34;
  --color-warning: #a66300;
  --color-danger: #c0392b;
  --color-info: #0d6ea8;

  /* Typography scale (admin = data-dense, base 14px) */
  --font-family-base: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius / shadow */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);

  --sidebar-width: 264px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #16181d;
    --color-surface-muted: #1e2126;
    --color-border: #30343b;
    --color-text: #e7e9ec;
    --color-text-muted: #9aa3ad;
    --color-accent: #6f93f2;
    --color-accent-contrast: #0b0d10;
    --color-success: #4cb963;
    --color-warning: #e0a53c;
    --color-danger: #e5675b;
    --color-info: #4fa8d8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

html, body {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

table.table-numeric td { font-variant-numeric: tabular-nums; text-align: right; }

/* -- Shell layout --------------------------------------------------------- */
.admin-shell { min-height: 100vh; }

.admin-sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  min-height: 100vh;
}

.admin-sidebar .nav-link {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.admin-sidebar .nav-link.active {
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
}

.admin-sidebar .nav-link:hover:not(.active) {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.admin-topbar {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.admin-content {
  padding: var(--space-5);
}

.admin-brand {
  font-weight: 600;
  font-size: var(--font-size-lg);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* -- Cards / surfaces ------------------------------------------------------ */
.surface-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* -- Data table states (loading/empty/error) -------------------------------- */
.dt-skeleton-row td {
  padding: var(--space-3) var(--space-4);
}

.dt-skeleton-bar {
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-border) 37%, var(--color-surface-muted) 63%);
  background-size: 400% 100%;
  animation: dt-skeleton-shimmer 1.4s ease infinite;
}

@keyframes dt-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.dt-state-panel {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.dt-state-panel .dt-state-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
  display: block;
}

.dt-state-panel.dt-state-error .dt-state-icon { color: var(--color-danger); }

/* -- Bulk action bar -------------------------------------------------------- */
.bulk-action-bar {
  position: sticky;
  bottom: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: none;
}

.bulk-action-bar.is-visible { display: flex; }

/* -- Status badges (color + icon/text, never color alone) ------------------ */
.status-badge { font-size: var(--font-size-xs); }

/* -- Focus visibility (WCAG 2.1 AA) ----------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.nav-link:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}