/* ============================================================================
   GRANATT DESIGN SYSTEM — TEMA GLOBAL
   ----------------------------------------------------------------------------
   Fonte da verdade visual do TaskFlow. Carregado DEPOIS do Bootstrap e dos
   CSS legados: re-estiliza todos os componentes via tokens do DS oficial
   (docs/Granatt Design System) sem alterar o markup das views.

   Qualquer ajuste de identidade (cor, radius, sombra, fonte) é feito AQUI.
   ============================================================================ */

/* ── Fonte oficial: Satoshi ─────────────────────────────────────────────── */
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

/* ── Tokens do Design System ────────────────────────────────────────────── */
:root {
    /* Paleta wine (marca) */
    --wine-50:#fdf1f4; --wine-100:#fbdde6; --wine-200:#f4b8cb; --wine-300:#e587a3;
    --wine-400:#cc5378; --wine-500:#a50037; --wine-600:#8c002e; --wine-700:#6e0024;
    --wine-800:#52001b; --wine-900:#380012; --wine-950:#210009;

    /* Neutros "ink" (quentes) */
    --ink-0:#ffffff; --ink-50:#f7f5f6; --ink-100:#eeeaec; --ink-200:#dcd5d9;
    --ink-300:#bfb4bb; --ink-400:#948890; --ink-500:#6c5f68; --ink-600:#4f4550;
    --ink-700:#392f38; --ink-800:#251d24; --ink-900:#170f16; --ink-950:#0d070c;

    /* Semânticas */
    --teal-100:#d7f2ec; --teal-500:#1f9d7c; --teal-600:#157a5f;
    --amber-100:#fdf0d5; --amber-500:#c8860a; --amber-600:#9c680a;
    --red-100:#fbe1e1; --red-500:#c8342f; --red-600:#a12724;
    --blue-100:#dfeaf8; --blue-500:#3271b8; --blue-600:#28558f;

    --color-brand:var(--wine-500);
    --color-success:var(--teal-500);   --color-success-bg:var(--teal-100);  --color-success-strong:var(--teal-600);
    --color-warning:var(--amber-500);  --color-warning-bg:var(--amber-100); --color-warning-strong:var(--amber-600);
    --color-danger:var(--red-500);     --color-danger-bg:var(--red-100);    --color-danger-strong:var(--red-600);
    --color-info:var(--blue-500);      --color-info-bg:var(--blue-100);     --color-info-strong:var(--blue-600);

    --surface-page:var(--ink-50);
    --border-subtle:var(--ink-200);
    --text-primary:var(--ink-900);
    --text-secondary:var(--ink-600);
    --text-link:var(--wine-600);
    --text-link-hover:var(--wine-700);
    --focus-ring:var(--wine-400);

    /* Tipografia */
    --font-sans:"Satoshi", -apple-system, "Segoe UI", sans-serif;
    --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:900;
    --ls-overline:0.12em;

    /* Forma e elevação */
    --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
    --shadow-sm:0 1px 2px rgba(23,15,22,.06);
    --shadow-md:0 4px 12px rgba(23,15,22,.08);
    --shadow-lg:0 12px 32px rgba(23,15,22,.12);
    --shadow-brand:0 8px 24px rgba(165,0,55,.18);

    /* Movimento */
    --ease-standard:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(0,0,.2,1);
    --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;
}

/* ── Ponte: variáveis legadas do TaskFlow (chrome/sidebar) ──────────────── */
:root {
    --primary-color: var(--wine-500);
    --primary-700: var(--wine-700);
    --secondary-color: var(--wine-700);
    --accent-color: var(--wine-600);
    --light-color: var(--surface-page);
    --dark-color: var(--text-primary);
    --sidebar-bg: var(--ink-900);
    --sidebar-border: var(--ink-700);
}

