@import "../styles/phase16-tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
}

.shell {
  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}

.panel {
  @apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
  border-color: rgb(231 229 228 / 0.8);
  background-color: rgb(255 255 255 / 0.82);
}

html.dark body {
  background-image:
    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
}

html.dark .panel {
  border-color: rgb(30 60 140 / 0.40);
  background-color: rgb(11 25 55 / 0.72);
}

@layer utilities {
  .light body {
    color: rgb(28 25 23);
  }

  /* ── Dark mode: zinc classes → deep navy blue ─────────────── */
  .bg-zinc-950 {
    background-color: rgb(6 13 30);
  }

  .bg-zinc-950\/90 {
    background-color: rgb(6 13 30 / 0.9);
  }

  .bg-zinc-900 {
    background-color: rgb(11 25 55);
  }

  .bg-zinc-800,
  .bg-zinc-800\/50 {
    background-color: rgb(20 42 90);
  }

  .border-zinc-800,
  .border-zinc-700 {
    border-color: rgb(30 60 130);
  }

  .text-zinc-100,
  .text-zinc-200 {
    color: rgb(241 245 249);
  }

  .text-zinc-500 {
    color: rgb(148 163 184);
  }

  .text-zinc-400,
  .text-zinc-300 {
    color: rgb(100 116 139);
  }

  .hover\:bg-zinc-800:hover,
  .hover\:bg-zinc-800\/50:hover {
    background-color: rgb(30 55 115);
  }

  .hover\:text-zinc-200:hover {
    color: rgb(241 245 249);
  }

  /* ── Primary action (emerald class → orange) ──────────────── */
  .text-emerald-400 {
    color: rgb(251 146 60);
  }

  .bg-emerald-600 {
    background-color: rgb(234 88 12);
  }

  .hover\:bg-emerald-500:hover {
    background-color: rgb(194 65 12);
  }

  .dark .bg-emerald-600 {
    background-color: rgb(249 115 22);
  }

  .dark .hover\:bg-emerald-500:hover {
    background-color: rgb(251 146 60);
  }

  .bg-emerald-900\/30,
  .bg-emerald-950\/40,
  .bg-emerald-950\/50 {
    background-color: rgb(154 52 18 / 0.22);
  }

  .border-emerald-500 {
    border-color: rgb(249 115 22);
  }

  .focus\:ring-emerald-500:focus {
    --tw-ring-color: rgb(234 88 12 / 0.45);
  }

  .hover\:bg-emerald-900\/50:hover {
    background-color: rgb(154 52 18 / 0.35);
  }

  /* ── Light mode: zinc classes → white / stone-light ──────── */
  .light .bg-zinc-950 {
    background-color: rgb(255 253 248);
  }

  .light .bg-zinc-950\/90 {
    background-color: rgb(255 255 255 / 0.9);
  }

  .light .bg-zinc-900 {
    background-color: rgb(255 255 255 / 0.82);
  }

  .light .bg-zinc-800,
  .light .bg-zinc-800\/50 {
    background-color: rgb(245 245 244);
  }

  .light .border-zinc-800,
  .light .border-zinc-700 {
    border-color: rgb(231 229 228);
  }

  .light .text-zinc-100,
  .light .text-zinc-200 {
    color: rgb(28 25 23);
  }

  .light .text-zinc-500 {
    color: rgb(120 113 108);
  }

  .light .text-zinc-400,
  .light .text-zinc-300 {
    color: rgb(87 83 78);
  }

  .light .hover\:bg-zinc-800:hover,
  .light .hover\:bg-zinc-800\/50:hover {
    background-color: rgb(245 245 244);
  }

  .light .hover\:text-zinc-200:hover {
    color: rgb(28 25 23);
  }
}

