/* ============================================================
   Vínko — Design tokens + camada de componentes
   Paleta e medidas do handoff (oklch violeta). Fonte da verdade:
   design_handoff_vinko_sistema/README.md
   ============================================================ */

:root {
    /* Superfícies e texto */
    --vk-bg: oklch(0.98 0.005 305);
    --vk-surface: #fff;
    --vk-card-border: oklch(0.9 0.008 305);
    --vk-text: oklch(0.24 0.01 300);
    --vk-text-secondary: oklch(0.45 0.01 300);
    --vk-text-muted: oklch(0.55 0.01 300);

    /* Primária (violeta) */
    --vk-primary: oklch(0.5 0.15 305);
    --vk-primary-hover: oklch(0.44 0.15 305);
    --vk-primary-ring: oklch(0.5 0.15 305 / 0.4);

    /* Sidebar */
    --vk-sidebar-bg: oklch(0.26 0.035 305);
    --vk-sidebar-text: oklch(0.96 0.01 305);
    --vk-sidebar-text-inactive: oklch(0.86 0.02 305);
    --vk-sidebar-width: 248px;

    /* Inputs */
    --vk-input-border: oklch(0.86 0.01 305);

    /* Status */
    --vk-green: oklch(0.42 0.12 155);
    --vk-green-bg: oklch(0.95 0.05 155);
    --vk-amber: oklch(0.45 0.1 75);
    --vk-amber-bg: oklch(0.95 0.05 85);
    --vk-red: oklch(0.5 0.16 25);
    --vk-red-bg: oklch(0.95 0.05 25);

    /* Chrome */
    --vk-shadow: 0 1px 3px oklch(0.6 0.02 305 / 0.06);

    /* Tipografia */
    --vk-font-sans: 'IBM Plex Sans', system-ui, sans-serif;
    --vk-font-display: 'Sora', sans-serif;
    --vk-font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--vk-bg);
    color: var(--vk-text);
    font-family: var(--vk-font-sans);
    min-height: 100vh;
}

a { color: var(--vk-primary); text-decoration: none; }
a:hover { color: var(--vk-primary-hover); }

/* ---------- Tema Bootstrap 5.3 ----------
   Em vez de recriar componentes, sobrescrevemos as variáveis/classes do próprio Bootstrap
   (que carrega antes deste arquivo no bundle). Assim botões, inputs e badges usam a paleta
   Vínko sem brigar por especificidade e novos componentes BS já nascem no tema. */
:root {
    --bs-body-font-family: var(--vk-font-sans);
    --bs-body-bg: var(--vk-bg);
    --bs-body-color: var(--vk-text);
    --bs-secondary-color: var(--vk-text-secondary);
    --bs-border-color: var(--vk-card-border);
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.875rem;
    --bs-link-color: var(--vk-primary);
    --bs-link-hover-color: var(--vk-primary-hover);
    --bs-emphasis-color: var(--vk-text);
}

/* ---------- Shell ---------- */
.vk-shell { display: flex; min-height: 100vh; }

