/* assets/css/design-system.css */
/* ==========================================================================
   GESTAODE.STUDIO - DESIGN SYSTEM ROOT
   Este arquivo centraliza todas as cores, fontes, bordas e sombras do sistema.
   ========================================================================== */

   :root {
    /* ==========================================
       1. CORES DA MARCA (BRAND COLORS)
       ========================================== */
    --color-primary: #504f52;      /* Cinza escuro da marca */
    --color-inactive: #4b4b4d;    /* Cor padrão para textos, ícones e botões inativos */
    --color-accent: #017dd3;      /* Azul oficial para estados ATIVOS */      /* Azul principal (Botões, Links ativos) */
    --color-brand-secondary: #6f42c1;
    --color-brand-tertiary: #10b981;

    /* Compatibilidade com código legado (portal-soft.css) */
    --primary-color: var(--color-accent);

    /* ==========================================
       2. CORES DE ESTADO (FEEDBACK)
       ========================================== */
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #0dcaf0;
    --success-color: var(--color-success);

    /* ==========================================
       3. SUPERFÍCIES E FUNDOS (BACKGROUNDS)
       ========================================== */
    --color-white: #ffffff;
    --color-with: #ffffff;       /* Mantido por segurança contra typos antigos */
    --border-color: #ebebeb;
    
    --bg-body: #f4f4f4;          /* Fundo do painel admin principal */
    --bg-base: #f5f8fc;          /* Fundo do portal do cliente */
    --bg-surface: #ffffff;       /* Fundo de cards, modais e containers */
    --bg-subtle: #f1f5f9;        /* Fundo para hovers e áreas secundárias */

    /* ==========================================
       4. TEXTOS (TYPOGRAPHY)
       ========================================== */
    --text-main: var(--color-inactive);        /* Texto padrão Admin */
    --text-dark: #0f172a;                    /* Texto forte Portal (Títulos) */
    --text-muted: var(--color-inactive);       /* Texto secundário Admin */
    --text-soft: #64748b;                    /* Texto secundário Portal */

    /* ==========================================
       5. BORDAS E DIVISORES
       ========================================== */
    --border-color: #ebebeb;     /* Borda padrão Admin */
    --border-soft: #e2e8f0;      /* Borda padrão Portal */

    /* ==========================================
       6. RAIOS E SOMBRAS (BORDER-RADIUS & SHADOWS)
       ========================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 26px;
    --radius-xl: 50px;

    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.06);

    /* ==========================================
       7. BOOTSTRAP OVERRIDES NATIVOS
       ========================================== */
    --bs-primary: var(--color-accent);
    --bg-primary: var(--color-accent);
    --bs-body-color: var(--text-main);
    --bs-body-bg: var(--bg-body);
    --bs-border-color: var(--border-color);
    --bs-link-color: var(--color-accent);
    --bs-btn-active-color: var(--color-white);

    /* Ícones da UI */
    --icon-ui-muted: #64748b;
    --icon-ui-accent: var(--color-accent);

    /* Configurações de Títulos */
    --title-weight: 600;          /* Seminegrito para destaque sem peso excessivo */
    --title-size: 0.95rem;        /* Tamanho equilibrado para cards */







}