/* Phase 16 operational application layer */
@layer base {
  html {
    min-width: 320px;
    background: var(--rdg-surface-page);
    color: var(--rdg-text-primary);
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: 100dvh;
    background: var(--rdg-surface-page);
    color: var(--rdg-text-primary);
    font-family: var(--rdg-font-latin);
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--rdg-text-primary);
    line-height: 1.18;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer components {
  .shell {
    width: min(100%, var(--rdg-container-max));
  }

  .panel,
  .card,
  .glass-card,
  .site-panel {
    border-color: var(--rdg-border);
    border-radius: var(--rdg-radius-lg);
    background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
    box-shadow: var(--rdg-shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .site-panel-muted {
    border-color: var(--rdg-border);
    border-radius: var(--rdg-radius-lg);
    background: var(--rdg-surface-muted);
  }

  .site-panel-contrast {
    border-color: color-mix(in srgb, var(--rdg-blue-700) 68%, var(--rdg-border));
    border-radius: var(--rdg-radius-lg);
    background:
      radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--rdg-blue-500) 30%, transparent), transparent 40%),
      linear-gradient(135deg, var(--rdg-navy-900), var(--rdg-blue-800));
  }

  .btn-primary,
  .site-link-primary {
    min-height: var(--rdg-touch-min);
    border-radius: var(--rdg-radius-sm);
    background: var(--rdg-action-conversion);
    color: #ffffff;
    box-shadow: var(--rdg-shadow-subtle);
  }

  .btn-primary:hover,
  .site-link-primary:hover {
    background: var(--rdg-action-conversion-hover);
  }

  .btn-secondary,
  .site-link-secondary {
    min-height: var(--rdg-touch-min);
    border-color: var(--rdg-border-strong);
    border-radius: var(--rdg-radius-sm);
    background: var(--rdg-surface-primary);
    color: var(--rdg-action-primary);
  }

  .btn-secondary:hover,
  .site-link-secondary:hover {
    border-color: var(--rdg-action-primary);
    background: var(--rdg-soft-blue);
    color: var(--rdg-action-primary-hover);
  }

  .input-field,
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    min-height: var(--rdg-touch-min);
    border-color: var(--rdg-border);
    border-radius: var(--rdg-radius-sm);
    background: var(--rdg-surface-primary);
    color: var(--rdg-text-primary);
  }

  .input-field::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: var(--rdg-text-subdued);
  }

  table {
    border-color: var(--rdg-border);
  }

  thead {
    background: var(--rdg-surface-muted);
    color: var(--rdg-text-secondary);
  }

  tbody tr {
    border-color: var(--rdg-border);
  }
}

@media (forced-colors: active) {
  .panel,
  .card,
  .glass-card,
  .site-panel,
  .site-panel-muted,
  .site-panel-contrast {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* Phase 16 admin semantic corrections: blue actions, green status, orange focus. */
@layer utilities {
  .text-emerald-400 { color: rgb(52 211 153); }
  .text-emerald-300 { color: rgb(110 231 183); }
  .text-emerald-500 { color: rgb(16 185 129); }
  .text-emerald-600 { color: rgb(5 150 105); }
  .bg-emerald-400 { background-color: rgb(52 211 153); }
  .bg-emerald-500 { background-color: rgb(16 185 129); }
  .bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.10); }
  .bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.15); }
  .bg-emerald-900\/20 { background-color: rgb(6 78 59 / 0.20); }
  .bg-emerald-900\/30 { background-color: rgb(6 78 59 / 0.30); }
  .bg-emerald-900\/40 { background-color: rgb(6 78 59 / 0.40); }
  .bg-emerald-950\/40 { background-color: rgb(2 44 34 / 0.40); }
  .bg-emerald-950\/50 { background-color: rgb(2 44 34 / 0.50); }
  .border-emerald-500 { border-color: rgb(16 185 129); }
  .border-emerald-500\/30 { border-color: rgb(16 185 129 / 0.30); }
  .hover\:bg-emerald-900\/50:hover { background-color: rgb(6 78 59 / 0.50); }
  .focus\:ring-orange-500:focus { --tw-ring-color: rgb(249 115 22 / 0.50); }
}

html.dark body,
html[data-theme='dark'] body {
  background: var(--rdg-surface-page);
}

html.dark .panel,
html.dark .card,
html.dark .glass-card,
html[data-theme='dark'] .panel,
html[data-theme='dark'] .card,
html[data-theme='dark'] .glass-card {
  border-color: var(--rdg-border);
  background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
  box-shadow: var(--rdg-shadow-card);
}

/* ==============================================================
   Phase 16 operational shell
   Mirrors the approved homepage system: precise blue hierarchy,
   orange conversion accents, calm surfaces, 44px controls, true RTL,
   and restrained depth instead of dashboard-template theatrics.
   ============================================================== */

