/* =============================================================
   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;
}

/* ── 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: #E8EDF4;                              /* 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: #E8EDF4;
}

/* ── 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: #F8FAFC;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748B;
    border-bottom-width: 1px;
    border-color: #E8EDF4;
    padding: .75rem 1rem;
}

.card .table > tbody > tr > td {
    padding: .75rem 1rem;
    border-color: #F1F5F9;    /* linha divisória mais suave */
    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: #E2E8F0;
    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: #64748B;
    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: #0F172A;
    border-bottom-color: #CBD5E1;
    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: #64748B;
    font-size: .82rem;
}

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

/* ── Inputs globais ──────────────────────────────────────── */
.form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: #475569;
}

.form-text {
    font-size: .77rem;
    color: #94A3B8;
}


/* =============================================================
   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: #0F172A;
}

/* ── 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;
}