/* ==========================================================================
   SaaS FatoSeguro - Core Design System (fs-core-ui.css)
   Version: 2.1.0 - Tokens de Design & Anti-Conflito Elementor
   ========================================================================== */

:root {
    /* 1. Variáveis White-Label & Marca */
    --fs-primary: #18181b;
    --fs-primary-hover: #27272a;
    --fs-accent: #2563eb;

    --fs-brand: #036575;
    --fs-brand-hover: #065259;
    --fs-brand-light: #e0f2fe;
    --fs-brand-text: #0369a1;

    --fs-color-brand-primary: #6366f1;
    --fs-color-brand-primary-strong: #4f46e5;
    --fs-color-brand-dark: #1e1e1e;
    --fs-color-brand-dark-hover: #2d2d2d;

    /* 2. Escala Zinc & Neutros */
    --fs-bg-body: #f4f4f5;
    --fs-bg-surface: #ffffff;
    --fs-border-light: #e4e4e7;
    --fs-border-dark: #d4d4d8;
    --fs-zinc-50: #fafafa;
    --fs-zinc-100: #f4f4f5;
    --fs-zinc-200: #e4e4e7;
    --fs-zinc-300: #d4d4d8;
    --fs-zinc-400: #a1a1aa;
    --fs-zinc-500: #71717a;
    --fs-zinc-600: #52525b;
    --fs-zinc-700: #3f3f46;
    --fs-zinc-800: #27272a;
    --fs-zinc-900: #18181b;

    --fs-color-neutral-bg: #f8f9fa;
    --fs-color-neutral-card: #ffffff;
    --fs-color-neutral-border: #e5e7eb;

    /* 3. Tipografia Universal */
    --fs-font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --fs-text-heading: #18181b;
    --fs-text-body: #52525b;
    --fs-text-muted: #71717a;

    --fs-text-xs: 0.75rem;     /* 12px */
    --fs-text-sm: 0.875rem;    /* 14px */
    --fs-text-base: 1rem;      /* 16px */
    --fs-text-lg: 1.125rem;    /* 18px */
    --fs-text-xl: 1.25rem;     /* 20px */

    --fs-font-normal: 400;
    --fs-font-medium: 500;
    --fs-font-semibold: 600;
    --fs-font-bold: 700;

    /* 4. Escala de Espaçamento & Flex Gaps (Escala de 4px) */
    --fs-space-0: 0px;
    --fs-space-1: 0.25rem;  /* 4px */
    --fs-space-2: 0.5rem;   /* 8px */
    --fs-space-3: 0.75rem;  /* 12px */
    --fs-space-4: 1rem;     /* 16px */
    --fs-space-6: 1.5rem;   /* 24px */
    --fs-space-8: 2rem;     /* 32px */

    --fs-gap-1: 0.25rem;
    --fs-gap-2: 0.5rem;
    --fs-gap-4: 1rem;
    --fs-gap-6: 1.5rem;

    /* 5. Tokens de Status, Urgência & Badges */
    --fs-color-status-critical-bg: rgba(239, 68, 68, 0.1);
    --fs-color-status-critical-text: #dc2626;
    --fs-color-status-high-bg: rgba(245, 158, 11, 0.1);
    --fs-color-status-high-text: #d97706;
    --fs-color-status-medium-bg: rgba(59, 130, 246, 0.1);
    --fs-color-status-medium-text: #2563eb;
    --fs-color-status-low-bg: rgba(34, 197, 94, 0.1);
    --fs-color-status-low-text: #16a34a;
    --fs-color-status-neutral-bg: rgba(107, 114, 128, 0.1);
    --fs-color-status-neutral-text: #4b5563;

    --fs-status-nova-bg: #eff6ff;
    --fs-status-nova-text: #1d4ed8;
    --fs-status-analise-bg: #f0fdfa;
    --fs-status-analise-text: #0f766e;
    --fs-status-investigacao-bg: #fef3c7;
    --fs-status-investigacao-text: #b45309;
    --fs-status-concluida-bg: #f0fdf4;
    --fs-status-concluida-text: #15803d;
    --fs-status-arquivada-bg: #d4d4d8;
    --fs-status-arquivada-text: #18181b;

    /* 6. Alertas e Feedbacks */
    --fs-alert-success-bg: #f0fdf4;
    --fs-alert-success-border: #bbf7d0;
    --fs-alert-success-text: #166534;
    --fs-alert-error-bg: #fef2f2;
    --fs-alert-error-border: #fca5a5;
    --fs-alert-error-text: #991b1b;
    --fs-alert-warning-bg: #fffbeb;
    --fs-alert-warning-border: #fde68a;
    --fs-alert-warning-text: #92400e;

    /* 7. Geometria & Sombras */
    --fs-radius-sm: 0.125rem;
    --fs-radius-s: 6px;
    --fs-radius-md: 0.375rem;
    --fs-radius-lg: 0.5rem;
    --fs-radius-xl: 0.75rem;
    --fs-radius-pill: 9999px;

    --fs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --fs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --fs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* ==  ISOLAMENTO DE FORMULÁRIOS & CONTROLES DE ENTRADA == */

.fs-control-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
}

.fs-control-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--fs-zinc-700) !important;
    margin-bottom: 0.375rem !important;
    text-align: left !important;
}

.fs-control-input, 
.fs-control-textarea, 
.fs-control-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-family: var(--fs-font-family) !important;
    border: 1px solid var(--fs-border-dark) !important;
    border-radius: var(--fs-radius-xl) !important;
    box-sizing: border-box !important;
    background: var(--fs-bg-surface) !important;
    color: var(--fs-zinc-900) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

