/* =============================================================
   CLINOVAR — Design Tokens + Acabamento Visual Premium
   Carregado globalmente via _Layout.cshtml
   ============================================================= */

/* ── Importação da tipografia Inter ──────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Tokens de marca ─────────────────────────────────────── */
:root {
    --brand-primary:       #2563EB;
    --brand-primary-hover: #1D4ED8;
    --brand-primary-light: #DBEAFE;
    --brand-teal:          #0D9488;
    --brand-teal-hover:    #0F766E;
    --brand-teal-light:    #CCFBF1;
    --brand-gradient-h:    linear-gradient(90deg, #2563EB 0%, #0D9488 100%);
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Tokens semânticos de tema (Light/Dark) ──────────────────
   Fundação para o sistema de tema. Ainda não consumidos pelos
   componentes existentes — substituição gradual em fases futuras.
   ============================================================= */
:root {
    --bg-primary:        #ffffff;
    --bg-secondary:      #f1f5f9;
    --surface:           #ffffff;
    --surface-hover:     #f8fafc;

    --text-primary:      #0f172a;
    --text-secondary:    #475569;
    --text-muted:        #94a3b8;

    --border-color:      #e2e8f0;

    --input-bg:          #ffffff;
    --input-text:        #0f172a;
    --input-placeholder: #94a3b8;

    --success:           #22c55e;
    --warning:           #f59e0b;
    --danger:            #ef4444;
    --info:              #3b82f6;

    /* Superfícies/realces de UI (chrome) — usados por painéis, chips, realces. */
    --surface-2:         #f8fafc;   /* painel/cabeçalho sutil (toolbars, headers, rails) */
    --chip-bg:           #f1f5f9;   /* fundo de chips/badges neutros */
    --accent:            #1e40af;   /* títulos/realces de marca (azul) */
    --accent-soft-bg:    #dbeafe;   /* fundo suave de realce (hover/placeholder) */
    --warning-soft-bg:   rgba(245, 158, 11, .12);

    /* Paleta de "papel" (WYSIWYG de documentos): tinta sobre papel branco.
       Intencionalmente CONSTANTE nos dois temas — o documento imprime em papel claro. */
    --paper-bg:          #ffffff;
    --paper-text:        #1f2937;
    --paper-token-bg:    #fdf2f8;
    --paper-token-text:  #be185d;
}

[data-bs-theme="dark"] {
    --bg-primary:        #0f172a;
    --bg-secondary:      #1e293b;
    --surface:           #1e293b;
    --surface-hover:     #334155;

    --text-primary:      #f1f5f9;
    --text-secondary:    #cbd5e1;
    --text-muted:        #94a3b8;

    --border-color:      #334155;

    --input-bg:          #1e293b;
    --input-text:        #f1f5f9;
    --input-placeholder: #64748b;

    --success:           #4ade80;
    --warning:           #fbbf24;
    --danger:            #f87171;
    --info:              #60a5fa;

    /* Chrome no dark (AA garantido sobre --surface/--surface-2). paper-* NÃO muda. */
    --surface-2:         #243244;
    --chip-bg:           #334155;
    --accent:            #93c5fd;
    --accent-soft-bg:    rgba(96, 165, 250, .16);
    --warning-soft-bg:   rgba(251, 191, 36, .16);

    /* Unifica a paleta DARK do Bootstrap com os tokens Clinovar, para que
       cards, modais, dropdowns, offcanvas, list-groups e bordas usem o mesmo
       slate (#0f172a/#1e293b) em vez do cinza padrão do Bootstrap (#212529).
       É isto que dá ao dark a sensação de produto nativo e não "camada por cima". */
    --bs-body-bg:        var(--bg-primary);
    --bs-body-color:     var(--text-primary);
    --bs-secondary-bg:   var(--bg-secondary);
    --bs-tertiary-bg:    var(--bg-secondary);
    --bs-secondary-color: var(--text-secondary);
    --bs-border-color:   var(--border-color);
    --bs-card-bg:        var(--surface);
    --bs-card-cap-bg:    var(--bg-secondary);
    --bs-modal-bg:       var(--surface);
    --bs-dropdown-bg:    var(--surface);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-offcanvas-bg:   var(--surface);
    --bs-emphasis-color: var(--text-primary);
    --bs-heading-color:  var(--text-primary);
}

/* ── Tipografia global ───────────────────────────────────── */
body,
.form-control,
.form-select,
.btn,
.card,
.modal-content,
.dropdown-menu {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.02em;
}

/* =============================================================
   ACABAMENTO VISUAL PREMIUM — CARDS
   Profundidade, sombras suaves, bordas refinadas,
   tipografia e espaçamento internos.
   Não altera HTML, layouts ou componentes.
   ============================================================= */

/* ── Sombra base refinada ────────────────────────────────── */
.card {
    border-color: var(--border-color);                              /* borda levemente mais fria/suave */
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 2px 6px rgba(15,23,42,.05) !important;       /* sombra dupla: contato + difusão */
    transition: box-shadow .18s ease, transform .18s ease;
}

/* Hover: elevação discreta — sensação de profundidade */
.card:hover {
    box-shadow:
        0 1px 3px rgba(15,23,42,.05),
        0 6px 16px rgba(15,23,42,.08) !important;
}

/* Classe .shadow-sm normalizada para o mesmo padrão */
.shadow-sm {
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 2px 6px rgba(15,23,42,.05) !important;
}

/* ── Espaçamento interno dos cards ───────────────────────── */
.card-body {
    padding: 1.25rem 1.375rem;
}

.card-header {
    padding: .875rem 1.375rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.card-footer {
    padding: .875rem 1.375rem;
}

/* ── Bordas mais refinadas nos cards ─────────────────────── */
.card,
.card-header,
.card-footer {
    border-color: var(--border-color);
}

/* ── KPI cards — tipografia de destaque ──────────────────── */
/* h3 e .h3 usados nos cards de métricas do Dashboard */
.card .h3,
.card h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -.04em;   /* tracking tight para números grandes */
    line-height: 1;
}

/* Label pequeno acima do número (text-uppercase small) */
.card .text-uppercase {
    letter-spacing: .06em;
    font-size: .68rem !important;
}

/* ── cln-metric-card — profundidade adicional ────────────── */
.cln-metric-card {
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 2px 8px rgba(15,23,42,.06);
    transition: box-shadow .18s ease, transform .18s ease;
}

.cln-metric-card:hover {
    box-shadow:
        0 2px 4px rgba(15,23,42,.05),
        0 8px 20px rgba(15,23,42,.09);
    transform: translateY(-1px);
}

/* ── Tabela dentro de card ───────────────────────────────── */
/* Remove borda dupla quando table-responsive está dentro de card */
.card .table-responsive {
    border: none;
    border-radius: 0;
}

/* Cabeçalho de tabela mais limpo */
.card .table > thead > tr > th {
    background: var(--surface-hover);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    border-bottom-width: 1px;
    border-color: var(--border-color);
    padding: .75rem 1rem;
}

.card .table > tbody > tr > td {
    padding: .75rem 1rem;
    border-color: var(--border-color);    /* linha divisória — token (light/dark) */
    vertical-align: middle;
}

.card .table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* ── Formulários dentro de cards ────────────────────────── */
.card .form-control,
.card .form-select {
    border-color: var(--border-color);
    font-size: .875rem;
}

.card .form-control:focus,
.card .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── Botão primário ─────────────────────────────────────── */
.btn-primary {
    box-shadow: 0 1px 3px rgba(37,99,235,.25);
}
.btn-primary:hover {
    box-shadow: 0 3px 8px rgba(37,99,235,.3);
}

/* ── Nav tabs refinados ──────────────────────────────────── */
.nav-tabs .nav-link {
    font-family: var(--font-sans);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    padding: .625rem 1rem;
    border-radius: 0;
    transition: color .12s, border-color .12s;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
    font-weight: 600;
    background: transparent;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-item a {
    color: var(--brand-teal);
    font-weight: 500;
    font-size: .82rem;
}
.breadcrumb-item.active {
    color: var(--text-secondary);
    font-size: .82rem;
}

/* ── Badges refinados ───────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ── Inputs globais ──────────────────────────────────────── */
.form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-text {
    font-size: .77rem;
    color: var(--text-muted);
}


/* =============================================================
   PALETA OFICIAL CLINOVAR
   #5D8BFF — Azul vibrante  : ações primárias, links, KPI "Hoje"
   #5ED8C7 — Turquesa       : positivos, saúde, KPI "Pacientes"
   #9B6DFF — Violeta        : premium, KPI "Procedimentos"
   Aplicado sem alterar HTML, layouts ou componentes.
   ============================================================= */

/* ── Tokens atualizados ──────────────────────────────────── */
:root {
    --brand-primary:       #5D8BFF;
    --brand-primary-hover: #4A78FF;
    --brand-primary-light: rgba(93,139,255,.12);
    --brand-teal:          #5ED8C7;
    --brand-teal-light:    rgba(94,216,199,.12);
    --brand-accent:        #9B6DFF;
    --brand-accent-light:  rgba(155,109,255,.12);
    --brand-gradient-h:    linear-gradient(90deg, #5D8BFF 0%, #5ED8C7 100%);
}

/* ── Botão primário — #5D8BFF ────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                 #5D8BFF;
    --bs-btn-border-color:       #5D8BFF;
    --bs-btn-hover-bg:           #4A78FF;
    --bs-btn-hover-border-color: #4A78FF;
    --bs-btn-active-bg:          #3D6BFF;
    box-shadow: 0 1px 3px rgba(93,139,255,.28);
}
.btn-primary:hover { box-shadow: 0 3px 8px rgba(93,139,255,.35); }
.btn-outline-primary {
    --bs-btn-color:              #5D8BFF;
    --bs-btn-border-color:       #5D8BFF;
    --bs-btn-hover-bg:           #5D8BFF;
    --bs-btn-hover-border-color: #5D8BFF;
}

/* ── Links de ação ───────────────────────────────────────── */
a { color: #5D8BFF; }
a:hover { color: #4A78FF; }

/* ── text-primary / bg-primary (KPI "Hoje", badges) ────── */
.text-primary                   { color: #5D8BFF !important; }
.bg-primary.bg-opacity-10       { background-color: rgba(93,139,255,.1) !important; }

/* ── text-success / bg-success (KPI "Pacientes") ─────────── */
/* Turquesa Clinovar — estados positivos/saúde */
.text-success                   { color: #38C4B2 !important; }  /* levemente mais escuro p/ contraste */
.bg-success.bg-opacity-10       { background-color: rgba(94,216,199,.1) !important; }

/* ── text-info / bg-info (KPI "Procedimentos") ──────────── */
/* Violeta Clinovar — premium */
.text-info                      { color: #9B6DFF !important; }
.bg-info.bg-opacity-10          { background-color: rgba(155,109,255,.1) !important; }

/* ── Badges: text-bg-* (semânticos, usados nos status) ───── */
.badge.text-bg-primary          { background-color: rgba(93,139,255,.15) !important; color: #5D8BFF !important; }
.badge.bg-primary               { background-color: #5D8BFF !important; }

/* ── KPI — número de destaque ────────────────────────────── */
.card .h3.fw-bold,
.card .h3 {
    font-size: 1.875rem;
    letter-spacing: -.05em;
    color: var(--text-primary);
}

/* ── Focus ring — #5D8BFF ────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #5D8BFF;
    box-shadow: 0 0 0 3px rgba(93,139,255,.15);
}
.form-check-input:checked {
    background-color: #5D8BFF;
    border-color: #5D8BFF;
}

/* ── Nav-tabs ativa ──────────────────────────────────────── */
.nav-tabs .nav-link.active {
    color: #5D8BFF;
    border-bottom-color: #5D8BFF;
}

/* ── Sidebar brand name — gradiente com a nova paleta ───── */
.sidebar-brand-name {
    background: linear-gradient(90deg, #5D8BFF 0%, #5ED8C7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================================
   DARK MODE — Rede de segurança para utilitárias e superfícies
   Captura usos inline de classes Bootstrap fixas em claro
   (bg-white, bg-light, text-dark, bg-body) espalhados pelas telas,
   sem precisar editar cada view. Consome os tokens centrais.
   ============================================================= */
[data-bs-theme="dark"] .bg-white   { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .bg-light   { background-color: var(--bg-secondary) !important; }
[data-bs-theme="dark"] .bg-body    { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .text-dark  { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Inputs/selects/textarea — garante fundo, texto e placeholder coerentes no dark
   mesmo onde o componente tenha borda/realce próprios. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--border-color);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--input-placeholder); }
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* Dropdowns/menus e popovers seguem a superfície do tema. */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .popover {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-bs-theme="dark"] .popover .popover-body { color: var(--text-secondary); }

/* O .card do Bootstrap re-localiza --bs-card-bg para --bs-body-bg; força a
   superfície elevada (--surface) para dar profundidade sobre o fundo (--bg-primary). */
[data-bs-theme="dark"] .card        { --bs-card-bg: var(--surface); }
[data-bs-theme="dark"] .list-group  { --bs-list-group-bg: var(--surface); }
[data-bs-theme="dark"] .modal       { --bs-modal-bg: var(--surface); }
[data-bs-theme="dark"] .offcanvas   { --bs-offcanvas-bg: var(--surface); }