/* =========================================================================
   juridico — Design Tokens
   Camada 1 de 3 do design system. Carregue SEMPRE antes de theme.css e
   layout.css. Nenhuma regra visual aqui: apenas variáveis.

   Convenção de prefixo:
     --jr-*  → tokens do juridico (fonte da verdade)
     --bs-*  → sobrescritas do Bootstrap 5.1.3, sempre derivadas de --jr-*

   Trocar a cor primária de todo o painel = trocar --jr-primary (ou usar
   <html data-colors="..."> com uma das paletas prontas no fim do arquivo).
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------
       1. Paleta base
       --------------------------------------------------------------- */
    --jr-blue: #00bbf9;
    --jr-purple: #9b5de5;
    --jr-red: #ff4d4e;
    --jr-yellow: #f5cc14;
    --jr-green: #06c458;
    --jr-teal: #20c997;
    --jr-cyan: #00b4d8;
    --jr-pink: #ec4899;
    --jr-orange: #f97316;
    --jr-indigo: #6366f1;
    --jr-black: #020617;
    --jr-white: #fff;

    /* Escala de cinzas (slate) */
    --jr-gray-50: #f9fafb;
    --jr-gray-100: #f3f4f6;
    --jr-gray-200: #e5e7eb;
    --jr-gray-300: #d1d5db;
    --jr-gray-400: #9ca3af;
    --jr-gray-500: #6b7280;
    --jr-gray-600: #475569;
    --jr-gray-700: #334155;
    --jr-gray-800: #181c2f;
    --jr-gray-900: #052a40;

    /* ---------------------------------------------------------------
       2. Cores semânticas
       --------------------------------------------------------------- */
    --jr-primary: #00bbf9;
    --jr-primary-rgb: 0, 187, 249;
    --jr-secondary: #9b5de5;
    --jr-secondary-rgb: 155, 93, 229;
    --jr-success: #06c458;
    --jr-success-rgb: 6, 196, 88;
    --jr-info: #00b4d8;
    --jr-info-rgb: 0, 180, 216;
    --jr-warning: #f5cc14;
    --jr-warning-rgb: 245, 204, 20;
    --jr-danger: #ff4d4e;
    --jr-danger-rgb: 255, 77, 78;
    --jr-light: #eff4ff;
    --jr-light-rgb: 239, 244, 255;
    --jr-dark: #181c2f;
    --jr-dark-rgb: 24, 28, 47;
    --jr-pink-rgb: 236, 72, 153;
    --jr-orange-rgb: 249, 115, 22;
    --jr-indigo-rgb: 99, 102, 241;

    /* Variantes derivadas — nunca escreva um hex "escurecido" à mão,
       use estes tokens: eles acompanham a troca de --jr-primary. */
    --jr-primary-emphasis: color-mix(in srgb, var(--jr-primary) 82%, #000 18%);
    --jr-primary-subtle: color-mix(in srgb, var(--jr-primary) 12%, transparent);
    --jr-primary-border-subtle: color-mix(in srgb, var(--jr-primary) 30%, transparent);

    --jr-secondary-emphasis: #9358da;
    --jr-success-emphasis: #05a749;
    --jr-info-emphasis: #00abcd;
    --jr-warning-emphasis: #d8b30d;
    --jr-danger-emphasis: #ef3d3e;

    --jr-secondary-subtle: rgba(var(--jr-secondary-rgb), .12);
    --jr-success-subtle: rgba(var(--jr-success-rgb), .12);
    --jr-info-subtle: rgba(var(--jr-info-rgb), .12);
    --jr-warning-subtle: rgba(var(--jr-warning-rgb), .14);
    --jr-danger-subtle: rgba(var(--jr-danger-rgb), .12);
    --jr-dark-subtle: rgba(var(--jr-dark-rgb), .1);
    --jr-pink-subtle: rgba(var(--jr-pink-rgb), .12);
    --jr-orange-subtle: rgba(var(--jr-orange-rgb), .12);
    --jr-indigo-subtle: rgba(var(--jr-indigo-rgb), .12);

    --jr-secondary-border: rgba(var(--jr-secondary-rgb), .3);
    --jr-success-border: rgba(var(--jr-success-rgb), .3);
    --jr-info-border: rgba(var(--jr-info-rgb), .3);
    --jr-warning-border: rgba(var(--jr-warning-rgb), .3);
    --jr-danger-border: rgba(var(--jr-danger-rgb), .3);
    --jr-dark-border: rgba(var(--jr-dark-rgb), .25);

    /* ---------------------------------------------------------------
       3. Superfícies e texto
       --------------------------------------------------------------- */
    --jr-body-bg: #f3f5f9;
    --jr-body-bg-rgb: 243, 245, 249;
    --jr-body-color: #052a40;
    --jr-body-color-rgb: 5, 42, 64;

    --jr-surface: #fff;               /* superfície sólida (modal, dropdown) */
    --jr-surface-rgb: 255, 255, 255;
    --jr-surface-glass: rgba(255, 255, 255, .62); /* cards translúcidos */
    --jr-surface-muted: #eff4ff;      /* superfície de apoio (thead, chips) */

    --jr-text-muted: #7484a5;
    --jr-text-subtle: #9ca3af;
    --jr-heading-color: #052a40;

    --jr-border-color: #e0e6f1;
    --jr-border-color-soft: rgba(255, 255, 255, .9);

    /* ---------------------------------------------------------------
       4. Tipografia
       --------------------------------------------------------------- */
    --jr-font-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --jr-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --jr-font-size-base: .9688rem;    /* 15.5px */
    --jr-font-size-xs: .6875rem;      /* 11px  — badges */
    --jr-font-size-sm: .8125rem;      /* 13px  — legendas, btn-sm */
    --jr-font-size-md: .875rem;       /* 14px  — labels */
    --jr-font-size-lg: 1.0625rem;     /* 17px */
    --jr-font-size-xl: 1.25rem;       /* 20px  — números de KPI */
    --jr-font-size-2xl: 1.5rem;       /* 24px */

    --jr-font-weight-normal: 400;
    --jr-font-weight-medium: 500;
    --jr-font-weight-semibold: 600;
    --jr-font-weight-bold: 700;

    --jr-line-height-base: 1.35;
    --jr-line-height-relaxed: 1.55;

    /* ---------------------------------------------------------------
       5. Espaçamento, raio e elevação
       --------------------------------------------------------------- */
    --jr-spacer: 1.25rem;             /* espaçamento padrão entre blocos */

    --jr-radius-sm: .375rem;          /* 6px  — badge, btn-sm, chip */
    --jr-radius: .625rem;             /* 10px — padrão: card, btn, input */
    --jr-radius-lg: 1rem;             /* 16px — modal, offcanvas */
    --jr-radius-xl: 1.25rem;
    --jr-radius-pill: 50rem;

    --jr-shadow-sm: 0 .125rem .25rem rgba(2, 6, 23, .06);
    --jr-shadow: rgba(149, 157, 165, .1) 0 8px 24px;
    --jr-shadow-lg: 0 1rem 3rem rgba(2, 6, 23, .12);
    --jr-shadow-dropdown: 0 8px 24px rgba(149, 157, 165, .18);

    --jr-focus-ring: 0 0 0 .2rem rgba(var(--jr-primary-rgb), .22);
    /* halo do campo com erro: mesmo desenho do foco normal, na cor de perigo */
    --jr-focus-ring-danger: 0 0 0 .2rem rgba(var(--jr-danger-rgb), .25);
    --jr-transition: .25s ease-in-out;

    /* ---------------------------------------------------------------
       6. Shell da aplicação
       --------------------------------------------------------------- */
    --jr-topbar-height: 4.6875rem;    /* 75px */
    --jr-sidebar-width: 15rem;        /* 240px — data-sidebar="large"  */
    --jr-sidebar-width-sm: 4.6875rem; /* 75px  — data-sidebar="small"  */
    --jr-footer-height: 3.5rem;

    --jr-sidebar-padding-y: .625rem;
    --jr-sidebar-padding-x: 1rem;
    --jr-sidebar-font-size: 1rem;
    --jr-sidebar-title-font-size: .8438rem;

    --jr-z-topbar: 1003;
    --jr-z-backdrop: 1004;
    --jr-z-sidebar: 1005;

    /* Sidebar clara (default; sobrescrita pelos temas abaixo) */
    --jr-sidebar-bg: rgba(var(--jr-surface-rgb), .55);
    --jr-sidebar-border: var(--jr-surface);
    --jr-sidebar-title: var(--jr-text-muted);
    --jr-sidebar-link: var(--jr-text-muted);
    --jr-sidebar-link-hover: var(--jr-primary);
    --jr-sidebar-link-hover-bg: var(--jr-primary-subtle);
    --jr-sidebar-link-active: var(--jr-primary);
    --jr-sidebar-link-active-bg: var(--jr-primary-subtle);
    --jr-sidebar-sub-link: var(--jr-text-muted);
    --jr-sidebar-sub-link-hover: var(--jr-primary);
    --jr-sidebar-sub-link-active: var(--jr-primary);
    --jr-sidebar-tree-line: var(--jr-border-color);
    --jr-sidebar-flyout-shadow: var(--jr-shadow-dropdown);

    /* Topbar clara (default) */
    --jr-topbar-bg: rgba(var(--jr-surface-rgb), .55);
    --jr-topbar-border: var(--jr-surface);
    --jr-topbar-color: var(--jr-text-muted);
    --jr-topbar-hover-color: var(--jr-primary);

    /* ---------------------------------------------------------------
       7. Ponte para o Bootstrap 5.1.3
       --------------------------------------------------------------- */
    --bs-primary: var(--jr-primary);
    --bs-primary-rgb: var(--jr-primary-rgb);
    --bs-secondary: var(--jr-secondary);
    --bs-secondary-rgb: var(--jr-secondary-rgb);
    --bs-success: var(--jr-success);
    --bs-success-rgb: var(--jr-success-rgb);
    --bs-info: var(--jr-info);
    --bs-info-rgb: var(--jr-info-rgb);
    --bs-warning: var(--jr-warning);
    --bs-warning-rgb: var(--jr-warning-rgb);
    --bs-danger: var(--jr-danger);
    --bs-danger-rgb: var(--jr-danger-rgb);
    --bs-light: var(--jr-light);
    --bs-light-rgb: var(--jr-light-rgb);
    --bs-dark: var(--jr-dark);
    --bs-dark-rgb: var(--jr-dark-rgb);
    --bs-body-bg: var(--jr-body-bg);
    --bs-body-color: var(--jr-body-color);
    --bs-body-color-rgb: var(--jr-body-color-rgb);
    --bs-body-font-family: var(--jr-font-sans);
    --bs-body-font-size: var(--jr-font-size-base);
    --bs-body-line-height: var(--jr-line-height-base);
    --bs-font-sans-serif: var(--jr-font-sans);
    --bs-font-monospace: var(--jr-font-mono);
    --bs-border-color: var(--jr-border-color);
    --bs-border-radius: var(--jr-radius);
    --bs-link-color: var(--jr-primary);
    --bs-link-hover-color: var(--jr-primary-emphasis);
}