.fs-control-input:focus, 
.fs-control-textarea:focus, 
.fs-control-select:focus {
    border-color: var(--fs-brand-hover) !important;
    box-shadow: 0 0 0 2px rgba(6, 82, 89, 0.1) !important;
}

.fs-control-textarea {
    min-height: 80px;
    resize: vertical;
}

.fs-control-help {
    font-size: 0.75rem !important;
    color: var(--fs-zinc-500) !important;
    display: block !important;
    margin-top: 0.375rem !important;
    line-height: 1.4 !important;
}

/* == BOTÕES E COMPONENTES DE MARCA == */

.fs-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: var(--fs-radius-pill) !important;
    font-family: var(--fs-font-family) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.fs-btn-brand {
    background-color: var(--fs-brand) !important;
    color: #ffffff !important;
}
.fs-btn-brand:hover {
    background-color: var(--fs-brand-hover) !important;
    color: #ffffff !important;
}

.fs-btn-primary {
    background-color: var(--fs-primary) !important;
    color: #ffffff !important;
}
.fs-btn-primary:hover {
    background-color: var(--fs-primary-hover) !important;
}

/* Checkbox Card */
.fs-checkbox-card {
    background: var(--fs-zinc-50) !important;
    border: 1px solid var(--fs-border-light) !important;
    padding: 1rem !important;
    border-radius: var(--fs-radius-md) !important;
}

.fs-checkbox-label {
    font-size: 0.875rem !important;
    color: var(--fs-zinc-800) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.fs-checkbox-label input[type="checkbox"] {
    margin-top: 2px !important;
    accent-color: var(--fs-brand) !important;
    width: 16px !important;
    height: 16px !important;
}

/* Alertas */
.fs-alert {
    padding: 0.875rem 1rem !important;
    border-radius: var(--fs-radius-md) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin-top: 1rem !important;
}
.fs-alert-success { background-color: var(--fs-alert-success-bg) !important; border: 1px solid var(--fs-alert-success-border) !important; color: var(--fs-alert-success-text) !important; }
.fs-alert-error   { background-color: var(--fs-alert-error-bg) !important; border: 1px solid var(--fs-alert-error-border) !important; color: var(--fs-alert-error-text) !important; }
.fs-alert-warning { background-color: var(--fs-alert-warning-bg) !important; border: 1px solid var(--fs-alert-warning-border) !important; color: var(--fs-alert-warning-text) !important; }

/* Badges e Dots */
.fs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--fs-zinc-200);
    border-radius: var(--fs-radius-pill);
    font-family: var(--fs-font-family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.fs-dot { width: var(--fs-radius-s); height: var(--fs-radius-s); border-radius: 50%; }
.red { background-color: #ef4444; } .yellow { background-color: #eab308; } .green { background-color: #22c55e; } .blue { background-color: #3b82f6; } .grey { background-color: var(--fs-zinc-400); }

/* Ícones CSS Mask */
.icon { display: inline-block; width: 15px; height: 15px; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.icon-loading { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); }
.icon-new { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.icon-success { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.icon-archived { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E"); }

/* ==========================================================================
   MOTOR UNIFICADO DE ABAS (DUAL LAYOUT - ANTI-VAZAMENTO)
   ========================================================================== */

.fs-tabs-container {
    width: 100% !important;
    font-family: var(--fs-font-family) !important;
}

.fs-tabs-container .fs-tab-pane {
    display: none !important;
}
.fs-tabs-container .fs-tab-pane.active {
    display: block !important;
}

.fs-tabs-container .fs-tab-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 10px 16px !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--fs-zinc-600) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

/* LAYOUT 1: HORIZONTAL */
.fs-tabs-layout-horizontal .fs-tabs-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--fs-border-light) !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

.fs-tabs-layout-horizontal .fs-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
}

.fs-tabs-layout-horizontal .fs-tab-btn:hover {
    color: var(--fs-zinc-900) !important;
}

.fs-tabs-layout-horizontal .fs-tab-btn.active {
    color: var(--fs-brand) !important;
    border-bottom-color: var(--fs-brand) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* LAYOUT 2: VERTICAL */
.fs-tabs-layout-vertical {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}

.fs-tabs-layout-vertical .fs-tabs-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
}

.fs-tabs-layout-vertical .fs-tab-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    border-radius: var(--fs-radius-md) !important;
    text-align: left !important;
}

.fs-tabs-layout-vertical .fs-tab-btn:hover {
    background: var(--fs-zinc-100) !important;
    color: var(--fs-zinc-900) !important;
}

.fs-tabs-layout-vertical .fs-tab-btn.active {
    background: var(--fs-accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.fs-tab-content-wrapper {
    background: var(--fs-bg-surface) !important;
    border: 1px solid var(--fs-border-light) !important;
    border-radius: var(--fs-radius-lg) !important;
    padding: 28px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

.fs-card-header {
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--fs-zinc-100) !important;
    padding-bottom: 12px !important;
}

.fs-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fs-zinc-900) !important;
    margin: 0 0 4px 0 !important;
}

.fs-card-subtitle {
    font-size: 13px !important;
    color: var(--fs-zinc-500) !important;
    margin: 0 !important;
}

.fs-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.fs-form-actions {
    margin-top: 24px !important;
    text-align: right !important;
}

@media (max-width: 768px) {
    .fs-tabs-layout-vertical { grid-template-columns: 1fr !important; gap: 16px !important; }
    .fs-form-grid-2 { grid-template-columns: 1fr !important; }
}