.rdg-app-shell {
  min-height: 100dvh;
  color: var(--rdg-text-primary);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rdg-blue-100) 72%, transparent), transparent 30rem),
    radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--rdg-orange-100) 48%, transparent), transparent 25rem),
    linear-gradient(180deg, var(--rdg-surface-page), color-mix(in srgb, var(--rdg-soft-blue) 52%, var(--rdg-surface-page)) 52%, var(--rdg-surface-page));
}

html.dark .rdg-app-shell,
html[data-theme='dark'] .rdg-app-shell {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--rdg-blue-800) 22%, transparent), transparent 32rem),
    radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--rdg-orange-700) 10%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--rdg-navy-950), #09172a 54%, var(--rdg-navy-950));
}

.rdg-workspace {
  min-width: 0;
  flex: 1 1 auto;
}

.rdg-sidebar {
  border-color: var(--rdg-border) !important;
  background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
  color: var(--rdg-text-primary) !important;
  box-shadow: 10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[dir='rtl'] .rdg-sidebar {
  box-shadow: -10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
}

.rdg-sidebar-brand {
  min-height: var(--rdg-header-size);
  border-color: var(--rdg-border) !important;
}

.rdg-brand-mark {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--rdg-radius-sm);
  background: var(--rdg-action-primary) !important;
  color: #fff;
  box-shadow: var(--rdg-shadow-subtle);
}

.rdg-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--rdg-action-primary) 25%, transparent) transparent;
}

.rdg-nav-item {
  position: relative;
  min-height: var(--rdg-touch-min);
  border: 1px solid transparent;
  border-radius: var(--rdg-radius-sm) !important;
  color: var(--rdg-text-secondary) !important;
  transition:
    color var(--rdg-duration-standard) var(--rdg-easing),
    background var(--rdg-duration-standard) var(--rdg-easing),
    border-color var(--rdg-duration-standard) var(--rdg-easing),
    transform var(--rdg-duration-standard) var(--rdg-easing);
}

.rdg-nav-item:hover {
  border-color: color-mix(in srgb, var(--rdg-action-primary) 18%, var(--rdg-border));
  background: var(--rdg-soft-blue) !important;
  color: var(--rdg-action-primary-hover) !important;
}

.rdg-nav-item[aria-current='page'],
.rdg-nav-item[data-active='true'] {
  border-color: color-mix(in srgb, var(--rdg-action-primary) 35%, var(--rdg-border));
  background: var(--rdg-action-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--rdg-action-primary) 22%, transparent) !important;
}

html.dark .rdg-nav-item[aria-current='page'],
html.dark .rdg-nav-item[data-active='true'] {
  color: var(--rdg-navy-950) !important;
}

.rdg-nav-item[aria-current='page'] svg,
.rdg-nav-item[data-active='true'] svg {
  color: inherit !important;
}

.rdg-sidebar-footer {
  border-color: var(--rdg-border) !important;
}

.rdg-user-card {
  border: 1px solid var(--rdg-border) !important;
  border-radius: var(--rdg-radius-md) !important;
  background: var(--rdg-surface-muted) !important;
}

.rdg-avatar {
  display: inline-grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--rdg-radius-sm) !important;
  background: var(--rdg-action-primary) !important;
  color: #fff !important;
  font-weight: 800;
}