/* Tipografia Base para Todo o Sistema */
body {
    font-family: 'Inter', 'Google Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove sombras de qualquer elemento que possa ter por padrão ou herança */
*, .card, .btn, .dropdown-menu, .modal-content, .card-studio {
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* Remove o efeito de "subir" (transform) ao passar o mouse */
.card-studio:hover, .btn:hover, .hover-lift:hover {
    transform: none !important;
}

/* Remove bordas de botões e ícones por padrão */
.btn, .nav-link, .ds-list-action-btn {
    border: none !important;
}
/* ==========================================
   8. COMPONENTES PADRONIZADOS (UI COMPONENTS)
   ========================================== */

/* Esta classe deve ser usada em todos os títulos de cards (h5, h6, span) */
.card-studio-title, 
.card-studio h5, 
.card-studio h6,
.kpi-label {
    color: var(--color-inactive) !important;
    font-family: var(--font-main) !important;
    /* font-weight: var(--title-weight) !important; */
    font-size: var(--title-size) !important;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem; /* Espaço entre ícone e texto */
}

/* Garante que ícones dentro de títulos sigam a mesma cor, a menos que sejam ativos */
.card-studio-title i, 
.card-studio h5 i, 
.card-studio h6 i {
    color: var(--color-inactive);
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

/* --- Cards (Substitui os vários .card-custom, .card-premium) --- */


/* --- Botões (Substitui os vários .btn-pill, .ds-btn) --- */
.btn-studio-action {
    border-radius: var(--radius-xl);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-studio-primary {
    background-color: var(--color-accent);
    color: var(--color-white) !important;
}

.btn-studio-primary:hover {
    background-color: #016cb6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 125, 211, 0.2);
}

.btn-studio-outline {
    background-color: transparent;
    color: var(--text-main);
    border-color: var(--border-color);
}

.btn-studio-outline:hover {
    background-color: var(--bg-subtle);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Estado Inativo (Padrão) */
.nav-link, .btn-studio-outline, .ds-list-action-btn, .nav-icon-wrapper i, .sidebar-nav i {
    color: var(--color-inactive) !important;
    background: transparent !important;
    transition: color 0.2s ease;
    border: none !important;
}

/* Estado Ativo (Página atual ou Selecionado) */
.nav-link.active, .ds-is-active {
    color: var(--color-accent) !important;
    font-weight: 600 !important;
}
.btn-check:checked + .btn {
    color: var(--color-white) !important;
    font-weight: 600 !important;
}

/* --- COMPORTAMENTO DE HOVER (Muda apenas a cor) --- */

/* Hover Geral (Azul da marca) */
.nav-link:hover, .btn-studio-outline:hover, .sidebar-section-toggle:hover { color: var(--color-accent) !important; }
.nav-link:hover, .sidebar-section-toggle:hover { color: var(--color-accent) !important; }
.btn-outline-success:hover, .text-success:hover { color: var(--color-success) !important; }
.btn-outline-danger:hover, .text-danger:hover { color: var(--color-danger) !important; }

/* Hovers Específicos por Ação */
.text-success:hover, .btn-success:hover { color: var(--color-success) !important; }
.text-danger:hover, .btn-danger:hover { color: var(--color-danger) !important; }
.text-warning:hover, .btn-warning:hover { color: var(--color-warning) !important; }

/* --- AJUSTES DE CARDS --- */
.card-studio {
    padding: 1.25rem;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.card-studio:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* --- Botão Flutuante de Onboarding --- */
.onboarding-float-btn {
    position: fixed; top: auto !important; left: auto !important; right: 18px; bottom: 18px; z-index: 1080;
    border-radius: 999px !important; box-shadow: 0 8px 24px rgba(1, 125, 211, 0.28);
    padding: 0.5rem 1rem !important; font-size: 0.875rem !important;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.onboarding-float-progress {
    font-size: 0.75rem; background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 2px 8px;
}
@media (max-width: 576px) {
    .onboarding-float-btn { right: 12px; bottom: 12px; padding: 0.5rem 0.9rem !important; }
    .onboarding-float-btn .btn-text { display: none; }
}

/* ==========================================
   9. RESPONSIVO: LAPTOPS E TELAS HD (ex: 1366x768)
   ========================================== */
@media (min-width: 992px) and (max-width: 1440px) {
    /* Diminui a fonte raiz para escalar todo o sistema (botões, inputs, textos) */
    html { font-size: 14px; }
    :root { --sidebar-width: 220px; }
    .card-studio { padding: 1rem !important; }
    
    /* Evita que números de KPI fiquem enormes e quebrem o layout */
    .kpi-value {
        font-size: 1.5rem !important;
    }

    /* Ajuste fino da barra superior */
    .main-header {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
}

.kanban-wrapper {
    display: flex; gap: 1rem; overflow-x: auto; min-height: 60vh; padding-bottom: 1rem;
    scroll-snap-type: x mandatory; scroll-padding: 0 1rem; -webkit-overflow-scrolling: touch; width: 100%;
}
.kanban-col {
    flex: 1; min-width: 260px; scroll-snap-align: center;
    background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; display: flex; flex-direction: column;
}
.kanban-header {
    padding: 15px; border-bottom: 2px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;
    background: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.kanban-list { padding: 10px; flex-grow: 1; overflow-y: auto; min-height: 200px; }
.kanban-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; margin-bottom: 10px; cursor: grab; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: transform 0.2s; }
.kanban-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: var(--color-accent); }
@media (max-width: 768px) {
    .kanban-col {
        flex: 0 0 90vw;
        min-width: 90vw;
        max-width: 90vw;
    }
}