/* ── Ponte: variáveis do Bootstrap 5.3 ──────────────────────────────────── */
:root {
    --bs-primary: var(--wine-500);
    --bs-primary-rgb: 165, 0, 55;
    --bs-success: var(--teal-500);   --bs-success-rgb: 31, 157, 124;
    --bs-danger: var(--red-500);     --bs-danger-rgb: 200, 52, 47;
    --bs-warning: var(--amber-500);  --bs-warning-rgb: 200, 134, 10;
    --bs-info: var(--blue-500);      --bs-info-rgb: 50, 113, 184;
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--surface-page);
    --bs-border-color: var(--border-subtle);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-link-color: var(--text-link);
    --bs-link-hover-color: var(--text-link-hover);
    --bs-link-color-rgb: 140, 0, 46;
    --bs-link-hover-color-rgb: 110, 0, 36;
}

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: var(--surface-page);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
}

/* ── Botões: pill, Satoshi bold, press scale ────────────────────────────── */
.btn {
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-font-weight: var(--fw-bold);
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;               /* espaço uniforme entre ícone e texto */
    transition: background var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-standard);
}
.btn:not(:disabled):active { transform: scale(0.97); }

/* Botão colado a campo (input-group): mesma altura e canto do campo, sem pill */
.input-group > .btn {
    --bs-btn-border-radius: var(--radius-md);
    min-height: var(--gr-control-h);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.btn-primary {
    --bs-btn-bg: var(--wine-500);            --bs-btn-border-color: var(--wine-500);
    --bs-btn-hover-bg: var(--wine-600);      --bs-btn-hover-border-color: var(--wine-600);
    --bs-btn-active-bg: var(--wine-700);     --bs-btn-active-border-color: var(--wine-700);
    --bs-btn-disabled-bg: var(--wine-300);   --bs-btn-disabled-border-color: var(--wine-300);
    --bs-btn-focus-shadow-rgb: 165, 0, 55;
}
.btn-outline-primary {
    --bs-btn-color: var(--wine-600);         --bs-btn-border-color: var(--wine-500);
    --bs-btn-hover-bg: var(--wine-50);       --bs-btn-hover-color: var(--wine-700);
    --bs-btn-hover-border-color: var(--wine-500);
    --bs-btn-active-bg: var(--wine-100);     --bs-btn-active-color: var(--wine-700);
    --bs-btn-active-border-color: var(--wine-500);
    --bs-btn-focus-shadow-rgb: 165, 0, 55;
}
.btn-success {
    --bs-btn-bg: var(--teal-500);            --bs-btn-border-color: var(--teal-500);
    --bs-btn-hover-bg: var(--teal-600);      --bs-btn-hover-border-color: var(--teal-600);
    --bs-btn-active-bg: var(--teal-600);     --bs-btn-active-border-color: var(--teal-600);
}
.btn-danger {
    --bs-btn-bg: var(--red-500);             --bs-btn-border-color: var(--red-500);
    --bs-btn-hover-bg: var(--red-600);       --bs-btn-hover-border-color: var(--red-600);
    --bs-btn-active-bg: var(--red-600);      --bs-btn-active-border-color: var(--red-600);
}
.btn-warning {
    --bs-btn-bg: var(--amber-500);           --bs-btn-border-color: var(--amber-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--amber-600);     --bs-btn-hover-border-color: var(--amber-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--amber-600);    --bs-btn-active-color: #fff;
}
.btn-info {
    --bs-btn-bg: var(--blue-500);            --bs-btn-border-color: var(--blue-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--blue-600);      --bs-btn-hover-border-color: var(--blue-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--blue-600);     --bs-btn-active-color: #fff;
}
.btn-secondary {
    --bs-btn-bg: var(--ink-500);             --bs-btn-border-color: var(--ink-500);
    --bs-btn-hover-bg: var(--ink-600);       --bs-btn-hover-border-color: var(--ink-600);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink-600);          --bs-btn-border-color: var(--ink-300);
    --bs-btn-hover-bg: var(--ink-100);       --bs-btn-hover-color: var(--ink-700);
    --bs-btn-hover-border-color: var(--ink-300);
    --bs-btn-active-bg: var(--ink-200);      --bs-btn-active-color: var(--ink-700);
    --bs-btn-active-border-color: var(--ink-300);
}
.btn-light {
    --bs-btn-bg: var(--ink-100);             --bs-btn-border-color: var(--ink-100);
    --bs-btn-hover-bg: var(--ink-200);       --bs-btn-hover-border-color: var(--ink-200);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.card-header { background-color: var(--ink-0); border-bottom-color: var(--border-subtle); }
.card .card-header h5, .card .card-header h6 { font-weight: var(--fw-bold); }
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ── Formulários ────────────────────────────────────────────────────────── */
:root { --gr-control-h: calc(1.5em + 0.75rem + 2px); }   /* altura padrão de TODO campo */

.form-control, .form-select {
    border-radius: var(--radius-md);
    border-color: var(--ink-300);
    font-family: var(--font-sans);
    min-height: var(--gr-control-h);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}
.form-select { padding-right: 2.25rem; }
textarea.form-control { height: auto; }
.form-control:focus, .form-select:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 0.2rem rgba(165, 0, 55, 0.12);
}

