/* ==========================================================================
   1. Definição de Temas (Variáveis CSS)
   ========================================================================== */
:root {
    /* Cores do Tema Escuro (Padrão) */
    --base-bg: #111827;
    --base-bg-darker: #1f2937;
    --card-bg: #1f2937;
    --line: #374151;
    --text-main: #f9fafb;
    --text-secondary: #d1d5db;
    --muted: #9ca3af;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --secondary: #4b5563;
    --secondary-hover: #374151;
    --danger: #ef4444;
    --danger-hover: #dc2626;

    /* Cores para badges e gráficos */
    /* Cores acessíveis (paleta Okabe-Ito) */
    --green-500: #009E73;   /* Approved */
    --red-500: #D55E00;     /* Rejected */
    --yellow-500: #E69F00;  /* Pending/Warning */
    --blue-500: #0072B2;    /* Info */
    --purple-500: #7C3AED;  /* Extra */
    --pink-500: #EC4899;
    --teal-500: #56B4E9;    /* Complementar */
    --indigo-500: #0072B2;
    --orange-500: #E69F00;
    --lime-500: #84cc16;
    --cyan-500: #06b6d4;
    --gray-500: #6b7280;
    /* Novas cores para tipos de ausência */
    --maroon-500: #8B0000;
    --navy-500: #1e3a8a;
    --brown-500: #8B4513;
    --aqua-500: #00A1C1;
    --violet-500: #7B1FA2;
    --mint-500: #2DD4BF;
    --lavender-500: #B57EDC;
    --olive-500: #6B8E23;
    --steel-500: #4B6CB7;

    /* Cores transparentes para fundos */
    --green-500-t: rgba(0, 158, 115, 0.22);
    --yellow-500-t: rgba(230, 159, 0, 0.22);
    --blue-500-t: rgba(0, 114, 178, 0.18);
    --red-500-t: rgba(213, 94, 0, 0.18);
    --purple-500-t: rgba(124, 58, 237, 0.22);
    --pink-500-t: rgba(236, 72, 153, 0.22);
    --teal-500-t: rgba(86, 180, 233, 0.18);
    --indigo-500-t: rgba(0, 114, 178, 0.18);
    --orange-500-t: rgba(230, 159, 0, 0.22);
    --lime-500-t: rgba(132, 204, 22, 0.2);
    --cyan-500-t: rgba(6, 182, 212, 0.2);
    --gray-500-t: rgba(107, 114, 128, 0.2);
    /* Texto sobre fundos translúcidos */
    --badge-text-on-tint: #ffffff;
    /* Transparentes das novas cores */
    --maroon-500-t: rgba(139, 0, 0, 0.22);
    --navy-500-t: rgba(30, 58, 138, 0.22);
    --brown-500-t: rgba(139, 69, 19, 0.22);
    --aqua-500-t: rgba(0, 161, 193, 0.2);
    --violet-500-t: rgba(123, 31, 162, 0.2);
    --mint-500-t: rgba(45, 212, 191, 0.2);
    --lavender-500-t: rgba(181, 126, 220, 0.22);
    --olive-500-t: rgba(107, 142, 35, 0.24);
    --steel-500-t: rgba(75, 108, 183, 0.22);
}

:root.light-mode {
    /* Cores do Tema Claro */
    --base-bg: #f3f4f6;
    --base-bg-darker: #e5e7eb;
    --card-bg: #ffffff;
    --line: #d1d5db;
    --text-main: #111827;
    --text-secondary: #374151;
    --muted: #6b7280;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary: #e5e7eb;
    --secondary-hover: #d1d5db;
    --badge-text-on-tint: #111827;
}

/* ==========================================================================
   2. Estilos Base e Layout
   ========================================================================== */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
    background: var(--base-bg);
    color: var(--text-main);
    line-height: 1.45;
}

.container { max-width: 1280px; margin: 0 auto; padding: 16px; }
@media (min-width: 1440px) { .container { max-width: 1360px; } }
@media (min-width: 1680px) { .container { max-width: 1480px; } }
@media (max-width: 480px) { .container { padding: 12px; } }

.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { background: var(--card-bg); border-right: 1px solid var(--line); padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.content { overflow: auto; }
.mobile-header { display: none; }

/* Thin scrollbars for main containers */
.sidebar, .content {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--line) transparent;
}
.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.25);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1024px) {
    .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; height: 100svh; height: 100dvh; z-index: 100;
        bottom: 0; height: auto;
        transform: translateX(-100%); transition: transform 0.3s ease-in-out;
        width: 280px; box-shadow: 0 0 20px rgba(0,0,0,0.2);
        overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .sidebar.open { transform: translateX(0); }
    .mobile-header {
        display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
        padding: 12px 12px; background: var(--card-bg);
        border-bottom: 1px solid var(--line);
        position: sticky; top: 0; z-index: 50; min-height: 68px;
    }
    /* Hide sidebar scrollbar UI on mobile while keeping scroll */
    .sidebar { scrollbar-width: none; }
    .sidebar::-webkit-scrollbar { width: 0; height: 0; }
    /* Centro estável do logótipo usando grid (sem posicionamento absoluto) */
    #mobile-menu-toggle { grid-column: 1; }
    .mobile-header .mobile-brand { grid-column: 2; justify-self: center; text-align: center; max-width: 100%; position: static; transform: none; }
    .mobile-header .brand { display: inline-flex; align-items: center; gap: 8px; }
    .mobile-header .brand img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
    @media (max-width: 420px) {
        .mobile-header { grid-template-columns: 40px 1fr 40px; padding: 10px; min-height: 64px; }
        .mobile-header .brand img { max-height: 40px; }
    }
    .mobile-header .user-profile-widget { background: none; padding: 0; }
    /* Mostrar o perfil + sair apenas no menu (sidebar), não no cabeçalho mobile */
    .mobile-user-widget { display: none; }
    .sidebar .brand { display: none; } /* Hide brand inside sidebar on mobile */

    /* Esconder item "Log de Auditoria" no menu em mobile */
    .sidenav a[href$="admin_audit_log.php"] { display: none !important; }
}
.container > .card:first-child,
.container > .alert:first-child {
    margin-top: 0;
}

.footer { border-top: 1px solid var(--line); color: var(--muted); padding: 1rem; text-align: center; font-size: 0.875rem; }

/* ==========================================================================
   3. Componentes UI
   ========================================================================== */

/* --- Brand & Navigation --- */
.brand { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 700; color: var(--text-main); text-decoration: none; }
.brand img { display: block; height: 60px; width: auto; }
.brand span { display: block; line-height: 1.15; }
.sidebar .brand { flex-direction: column; align-items: center; gap: 6px; }
.brand .logo-light { display: none; }
.light-mode .brand .logo-dark { display: none; }
.light-mode .brand .logo-light { display: block; }
.sidebar .brand span { text-align: center; }

.sidenav { display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; }
.sidebar .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; font-weight: 500; color: var(--muted); text-decoration: none; }
.sidebar .nav-link svg { width: 20px; height: 20px; stroke-width: 1.8; color: var(--muted); }
.sidebar .nav-link:hover { background: var(--base-bg-darker); color: var(--text-main); }