.rdg-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: var(--rdg-header-size);
  align-items: center;
  justify-content: space-between;
  gap: var(--rdg-space-4);
  border-bottom: 1px solid var(--rdg-border) !important;
  background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
  color: var(--rdg-text-primary) !important;
  box-shadow: var(--rdg-shadow-subtle);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.rdg-topbar-title {
  margin: 0;
  color: var(--rdg-text-primary) !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.rdg-topbar-kicker,
.rdg-page-kicker {
  margin: 0;
  color: var(--rdg-action-conversion) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[dir='rtl'] .rdg-topbar-kicker,
html[dir='rtl'] .rdg-page-kicker {
  letter-spacing: normal;
  text-transform: none;
}

.rdg-system-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: var(--rdg-space-2);
  border: 1px solid color-mix(in srgb, var(--rdg-green-700) 22%, var(--rdg-border));
  border-radius: var(--rdg-radius-pill);
  padding: 0 var(--rdg-space-3);
  background: color-mix(in srgb, var(--rdg-green-100) 64%, var(--rdg-surface-primary));
  color: var(--rdg-green-700);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

html.dark .rdg-system-status {
  background: color-mix(in srgb, var(--rdg-green-700) 16%, var(--rdg-surface-primary));
  color: #86efac;
}

.rdg-system-status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
  content: '';
}

.rdg-search-field {
  min-height: 42px !important;
  border-color: var(--rdg-border) !important;
  border-radius: var(--rdg-radius-sm) !important;
  background: var(--rdg-surface-muted) !important;
  color: var(--rdg-text-primary) !important;
  box-shadow: none !important;
}

.rdg-search-field:focus {
  border-color: var(--rdg-action-primary) !important;
  background: var(--rdg-surface-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 12%, transparent) !important;
}

.rdg-app-main {
  min-width: 0;
  flex: 1 1 auto;
  padding: clamp(20px, 3vw, 40px);
}

.rdg-app-content {
  width: min(100%, var(--rdg-container-max));
  margin-inline: auto;
}

.rdg-app-content > * {
  width: 100%;
  margin-inline: auto;
}

.rdg-app-content h1 {
  color: var(--rdg-text-primary) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 850 !important;
  letter-spacing: -0.035em;
}

.rdg-app-content h2 {
  color: var(--rdg-text-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.rdg-app-content h3,
.rdg-app-content h4 {
  color: var(--rdg-text-primary) !important;
  font-weight: 750 !important;
}

.rdg-app-content p {
  color: inherit;
}

.rdg-page-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rdg-border);
  border-radius: var(--rdg-radius-xl);
  padding: clamp(24px, 4vw, 40px);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--rdg-blue-500) 18%, transparent), transparent 38%),
    var(--rdg-surface-elevated);
  box-shadow: var(--rdg-shadow-card);
}

.rdg-page-hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
  content: '';
}

.rdg-page-description {
  max-width: 68ch;
  color: var(--rdg-text-secondary) !important;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Core surfaces. These intentionally match homepage Card/StateShell geometry. */
.rdg-app-shell .card,
.rdg-app-shell .panel,
.rdg-app-shell .glass-card {
  border: 1px solid var(--rdg-border) !important;
  border-radius: var(--rdg-radius-lg) !important;
  background: color-mix(in srgb, var(--rdg-surface-elevated) 96%, transparent) !important;
  box-shadow: var(--rdg-shadow-card) !important;
  color: var(--rdg-text-primary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.rdg-app-shell a.card,
.rdg-app-shell a.panel,
.rdg-app-shell button.card,
.rdg-app-shell button.panel {
  transition:
    transform var(--rdg-duration-standard) var(--rdg-easing),
    border-color var(--rdg-duration-standard) var(--rdg-easing),
    box-shadow var(--rdg-duration-standard) var(--rdg-easing);
}

.rdg-app-shell a.card:hover,
.rdg-app-shell a.panel:hover,
.rdg-app-shell button.card:hover,
.rdg-app-shell button.panel:hover {
  border-color: color-mix(in srgb, var(--rdg-action-primary) 34%, var(--rdg-border)) !important;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--rdg-shadow-color) 90%, transparent) !important;
  transform: translateY(-2px);
}

.rdg-app-shell .card > header,
.rdg-app-shell .panel > header {
  border-color: var(--rdg-border) !important;
}

/* Operational actions are blue. Orange remains the conversion/focus accent. */
.rdg-app-shell .btn-primary {
  display: inline-flex;
  min-height: var(--rdg-touch-min);
  align-items: center;
  justify-content: center;
  gap: var(--rdg-space-2);
  border: 1px solid var(--rdg-action-primary) !important;
  border-radius: var(--rdg-radius-sm) !important;
  padding: 0.65rem 1rem;
  background: var(--rdg-action-primary) !important;
  color: #fff !important;
  font-weight: 750;
  box-shadow: var(--rdg-shadow-subtle) !important;
  transition:
    background var(--rdg-duration-standard) var(--rdg-easing),
    border-color var(--rdg-duration-standard) var(--rdg-easing),
    transform var(--rdg-duration-standard) var(--rdg-easing);
}

html.dark .rdg-app-shell .btn-primary {
  color: var(--rdg-navy-950) !important;
}

.rdg-app-shell .btn-primary:hover {
  border-color: var(--rdg-action-primary-hover) !important;
  background: var(--rdg-action-primary-hover) !important;
  transform: translateY(-1px);
}

.rdg-app-shell .btn-secondary {
  display: inline-flex;
  min-height: var(--rdg-touch-min);
  align-items: center;
  justify-content: center;
  gap: var(--rdg-space-2);
  border: 1px solid var(--rdg-border-strong) !important;
  border-radius: var(--rdg-radius-sm) !important;
  padding: 0.65rem 1rem;
  background: var(--rdg-surface-primary) !important;
  color: var(--rdg-action-primary) !important;
  font-weight: 750;
}

.rdg-app-shell .btn-secondary:hover {
  border-color: var(--rdg-action-primary) !important;
  background: var(--rdg-soft-blue) !important;
  color: var(--rdg-action-primary-hover) !important;
}

.rdg-app-shell .btn-conversion {
  display: inline-flex;
  min-height: var(--rdg-touch-min);
  align-items: center;
  justify-content: center;
  gap: var(--rdg-space-2);
  border: 1px solid var(--rdg-action-conversion);
  border-radius: var(--rdg-radius-sm);
  padding: 0.65rem 1rem;
  background: var(--rdg-action-conversion);
  color: #fff;
  font-weight: 750;
}

.rdg-app-shell .btn-conversion:hover {
  border-color: var(--rdg-action-conversion-hover);
  background: var(--rdg-action-conversion-hover);
}

.rdg-app-shell .btn-danger {
  min-height: var(--rdg-touch-min);
  border-radius: var(--rdg-radius-sm) !important;
}

.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']),
.rdg-app-shell select,
.rdg-app-shell textarea,
.rdg-app-shell .input-field {
  min-height: var(--rdg-touch-min);
  border: 1px solid var(--rdg-border) !important;
  border-radius: var(--rdg-radius-sm) !important;
  background: var(--rdg-surface-primary) !important;
  color: var(--rdg-text-primary) !important;
  box-shadow: none;
  transition:
    border-color var(--rdg-duration-standard) var(--rdg-easing),
    box-shadow var(--rdg-duration-standard) var(--rdg-easing),
    background var(--rdg-duration-standard) var(--rdg-easing);
}

.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):hover,
.rdg-app-shell select:hover,
.rdg-app-shell textarea:hover,
.rdg-app-shell .input-field:hover {
  border-color: var(--rdg-border-strong) !important;
}