/* Variante compacta coerente */
.form-control-sm, .form-select-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
}
.form-select-sm { padding-right: 2rem; }

/* Input de arquivo: botão interno alinhado à altura padrão e tematizado */
input[type="file"].form-control { padding: 0.375rem 0.75rem; line-height: 1.5; }
input[type="file"].form-control::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem 0.75rem -0.375rem -0.75rem;
    border: 0;
    border-right: 1px solid var(--ink-200);
    background: var(--ink-100);
    color: var(--ink-700);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    transition: background var(--duration-base) var(--ease-standard);
}
input[type="file"].form-control:hover::file-selector-button { background: var(--ink-200); }
input[type="file"].form-control::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem 0.75rem -0.375rem -0.75rem;
    border: 0;
    border-right: 1px solid var(--ink-200);
    background: var(--ink-100);
    color: var(--ink-700);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

/* Datas/horas (WebKit adiciona espaçamento interno próprio) */
input[type="date"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control, input[type="month"].form-control {
    line-height: 1.5;
}

/* Input groups: campos na mesma régua (botão tratado na seção de botões) */
.input-group > .form-control, .input-group > .form-select { min-height: var(--gr-control-h); }

/* Select2 acompanha a altura padrão (todas as telas, não só modais) */
.select2-container--bootstrap-5 .select2-selection {
    min-height: var(--gr-control-h) !important;
    display: flex;
    align-items: center;
}
.form-check-input:checked { background-color: var(--wine-500); border-color: var(--wine-500); }
.form-check-input:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 0.2rem rgba(165, 0, 55, 0.12);
}
.form-label { font-weight: var(--fw-medium); color: var(--text-secondary); }

/* ── Badges: pill ───────────────────────────────────────────────────────── */
.badge {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
}

/* ── Tabelas ────────────────────────────────────────────────────────────── */
.table { --bs-table-border-color: var(--ink-100); }
.table > thead { background-color: var(--ink-50); }
.table > thead th {
    font-size: 0.72rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-overline);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}
.table-light { --bs-table-bg: var(--ink-50); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--ink-50); }

/* ── Navegação (tabs/pills) ─────────────────────────────────────────────── */
.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--wine-600);
    --bs-nav-tabs-link-active-border-color: var(--border-subtle) var(--border-subtle) #fff;
    --bs-nav-link-color: var(--text-secondary);
    --bs-nav-link-hover-color: var(--wine-600);
    --bs-nav-tabs-border-radius: var(--radius-md);
}
.nav-tabs .nav-link { font-weight: var(--fw-medium); }
.nav-tabs .nav-link.active { font-weight: var(--fw-bold); }
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--wine-500);
    --bs-nav-pills-border-radius: var(--radius-pill);
}

