/* ============================================================
   FlowHub — Design System
   Palette: Indigo / Purple / Amber  ·  Light + Dark themes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ---------- Light theme tokens ---------- */
:root {
    /* Core palette */
    --primary: #2B59FF;
    --primary-strong: #1A3BCE;
    --primary-soft: #EEF2FF;
    --primary-rgb: 43, 89, 255;

    --secondary: #6D28D9;
    --secondary-strong: #5B21B6;
    --secondary-soft: #F5F3FF;

    --accent: #FF9F0A;
    --accent-strong: #E28500;
    --accent-soft: #FFF5E6;

    --success: #22C55E;
    --success-strong: #16A34A;
    --success-soft: #E8FBF0;

    --danger: #EF4444;
    --danger-strong: #DC2626;
    --danger-soft: #FEF2F2;

    --warning: #FF9F0A;
    --warning-soft: #FFFBEB;

    --info: #3B82F6;
    --info-soft: #EFF6FF;

    /* Surfaces */
    --app-bg: #F8FAFC;
    --app-bg-strong: #F1F5F9;
    --surface: #FFFFFF;
    --surface-muted: #F1F5F9;
    --surface-raised: #FFFFFF;

    /* Text */
    --ink: #0A1128;
    --muted: #6B7280;
    --muted-strong: #374151;

    /* Borders */
    --line: #E2E8F0;
    --line-strong: #CBD5E1;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.10);

    /* Radii */
    --radius: 10px;
    --radius-lg: 14px;

    /* Navbar */
    --navbar-bg: rgba(255, 255, 255, 0.65);

    /* Misc */
    --scrollbar-thumb: #CBD5E1;
    --scrollbar-track: #F1F5F9;

    /* Liquid Glass design tokens */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-border-strong: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    --glass-blur: blur(20px) saturate(1.8);
    --glass-radius: 18px;
    --glass-radius-lg: 24px;
}

/* ---------- Dark theme tokens ---------- */
[data-theme="dark"] {
    --primary: #5875FF;
    --primary-strong: #405EFF;
    --primary-soft: rgba(88, 117, 255, 0.12);
    --primary-rgb: 88, 117, 255;

    --secondary: #A78BFA;
    --secondary-strong: #8B5CF6;
    --secondary-soft: rgba(167, 139, 250, 0.12);

    --accent: #FFB020;
    --accent-strong: #FF9F0A;
    --accent-soft: rgba(255, 176, 32, 0.12);

    --success: #4ADE80;
    --success-strong: #22C55E;
    --success-soft: rgba(74, 222, 128, 0.12);

    --danger: #F87171;
    --danger-strong: #EF4444;
    --danger-soft: rgba(248, 113, 113, 0.12);

    --warning: #FFB020;
    --warning-soft: rgba(255, 176, 32, 0.10);

    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, 0.10);

    --app-bg: #050B18;
    --app-bg-strong: #091224;
    --surface: #0F172A;
    --surface-muted: #172237;
    --surface-raised: #1E293B;

    --ink: #F8FAFC;
    --muted: #94A3B8;
    --muted-strong: #CBD5E1;

    --line: #1E293B;
    --line-strong: #334155;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.20), 0 10px 24px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.40);

    --navbar-bg: rgba(5, 11, 24, 0.65);

    --scrollbar-thumb: #334155;
    --scrollbar-track: #0F172A;

    /* Liquid Glass design tokens */
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --glass-blur: blur(20px) saturate(1.8);
    --glass-radius: 18px;
    --glass-radius-lg: 24px;
}

/* ---------- Bolhas líquidas decorativas no plano de fundo ---------- */
.liquid-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -10;
    pointer-events: none;
    opacity: 0.45;
    transition: opacity 0.5s ease;
    will-change: transform;
}

/* Bolha 1 - Superior Esquerda (Azul/Violeta) */
.liquid-blob-1 {
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(43, 89, 255, 0.8) 0%, rgba(109, 40, 217, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
    animation: floatBlob1 25s infinite alternate ease-in-out;
}

/* Bolha 2 - Central Direita (Rosa/Neon) */
.liquid-blob-2 {
    top: 30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.7) 0%, rgba(109, 40, 217, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
    animation: floatBlob2 20s infinite alternate ease-in-out;
}

/* Bolha 3 - Inferior Esquerda (Ciano/Verde) */
.liquid-blob-3 {
    bottom: -10%;
    left: 20%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.6) 0%, rgba(43, 89, 255, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
    animation: floatBlob3 30s infinite alternate ease-in-out;
}

[data-theme="dark"] .liquid-blob {
    opacity: 0.25;
}

@keyframes floatBlob1 {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(100px, 80px, 0) scale(1.1); }
    100% { transform: translate3d(-50px, 150px, 0) scale(0.9); }
}