.sidebar .nav-link:hover svg { color: var(--text-main); }
.sidebar .nav-link.active { background: var(--primary); color: #fff; }
.sidebar .nav-link.active svg { color: #fff; }

/* Dropdown (sidenav) */
.sidebar .nav-dropdown { position: relative; }
.sidebar .nav-dropdown > .nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar .nav-dropdown > .nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar .nav-dropdown > .nav-link .chev { display:inline-flex; margin-left: 8px; transition: transform .18s ease; opacity: .8; }
.sidebar .nav-dropdown > .nav-link .chev svg { width: 16px; height: 16px; }
.sidebar .nav-dropdown.open > .nav-link .chev { transform: rotate(90deg); }
.sidebar .nav-dropdown .dropdown-menu { display: none; flex-direction: column; margin: 4px 0 8px 8px; padding-left: 8px; border-left: 1px solid var(--line); }
.sidebar .nav-dropdown.open .dropdown-menu { display: flex; }
.sidebar .nav-sublink { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.sidebar .nav-sublink svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--muted); }
.sidebar .nav-sublink:hover { background: var(--base-bg-darker); color: var(--text-main); }
.sidebar .nav-sublink:hover svg { color: var(--text-main); }
.sidebar .nav-sublink.active { background: var(--secondary); color: var(--text-main); }

/* Global modal confirm */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 10000; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.app-confirm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.94); background: var(--card-bg); color: var(--text-main); border: 1px solid var(--line); border-radius: 12px; min-width: min(420px, 92vw); box-shadow: 0 20px 40px rgba(2,6,23,.25); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 10001; }
.app-confirm.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.app-confirm__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.app-confirm__icon { width: 48px; height: 48px; border-radius: 999px; background: rgba(220,38,38,.12); color: #dc2626; display: flex; align-items: center; justify-content: center; }
.app-confirm__text h4 { margin: 0; font-size: 1rem; }
.app-confirm__text p { margin: 0; color: var(--muted); }
.app-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* (reverted) no special icon-row styling; rely on inline styles */

/* --- Cards --- */
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; margin: 1.25rem 0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05); }
@media (max-width: 640px) { .card { padding: 1rem; margin: 0.9rem 0; } }
.card > h1, .card > h2, .card > h3 { margin: 4px 0 12px 0; }
/* Reduce big card titles on mobile; keep .section-title unchanged */
/* Admin title responsiveness: apply smaller/wrapping only on very narrow screens (< ~Galaxy S25 base width) */
@media (max-width: 411px) {
  #pendentes > div > h2 { font-size: 1.25rem; line-height: 1.2; word-break: break-word; white-space: normal; }
}

/* Sidebar footer visibility */
.sidebar-footer { margin-top: auto; }
@media (max-width: 1024px) {
  .sidebar-footer { position: sticky; bottom: 0; background: var(--card-bg); padding-top: 8px; border-top: 1px solid var(--line); }
}

/* Prevent body scroll when mobile sidebar is open */
body.no-scroll { overflow: hidden; }
@media (min-width: 412px) {
  #pendentes > div > h2 { white-space: nowrap; flex-shrink: 0; }
}