/* ── Modais ─────────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}
.modal-backdrop.show { opacity: 0.45; }
.modal-header { border-bottom-color: var(--border-subtle); }
.modal-footer { border-top-color: var(--border-subtle); }
.modal-title { font-weight: var(--fw-bold); }

/* ── Alertas: fundos suaves do DS ───────────────────────────────────────── */
.alert { border-radius: var(--radius-md); }
.alert-success { background-color: var(--color-success-bg); color: var(--color-success-strong); border-color: var(--teal-100); }
.alert-danger  { background-color: var(--color-danger-bg);  color: var(--color-danger-strong);  border-color: var(--red-100); }
.alert-warning { background-color: var(--color-warning-bg); color: var(--color-warning-strong); border-color: var(--amber-100); }
.alert-info    { background-color: var(--color-info-bg);    color: var(--color-info-strong);    border-color: var(--blue-100); }

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress {
    border-radius: var(--radius-pill);
    background-color: var(--ink-100);
}
.progress-bar { background-color: var(--wine-500); }
.progress-bar.bg-success { background-color: var(--teal-500) !important; }
.progress-bar.bg-warning { background-color: var(--amber-500) !important; }

/* ── Dropdowns / list groups / paginação ────────────────────────────────── */
.dropdown-menu {
    border-radius: var(--radius-md);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-md);
    --bs-dropdown-link-active-bg: var(--wine-500);
    --bs-dropdown-link-hover-bg: var(--ink-50);
}
.list-group {
    --bs-list-group-border-color: var(--ink-100);
    --bs-list-group-active-bg: var(--wine-500);
    --bs-list-group-active-border-color: var(--wine-500);
    --bs-list-group-border-radius: var(--radius-md);
}
.pagination {
    --bs-pagination-active-bg: var(--wine-500);
    --bs-pagination-active-border-color: var(--wine-500);
    --bs-pagination-color: var(--wine-600);
    --bs-pagination-hover-color: var(--wine-700);
    --bs-pagination-focus-color: var(--wine-700);
    --bs-pagination-border-radius: var(--radius-md);
}

/* ── Chrome do TaskFlow (sidebar/header) ────────────────────────────────── */
.sidebar-brand-icon { color: var(--wine-300); }
.sidebar .nav-link.active { background: var(--wine-600); }
.sidebar .nav-link .badge { background: var(--wine-500); }
.main-header { border-bottom: 1px solid var(--border-subtle); }

/* ── Select2 (tema bootstrap-5) ─────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--radius-md);
    border-color: var(--ink-300);
    font-family: var(--font-sans);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 0.2rem rgba(165, 0, 55, 0.12);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--wine-500) !important;
    color: #fff !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: var(--radius-md);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-md);
}

/* ════════════════════════════════════════════════════════════════════════
   MENU RAIL + PAINEL (substitui a sidebar antiga)
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --tf-rail-w: 84px;
    --tf-panel-w: 300px;
    --sidebar-width: var(--tf-rail-w); /* .main-content e .main-header seguem o rail */
}

/* Neutraliza o estado "expanded" do JS legado do menu antigo */
.main-content.expanded { margin-left: var(--tf-rail-w) !important; }
.main-header.expanded { left: var(--tf-rail-w) !important; }

