/* ==========================================================================
   EDAT DS — Apache Superset custom stylesheet
   Institutional Research Office, UNICAMP

   STRATEGY: This file handles only what THEME_DEFAULT cannot:
     1. Google Fonts loading (CSS @import)
     2. CSS custom properties (design tokens as CSS variables)
     3. Page/body background and base font
     4. Heading and link typography

   Colors, button states, input focus rings, and component colors are
   controlled by THEME_DEFAULT tokens in edat_theme.py (Ant Design 5
   ConfigProvider). Do NOT add height/padding/border overrides here —
   they conflict with Superset 6.x's Ant Design 5 CSS-in-JS styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Google Fonts
   -------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   2. Primitive tokens
   -------------------------------------------------------------------------- */

:root {
  /* Red scale */
  --red-50:  #FFF5F5;
  --red-100: #FFE4E4;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;

  /* Gray scale */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* Blue scale */
  --blue-50:  #F0F4FF;
  --blue-100: #E0E8FF;
  --blue-200: #D9E1F5;
  --blue-300: #B8CAF0;
  --blue-400: #91AADF;
  --blue-500: #6B8DCE;
  --blue-600: #4A6CBB;
  --blue-700: #3251A3;
  --blue-800: #1E3A8A;
  --blue-900: #1E2F6E;
  --blue-950: #0F1845;
}

/* --------------------------------------------------------------------------
   3. Semantic tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surface */
  --surface-page:          var(--gray-100);
  --surface-default:       #ffffff;
  --surface-alt:           var(--gray-50);
  --surface-brand:         var(--red-600);
  --surface-brand-strong:  var(--red-700);
  --surface-brand-soft:    var(--red-100);
  --surface-brand-wash:    var(--red-50);
  --surface-sunken:        var(--gray-900);
  --surface-hover:         var(--gray-200);
  --surface-hover-soft:    var(--gray-100);
  --surface-success:       #DCFCE7;
  --surface-info:          var(--blue-100);

  /* Text */
  --text-heading:          var(--gray-900);
  --text-strong:           var(--gray-700);
  --text-body:             var(--gray-600);
  --text-secondary:        var(--gray-500);
  --text-muted:            var(--gray-400);
  --text-inverse:          #ffffff;
  --text-brand:            var(--red-600);
  --text-brand-strong:     var(--red-700);
  --text-success:          #166634;
  --text-info:             var(--blue-800);

  /* Border */
  --border-default:        var(--gray-200);
  --border-strong:         var(--gray-300);
  --border-brand:          var(--red-600);
  --border-focus:          var(--red-600);
  --border-brand-soft:     var(--red-200);

  /* Status */
  --status-online:         #22C55E;

  /* Typography */
  --font-display:          "Archivo", sans-serif;
  --font-body:             "Archivo Narrow", sans-serif;
  --font-mono:             "Menlo", "Consolas", "SFMono-Regular", monospace;

  /* Radius */
  --rounded-sm:            4px;
  --rounded-md:            8px;
  --rounded-lg:            12px;
  --rounded-xl:            16px;
  --rounded-full:          9999px;

  /* Spacing (non-linear scale — only these values exist) */
  --sp-micro:   6px;
  --sp-xs:     10px;
  --sp-sm:     14px;
  --sp-base:   18px;
  --sp-lg:     22px;
  --sp-xl:     26px;
  --sp-2xl:    32px;
  --sp-3xl:    40px;
  --sp-4xl:    48px;
  --sp-section: 64px;

  /* Control heights (separate axis — do NOT use as gap/inset) */
  --ch-xs:       26px;  /* control-xs   — btn-xs  */
  --ch-sm:       32px;  /* control-sm   — btn-sm  */
  --ch-compact:  36px;  /* control-compact — default button (v1.2.1) */
  --ch-md:       40px;  /* control-md   — app shell rows */
  --ch-lg:       48px;  /* control-lg   — touch targets / large inputs */
  --ch-input:    44px;  /* text-input height (text-input spec) */

  /* Switch (Interruptor) dimensions — separate from spacing and control scales */
  --sw-h:    75px;  /* fixed height for all switch sizes */
  --sw-w-1:  60px;  /* switch--sm */
  --sw-w-2:  68px;  /* switch--md (default) */
  --sw-w-3:  75px;  /* switch--lg */

  /* Elevation */
  --shadow-low:     0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* Animation */
  --transition-fast: 120ms ease-in-out;
  --transition-base: 150ms ease-in-out;
  --transition-slow: 180ms ease-in-out;
}

/* --------------------------------------------------------------------------
   4. Page background & base typography
   -------------------------------------------------------------------------- */

body,
#root,
.App {
  background-color: var(--surface-page) !important;
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--text-heading) !important;
}

/* Link colors are handled by THEME_DEFAULT.token.colorLink = "#DC2626".
   A CSS override with !important here would bleed into button labels
   rendered as <a> tags, making text invisible on primary (red) buttons. */

/* --------------------------------------------------------------------------
   5. Dashboard page background
   -------------------------------------------------------------------------- */

.dashboard-content {
  background-color: var(--surface-page) !important;
}

/* --------------------------------------------------------------------------
   6. Pagination — active page
   Per DESIGN.md: selected controls use border-brand + text-brand, not fill.
   Ant Design 5 defaults to solid colorPrimary fill; this overrides to border-only.
   -------------------------------------------------------------------------- */

.ant-pagination-item-active {
  background-color: var(--surface-brand-wash) !important;
  border-color: var(--border-brand) !important;
}

.ant-pagination-item-active a,
.ant-pagination-item-active:hover a {
  color: var(--text-brand) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   7. Scrollbar (Webkit) — cosmetic only, no layout impact
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface-page);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--rounded-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}