/* =========================================================================
   Modo escuro — <html data-bs-theme="dark">
   Redefine somente tokens. Todo componente que consome --jr-* acompanha.
   ========================================================================= */
[data-bs-theme="dark"] {
    --jr-body-bg: #18191f;
    --jr-body-bg-rgb: 24, 25, 31;
    --jr-body-color: #e8edf2;
    --jr-body-color-rgb: 232, 237, 242;

    --jr-surface: #1e1f27;
    --jr-surface-rgb: 30, 31, 39;
    --jr-surface-glass: rgba(30, 31, 39, .72);
    --jr-surface-muted: #22242c;

    --jr-text-muted: #94a3b8;
    --jr-text-subtle: #7d8794;
    --jr-heading-color: #f1f5f9;

    --jr-border-color: #2b2d38;
    --jr-border-color-soft: #2b2d38;

    --jr-light: #22242c;
    --jr-light-rgb: 34, 36, 44;
    --jr-dark: #22242c;
    --jr-dark-rgb: 34, 36, 44;

    --jr-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35);
    --jr-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --jr-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .45);
    --jr-shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, .45);

    --jr-primary-emphasis: color-mix(in srgb, var(--jr-primary) 82%, #fff 18%);

    color-scheme: dark;
}

/* =========================================================================
   Temas da sidebar — <html data-sidebar-colors="...">
   ========================================================================= */