/* ── Rail ── */
.tf-rail {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--tf-rail-w);
    background: var(--ink-950);
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 0; gap: 6px;
    z-index: 1004;
}
.tf-rail-logo {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    background: var(--wine-500);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; flex-shrink: 0;
    box-shadow: var(--shadow-brand);
    transition: background var(--duration-base) var(--ease-standard);
}
.tf-rail-logo:hover { background: var(--wine-600); }
.tf-rail-logo img { width: 26px; height: 26px; object-fit: contain; }
.tf-rail-logo i { color: #fff; font-size: 1.2rem; }
.tf-rail-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; scrollbar-width: none; }
.tf-rail-items::-webkit-scrollbar { display: none; }
.tf-rail-item {
    appearance: none; -webkit-appearance: none;
    width: 64px; padding: 9px 2px 7px; border: none; background: transparent;
    border-radius: var(--radius-md);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--ink-400) !important; background: transparent;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.tf-rail-item i { font-size: 1.05rem; }
.tf-rail-item span { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.06em; }
.tf-rail-item:hover { background: var(--ink-800) !important; color: var(--ink-100) !important; }
.tf-rail-item.active { background: var(--ink-800) !important; color: #fff !important; }

/* ── Painel ── */
.tf-panel {
    position: fixed; top: 0; bottom: 0; left: var(--tf-rail-w);
    width: var(--tf-panel-w);
    background: var(--ink-900);
    display: flex; flex-direction: column;
    z-index: 1003;
    transform: translateX(calc(-1 * var(--tf-panel-w) - var(--tf-rail-w)));
    transition: transform var(--duration-slow) var(--ease-standard);
    border-right: 1px solid var(--ink-800);
}
body.tf-panel-open .tf-panel { transform: translateX(0); }

.tf-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 18px 8px;
}
.tf-eyebrow {
    font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--ls-overline);
    text-transform: uppercase; color: var(--ink-400) !important;
}
.tf-panel-title { color: #fff !important; font-size: 1.35rem; font-weight: var(--fw-black); margin: 2px 0 0; }
.tf-panel-close {
    appearance: none; -webkit-appearance: none;
    border: none; background: transparent; color: var(--ink-400);
    width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer;
}
.tf-panel-close:hover { background: var(--ink-800); color: #fff; }

.tf-search {
    margin: 8px 14px 12px; position: relative;
    display: flex; align-items: center;
}
.tf-search i { position: absolute; left: 12px; color: var(--ink-400); font-size: 0.8rem; }
.tf-search input {
    width: 100%; background: var(--ink-800); border: 1px solid var(--ink-700);
    border-radius: var(--radius-md); color: #fff;
    padding: 9px 52px 9px 34px; font-size: 0.875rem; font-family: var(--font-sans);
}
.tf-search input::placeholder { color: var(--ink-400); }
.tf-search input:focus { outline: none; border-color: var(--wine-400); }
.tf-kbd {
    position: absolute; right: 10px;
    font-size: 10px; font-weight: var(--fw-bold); color: var(--ink-300);
    background: var(--ink-700); border-radius: 5px; padding: 2px 6px;
}

.tf-panel-body { flex: 1; overflow-y: auto; padding: 2px 14px 14px; }
.tf-panel-body::-webkit-scrollbar { width: 8px; }
.tf-panel-body::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 8px; }

.tf-group-title {
    font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--ls-overline);
    text-transform: uppercase; color: var(--ink-400) !important;
    padding: 8px 10px 6px;
}
.tf-sep { height: 1px; background: var(--ink-800); margin: 10px 6px; }