@keyframes floatBlob2 {
    0% { transform: translate3d(0, 0, 0) scale(0.9); }
    50% { transform: translate3d(-120px, -60px, 0) scale(1.15); }
    100% { transform: translate3d(60px, 100px, 0) scale(1); }
}

@keyframes floatBlob3 {
    0% { transform: translate3d(0, 0, 0) scale(1.1); }
    50% { transform: translate3d(80px, -100px, 0) scale(0.9); }
    100% { transform: translate3d(-100px, 40px, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-blob-1,
    .liquid-blob-2,
    .liquid-blob-3 {
        animation: none !important;
    }
}

@media print {
    .liquid-blob {
        display: none !important;
    }
}

/* ============================================================
   GLOBAL
   ============================================================ */

html {
    min-height: 100%;
}

body {
    background: var(--app-bg);
    color: var(--ink);
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.96rem;
    min-height: 100vh;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

a {
    color: var(--primary);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--primary-strong);
}

.body-content {
    margin-top: 0;
    max-width: 1440px;
    padding: 1.5rem;
}

main {
    padding-bottom: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-weight: 750;
    letter-spacing: -0.01em;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */

.theme-toggle {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted-strong);
    cursor: pointer;
    display: inline-flex;
    font-size: 0;
    height: 2.1rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    width: 2.1rem;
}

.theme-toggle:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    transform: rotate(15deg);
}

.theme-toggle svg {
    height: 1.15rem;
    width: 1.15rem;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.pwa-install-btn {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted-strong);
    cursor: pointer;
    display: inline-flex;
    font-size: 0;
    height: 2.1rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    width: 2.1rem;
}

.pwa-install-btn:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
}

.pwa-install-btn svg {
    height: 1.15rem;
    width: 1.15rem;
}

/* ============================================================
   PRINT — Force light theme for clean PDF output
   ============================================================ */

@media print {
    /* Reset all CSS variables to light theme */
    :root,
    [data-theme="dark"] {
        --primary: #2B59FF;
        --primary-strong: #1A3BCE;
        --primary-soft: #EEF2FF;
        --primary-rgb: 43, 89, 255;
        --secondary: #6D28D9;
        --secondary-strong: #5B21B6;
        --secondary-soft: #F5F3FF;
        --accent: #FF9F0A;
        --accent-strong: #E28500;
        --accent-soft: #FFF5E6;
        --success: #22C55E;
        --success-strong: #16A34A;
        --success-soft: #E8FBF0;
        --danger: #EF4444;
        --danger-strong: #DC2626;
        --danger-soft: #FEF2F2;
        --warning: #FF9F0A;
        --warning-soft: #FFFBEB;
        --info: #3B82F6;
        --info-soft: #EFF6FF;
        --app-bg: #FFFFFF;
        --app-bg-strong: #F1F5F9;
        --surface: #FFFFFF;
        --surface-muted: #F8FAFC;
        --surface-raised: #FFFFFF;
        --ink: #0A1128;
        --muted: #6B7280;
        --muted-strong: #374151;
        --line: #E2E8F0;
        --line-strong: #CBD5E1;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --navbar-bg: #FFFFFF;
    }

    body {
        background: #fff !important;
        color: #1F2937 !important;
    }

    .app-navbar,
    .d-print-none,
    .theme-toggle {
        display: none !important;
    }

    .body-content {
        max-width: none;
        padding: 0;
    }

    .page-kicker {
        background: transparent;
        color: #2B59FF;
        padding: 0;
    }

    .filter-panel,
    .data-panel,
    .content-panel,
    .calculo-page .totals-panel {
        border: 1px solid #E2E8F0;
        box-shadow: none;
    }

    .table,
    .table thead th,
    .table td {
        background: #fff !important;
        color: #1F2937 !important;
    }

    .table thead th {
        background: #F8FAFC !important;
        color: #374151 !important;
    }

    .table > :not(caption) > * > * {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: transparent !important;
    }

    .calculo-page .totals-header {
        background: #F8FAFC !important;
    }

    .calculo-page .total-row:hover {
        background: transparent;
    }

    .brand-mark,
    .login-brand-mark {
        background: #2B59FF;
    }

    .dashboard-menu-card::before {
        display: none;
    }
}

/* Ocultar o botao nativo de revelar senha do navegador (ex: Microsoft Edge / IE) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="text"]::-ms-reveal,
input[type="text"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================================
   LOGO THEMING & BRANDING UTILITIES
   ============================================================ */

.logo-dark {
    display: none;
}
[data-theme="dark"] .logo-light {
    display: none;
}
[data-theme="dark"] .logo-dark {
    display: inline-block;
}

.brand-logo {
    height: 1.85rem;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    transition: transform 0.25s ease;
}
.app-brand:hover .brand-logo {
    transform: scale(1.06);
}

.login-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.login-logo {
    height: 3.2rem;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .login-logo {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.landing-logo {
    height: 2.2rem;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}