/* CRM Pro - Dark Mode Theme */

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    transition: all 0.15s;
}
.nav-link:hover {
    background-color: rgb(30 41 59);
    color: #fff;
}
.nav-link.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
    color: #c7d2fe;
    border-left: 3px solid #6366f1;
}

.card {
    background-color: rgb(15 23 42);
    border: 1px solid rgb(30 41 59);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
    cursor: pointer;
}
.btn-primary { background-color: rgb(79 70 229); color: white; }
.btn-primary:hover { background-color: rgb(67 56 202); }
.btn-secondary { background-color: rgb(51 65 85); color: white; }
.btn-secondary:hover { background-color: rgb(71 85 105); }
.btn-danger { background-color: rgb(220 38 38); color: white; }
.btn-danger:hover { background-color: rgb(185 28 28); }
.btn-success { background-color: rgb(22 163 74); color: white; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Kanban */
.kanban-col {
    min-width: 300px;
    max-width: 300px;
}
.kanban-card {
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
}
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.kanban-card.dragging { opacity: 0.5; }

/* Form inputs select */
select option { background-color: #1e293b; color: white; }

/* Table */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 0.75rem 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; border-bottom: 1px solid #1e293b; }
.table td { padding: 1rem; border-bottom: 1px solid #1e293b; font-size: 0.875rem; }
.table tr:hover { background-color: rgba(30,41,59,0.5); }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ===================================================================== */
/* Parte 3 — Variáveis CSS para tema dark/light + utilitários novos       */
/* ===================================================================== */
:root,
html.dark {
    --c-bg: #020617;          /* slate-950 */
    --c-bg-soft: #0f172a;     /* slate-900 */
    --c-bg-elev: #1e293b;     /* slate-800 */
    --c-border: #1e293b;
    --c-border-soft: #334155;
    --c-text: #f1f5f9;        /* slate-100 */
    --c-text-soft: #cbd5e1;   /* slate-300 */
    --c-text-mute: #94a3b8;   /* slate-400 */
    --c-card: #0f172a;
    --c-accent: #6366f1;
    --c-accent-hover: #4f46e5;
    color-scheme: dark;
}
html.light {
    --c-bg: #f8fafc;          /* slate-50 */
    --c-bg-soft: #ffffff;
    --c-bg-elev: #f1f5f9;     /* slate-100 */
    --c-border: #e2e8f0;      /* slate-200 */
    --c-border-soft: #cbd5e1; /* slate-300 */
    --c-text: #0f172a;        /* slate-900 */
    --c-text-soft: #1e293b;
    --c-text-mute: #64748b;   /* slate-500 */
    --c-card: #ffffff;
    --c-accent: #4f46e5;
    --c-accent-hover: #4338ca;
    color-scheme: light;
}

/* Aliases utilizados nos templates da Parte 3 */
.bg-app    { background-color: var(--c-bg); }
.bg-card   { background-color: var(--c-card); }
.text-app  { color: var(--c-text); }

/* Override de classes Tailwind utilizadas amplamente quando em modo claro */
html.light body { background-color: var(--c-bg); color: var(--c-text); }
html.light .bg-slate-950 { background-color: var(--c-bg) !important; }
html.light .bg-slate-900 { background-color: var(--c-card) !important; }
html.light .bg-slate-800 { background-color: var(--c-bg-elev) !important; }
html.light .bg-slate-800\/50,
html.light .bg-slate-800\/40 { background-color: rgba(241,245,249,.7) !important; }
html.light .text-slate-100 { color: var(--c-text) !important; }
html.light .text-slate-200 { color: var(--c-text-soft) !important; }
html.light .text-slate-300 { color: #475569 !important; }
html.light .text-slate-400 { color: var(--c-text-mute) !important; }
html.light .text-slate-500 { color: #64748b !important; }
html.light .border-slate-700,
html.light .border-slate-800 { border-color: var(--c-border) !important; }
html.light .divide-slate-800 > * + * { border-color: var(--c-border) !important; }
html.light .hover\:bg-slate-800:hover { background-color: #f1f5f9 !important; }
html.light .hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; }
html.light .nav-link { color: #334155; }
html.light .nav-link:hover { background-color: #f1f5f9; color: #0f172a; }
html.light .nav-link.active { color: #4338ca; background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10)); }
html.light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Sidebar colapsada (Parte 3 — refinamento) */
body.sidebar-collapsed #app-sidebar { width: 4rem; }
#app-sidebar .nav-link { white-space: nowrap; overflow: hidden; }
body.sidebar-collapsed #app-sidebar .nav-link { justify-content: center; padding: 0.625rem; }

/* Skeleton loaders */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: rgba(148,163,184,0.10);
    border-radius: 0.375rem;
}
.skeleton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,0.18), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.skeleton-text { height: 0.85rem; margin: 0.4rem 0; }
.skeleton-text.short { width: 40%; }
.skeleton-row { display: grid; grid-template-columns: 40px 1fr 1fr 80px; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--c-border); }

/* Avatar circle com cor dinâmica (gerada via hash do nome — ver filter `avatar_color`) */
.avatar-dyn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--avatar-from, #6366f1), var(--avatar-to, #a855f7));
    flex-shrink: 0;
}

/* Animações utilitárias */
.fade-in { animation: fade-in .25s ease-out both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

/* Cmd-K hint */
.kbd { display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .35rem; border-radius:.3rem; background:rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.25); font-size:.65rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Select com busca e pré-seleção nos cadastros */
.smart-select { position: relative; }
.smart-select-native { display: none !important; }
.smart-select-input { width: 100%; }
.smart-select-dropdown {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.45rem);
    background: var(--c-card);
    border: 1px solid var(--c-border-soft);
    border-radius: 0.9rem;
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.45);
    max-height: 16rem;
    overflow-y: auto;
    z-index: 60;
    padding: 0.35rem;
}
.smart-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding: 0.8rem 0.9rem;
    border-radius: 0.75rem;
    color: var(--c-text);
    font-size: 0.92rem;
    transition: background-color .15s ease, color .15s ease;
}
.smart-select-option small {
    color: #93c5fd;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.smart-select-option:hover,
.smart-select-option.is-active {
    background: rgba(99, 102, 241, 0.18);
    color: #fff;
}
.smart-select-empty {
    padding: 0.9rem 1rem;
    color: var(--c-text-mute);
    font-size: 0.85rem;
}

/* Ajustes fortes para mobile */
@media (max-width: 767px) {
    #app-sidebar {
        width: min(18rem, 86vw) !important;
        transform: translateX(-100%) !important;
        box-shadow: 0 18px 48px rgba(2, 6, 23, 0.55);
    }
    body.mobile-sidebar-open #app-sidebar {
        transform: translateX(0) !important;
    }
    body.mobile-sidebar-open #mobile-sidebar-backdrop {
        display: block !important;
    }
    header {
        position: sticky;
        top: 0;
    }
    main {
        padding-bottom: 5rem;
    }
    .smart-select-dropdown {
        max-height: 42vh;
    }
}