.tf-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 3px;
    border-radius: var(--radius-md);
    color: var(--ink-100) !important; text-decoration: none !important;
    font-size: 0.9rem; font-weight: var(--fw-medium);
    transition: background var(--duration-fast) var(--ease-standard);
}
.tf-item i:first-child { width: 20px; text-align: center; font-size: 0.95rem; color: var(--ink-300); }
.tf-item:hover { background: var(--ink-800) !important; color: #fff !important; }
.tf-item.active { background: var(--wine-600) !important; color: #fff !important; font-weight: var(--fw-bold); }
.tf-item.active i:first-child { color: #fff; }
.tf-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-item-tag {
    font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.06em;
    color: var(--ink-400);
}
.tf-item.active .tf-item-tag { color: var(--wine-200); }
.tf-pin {
    appearance: none; -webkit-appearance: none;
    border: none; background: transparent; color: var(--ink-500);
    padding: 3px 4px; border-radius: 5px; cursor: pointer; font-size: 0.75rem;
    opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
}
.tf-item:hover .tf-pin { opacity: 1; }
.tf-pin.on { opacity: 1; color: var(--amber-500); }
.tf-pin:hover { color: var(--amber-500); }
.tf-empty { color: var(--ink-400); font-size: 0.85rem; text-align: center; padding: 24px 10px; }

.tf-panel-foot { padding: 12px 18px; border-top: 1px solid var(--ink-800); }
.tf-panel-foot a { color: var(--ink-400); font-size: 0.75rem; text-decoration: none !important; }
.tf-panel-foot a:hover { color: var(--ink-200); }
.tf-panel-foot b { color: var(--ink-200); }

/* Desktop largo (≥993px): painel aberto EMPURRA o conteúdo */
@media (min-width: 993px) {
    .main-content, .main-header { transition: margin-left var(--duration-slow) var(--ease-standard), left var(--duration-slow) var(--ease-standard); }
    body.tf-panel-open .main-content { margin-left: calc(var(--tf-rail-w) + var(--tf-panel-w)); }
    body.tf-panel-open .main-header { left: calc(var(--tf-rail-w) + var(--tf-panel-w)); }
    .tf-scrim { display: none; }
}

/* Scrim (tablet e mobile): escurece o conteúdo com o painel aberto */
@media (max-width: 992px) {
    .tf-scrim {
        position: fixed; inset: 0; background: rgba(23, 15, 22, 0.5); z-index: 1002;
        opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-standard);
    }
    body.tf-panel-open .tf-scrim { opacity: 1; pointer-events: auto; }
    body.tf-panel-open { overflow: hidden; }   /* trava o scroll do fundo */
    .tf-kbd { display: none; }
}

/* Tablet / janela estreita (769–992px): rail visível, painel como OVERLAY */
@media (min-width: 769px) and (max-width: 992px) {
    .tf-panel { box-shadow: var(--shadow-lg); }
}

/* Mobile (≤768px): rail escondido; hambúrguer abre rail+painel em tela cheia */
@media (max-width: 768px) {
    .tf-rail { transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-standard); }
    body.tf-mobile-open .tf-rail { transform: translateX(0); }
    .main-content, .main-content.expanded { margin-left: 0 !important; }
    .main-header, .main-header.expanded { left: 0 !important; }

    /* Painel ocupa o restante da tela ao lado do rail
       (redefinir o token corrige também o transform de fechado) */
    .tf-panel { --tf-panel-w: calc(100vw - var(--tf-rail-w)); width: var(--tf-panel-w); }

    /* Alvos de toque maiores */
    .tf-item { padding: 13px 14px; font-size: 0.95rem; }
    .tf-rail-item { width: 68px; padding: 11px 2px 9px; }
    .tf-panel-close { width: 38px; height: 38px; font-size: 1rem; }
    .tf-search input { padding-top: 11px; padding-bottom: 11px; font-size: 1rem; }
    .tf-pin { opacity: 1; }   /* estrela sempre visível (não há hover no toque) */

    /* Respeita notch/safe areas do iOS */
    .tf-rail { padding-top: calc(14px + env(safe-area-inset-top)); }
    .tf-panel { padding-top: env(safe-area-inset-top); }
    .tf-panel-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media print {
    .tf-rail, .tf-panel, .tf-scrim { display: none !important; }
    .main-content { margin-left: 0 !important; }
}

/* ── Utilitários frequentes no sistema ──────────────────────────────────── */
.text-primary { color: var(--wine-600) !important; }
.bg-primary { background-color: var(--wine-500) !important; }
.border-primary { border-color: var(--wine-500) !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .page-link:hover { text-decoration: none; }