/*
 * CallTracker Theme for Preline UI
 * Brand: primary=#2196F3, hover=#0c7cd5
 * Hue: ~254 (blue). Activate with data-theme="theme-calltracker".
 */

:root {
  /* ── Brand palette (CallTracker blue, anchored on #2196F3) ── */
  --color-calltracker-50:  oklch(97%   0.015 254);
  --color-calltracker-100: oklch(93%   0.035 254);
  --color-calltracker-200: oklch(87%   0.060 254);
  --color-calltracker-300: oklch(79%   0.100 254);
  --color-calltracker-400: oklch(72%   0.150 254);
  --color-calltracker-500: oklch(67%   0.170 254);
  --color-calltracker-600: #2196F3;                  /* primary — exact brand */
  --color-calltracker-700: #0c7cd5;                  /* hover — exact brand */
  --color-calltracker-800: oklch(45%   0.140 254);
  --color-calltracker-900: oklch(35%   0.100 254);
  --color-calltracker-950: oklch(27%   0.040 254);   /* text (dark slate-navy) */

  /* ── Gray palette (neutral greys, no hue tint) ── */
  --color-calltracker-gray-50:  #F5F5F5;
  --color-calltracker-gray-100: oklch(95%   0 0);
  --color-calltracker-gray-200: oklch(90%   0 0);
  --color-calltracker-gray-300: oklch(83%   0 0);
  --color-calltracker-gray-400: oklch(73%   0 0);
  --color-calltracker-gray-500: oklch(63%   0 0);
  --color-calltracker-gray-600: oklch(53%   0 0);
  --color-calltracker-gray-700: oklch(42%   0 0);
  --color-calltracker-gray-800: oklch(35%   0 0);
  --color-calltracker-gray-900: oklch(31%   0 0);
  --color-calltracker-gray-950: oklch(20%   0 0);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* LIGHT MODE                                                         */
/* ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="theme-calltracker"],
[data-theme="theme-calltracker"] {

  /* ── Global surfaces + text ── */
  --background:       var(--color-white);
  --background-1:     var(--color-white);
  --background-2:     var(--color-calltracker-gray-100);
  --background-plain: var(--color-white);
  --foreground:       var(--color-calltracker-950);
  --foreground-inverse: var(--color-white);
  --inverse:          var(--color-calltracker-950);

  /* ── Borders ── */
  --border:              var(--color-calltracker-gray-200);
  --border-line-inverse: var(--color-white);
  --border-line-1:       var(--color-calltracker-gray-100);
  --border-line-2:       var(--color-calltracker-gray-200);
  --border-line-3:       var(--color-calltracker-gray-300);
  --border-line-4:       var(--color-calltracker-gray-400);
  --border-line-5:       var(--color-calltracker-gray-500);
  --border-line-6:       var(--color-calltracker-gray-600);
  --border-line-7:       var(--color-calltracker-gray-700);
  --border-line-8:       var(--color-calltracker-gray-800);

  /* ── Primary (brand green) ── */
  --primary-50:  var(--color-calltracker-50);
  --primary-100: var(--color-calltracker-100);
  --primary-200: var(--color-calltracker-200);
  --primary-300: var(--color-calltracker-300);
  --primary-400: var(--color-calltracker-400);
  --primary-500: var(--color-calltracker-500);
  --primary-600: var(--color-calltracker-600);
  --primary-700: var(--color-calltracker-700);
  --primary-800: var(--color-calltracker-800);
  --primary-900: var(--color-calltracker-900);
  --primary-950: var(--color-calltracker-950);

  --primary:            var(--color-calltracker-600);
  --primary-line:       transparent;
  --primary-foreground: var(--color-white);
  --primary-hover:      var(--color-calltracker-700);
  --primary-focus:      var(--color-calltracker-700);
  --primary-active:     var(--color-calltracker-700);
  --primary-checked:    var(--color-calltracker-600);

  /* ── Secondary (forest green) ── */
  --secondary:            var(--color-calltracker-950);
  --secondary-line:       transparent;
  --secondary-foreground: var(--color-white);
  --secondary-hover:      var(--color-calltracker-900);
  --secondary-focus:      var(--color-calltracker-900);
  --secondary-active:     var(--color-calltracker-900);

  /* ── Layer ── */
  --layer:            var(--color-white);
  --layer-line:       var(--color-calltracker-gray-200);
  --layer-foreground: var(--color-calltracker-950);
  --layer-hover:      var(--color-calltracker-gray-50);
  --layer-focus:      var(--color-calltracker-gray-50);
  --layer-active:     var(--color-calltracker-gray-50);

  /* ── Surface ── */
  --surface:            var(--color-calltracker-gray-100);
  --surface-1:          var(--color-calltracker-gray-200);
  --surface-2:          var(--color-calltracker-gray-300);
  --surface-3:          var(--color-calltracker-gray-400);
  --surface-4:          var(--color-calltracker-gray-500);
  --surface-5:          var(--color-calltracker-gray-600);
  --surface-line:       transparent;
  --surface-foreground: var(--color-calltracker-950);
  --surface-hover:      var(--color-calltracker-gray-200);
  --surface-focus:      var(--color-calltracker-gray-200);
  --surface-active:     var(--color-calltracker-gray-200);

  /* ── Muted ── */
  --muted:              var(--color-calltracker-gray-50);
  --muted-foreground:   var(--color-calltracker-gray-400);
  --muted-foreground-1: var(--color-calltracker-gray-500);
  --muted-foreground-2: var(--color-calltracker-gray-600);
  --muted-hover:        var(--color-calltracker-gray-100);
  --muted-focus:        var(--color-calltracker-gray-100);
  --muted-active:       var(--color-calltracker-gray-100);

  /* ── Destructive ── */
  --destructive:            var(--color-red-500);
  --destructive-foreground: var(--color-white);
  --destructive-hover:      var(--color-red-600);
  --destructive-focus:      var(--color-red-600);

  /* ── Navbar ── */
  --navbar:                   var(--color-calltracker-gray-50);
  --navbar-line:              var(--color-calltracker-gray-200);
  --navbar-divider:           var(--color-calltracker-gray-200);
  --navbar-nav-foreground:    var(--color-calltracker-950);
  --navbar-nav-hover:         var(--color-calltracker-gray-100);
  --navbar-nav-focus:         var(--color-calltracker-gray-100);
  --navbar-nav-active:        var(--color-calltracker-gray-100);
  --navbar-nav-list-divider:  var(--color-calltracker-gray-200);
  --navbar-inverse:           var(--color-calltracker-950);

  --navbar-1:                   var(--color-calltracker-gray-50);
  --navbar-1-line:              var(--color-calltracker-gray-200);
  --navbar-1-divider:           var(--color-calltracker-gray-200);
  --navbar-1-nav-foreground:    var(--color-calltracker-950);
  --navbar-1-nav-hover:         var(--color-calltracker-gray-200);
  --navbar-1-nav-focus:         var(--color-calltracker-gray-200);
  --navbar-1-nav-active:        var(--color-calltracker-gray-200);
  --navbar-1-nav-list-divider:  var(--color-calltracker-gray-200);

  --navbar-2:                   var(--color-calltracker-gray-100);
  --navbar-2-line:              transparent;
  --navbar-2-divider:           var(--color-calltracker-gray-300);
  --navbar-2-nav-foreground:    var(--color-calltracker-950);
  --navbar-2-nav-hover:         var(--color-calltracker-gray-200);
  --navbar-2-nav-focus:         var(--color-calltracker-gray-200);
  --navbar-2-nav-active:        var(--color-calltracker-gray-200);
  --navbar-2-nav-list-divider:  var(--color-calltracker-gray-200);

  /* ── Sidebar ── */
  --sidebar:                   var(--color-calltracker-gray-50);
  --sidebar-line:              var(--color-calltracker-gray-200);
  --sidebar-divider:           var(--color-calltracker-gray-200);
  --sidebar-nav-foreground:    var(--color-calltracker-gray-700);
  --sidebar-nav-hover:         var(--color-calltracker-gray-50);
  --sidebar-nav-focus:         var(--color-calltracker-gray-50);
  --sidebar-nav-active:        var(--color-calltracker-50);
  --sidebar-nav-list-divider:  var(--color-calltracker-gray-200);
  --sidebar-inverse:           var(--color-calltracker-950);

  --sidebar-1:                   var(--color-calltracker-gray-50);
  --sidebar-1-line:              var(--color-calltracker-gray-200);
  --sidebar-1-divider:           var(--color-calltracker-gray-200);
  --sidebar-1-nav-foreground:    var(--color-calltracker-gray-700);
  --sidebar-1-nav-hover:         var(--color-calltracker-gray-100);
  --sidebar-1-nav-focus:         var(--color-calltracker-gray-100);
  --sidebar-1-nav-active:        var(--color-calltracker-50);
  --sidebar-1-nav-list-divider:  var(--color-calltracker-gray-200);

  --sidebar-2:                   var(--color-calltracker-gray-100);
  --sidebar-2-line:              transparent;
  --sidebar-2-divider:           var(--color-calltracker-gray-300);
  --sidebar-2-nav-foreground:    var(--color-calltracker-gray-700);
  --sidebar-2-nav-hover:         var(--color-calltracker-gray-200);
  --sidebar-2-nav-focus:         var(--color-calltracker-gray-200);
  --sidebar-2-nav-active:        var(--color-calltracker-50);
  --sidebar-2-nav-list-divider:  var(--color-calltracker-gray-200);

  /* ── Card ── */
  --card:         var(--color-white);
  --card-line:    var(--color-calltracker-gray-200);
  --card-divider: var(--color-calltracker-gray-200);
  --card-header:  var(--color-white);
  --card-footer:  var(--color-calltracker-gray-50);
  --card-inverse: var(--color-calltracker-950);

  /* ── Dropdown ── */
  --dropdown:                 var(--color-white);
  --dropdown-1:               var(--color-white);
  --dropdown-line:            var(--color-calltracker-gray-200);
  --dropdown-divider:         var(--color-calltracker-gray-100);
  --dropdown-header:          var(--color-white);
  --dropdown-footer:          var(--color-calltracker-gray-50);
  --dropdown-item-foreground: var(--color-calltracker-gray-800);
  --dropdown-item-hover:      var(--color-calltracker-gray-50);
  --dropdown-item-focus:      var(--color-calltracker-gray-50);
  --dropdown-item-active:     var(--color-calltracker-gray-100);
  --dropdown-inverse:         var(--color-calltracker-950);

  /* ── Select ── */
  --select:                 var(--color-white);
  --select-1:               var(--color-white);
  --select-line:            var(--color-calltracker-gray-200);
  --select-item-foreground: var(--color-calltracker-gray-800);
  --select-item-hover:      var(--color-calltracker-gray-50);
  --select-item-focus:      var(--color-calltracker-gray-50);
  --select-item-active:     var(--color-calltracker-gray-100);
  --select-inverse:         var(--color-calltracker-950);

  /* ── Overlay ── */
  --overlay:         var(--color-white);
  --overlay-line:    var(--color-calltracker-gray-200);
  --overlay-divider: var(--color-calltracker-gray-200);
  --overlay-header:  var(--color-white);
  --overlay-footer:  var(--color-calltracker-gray-50);
  --overlay-inverse: var(--color-calltracker-950);

  /* ── Popover ── */
  --popover:      var(--color-white);
  --popover-line: var(--color-calltracker-gray-200);

  /* ── Tooltip ── */
  --tooltip:            var(--color-calltracker-950);
  --tooltip-foreground: var(--color-white);
  --tooltip-line:       var(--color-calltracker-900);

  /* ── Table ── */
  --table-line: var(--color-calltracker-gray-200);

  /* ── Switch ── */
  --switch: var(--color-white);

  /* ── Footer ── */
  --footer:         var(--color-white);
  --footer-line:    var(--color-calltracker-gray-200);
  --footer-inverse: var(--color-calltracker-950);

  /* ── Scrollbar ── */
  --scrollbar-track:         var(--color-calltracker-gray-100);
  --scrollbar-thumb:         var(--color-calltracker-gray-300);
  --scrollbar-track-inverse: var(--color-calltracker-gray-800);
  --scrollbar-thumb-inverse: var(--color-calltracker-gray-600);

  /* ── Charts ── */
  --chart-primary:                    var(--color-calltracker-600);
  --chart-colors-primary:             var(--color-calltracker-600);
  --chart-colors-primary-inverse:     var(--color-calltracker-500);
  --chart-colors-primary-hex:         #1976d2;
  --chart-colors-primary-hex-inverse: #42a5f5;
  --chart-colors-background:          var(--color-white);
  --chart-colors-background-inverse:  var(--color-stone-800);
  --chart-colors-foreground:          var(--color-calltracker-950);
  --chart-colors-foreground-inverse:  var(--color-stone-200);
  --chart-colors-labels:              var(--color-calltracker-gray-500);
  --chart-colors-labels-inverse:      var(--color-stone-400);
  --chart-colors-grid-border:         var(--color-calltracker-gray-200);
  --chart-colors-grid-border-inverse: var(--color-stone-700);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* DARK MODE                                                          */
/* ═══════════════════════════════════════════════════════════════════ */
[data-theme="theme-calltracker"].dark {

  /* ── Global surfaces + text ── */
  --background:       var(--color-stone-800);
  --background-1:     var(--color-stone-900);
  --background-2:     var(--color-stone-900);
  --background-plain: var(--color-stone-950);
  --foreground:       var(--color-stone-200);
  --foreground-inverse: var(--color-stone-950);
  --inverse:          var(--color-stone-950);

  /* ── Borders ── */
  --border:              var(--color-stone-700);
  --border-line-inverse: var(--color-stone-950);
  --border-line-1:       var(--color-stone-800);
  --border-line-2:       var(--color-stone-700);
  --border-line-3:       var(--color-stone-600);
  --border-line-4:       var(--color-stone-500);
  --border-line-5:       var(--color-stone-400);
  --border-line-6:       var(--color-stone-300);
  --border-line-7:       var(--color-stone-200);
  --border-line-8:       var(--color-stone-100);

  /* ── Primary (shifts lighter in dark) ── */
  --primary:            var(--color-calltracker-500);
  --primary-line:       transparent;
  --primary-foreground: var(--color-white);
  --primary-hover:      var(--color-calltracker-600);
  --primary-focus:      var(--color-calltracker-600);
  --primary-active:     var(--color-calltracker-600);
  --primary-checked:    var(--color-calltracker-500);

  /* ── Secondary ── */
  --secondary:            var(--color-white);
  --secondary-line:       transparent;
  --secondary-foreground: var(--color-stone-800);
  --secondary-hover:      var(--color-stone-100);
  --secondary-focus:      var(--color-stone-100);
  --secondary-active:     var(--color-stone-100);

  /* ── Layer ── */
  --layer:            var(--color-stone-800);
  --layer-line:       var(--color-stone-700);
  --layer-foreground: var(--color-white);
  --layer-hover:      var(--color-stone-700);
  --layer-focus:      var(--color-stone-700);
  --layer-active:     var(--color-stone-700);

  /* ── Surface ── */
  --surface:            var(--color-stone-700);
  --surface-1:          var(--color-stone-600);
  --surface-2:          var(--color-stone-500);
  --surface-3:          var(--color-stone-600);
  --surface-4:          var(--color-stone-500);
  --surface-5:          var(--color-stone-400);
  --surface-line:       transparent;
  --surface-foreground: var(--color-stone-200);
  --surface-hover:      var(--color-stone-600);
  --surface-focus:      var(--color-stone-600);
  --surface-active:     var(--color-stone-600);

  /* ── Muted ── */
  --muted:              var(--color-stone-800);
  --muted-foreground:   var(--color-stone-500);
  --muted-foreground-1: var(--color-stone-400);
  --muted-foreground-2: var(--color-stone-300);
  --muted-hover:        var(--color-stone-700);
  --muted-focus:        var(--color-stone-700);
  --muted-active:       var(--color-stone-700);

  /* ── Destructive ── */
  --destructive:            var(--color-red-500);
  --destructive-foreground: var(--color-white);
  --destructive-hover:      var(--color-red-600);
  --destructive-focus:      var(--color-red-600);

  /* ── Components (dark stone backgrounds) ── */
  --navbar:                   var(--color-stone-800);
  --navbar-line:              var(--color-stone-700);
  --navbar-divider:           var(--color-stone-700);
  --navbar-nav-foreground:    var(--color-stone-200);
  --navbar-nav-hover:         var(--color-stone-700);
  --navbar-nav-focus:         var(--color-stone-700);
  --navbar-nav-active:        var(--color-stone-700);
  --navbar-nav-list-divider:  var(--color-stone-700);
  --navbar-inverse:           var(--color-calltracker-950);

  --sidebar:                   var(--color-stone-800);
  --sidebar-line:              var(--color-stone-700);
  --sidebar-divider:           var(--color-stone-700);
  --sidebar-nav-foreground:    var(--color-stone-300);
  --sidebar-nav-hover:         var(--color-stone-700);
  --sidebar-nav-focus:         var(--color-stone-700);
  --sidebar-nav-active:        var(--color-stone-700);
  --sidebar-nav-list-divider:  var(--color-stone-700);
  --sidebar-inverse:           var(--color-calltracker-950);

  --card:         var(--color-stone-800);
  --card-line:    var(--color-stone-700);
  --card-divider: var(--color-stone-700);
  --card-header:  var(--color-stone-800);
  --card-footer:  var(--color-stone-900);
  --card-inverse: var(--color-stone-200);

  --dropdown:                 var(--color-stone-800);
  --dropdown-1:               var(--color-stone-800);
  --dropdown-line:            var(--color-stone-700);
  --dropdown-divider:         var(--color-stone-700);
  --dropdown-header:          var(--color-stone-800);
  --dropdown-footer:          var(--color-stone-900);
  --dropdown-item-foreground: var(--color-stone-200);
  --dropdown-item-hover:      var(--color-stone-700);
  --dropdown-item-focus:      var(--color-stone-700);
  --dropdown-item-active:     var(--color-stone-600);
  --dropdown-inverse:         var(--color-stone-200);

  --select:                 var(--color-stone-800);
  --select-1:               var(--color-stone-800);
  --select-line:            var(--color-stone-700);
  --select-item-foreground: var(--color-stone-200);
  --select-item-hover:      var(--color-stone-700);
  --select-item-focus:      var(--color-stone-700);
  --select-item-active:     var(--color-stone-600);
  --select-inverse:         var(--color-stone-200);

  --overlay:         var(--color-stone-800);
  --overlay-line:    var(--color-stone-700);
  --overlay-divider: var(--color-stone-700);
  --overlay-header:  var(--color-stone-800);
  --overlay-footer:  var(--color-stone-900);
  --overlay-inverse: var(--color-stone-200);

  --popover:      var(--color-stone-800);
  --popover-line: var(--color-stone-700);

  --tooltip:            var(--color-stone-200);
  --tooltip-foreground: var(--color-stone-800);
  --tooltip-line:       var(--color-stone-300);

  --table-line: var(--color-stone-700);
  --switch:     var(--color-stone-800);

  --footer:         var(--color-stone-800);
  --footer-line:    var(--color-stone-700);
  --footer-inverse: var(--color-stone-200);

  --scrollbar-track:         var(--color-stone-800);
  --scrollbar-thumb:         var(--color-stone-600);
  --scrollbar-track-inverse: var(--color-stone-200);
  --scrollbar-thumb-inverse: var(--color-stone-400);
}

/* Brand link color for un-classed links (e.g. django-tables2 LinkColumn).
   In @layer base so Tailwind's `utilities` layer (text-primary-foreground on
   <a> buttons, etc.) always wins — layer order beats specificity in Tailwind v4. */
@layer base {
  [data-theme="theme-calltracker"] a { color: #2196F3; }
  [data-theme="theme-calltracker"] a:hover { color: #0c7cd5; }
}

/* Corner radius scale — softened, not square. Preline defines these inside
   @layer theme{:root}, and unlayered CSS wins over layered CSS, so this plain
   :root block overrides them everywhere the rounded-* utilities are used.
   Preline stock:  sm .25  / md .375 / lg .5    / xl .75  / 2xl 1     / 3xl 1.5rem
   First pass:     sm .125 / md .25  / lg .375  / xl .5   / 2xl .625  / 3xl .875rem
   --radius-full is intentionally untouched so pills and avatars stay circular. */
:root {
  --radius-sm:  0.0625rem;
  --radius-md:  0.125rem;
  --radius-lg:  0.25rem;
  --radius-xl:  0.3125rem;
  --radius-2xl: 0.375rem;
  --radius-3xl: 0.5rem;
}