.vk-sidebar {
    width: var(--vk-sidebar-width);
    flex: none;
    background: var(--vk-sidebar-bg);
    color: var(--vk-sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 26px 18px;
    gap: 6px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.vk-main { flex: 1; min-width: 0; padding: 34px 40px 80px; }

/* ---------- Logo ---------- */
.vk-logo { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; }
.vk-logo-mark { position: relative; width: 38px; height: 26px; flex: none; }
.vk-logo-ring { position: absolute; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 3px solid; }
.vk-logo-ring--left { left: 0; border-color: oklch(0.72 0.14 305); }
.vk-logo-ring--right { right: 0; border-color: oklch(0.88 0.06 305); }
.vk-logo-word { font-family: var(--vk-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }

/* ---------- Nav ---------- */
.vk-navitem {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--vk-sidebar-text-inactive);
    background: transparent;
    text-decoration: none;
}
.vk-navitem:hover { background: oklch(1 0 0 / 0.06); color: var(--vk-sidebar-text-inactive); }
.vk-navitem.active { background: var(--vk-primary); color: #fff; font-weight: 600; }
.vk-navitem.active:hover { color: #fff; }
.vk-navdot { width: 7px; height: 7px; border-radius: 2px; flex: none; }

/* ---------- Sidebar footer ---------- */
.vk-sidebar-footer {
    margin-top: auto;
    padding: 14px 10px 4px;
    border-top: 1px solid oklch(1 0 0 / 0.1);
    font-size: 12px;
    color: oklch(0.8 0.02 305);
}
.vk-sidebar-footer .vk-company { font-weight: 600; color: #fff; }
.vk-sidebar-footer .vk-cred { font-family: var(--vk-font-mono); font-size: 11px; margin-top: 3px; }

/* ---------- Tipografia de conteúdo ---------- */
.vk-eyebrow {
    font-family: var(--vk-font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(0.55 0.05 305);
    margin-bottom: 8px;
}
.vk-h1 { font-family: var(--vk-font-display); font-weight: 700; font-size: 29px; margin: 0 0 8px; letter-spacing: -0.02em; }
.vk-subtitle { margin: 0 0 26px; font-size: 15px; color: var(--vk-text-secondary); max-width: 620px; }
.vk-section-title { font-family: var(--vk-font-display); font-weight: 600; font-size: 16px; margin: 0; }
.vk-mono { font-family: var(--vk-font-mono); }

/* ---------- Cards ---------- */
.vk-card {
    background: var(--vk-surface);
    border: 1px solid var(--vk-card-border);
    border-radius: 16px;
    padding: 26px;
    box-shadow: var(--vk-shadow);
}

/* ---------- Botões (Bootstrap .btn) ---------- */
.btn { --bs-btn-font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--vk-primary);
    --bs-btn-border-color: var(--vk-primary);
    --bs-btn-hover-bg: var(--vk-primary-hover);
    --bs-btn-hover-border-color: var(--vk-primary-hover);
    --bs-btn-active-bg: var(--vk-primary-hover);
    --bs-btn-active-border-color: var(--vk-primary-hover);
    --bs-btn-disabled-bg: var(--vk-primary);
    --bs-btn-disabled-border-color: var(--vk-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-link {
    --bs-btn-color: var(--vk-primary);
    --bs-btn-hover-color: var(--vk-primary-hover);
    --bs-btn-font-weight: 500;
    text-decoration: none;          /* o BS sublinha em repouso; deixamos só no hover */
}
.btn-link:hover { text-decoration: underline; }
.text-danger { color: var(--vk-red) !important; }

/* Chips "Testar" da disponibilidade: btn outline em pílula, hover violeta sem preencher */
.vk-samples .btn {
    --bs-btn-color: var(--vk-text-muted);
    --bs-btn-bg: var(--vk-surface);
    --bs-btn-border-color: var(--vk-input-border);
    --bs-btn-hover-bg: var(--vk-bg);
    --bs-btn-hover-color: var(--vk-primary);
    --bs-btn-hover-border-color: var(--vk-primary);
    --bs-btn-active-bg: var(--vk-bg);
    --bs-btn-active-color: var(--vk-primary);
    --bs-btn-active-border-color: var(--vk-primary);
}

/* ---------- Inputs (Bootstrap .form-control / .form-label / .form-check) ---------- */
.form-label { font-size: 12.5px; font-weight: 600; color: oklch(0.4 0.02 300); margin-bottom: 7px; }
.form-control, .form-select { color: var(--vk-text); }
.form-control:focus, .form-select:focus {
    border-color: var(--vk-primary);
    box-shadow: 0 0 0 0.2rem var(--vk-primary-ring);
}
.form-check-input:checked { background-color: var(--vk-primary); border-color: var(--vk-primary); }
.form-check-input:focus { border-color: var(--vk-primary); box-shadow: 0 0 0 0.2rem var(--vk-primary-ring); }

/* ---------- Badges / pills / chips (Bootstrap .badge) ---------- */
.badge {
    --bs-badge-font-size: 0.72rem;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-y: 0.36em;
    --bs-badge-padding-x: 0.75em;
}
/* mapa status → variantes semânticas do BS, em tons suaves da paleta Vínko */
.text-bg-primary { color: #fff !important; background-color: var(--vk-primary) !important; }
.text-bg-success { color: var(--vk-green) !important; background-color: var(--vk-green-bg) !important; }
.text-bg-warning { color: var(--vk-amber) !important; background-color: var(--vk-amber-bg) !important; }
.text-bg-danger  { color: var(--vk-red)   !important; background-color: var(--vk-red-bg)   !important; }
.text-bg-light   { color: oklch(0.4 0.03 305) !important; background-color: oklch(0.96 0.01 305) !important; font-weight: 500; }

/* ---------- Badge-avatar (inicial do provedor) — não há equivalente no Bootstrap ---------- */
.vk-badge {
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vk-font-display);
    font-weight: 700;
    flex: none;
}

/* ---------- Estado vazio ---------- */
.vk-empty {
    background: #fff;
    border: 1px dashed oklch(0.84 0.01 305);
    border-radius: 14px;
    padding: 34px;
    text-align: center;
}