/* --- Botões --- */
.btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); cursor: pointer; font-weight: 600; transition: all .15s ease; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); filter: brightness(0.95); }
.btn.sm { padding: 6px 10px; font-size: 0.875rem; border-radius: 6px; }
.btn.warn { background: var(--yellow-500); color: #fff; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.secondary { background: var(--secondary); color: var(--text-secondary); }
.btn.secondary:hover { background: var(--secondary-hover); }
.btn-icon { background: none; border: 0; color: var(--muted); padding: 8px; border-radius: 50%; cursor: pointer; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Formulários e Tabelas --- */
input, select, textarea { width: 100%; padding: 10px; background: var(--base-bg); color: var(--text-main); border: 1px solid var(--line); border-radius: 8px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; margin-right: 8px; }
fieldset.card label { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
label { display: block; margin: 10px 0 6px; font-size: 13px; color: var(--muted); }

/* Inline form helper for compact filters */
.section-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form label { margin: 0 6px 0 0; display: inline-block; }
.inline-form label.switch-toggle { display: inline-flex; align-items: center; }
.inline-form input,
.inline-form select,
.inline-form textarea { width: auto; }
.holiday-options label.switch-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
/* Inline help inside holiday options */
.holiday-options { align-items: center; gap: 10px; }
.holiday-options .inline-help { margin-left: 8px; }
@media (max-width: 768px) {
  .holiday-options .inline-help { flex-basis: 100%; margin: 6px 0 0 0; }
}
/* Agrupar Ano/Mês numa única linha com uma barra entre eles */
.inline-form .ym-group { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; column-gap: 6px; white-space: nowrap; }
.inline-form .ym-slash { padding: 0 4px; color: var(--muted); font-weight: 600; }
@media (max-width: 520px) { .inline-form .ym-group { gap: 4px; } }
/* Tamanhos consistentes dos campos de Ano/Mês */
.inline-form .year-field { width: 90px; }
.inline-form .month-field { width: 72px; }
@media (max-width: 520px) {
  .inline-form .year-field { width: 78px !important; }
  .inline-form .month-field { width: 54px !important; }
  .inline-form .label-year, .inline-form .label-month { display: none; }
}
/* Grupo de navegação (ex.: mês anterior/próximo) dentro de formulários inline */
.inline-form .inline-nav { display: flex; gap: 8px; align-items: center; }
@media (max-width: 820px) {
  .inline-form .inline-nav { flex-basis: 100%; margin-top: 6px; }
}
@media (max-width: 520px) {
  .inline-form { gap: 6px; }
  .inline-form input[type="text"],
  .inline-form input[type="number"],
  .inline-form select { max-width: 180px; }
  /* Campos específicos: reduzir ainda mais Ano e Mês */
  .inline-form .year-field { max-width: 78px !important; width: 78px !important; padding: 6px 8px; text-align: center; }
  .inline-form .month-field { max-width: 54px !important; width: 54px !important; padding: 6px 8px; text-align: center; }
  /* Campo Departamento ("Todos") mais compacto */
  .inline-form .dept-field { max-width: 120px !important; }
  /* Abreviar label Departamento em mobile */
  .inline-form .label-dept .label-full { display: none; }
  .inline-form .label-dept .label-short { display: inline; }
}

/* Filtros alinhados à direita nas barras de seção */
.filters-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters-right .inline-form { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .filters-right { width: 100%; justify-content: flex-end; }
}
/* Mobile layout improvements for "Últimos pedidos" filters */
@media (max-width: 640px) {
  #ultimos-pedidos .filters-right { justify-content: flex-start; gap: 10px; }
  #ultimos-pedidos .filters-right .inline-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  #ultimos-pedidos .filters-right .inline-form input[type="text"],
  #ultimos-pedidos .filters-right .inline-form select { width: 100%; max-width: none !important; }
  /* First form (Tipo) spans full width */
  #ultimos-pedidos .filters-right form.inline-form:first-child > * { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  #ultimos-pedidos .filters-right .inline-form { grid-template-columns: 1fr; }
}
/* Empurrar os filtros existentes (sem wrapper) para a direita */
.section-bar > .inline-form { margin-left: auto; }
.section-bar > form.inline-form:first-of-type { margin-left: auto; }
/* Caso haja h2 seguido de forms: empurrar o primeiro form à direita */
.section-bar h2 + form.inline-form,
.section-bar h2 + .inline-form { margin-left: auto; }

/* --- Filtros (Analytics) --- */
.analytics-filters { gap: 10px; }
.analytics-filters label { margin-right: 4px; color: var(--muted); font-weight: 500; }
.analytics-filters select,
.analytics-filters input[type="number"] { min-height: 36px; padding: 6px 10px; border-radius: 10px; }
.analytics-filters .btn { min-height: 36px; padding: 8px 14px; }
@media (max-width: 560px) {
  .analytics-filters { gap: 8px; }
  .analytics-filters .year-field { width: 88px; }
  .analytics-filters .dept-field { max-width: 180px; }
}

/* --- Tabelas --- */
.table-wrap { overflow-x: auto; margin: 1rem 0; }
.table-wrap.padded { padding-bottom: 8px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 10px; }
th { padding: 10px 12px; background: var(--base-bg-darker); text-align: left; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--muted); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--base-bg-darker); }
.requests-table { table-layout: fixed; }
.requests-table th:nth-child(1),
.requests-table td:nth-child(1) { width: 60px; }
.requests-table th:nth-child(2),
.requests-table td:nth-child(2) { width: 120px; }
.requests-table th:nth-child(3),
.requests-table td:nth-child(3) { width: 120px; }
.requests-table th:nth-child(4),
.requests-table td:nth-child(4) { width: 80px; text-align: right; }
.requests-table th:nth-child(5),
.requests-table td:nth-child(5) { width: 160px; }
.requests-table th:nth-child(6),
.requests-table td:nth-child(6) { width: 200px; }
.requests-table th:nth-child(7),
.requests-table td:nth-child(7) { width: 120px; }
.actions-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions-inline form { margin: 0; display: flex; align-items: center; }
.actions-inline .btn, .actions-inline a.btn { margin: 0; }

/* Compactor para tabelas com muitas linhas (ex.: pedidos do colaborador) */
table.table-compact th { padding: 8px 10px; }
table.table-compact td { padding: 8px 10px; }
table.table-compact td.number { text-align: left; }
table.table-compact th.number { text-align: left; }
table.table-compact td.center { text-align: center; }
table.table-compact td.nowrap, table.table-compact th.nowrap { white-space: nowrap; }

/* Tabela responsiva: colapsa em cartões no mobile */
@media (max-width: 768px) {
  table.responsive thead { display: none; }
  table.responsive tbody tr { display: block; padding: 8px 6px; border-bottom: 1px solid var(--line); }
  table.responsive tbody tr:hover { background: transparent; }
  table.responsive td { display: grid; grid-template-columns: 120px 1fr; gap: 6px; padding: 10px 8px; border: 0; }
  /* Allow wrapping in cells marked as nowrap when in card mode to avoid horizontal scroll */
  table.responsive td.nowrap { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
  table.responsive td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    align-self: center;
  }
  /* Garantir que dicas/ajuda ficam por baixo do campo (coluna 2) */
  table.responsive td small { grid-column: 2; margin-top: 4px; font-size: 12px; color: var(--muted); }
  /* Ações: esconder label, ocupar largura total e adicionar espaçamento vertical confortável */
  table.responsive td.actions { grid-template-columns: 1fr; padding-top: 14px; }
  table.responsive td.actions::before { display: none; }
  table.responsive td .btn { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
  table.responsive td.actions .btn { display: block; width: 100%; text-align: center; margin: 8px 0; }
  table.responsive td.actions form { display: block; width: 100%; }
  table.responsive td.actions .actions-inline { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  table.responsive td.actions .actions-inline form { width: 100%; }
  table.responsive td.actions .actions-inline .btn,
  table.responsive td.actions .actions-inline a.btn { width: 100%; }
  table.responsive td.actions input[type="number"] { width: 100%; min-height: 36px; }
  /* Evitar quebra na coluna Horas */
  table.responsive td.col-hours { grid-template-columns: 120px minmax(110px, 1fr); }
  table.responsive td.leave-color-cell { display: block; grid-template-columns: none; min-width: 0; padding-bottom: 4px; }
  table.responsive td.leave-color-cell::before { display: block; margin-bottom: 6px; }
  table.responsive td.leave-color-cell .leave-color-form-card,
  table.responsive td.leave-color-cell .leave-color-card { width: 100%; }
  /* Evitar que conteúdos normais (ex.: badge do estado) estiquem a 100% */
  table.responsive td:not(.actions) > * { justify-self: start; width: auto; min-width: 0; }
  .email-wrap { overflow-wrap: anywhere; }
  /* Alinhar valores numéricos à esquerda em cartões (mobile) */
  table.responsive td.center,
  table.responsive td.number { text-align: left; }
}

/* Utilitários de visibilidade */
.show-mobile { display: none; }
@media (max-width: 768px) { .show-mobile { display: block; } }

/* --- Alertas --- */
.alert { padding: 12px 14px; border-radius: 8px; margin: 12px 0; background: var(--card-bg); border: 1px solid var(--line); }
.alert.info { border-color: var(--blue-500); background: rgba(59, 130, 246, 0.1); }
.alert.success { border-color: var(--green-500); background: rgba(34, 197, 94, 0.1); }
.alert.warning { border-color: var(--yellow-500); background: rgba(245, 158, 11, 0.1); }
.alert.error { border-color: var(--red-500); background: rgba(239, 68, 68, 0.1); }

/* --- Badges --- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.leave-color-picker { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.leave-color-picker > * { flex: 1 1 260px; min-width: 0; }
.leave-color-card { min-width: 0; width: 100%; border: 1px solid rgba(255,255,255,0.22); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; height: 100%; display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; --leave-select-bg: rgba(255, 255, 255, 0.08); --leave-select-border: rgba(255,255,255,0.35); --leave-select-color: var(--text-main); max-width: 100%; }
.leave-color-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 6px 12px 0; }
.leave-color-heading { display: flex; flex-direction: column; gap: 2px; }
.leave-color-card-header .state-title { margin-bottom: 0; font-size: 0.95rem; letter-spacing: 0.02em; }
.leave-color-current { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; opacity: 0.9; color: var(--badge-text-on-tint); }
.leave-color-select-row { display: flex; flex-direction: column; gap: 0; padding: 0 12px 8px; }
.leave-color-select-row select { width: 100%; border-radius: 10px; padding: 10px 38px 10px 12px; font-weight: 600; letter-spacing: 0; text-transform: none; background-color: var(--leave-select-bg); border: 1px solid var(--leave-select-border); color: var(--leave-select-color); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); min-width: 0; font-size: 0.9rem; appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>'); background-repeat: no-repeat; background-position: right 12px center; }
.leave-color-select-row select:focus { outline: 2px solid rgba(255,255,255,0.75); box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
.leave-color-help { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; color: var(--badge-text-on-tint); }
.leave-color-cell { vertical-align: top; min-width: 0; }
.leave-color-form-card { flex: 1 1 260px; width: 100%; max-width: 100%; }
.leave-color-card-header .btn { margin-left: auto; }
.leave-color-card.editable .leave-color-current { display: none; }
@media (max-width: 640px) { .leave-color-card { width: 100%; max-width: 100%; } }
.switch-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 600; min-height: 32px; }
.switch-toggle.block { display: flex; align-items: center; }
.switch-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 42px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background 0.2s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); display: inline-flex; flex-shrink: 0; }
.switch-track::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform 0.2s ease, background 0.2s ease; }
.switch-toggle input:checked + .switch-track { background: var(--green-500); }
.switch-toggle input:checked + .switch-track::after { transform: translateX(20px); background: #fff; }
.switch-toggle .switch-text { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text-main); }
.switch-caption { display: inline-flex; gap: 6px; letter-spacing: 0.08em; font-size: 0.8rem; text-transform: uppercase; }
.switch-caption .on { display: none; color: var(--green-500); }
.switch-caption .off { color: var(--muted); }
.switch-toggle input:checked ~ .switch-caption .on { display: inline; }
.switch-toggle input:checked ~ .switch-caption .off { display: none; }
.switch-indicator { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); }
.switch-indicator.on { background: var(--green-500-t); border-color: var(--green-500); color: var(--badge-text-on-tint); }
.switch-indicator.off { background: var(--gray-500-t); border-color: var(--gray-500); color: var(--badge-text-on-tint); }
.badge.approved,
.badge.gozado,
.leave-color-card.approved,
.leave-color-card.gozado { background: var(--green-500-t); border-color: var(--green-500); color: var(--badge-text-on-tint); }
.badge.pending,
.leave-color-card.pending { background: var(--yellow-500-t); border-color: var(--yellow-500); color: var(--badge-text-on-tint); }
.badge.rejected,
.leave-color-card.rejected { background: var(--red-500-t); border-color: var(--red-500); color: var(--badge-text-on-tint); }
.badge.cancelled,
.leave-color-card.cancelled { background: var(--gray-500-t); border-color: var(--gray-500); color: var(--badge-text-on-tint); }
.badge.info,
.leave-color-card.info { background: var(--blue-500-t); border-color: var(--blue-500); color: var(--badge-text-on-tint); }
.badge.purple,
.leave-color-card.purple { background: var(--purple-500-t); border-color: var(--purple-500); color: var(--badge-text-on-tint); }
.badge.pink,
.leave-color-card.pink { background: var(--pink-500-t); border-color: var(--pink-500); color: var(--badge-text-on-tint); }
.badge.teal,
.leave-color-card.teal { background: var(--teal-500-t); border-color: var(--teal-500); color: var(--badge-text-on-tint); }
.badge.indigo,
.leave-color-card.indigo { background: var(--indigo-500-t); border-color: var(--indigo-500); color: var(--badge-text-on-tint); }
.badge.orange,
.leave-color-card.orange { background: var(--orange-500-t); border-color: var(--orange-500); color: var(--badge-text-on-tint); }
.badge.lime,
.leave-color-card.lime { background: var(--lime-500-t); border-color: var(--lime-500); color: var(--badge-text-on-tint); }
.badge.cyan,
.leave-color-card.cyan { background: var(--cyan-500-t); border-color: var(--cyan-500); color: var(--badge-text-on-tint); }
.badge.gray,
.leave-color-card.gray { background: var(--gray-500-t); border-color: var(--gray-500); color: var(--badge-text-on-tint); }
/* Novas cores + adicionais */
.badge.maroon,
.leave-color-card.maroon { background: var(--maroon-500-t); border-color: var(--maroon-500); color: var(--badge-text-on-tint); }
.badge.navy,
.leave-color-card.navy { background: var(--navy-500-t); border-color: var(--navy-500); color: var(--badge-text-on-tint); }
.badge.brown,
.leave-color-card.brown { background: var(--brown-500-t); border-color: var(--brown-500); color: var(--badge-text-on-tint); }
.badge.aqua,
.leave-color-card.aqua { background: var(--aqua-500-t); border-color: var(--aqua-500); color: var(--badge-text-on-tint); }
.badge.violet,
.leave-color-card.violet { background: var(--violet-500-t); border-color: var(--violet-500); color: var(--badge-text-on-tint); }
.badge.mint,
.leave-color-card.mint { background: var(--mint-500-t); border-color: var(--mint-500); color: var(--badge-text-on-tint); }
.badge.lavender,
.leave-color-card.lavender { background: var(--lavender-500-t); border-color: var(--lavender-500); color: var(--badge-text-on-tint); }
.badge.olive,
.leave-color-card.olive { background: var(--olive-500-t); border-color: var(--olive-500); color: var(--badge-text-on-tint); }
.badge.steel,
.leave-color-card.steel { background: var(--steel-500-t); border-color: var(--steel-500); color: var(--badge-text-on-tint); }

/* Ajustar o seletor para combinar com o tom escolhido */
.leave-color-card.approved,
.leave-color-card.gozado { --leave-select-bg: var(--green-500-t); --leave-select-border: var(--green-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.pending { --leave-select-bg: var(--yellow-500-t); --leave-select-border: var(--yellow-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.rejected { --leave-select-bg: var(--red-500-t); --leave-select-border: var(--red-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.cancelled { --leave-select-bg: var(--gray-500-t); --leave-select-border: var(--gray-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.info { --leave-select-bg: var(--blue-500-t); --leave-select-border: var(--blue-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.purple { --leave-select-bg: var(--purple-500-t); --leave-select-border: var(--purple-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.pink { --leave-select-bg: var(--pink-500-t); --leave-select-border: var(--pink-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.teal { --leave-select-bg: var(--teal-500-t); --leave-select-border: var(--teal-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.indigo { --leave-select-bg: var(--indigo-500-t); --leave-select-border: var(--indigo-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.orange { --leave-select-bg: var(--orange-500-t); --leave-select-border: var(--orange-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.lime { --leave-select-bg: var(--lime-500-t); --leave-select-border: var(--lime-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.cyan { --leave-select-bg: var(--cyan-500-t); --leave-select-border: var(--cyan-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.gray { --leave-select-bg: var(--gray-500-t); --leave-select-border: var(--gray-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.maroon { --leave-select-bg: var(--maroon-500-t); --leave-select-border: var(--maroon-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.navy { --leave-select-bg: var(--navy-500-t); --leave-select-border: var(--navy-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.brown { --leave-select-bg: var(--brown-500-t); --leave-select-border: var(--brown-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.aqua { --leave-select-bg: var(--aqua-500-t); --leave-select-border: var(--aqua-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.violet { --leave-select-bg: var(--violet-500-t); --leave-select-border: var(--violet-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.mint { --leave-select-bg: var(--mint-500-t); --leave-select-border: var(--mint-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.lavender { --leave-select-bg: var(--lavender-500-t); --leave-select-border: var(--lavender-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.olive { --leave-select-bg: var(--olive-500-t); --leave-select-border: var(--olive-500); --leave-select-color: var(--badge-text-on-tint); }
.leave-color-card.steel { --leave-select-bg: var(--steel-500-t); --leave-select-border: var(--steel-500); --leave-select-color: var(--badge-text-on-tint); }

/* --- Utilitários --- */
.muted { color: var(--muted); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-blue{color:var(--blue-500)}
.text-red{color:var(--red-500)}
.text-green{color:var(--green-500)}
.text-yellow{color:var(--yellow-600)}
.fs-09{font-size:.9rem}
.fs-085{font-size:.85rem}
.mt-24{margin-top:24px}
.list-none{list-style:none;padding-left:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-auto-220{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.grid-4-220{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:10px}
.leads-filter-grid{display:grid;grid-template-columns:minmax(300px,1.4fr) repeat(4,minmax(220px,1fr)) auto auto;gap:10px;align-items:end}
@media (max-width: 1280px){.leads-filter-grid{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media (max-width: 860px){.leads-filter-grid{grid-template-columns:1fr}}
.lead-stage-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;line-height:1;border:1px solid rgba(15,125,220,.4);color:#fff;background:rgba(15,125,220,.2)}
.lead-stage-pill .dot{width:8px;height:8px;border-radius:999px;background:currentColor}
.lead-contact{display:flex;flex-direction:column;gap:4px}
.lead-contact a{color:var(--text-main)}
.lead-owner{display:flex;flex-direction:column;gap:2px}
.lead-value{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.lead-value-amount{font-weight:600}
.lead-date-badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--base-bg-darker);font-size:13px}
.lead-actions{gap:12px}
#lost-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.35);opacity:0;pointer-events:none;transition:opacity .22s;z-index:9999}
#lost-dialog-backdrop.open{opacity:1;pointer-events:auto}
#lost-dialog{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,92vw);background:var(--card-bg);color:var(--text-main);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:10002}
#lost-dialog.open{display:block}
#lost-dialog .dlg-header{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
#lost-dialog .dlg-body{padding:12px;display:grid;gap:10px}
.lead-loss-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;opacity:1;transition:opacity .2s}
.lead-loss-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:1001}
.lead-loss-card{background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:min(420px,90vw);box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.lead-loss-backdrop.hidden,.lead-loss-modal.hidden{display:none}
.min-w-200{min-width:200px}
.w-180{width:180px}
.inline-block{display:inline-block}
.p-10{padding:10px}
.p-12{padding:12px}
.pt-6{padding-top:1.5rem}
.border-t{border-top:1px solid var(--line)}
.justify-between{justify-content:space-between}
.span-2{grid-column:span 2}
@media (max-width: 640px){
  .grid-4-220{grid-template-columns:1fr;gap:12px}
  .span-2{grid-column:1/-1}
  .responsive-grid .col-span-all .btn{display:block;width:100%;margin:6px 0}
}
.rounded-8{border-radius:8px}
.border{border:1px solid var(--line)}
.pre-wrap{white-space:pre-wrap}
.lh-15{line-height:1.5}
.w-200{width:200px}
.min-w-80{min-width:80px}
.ml-2{margin-left:.5rem}
.section-title { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .2px; margin: 0 0 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pagination { margin-top: 1rem; text-align: right; }

/* ==========================================================================
   4. Componentes Específicos
   ========================================================================== */

/* --- Cabeçalho do Conteúdo e Perfil --- */
.content-header { display: flex; justify-content: flex-end; align-items: center; padding: 0.5rem 0; margin-bottom: 1rem; }
.user-profile { display: flex; align-items: center; gap: 0.75rem; }
.user-profile .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* --- Botão de Tema --- */
.theme-toggle-btn { background: none; border: 1px solid var(--line); color: var(--text-secondary); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s; }
.theme-toggle-btn:hover { background-color: var(--base-bg-darker); }
.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }
.light-mode .theme-toggle-btn .icon-sun { display: block; }
.light-mode .theme-toggle-btn .icon-moon { display: none; }

/* --- Estatísticas (Dashboard) --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat { background: linear-gradient(180deg, var(--base-bg-darker), var(--base-bg)); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02); }
.stat .label { color: var(--muted); font-size: 12px; letter-spacing: .2px; text-transform: uppercase; }
.stat .value { font-size: 30px; font-weight: 900; }

/* --- Mini-cards (Dashboard Admin) --- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mini-card { background: var(--base-bg-darker); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.mini-card.limit { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.mini-card .mini-title { font-weight: 800; margin-bottom: 8px; }
.mini-card .mini-sub { color: var(--muted); font-size: 12px; margin-top: 4px; display: flex; flex-wrap: nowrap; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card .mini-sub .label-full { display: none; }
.mini-card .mini-sub .label-short { display: inline; }
.nowrap { white-space: nowrap; }
.no-shrink { flex-shrink: 0; }
.label-full { display: inline; }
.label-short { display: none; }
.progress.split { display: flex; gap: 0; align-items: stretch; padding: 1px; height: 8px; background: var(--base-bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress.split .seg { height: 100%; }
.progress.split .seg:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.progress.split .seg:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.progress.split .used { background: linear-gradient(90deg, var(--green-500), #16a34a); }
.progress.split .future { background: linear-gradient(90deg, var(--yellow-500), #d97706); }
.progress.split .avail { background: var(--base-bg-darker); }

/* --- Pills e Legendas --- */
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1; border: 1px solid var(--line); background: var(--base-bg); color: var(--muted); vertical-align: middle; }
.pill.carry { border-color: var(--line); background: var(--base-bg-darker); color: var(--text-secondary); }
.pill.limit { border-color: var(--danger); background: var(--red-500-t); color: var(--danger); }

.state-card {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--base-bg-darker);
}
.state-title {
  font-size: 0.85rem;
  font-weight: 600;
}
.state-desc {
  font-size: 0.8rem;
  color: var(--muted);
}
.state-finalized { border-color: var(--green-500); background: var(--green-500-t); color: var(--badge-text-on-tint); }
.state-finalized .state-desc { color: var(--badge-text-on-tint); }
.state-elapsed { border-color: var(--yellow-500); background: var(--yellow-500-t); }
.state-upcoming { border-color: var(--indigo-500); background: rgba(99, 102, 241, 0.18); }
.state-active { border-color: var(--blue-500); background: var(--blue-500-t); }
.state-approved {
  border-color: var(--green-500);
  background: var(--green-500-t);
  color: var(--badge-text-on-tint);
}
.state-approved .state-desc { color: var(--badge-text-on-tint); }
.state-complete {
  border-color: var(--green-500);
  background: var(--green-500-t);
  color: var(--badge-text-on-tint);
}
.state-complete .state-desc { color: var(--badge-text-on-tint); }
.state-neutral {
  border-color: var(--gray-500);
  background: var(--gray-500-t);
  color: var(--badge-text-on-tint);
}
.state-neutral .state-desc { color: var(--badge-text-on-tint); }
.state-danger {
  border-color: var(--red-500);
  background: var(--red-500-t);
  color: var(--badge-text-on-tint);
}
.state-danger .state-desc { color: var(--badge-text-on-tint); }
.state-muted {
  border-color: var(--line);
  background: var(--base-bg-darker);
  color: var(--muted);
}
.state-muted .state-desc { color: var(--muted); }
.state-pending {
  border-color: var(--yellow-500);
  background: var(--yellow-500-t);
}
.state-pending .state-desc { color: var(--text-secondary); }
.legend-inline { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
.legend-inline > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-inline .legend-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend-inline .legend-label { font-weight: 600; color: var(--text-secondary); }
.legend-inline .divider { display: inline-block; width: 1px; height: 14px; background: var(--line); margin: 0 4px; }
.legend-inline .chip { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--line); vertical-align: middle; flex-shrink: 0; }
.legend-inline .chip.used { background: linear-gradient(90deg, var(--green-500), #16a34a); }
.legend-inline .chip.future { background: linear-gradient(90deg, var(--yellow-500), #d97706); }
.legend-inline .chip.avail { background: var(--base-bg-darker); }

.legend-inline .chip.approved { background: var(--green-500-t); border-color: var(--green-500); }
.legend-inline .chip.weekend { background: var(--blue-500-t); border-color: var(--blue-500); }
.legend-inline .chip.holiday { background: var(--red-500-t); border-color: var(--red-500); }
.legend-inline .chip.pending { background: var(--yellow-500-t); border-color: var(--yellow-500); }
.legend-inline .chip.rejected { background: var(--red-500-t); border-color: var(--red-500); }
.legend-inline .chip.info { background: var(--blue-500-t); border-color: var(--blue-500); }
.legend-inline .chip.purple { background: var(--purple-500-t); border-color: var(--purple-500); }
.legend-inline .chip.pink { background: var(--pink-500-t); border-color: var(--pink-500); }
.legend-inline .chip.teal { background: var(--teal-500-t); border-color: var(--teal-500); }
.legend-inline .chip.indigo { background: var(--indigo-500-t); border-color: var(--indigo-500); }
.legend-inline .chip.orange { background: var(--orange-500-t); border-color: var(--orange-500); }
.legend-inline .chip.lime { background: var(--lime-500-t); border-color: var(--lime-500); }
.legend-inline .chip.cyan { background: var(--cyan-500-t); border-color: var(--cyan-500); }
.legend-inline .chip.gray { background: var(--gray-500-t); border-color: var(--gray-500); }
.legend-inline .chip.maroon { background: var(--maroon-500-t); border-color: var(--maroon-500); }
.legend-inline .chip.navy { background: var(--navy-500-t); border-color: var(--navy-500); }
.legend-inline .chip.brown { background: var(--brown-500-t); border-color: var(--brown-500); }
.legend-inline .chip.aqua { background: var(--aqua-500-t); border-color: var(--aqua-500); }
.legend-inline .chip.violet { background: var(--violet-500-t); border-color: var(--violet-500); }
.legend-inline .chip.mint { background: var(--mint-500-t); border-color: var(--mint-500); }
.legend-inline .chip.lavender { background: var(--lavender-500-t); border-color: var(--lavender-500); }
.legend-inline .chip.olive { background: var(--olive-500-t); border-color: var(--olive-500); }
.legend-inline .chip.steel { background: var(--steel-500-t); border-color: var(--steel-500); }

/* --- Legenda do Mapa de Férias --- */
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.legend .dot.approved { background-color: var(--green-500-t); }
.legend .dot.pending { background-color: var(--yellow-500-t); }
.legend .dot.weekend { background-color: var(--blue-900-t); }
.legend .dot.holiday { background-color: var(--red-500-t); }
.legend .dot.info { background-color: var(--blue-500-t); }
.legend .dot.rejected { background-color: var(--red-500-t); }
.legend .dot.purple { background-color: var(--purple-500-t); }
.legend .dot.pink { background-color: var(--pink-500-t); }
.legend .dot.teal { background-color: var(--teal-500-t); }
.legend .dot.indigo { background-color: var(--indigo-500-t); }
.legend .dot.orange { background-color: var(--orange-500-t); }
.legend .dot.lime { background-color: var(--lime-500-t); }
.legend .dot.cyan { background-color: var(--cyan-500-t); }
.legend .dot.gray { background-color: var(--gray-500-t); }
.legend .dot.maroon { background-color: var(--maroon-500-t); }
.legend .dot.navy { background-color: var(--navy-500-t); }
.legend .dot.brown { background-color: var(--brown-500-t); }
.legend .dot.aqua { background-color: var(--aqua-500-t); }
.legend .dot.violet { background-color: var(--violet-500-t); }
.legend .dot.mint { background-color: var(--mint-500-t); }
.legend .dot.lavender { background-color: var(--lavender-500-t); }
.legend .dot.olive { background-color: var(--olive-500-t); }
.legend .dot.steel { background-color: var(--steel-500-t); }
/* --- Calendário (Mapa de Férias) --- */
.calendar { border-collapse: separate; border-spacing: 0; min-width: 720px; }
.calendar th, .calendar td { border: 1px solid var(--line); padding: 4px; text-align: center; }
.calendar .sticky-col { position: sticky; left: 0; background: var(--base-bg-darker); z-index: 1; text-align: left; min-width: 180px; }
.calendar .day { min-width: 22px; height: 22px; position: relative; }
.calendar .day.approved { background: var(--green-500-t); }
.calendar .day.info { background: var(--blue-500-t); }
.calendar .day.rejected { background: var(--red-500-t); }
.calendar .day.pending { background: var(--yellow-500-t); }
.calendar .day.purple { background: var(--purple-500-t); }
.calendar .day.pink { background: var(--pink-500-t); }
.calendar .day.teal { background: var(--teal-500-t); }
.calendar .day.indigo { background: var(--indigo-500-t); }
.calendar .day.orange { background: var(--orange-500-t); }
.calendar .day.lime { background: var(--lime-500-t); }
.calendar .day.cyan { background: var(--cyan-500-t); }
.calendar .day.gray { background: var(--gray-500-t); }
.calendar .day.maroon { background: var(--maroon-500-t); }
.calendar .day.navy { background: var(--navy-500-t); }
.calendar .day.brown { background: var(--brown-500-t); }
.calendar .day.weekend { background: var(--blue-500-t); }
.calendar .day.holiday { background: var(--red-500-t); }
.calendar .day .fill-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.calendar .dayhead.today, .calendar .day.today, .calendar .dayfoot.today { outline: 2px solid var(--green-500); }
.day.half-day-am { background-image: linear-gradient(to bottom right, var(--cell-bg-color, transparent) 0%, var(--cell-bg-color, transparent) 49%, transparent 51%, transparent 100%); }
.day.half-day-pm { background-image: linear-gradient(to top left, var(--cell-bg-color, transparent) 0%, var(--cell-bg-color, transparent) 49%, transparent 51%, transparent 100%); }
.day.approved.half-day-am, .day.approved.half-day-pm { --cell-bg-color: var(--green-500-t); }
.day.pending.half-day-am, .day.pending.half-day-pm { --cell-bg-color: var(--yellow-500-t); }
.day.info.half-day-am, .day.info.half-day-pm { --cell-bg-color: var(--blue-500-t); }
.day.rejected.half-day-am, .day.rejected.half-day-pm { --cell-bg-color: var(--red-500-t); }
.day.purple.half-day-am, .day.purple.half-day-pm { --cell-bg-color: var(--purple-500-t); }
.day.pink.half-day-am, .day.pink.half-day-pm { --cell-bg-color: var(--pink-500-t); }
.day.teal.half-day-am, .day.teal.half-day-pm { --cell-bg-color: var(--teal-500-t); }
.day.indigo.half-day-am, .day.indigo.half-day-pm { --cell-bg-color: var(--indigo-500-t); }
.day.orange.half-day-am, .day.orange.half-day-pm { --cell-bg-color: var(--orange-500-t); }
.day.lime.half-day-am, .day.lime.half-day-pm { --cell-bg-color: var(--lime-500-t); }
.day.cyan.half-day-am, .day.cyan.half-day-pm { --cell-bg-color: var(--cyan-500-t); }
.day.gray.half-day-am, .day.gray.half-day-pm { --cell-bg-color: var(--gray-500-t); }
.day.maroon.half-day-am, .day.maroon.half-day-pm { --cell-bg-color: var(--maroon-500-t); }
.day.navy.half-day-am, .day.navy.half-day-pm { --cell-bg-color: var(--navy-500-t); }
.day.brown.half-day-am, .day.brown.half-day-pm { --cell-bg-color: var(--brown-500-t); }

/* --- Widget de Perfil (Sidebar) --- */
.user-profile-widget { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 16px; border-radius: 8px; background-color: var(--base-bg-darker); width: 100%; max-width: 100%; overflow: visible; }
.user-info .name { font-weight: 600; color: var(--text-main); text-decoration: none; display: block; line-height: 1.2; }
.user-info .role { font-size: 0.8rem; color: var(--muted); }
.avatar-widget { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.avatar-notification-link { position: relative; display: inline-block; }
.avatar-notification-link .notification-badge { position: absolute; top: -4px; right: -4px; }

/* --- Grelha Responsiva para Formulários --- */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) {
  .responsive-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Web-to-Lead grid: enforce two equal columns on laptop/desktop, collapse to one on narrow */
@media (min-width: 900px) {
  .w2l-grid { grid-template-columns: repeat(2, minmax(320px, 1fr)); }
}
@media (max-width: 899px) {
  .w2l-grid { grid-template-columns: 1fr; }
}
/* Lead tasks: add form grids */
.tasklist-add-grid, .task-add-grid { grid-template-columns: 1fr; gap: 8px; align-items: end; }
@media (min-width: 640px) {
  .tasklist-add-grid { grid-template-columns: 1fr 1fr; }
  .task-add-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .tasklist-add-grid { grid-template-columns: 1fr 220px 220px 180px; }
}
@media (min-width: 900px) {
  .task-add-grid { grid-template-columns: 1fr 180px 240px; }
}
/* Refinos para grelha SMTP (email settings) */
.smtp-grid { align-items: end; }
.smtp-grid > div { display: flex; flex-direction: column; }
.smtp-grid > div:nth-child(4) label:last-child { margin-top: 4px !important; color: var(--muted); }
.smtp-grid > div:nth-child(6) { align-self: start; padding-top: 24px; }
.form-actions { margin-top: 8px; }

/* --- Layout da Página de Configurações --- */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }
.settings-nav { border-right: 1px solid var(--line); padding-right: 1.5rem; display: flex; flex-direction: column; gap: 8px; }
.settings-nav .section-title { margin-top: 1.25rem; margin-bottom: 0.25rem; }
.settings-nav .section-title:first-child { margin-top: 0; }
.settings-nav-link { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--text-secondary); font-weight: 500; border: 1px solid var(--line); background: var(--base-bg-darker); transition: background .15s, color .15s, border-color .15s; }
.settings-nav-link:hover { background-color: var(--base-bg); color: var(--text-main); border-color: var(--secondary); }
.settings-nav-link.active { background-color: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, .25); }
/* Condensar ícones na barra do utilizador (evitar overflow/scroll) */
.user-profile-widget .icon-row { gap: clamp(4px, 0.5vw, 8px); }
.user-profile-widget .icon-row .nav-link { padding: 4px; border-radius: 8px; }
.user-profile-widget .icon-row .nav-link svg { width: 16px; height: 16px; }
/* Remover padding à esquerda no botão Sair */
.user-profile-widget .icon-row .logout-form .nav-link { padding-left: 0 !important; }
@media (max-width: 420px) {
  .user-profile-widget { gap: 4px; padding: 4px; }
  .user-profile-widget .icon-row { gap: 4px; }
  .user-profile-widget .icon-row .nav-link { padding: 3px; }
  .user-profile-widget .icon-row .nav-link svg { width: 14px; height: 14px; }
  .user-profile-widget .icon-row .logout-form .nav-link { padding-left: 0 !important; }
}
/* Próximas ausências: usar o mesmo layout mobile de tabelas responsivas (igual a "Últimos pedidos") */

/* Extra-narrow phones: shrink label column to reduce overflow risk */
@media (max-width: 420px) {
  table.responsive td:first-child { padding-top: 14px; }
}
/* Evitar overflow horizontal na coluna de conteúdo */
.settings-layout .settings-content { min-width: 0; overflow-x: hidden; }
/* Itens de grelha não forçam largura mínima que provoque overflow */
.settings-content .responsive-grid > div, .settings-content .form-group { min-width: 0; }
/* Controlar grelha em ecrãs muito estreitos (ex.: simuladores mobile) */
@media (max-width: 520px) {
  .settings-content .responsive-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-right: 0; padding-bottom: 1rem; padding-top: .25rem;
    }
    .settings-nav .section-title { display: none; }
}
/* Cores por Estágio (CRM) */
#stage-colors-form { display:flex; flex-wrap: wrap; gap: 12px; }
#stage-colors-form > div { min-width: 180px; flex: 1 1 220px; }
@media (max-width: 640px) {
  #stage-colors-form { gap: 10px; }
  #stage-colors-form > div { min-width: 150px; flex: 1 1 160px; }
}

/* --- Páginas de Ação Focadas --- */
.content-focus { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(100vh - 100px); }
.content-focus .card { width: 100%; max-width: 560px; padding: 2rem 2.5rem; }
.content-focus h2 { text-align: center; font-size: 1.75rem; font-weight: 600; color: var(--text-main); margin-top: 0; margin-bottom: 2rem; }

/* --- Notificações --- */
.notification-bell { position: relative; color: var(--muted); padding: 8px; border-radius: 50%; }
.notification-bell:hover { color: var(--text-main); background-color: var(--base-bg-darker); }
.notification-badge { position: absolute; top: 4px; right: 4px; background-color: var(--danger); color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.notification-item a { display: block; padding: 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text-main); }
.notification-item a:hover { background-color: var(--base-bg-darker); }
.notification-item p { margin: 0; }
.notification-item small { color: var(--muted); }

/* --- Tabela Resumo (Dashboard Colaborador) --- */
.summary-table { width: auto; margin: 0 auto; }
.summary-table td { border: 0; padding: 4px 12px; }
.summary-table td.number { text-align: left; font-weight: 600; }
.summary-table tr.total td { border-top: 1px solid var(--line); font-weight: bold; }

/* Utilidades de visibilidade */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* --- Tabs + pesquisa (dashboard/meus pedidos) --- */
.tabs-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tabs-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll .btn.secondary { background: var(--base-bg-darker); border: 1px solid var(--line); }
.tabs-scroll .btn.secondary:hover { background: var(--base-bg); }
.search-inline { display: flex; align-items: center; }
.search-inline input[type="text"] { max-width: 260px; }
@media (max-width: 640px) {
  .tabs-bar { gap: 8px; }
  .search-inline { flex-basis: 100%; order: 2; width: 100%; }
  .search-inline input[type="text"] { width: 100%; max-width: none; }
  .tabs-scroll { order: 1; width: 100%; }
  .tabs-scroll .btn.secondary { padding: 8px 10px; font-size: 13px; border-radius: 10px; }
}

/* --- Ajustes responsivos: header de Tarefas (CRM) --- */
.section-bar .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.section-bar .header-actions .inline-form { margin-left: 0; display: flex; gap: 8px; align-items: center; }
@media (max-width: 768px) {
  .section-bar .header-actions { width: 100%; justify-content: space-between; }
  .section-bar .header-actions .inline-form { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 520px) {
  .section-bar .header-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .section-bar .header-actions .inline-form { justify-content: flex-start; }
  .section-bar .header-actions select { min-width: 160px; }
}

/* Alinhamento específico: tabela de departamentos (configurações) */
#tab-departments table td { vertical-align: top; }
#tab-departments table td small { display: block; margin-top: 6px; color: var(--muted); }
#tab-departments table td.actions { white-space: nowrap; }
#tab-departments table td.actions .btn { margin-right: 8px; }
/* Mostrar apenas em mobile */
.show-mobile { display: none !important; }
@media (max-width: 768px) {
  .show-mobile { display: inline-block !important; }
}



@media (max-width: 768px) { table.responsive td.actions form .btn { display:inline-flex; width:100%; margin:0; min-height:36px; justify-content:center; } }

@media (min-width: 769px) { table.responsive td.actions form { display:inline-flex; gap:8px; align-items:center; margin:0 8px 0 0; } table.responsive td.actions form:last-child { margin-right:0; } }

/* Corrigir visual do input de cor no tema escuro (mostrar bem a amostra) */
input[type="color"] {
  -webkit-appearance: none; /* Chrome/Safari */
  appearance: none;
  width: 100%;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent; /* deixa a amostra preencher o controlo */
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 8px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 8px; }


/* Utility classes to replace common inline styles */
.flex{display:flex}
.inline{display:inline}
.flex-wrap{flex-wrap:wrap}
.justify-between{justify-content:space-between}
.items-center{align-items:center}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.m-0{margin:0}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.ml-auto{margin-left:auto}
.pb-2{padding-bottom:.5rem}
.border-b{border-bottom:1px solid #374151}
.max-w-100{max-width:100px}
.max-w-80{max-width:80px}
.max-w-90{max-width:90px}
.max-w-72{max-width:72px}
.max-w-120{max-width:120px}
.min-w-140{min-width:140px}
.min-w-160{min-width:160px}
.max-w-300{max-width:300px}
.max-w-320{max-width:320px}
.max-w-350{max-width:350px}
.max-w-360{max-width:360px}
.max-w-380{max-width:380px}
.h-300{height:300px}
.h-320{height:320px}
.h-350{height:350px}
.h-400{height:400px}
.text-center{text-align:center}
.w-60{width:60px}
.h-60{height:60px}
.w-150{width:150px}
.grow{flex-grow:1}
.hidden{display:none}
.grid{display:grid}
.block{display:block}
.overflow-auto{overflow:auto}
.shrink-0{flex-shrink:0}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowrap{white-space:nowrap}
.ml-6{margin-left:6px}
.mt-10{margin-top:10px}
.min-w-0{min-width:0}
.min-w-180{min-width:180px}
.max-w-240{max-width:240px}
.gap-6{gap:6px}
.flex-nowrap{flex-wrap:nowrap}
@media (max-width: 860px){.inline-form.flex-nowrap{flex-wrap:wrap}}
.overflow-x-auto{overflow-x:auto}
.badge-xs{padding:2px 6px;font-size:11px}
.fs-12{font-size:12px}
.px-10{padding-left:10px;padding-right:10px}
.py-4{padding-top:4px;padding-bottom:4px}

/* Percentage width utilities (0%..100%) */
.w-pct-0{width:0%}
.w-pct-1{width:1%}
.w-pct-2{width:2%}
.w-pct-3{width:3%}
.w-pct-4{width:4%}
.w-pct-5{width:5%}
.w-pct-6{width:6%}
.w-pct-7{width:7%}
.w-pct-8{width:8%}
.w-pct-9{width:9%}
.w-pct-10{width:10%}
.w-pct-11{width:11%}
.w-pct-12{width:12%}
.w-pct-13{width:13%}
.w-pct-14{width:14%}
.w-pct-15{width:15%}
.w-pct-16{width:16%}
.w-pct-17{width:17%}
.w-pct-18{width:18%}
.w-pct-19{width:19%}
.w-pct-20{width:20%}
.w-pct-21{width:21%}
.w-pct-22{width:22%}
.w-pct-23{width:23%}
.w-pct-24{width:24%}
.w-pct-25{width:25%}
.w-pct-26{width:26%}
.w-pct-27{width:27%}
.w-pct-28{width:28%}
.w-pct-29{width:29%}
.w-pct-30{width:30%}
.w-pct-31{width:31%}
.w-pct-32{width:32%}
.w-pct-33{width:33%}
.w-pct-34{width:34%}
.w-pct-35{width:35%}
.w-pct-36{width:36%}
.w-pct-37{width:37%}
.w-pct-38{width:38%}
.w-pct-39{width:39%}
.w-pct-40{width:40%}
.w-pct-41{width:41%}
.w-pct-42{width:42%}
.w-pct-43{width:43%}
.w-pct-44{width:44%}
.w-pct-45{width:45%}
.w-pct-46{width:46%}
.w-pct-47{width:47%}
.w-pct-48{width:48%}
.w-pct-49{width:49%}
.w-pct-50{width:50%}
.w-pct-51{width:51%}
.w-pct-52{width:52%}
.w-pct-53{width:53%}
.w-pct-54{width:54%}
.w-pct-55{width:55%}
.w-pct-56{width:56%}
.w-pct-57{width:57%}
.w-pct-58{width:58%}
.w-pct-59{width:59%}
.w-pct-60{width:60%}
.w-pct-61{width:61%}
.w-pct-62{width:62%}
.w-pct-63{width:63%}
.w-pct-64{width:64%}
.w-pct-65{width:65%}
.w-pct-66{width:66%}
.w-pct-67{width:67%}
.w-pct-68{width:68%}
.w-pct-69{width:69%}
.w-pct-70{width:70%}
.w-pct-71{width:71%}
.w-pct-72{width:72%}
.w-pct-73{width:73%}
.w-pct-74{width:74%}
.w-pct-75{width:75%}
.w-pct-76{width:76%}
.w-pct-77{width:77%}
.w-pct-78{width:78%}
.w-pct-79{width:79%}
.w-pct-80{width:80%}
.w-pct-81{width:81%}
.w-pct-82{width:82%}
.w-pct-83{width:83%}
.w-pct-84{width:84%}
.w-pct-85{width:85%}
.w-pct-86{width:86%}
.w-pct-87{width:87%}
.w-pct-88{width:88%}
.w-pct-89{width:89%}
.w-pct-90{width:90%}
.w-pct-91{width:91%}
.w-pct-92{width:92%}
.w-pct-93{width:93%}
.w-pct-94{width:94%}
.w-pct-95{width:95%}
.w-pct-96{width:96%}
.w-pct-97{width:97%}
.w-pct-98{width:98%}
.w-pct-99{width:99%}
.w-pct-100{width:100%}

.mt-8{margin-top:2rem}

.mx-auto{margin-left:auto;margin-right:auto}
.w-140{width:140px}

.mb-2{margin-bottom:.5rem}
.mb-8{margin-bottom:2rem}
.fs-11{font-size:1.1rem}
.fw-500{font-weight:500}

.grid{display:grid}
.block{display:block}
.mt-6{margin-top:6px}
.max-w-80{max-width:80px}
.max-w-90{max-width:90px}
.max-w-72{max-width:72px}
.max-w-120{max-width:120px}
.overflow-auto{overflow:auto}
.w-150{width:150px}
.mr-3{margin-right:.75rem}

.mt-4{margin-top:1rem}
/* Grid helpers for settings */
.grid-auto-180{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.grid-auto-200{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.grid-auto-240{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.grid-auto-260{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.items-end{align-items:flex-end;align-items:end}
.items-start{align-items:flex-start;align-items:start}
.ml-4{margin-left:1rem}
.mt-1{margin-top:.25rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.my-3{margin-top:.75rem;margin-bottom:.75rem}
.mt-4px{margin-top:4px}
.mb-2rem{margin-bottom:2rem}
.mt-2rem{margin-top:2rem}
.gap-2rem{gap:2rem}
.max-h-150{max-height:150px}
.min-w-250{min-width:250px}
.badge-lg{font-size:1rem;padding:8px 12px}
.p-0{padding:0}
.mt-neg-2{margin-top:-.5rem}
.mt-neg-6{margin-top:-1.5rem}
.max-h-50{max-height:50px}
.max-h-250{max-height:250px}
.bg-base-darker{background-color: var(--base-bg-darker)}
.p-5{padding:5px}
.rounded-4{border-radius:4px}
.w-full{width:100%}
.inline-flex{display:inline-flex}
.justify-start{justify-content:flex-start}
.col-span-all{grid-column:1/-1}
.min-w-180{min-width:180px}
.flex-1{flex:1}
.flex-col{flex-direction:column}
.w-220{width:220px}
.w-200{width:200px}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
iframe.embed-preview{border:0}
.grid-1fr-auto{display:grid;grid-template-columns:1fr auto}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.p-2{padding:.5rem}

.hr-line{border-color:var(--line)}
.my-4{margin-top:1rem;margin-bottom:1rem}

.text-danger{color:#c00}

.fw-700{font-weight:700}

.grid-addr-mgmt{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr 1fr;gap:10px}

/* --- Additional utilities (CSP inline-style removals support) --- */
.grid-auto-250{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.justify-center{justify-content:center}
.cursor-pointer{cursor:pointer}
.mt-0_5rem{margin-top:0.5rem}
.mt-1rem{margin-top:1rem}
.mt-1_5rem{margin-top:1.5rem}
.mt--1rem{margin-top:-1rem}
.mb-8px{margin-bottom:8px}
.mb-12px{margin-bottom:12px}
.mt-10px{margin-top:10px}
.mt-12px{margin-top:12px}
.mt-20px{margin-top:20px}
.ml-6px{margin-left:6px}
.p-1rem{padding:1rem}
.p-20px{padding:20px}
.bg-base{background-color:var(--base-bg)}
.btn-plain{background:none;border:0;padding:0;color:inherit;cursor:pointer}
.fs-1_1rem{font-size:1.1rem}

/* On-call (Piquetes) layout */
.oncall-layout{display:grid;grid-template-columns:1fr 320px;gap:12px;align-items:start}
.oncall-main{min-width:0}
.oncall-side{min-width:280px}
.oncall-main>.card:first-of-type{margin-top:0}
.sticky-top{position:sticky;top:10px}
@media (max-width: 768px){.oncall-layout{grid-template-columns:1fr}}



/* Touch-friendly tweaks */
html{-webkit-tap-highlight-color:transparent}
@media (pointer: coarse){.btn,.sidebar .nav-link,.sidebar .nav-sublink{min-height:44px}.checkbox input,input[type=checkbox]{transform:scale(1.12)}.kanban-card .lead-name{touch-action:none}}