.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
.rdg-app-shell select:focus,
.rdg-app-shell textarea:focus,
.rdg-app-shell .input-field:focus {
  border-color: var(--rdg-action-primary) !important;
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 13%, transparent) !important;
}

.rdg-app-shell input::placeholder,
.rdg-app-shell textarea::placeholder {
  color: var(--rdg-text-subdued) !important;
}

.rdg-app-shell table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--rdg-text-primary);
}

.rdg-app-shell thead {
  background: var(--rdg-surface-muted) !important;
  color: var(--rdg-text-secondary) !important;
}

.rdg-app-shell th {
  padding: 0.85rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

html[dir='rtl'] .rdg-app-shell th {
  letter-spacing: normal;
  text-transform: none;
}

.rdg-app-shell td {
  padding: 0.95rem 1.1rem;
  color: var(--rdg-text-secondary);
  vertical-align: middle;
}

.rdg-app-shell tbody tr {
  border-color: var(--rdg-border) !important;
  transition: background var(--rdg-duration-fast) ease;
}

.rdg-app-shell tbody tr:hover {
  background: color-mix(in srgb, var(--rdg-soft-blue) 62%, transparent) !important;
}

.rdg-app-shell .progress-bar {
  overflow: hidden;
  border-radius: var(--rdg-radius-pill);
  background: var(--rdg-surface-strong) !important;
}

.rdg-app-shell .progress-fill.blue {
  background: var(--rdg-action-primary) !important;
}

.rdg-app-shell .progress-fill.orange {
  background: var(--rdg-action-conversion) !important;
}

.rdg-app-shell .badge-blue,
.rdg-app-shell .badge-green,
.rdg-app-shell .badge-amber,
.rdg-app-shell .badge-red,
.rdg-app-shell .badge-gray,
.rdg-app-shell .badge-purple,
.rdg-app-shell .badge-indigo {
  min-height: 24px;
  align-items: center;
  border-radius: var(--rdg-radius-pill) !important;
  border: 1px solid transparent;
  padding-inline: 0.65rem;
  font-weight: 750;
}

.rdg-app-shell .badge-blue {
  border-color: color-mix(in srgb, var(--rdg-blue-700) 22%, transparent);
  background: color-mix(in srgb, var(--rdg-blue-100) 72%, var(--rdg-surface-primary)) !important;
  color: var(--rdg-blue-700) !important;
}

.rdg-app-shell .badge-green {
  border-color: color-mix(in srgb, var(--rdg-green-700) 22%, transparent);
  background: color-mix(in srgb, var(--rdg-green-100) 72%, var(--rdg-surface-primary)) !important;
  color: var(--rdg-green-700) !important;
}

.rdg-app-shell .badge-amber {
  border-color: color-mix(in srgb, var(--rdg-amber-800) 20%, transparent);
  background: color-mix(in srgb, var(--rdg-amber-100) 72%, var(--rdg-surface-primary)) !important;
  color: var(--rdg-amber-800) !important;
}

.rdg-app-shell .badge-red {
  border-color: color-mix(in srgb, var(--rdg-red-700) 20%, transparent);
  background: color-mix(in srgb, var(--rdg-red-100) 72%, var(--rdg-surface-primary)) !important;
  color: var(--rdg-red-700) !important;
}

.rdg-app-shell .badge-gray {
  border-color: var(--rdg-border);
  background: var(--rdg-surface-muted) !important;
  color: var(--rdg-text-secondary) !important;
}

html.dark .rdg-app-shell .badge-blue { color: var(--rdg-blue-100) !important; }
html.dark .rdg-app-shell .badge-green { color: #bbf7d0 !important; }
html.dark .rdg-app-shell .badge-amber { color: #fde68a !important; }
html.dark .rdg-app-shell .badge-red { color: #fecaca !important; }

/* Semantic bridge for legacy utility classes still present in large pages. */
html.light .rdg-app-shell .bg-white,
html.light .rdg-app-shell .bg-zinc-900,
html.light .rdg-app-shell .bg-zinc-950 {
  background-color: var(--rdg-surface-elevated) !important;
}

html.light .rdg-app-shell .bg-slate-50,
html.light .rdg-app-shell .bg-zinc-800 {
  background-color: var(--rdg-surface-muted) !important;
}

html.light .rdg-app-shell .text-zinc-100,
html.light .rdg-app-shell .text-zinc-200,
html.light .rdg-app-shell .text-slate-900 {
  color: var(--rdg-text-primary) !important;
}

html.light .rdg-app-shell .text-zinc-300,
html.light .rdg-app-shell .text-zinc-400,
html.light .rdg-app-shell .text-zinc-500,
html.light .rdg-app-shell .text-slate-700,
html.light .rdg-app-shell .text-slate-600,
html.light .rdg-app-shell .text-slate-500,
html.light .rdg-app-shell .text-stone-500 {
  color: var(--rdg-text-secondary) !important;
}

.rdg-app-shell .border-zinc-800,
.rdg-app-shell .border-zinc-700,
.rdg-app-shell .border-slate-200,
.rdg-app-shell .border-stone-200 {
  border-color: var(--rdg-border) !important;
}

html.dark .rdg-app-shell .bg-white,
html.dark .rdg-app-shell .bg-zinc-900,
html.dark .rdg-app-shell .bg-zinc-950 {
  background-color: var(--rdg-surface-elevated) !important;
}

html.dark .rdg-app-shell .bg-slate-50,
html.dark .rdg-app-shell .bg-zinc-800 {
  background-color: var(--rdg-surface-muted) !important;
}

html.dark .rdg-app-shell .text-zinc-100,
html.dark .rdg-app-shell .text-zinc-200,
html.dark .rdg-app-shell .text-slate-900 {
  color: var(--rdg-text-primary) !important;
}

html.dark .rdg-app-shell .text-zinc-300,
html.dark .rdg-app-shell .text-zinc-400,
html.dark .rdg-app-shell .text-zinc-500,
html.dark .rdg-app-shell .text-slate-700,
html.dark .rdg-app-shell .text-slate-600,
html.dark .rdg-app-shell .text-slate-500,
html.dark .rdg-app-shell .text-stone-500 {
  color: var(--rdg-text-secondary) !important;
}

/* Dialogs and overlays inherit the same surface system. */
.rdg-app-shell [role='dialog'],
.rdg-app-shell dialog {
  border-color: var(--rdg-border) !important;
  border-radius: var(--rdg-radius-lg) !important;
  background: var(--rdg-surface-elevated) !important;
  color: var(--rdg-text-primary) !important;
  box-shadow: var(--rdg-shadow-overlay) !important;
}

@media (max-width: 1023px) {
  .rdg-app-main {
    padding: 20px 16px 32px;
  }

  .rdg-topbar {
    padding-inline: 16px !important;
  }
}

@media (max-width: 639px) {
  .rdg-app-main {
    padding: 16px 12px 28px;
  }

  .rdg-app-content h1 {
    font-size: 1.65rem;
  }

  .rdg-page-hero {
    border-radius: var(--rdg-radius-lg);
    padding: 24px 20px;
  }

  .rdg-system-status,
  .rdg-topbar-search {
    display: none !important;
  }
}

@media (forced-colors: active) {
  .rdg-sidebar,
  .rdg-topbar,
  .rdg-app-shell .card,
  .rdg-app-shell .panel,
  .rdg-app-shell .glass-card,
  .rdg-page-hero {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }
}

@media print {
  .rdg-app-shell {
    display: block !important;
    background: #fff !important;
    color: #000 !important;
  }

  .rdg-app-main {
    padding: 0 !important;
  }

  .rdg-app-shell .card,
  .rdg-app-shell .panel,
  .rdg-app-shell .glass-card {
    box-shadow: none !important;
  }
}

/* Legacy primary-action utilities are normalized to the homepage blue action. */
.rdg-app-shell button.bg-blue-700,
.rdg-app-shell a.bg-blue-700,
.rdg-app-shell button.bg-blue-600,
.rdg-app-shell a.bg-blue-600,
.rdg-app-shell button.bg-emerald-700,
.rdg-app-shell a.bg-emerald-700,
.rdg-app-shell button.bg-emerald-600,
.rdg-app-shell a.bg-emerald-600,
.rdg-app-shell button.bg-emerald-500,
.rdg-app-shell a.bg-emerald-500 {
  border-color: var(--rdg-action-primary) !important;
  background: var(--rdg-action-primary) !important;
  color: #fff !important;
}

.rdg-app-shell button.bg-blue-700:hover,
.rdg-app-shell a.bg-blue-700:hover,
.rdg-app-shell button.bg-blue-600:hover,
.rdg-app-shell a.bg-blue-600:hover,
.rdg-app-shell button.bg-emerald-700:hover,
.rdg-app-shell a.bg-emerald-700:hover,
.rdg-app-shell button.bg-emerald-600:hover,
.rdg-app-shell a.bg-emerald-600:hover,
.rdg-app-shell button.bg-emerald-500:hover,
.rdg-app-shell a.bg-emerald-500:hover {
  background: var(--rdg-action-primary-hover) !important;
}

.rdg-page-heading {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rdg-space-5);
  min-height: 64px;
  padding: 2px 0 var(--rdg-space-5);
  border-bottom: 1px solid var(--rdg-border);
}

.rdg-page-heading::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1px;
  width: 72px;
  height: 3px;
  border-radius: var(--rdg-radius-pill);
  background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
  content: '';
}

.rdg-page-heading h1,
.rdg-page-heading h2 { margin: 0; }
.rdg-page-heading p { color: var(--rdg-text-secondary) !important; }

@media (max-width: 639px) {
  .rdg-page-heading { align-items: flex-start; flex-direction: column; }
}

/* Explicit field utility for pages that compose controls dynamically. */
.rdg-app-shell .field {
  width: 100%;
  min-height: var(--rdg-touch-min);
  border: 1px solid var(--rdg-border);
  border-radius: var(--rdg-radius-sm);
  background: var(--rdg-surface-primary);
  color: var(--rdg-text-primary);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--rdg-duration-fast) var(--rdg-easing), box-shadow var(--rdg-duration-fast) var(--rdg-easing), background-color var(--rdg-duration-fast) var(--rdg-easing);
}
.rdg-app-shell .field:hover { border-color: var(--rdg-border-strong); }
.rdg-app-shell .field:focus {
  border-color: var(--rdg-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rdg-focus) 18%, transparent);
  outline: none;
}