[data-sidebar-colors="dark"],
[data-sidebar-colors="navy"],
[data-sidebar-colors="purple"],
[data-sidebar-colors="sky"] {
    --jr-sidebar-border: var(--jr-sidebar-bg);
    --jr-sidebar-title: color-mix(in srgb, var(--jr-sidebar-bg) 25%, #fff 75%);
    --jr-sidebar-link: color-mix(in srgb, var(--jr-sidebar-bg) 20%, #fff 80%);
    --jr-sidebar-link-hover: #fff;
    --jr-sidebar-link-hover-bg: color-mix(in srgb, var(--jr-sidebar-bg) 88%, #fff 12%);
    --jr-sidebar-link-active: #fff;
    --jr-sidebar-link-active-bg: color-mix(in srgb, var(--jr-sidebar-bg) 82%, #fff 18%);
    --jr-sidebar-sub-link: color-mix(in srgb, var(--jr-sidebar-bg) 28%, #fff 72%);
    --jr-sidebar-sub-link-hover: #fff;
    --jr-sidebar-sub-link-active: #fff;
    --jr-sidebar-tree-line: color-mix(in srgb, var(--jr-sidebar-bg) 78%, #fff 22%);
    --jr-sidebar-flyout-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3);
}

[data-sidebar-colors="dark"]   { --jr-sidebar-bg: #071f2e; }
[data-sidebar-colors="navy"]   { --jr-sidebar-bg: #1b408d; }
[data-sidebar-colors="purple"] { --jr-sidebar-bg: #59359a; }
[data-sidebar-colors="sky"]    { --jr-sidebar-bg: #075985; }

/* =========================================================================
   Temas da topbar — <html data-topbar-colors="...">
   ========================================================================= */
[data-topbar-colors="dark"],
[data-topbar-colors="navy"],
[data-topbar-colors="purple"],
[data-topbar-colors="sky"],
[data-topbar-colors="admin"] {
    --jr-topbar-border: color-mix(in srgb, var(--jr-topbar-bg) 88%, #fff 12%);
    --jr-topbar-color: color-mix(in srgb, var(--jr-topbar-bg) 35%, #fff 65%);
    --jr-topbar-hover-color: #fff;
}

[data-topbar-colors="dark"]   { --jr-topbar-bg: #1e293b; }
[data-topbar-colors="navy"]   { --jr-topbar-bg: #1b408d; }
[data-topbar-colors="purple"] { --jr-topbar-bg: #59359a; }
[data-topbar-colors="sky"]    { --jr-topbar-bg: #075985; }

/* "admin" não é uma opção de aparência: o template_default aplica sozinho nas
   telas do menu Administração (só o super admin chega nelas). O tom quente
   destoa de propósito da paleta do painel, para não haver dúvida de que ali
   se mexe na configuração do sistema e não nos dados de um cliente. */
[data-topbar-colors="admin"]  { --jr-topbar-bg: #7c2d12; }

/* =========================================================================
   Paletas primárias alternativas — <html data-colors="...">
   ========================================================================= */
[data-colors="blue"]   { --jr-primary: #5582fb; --jr-primary-rgb: 85, 130, 251; }
[data-colors="violet"] { --jr-primary: #8338ec; --jr-primary-rgb: 131, 56, 236; }
[data-colors="coral"]  { --jr-primary: #e65f5c; --jr-primary-rgb: 230, 95, 92; }
[data-colors="teal"]   { --jr-primary: #00bba7; --jr-primary-rgb: 0, 187, 167; }
[data-colors="magenta"]{ --jr-primary: #e12afb; --jr-primary-rgb: 225, 42, 251; }
[data-colors="lime"]   { --jr-primary: #a7c957; --jr-primary-rgb: 167, 201, 87; }
[data-colors="amber"]  { --jr-primary: #ff9f1c; --jr-primary-rgb: 255, 159, 28; }