/* =========================================================
   INSIGHTOS V2 — GLOBAL MATERIAL YOU LAYER
   ========================================================= */

:root{
    --ios-bg:#f7f7fb;
    --ios-surface:rgba(255,255,255,.84);
    --ios-solid:#ffffff;
    --ios-soft:#eef0f5;
    --ios-soft-2:#e6e8ef;
    --ios-line:rgba(45,48,58,.09);

    --ios-text:#1b1c20;
    --ios-muted:#737780;

    --ios-primary:#4054b2;
    --ios-primary-container:#dfe3ff;

    --ios-green:#daf5e1;
    --ios-blue:#e1e8ff;
    --ios-pink:#ffe2ef;
    --ios-gold:#ffefca;
    --ios-cyan:#e1f5f4;
    --ios-red:#ffdfe2;
    --ios-violet:#ece2ff;

    --ios-radius-xs:12px;
    --ios-radius-sm:16px;
    --ios-radius-md:22px;
    --ios-radius-lg:28px;
    --ios-radius-xl:38px;

    --ios-shadow:
        0 22px 70px rgba(25,29,44,.07);

    --ios-ease:
        cubic-bezier(.2,.8,.2,1);
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html{
    background:var(--ios-bg);
}

body.insightos-v2-page{
    min-height:100vh !important;

    background:
        radial-gradient(
            circle at 6% 0%,
            rgba(67,85,181,.10),
            transparent 29rem
        ),
        radial-gradient(
            circle at 96% 8%,
            rgba(243,117,178,.08),
            transparent 27rem
        ),
        var(--ios-bg) !important;

    color:var(--ios-text);

    font-family:
        Inter,
        "Google Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    -webkit-font-smoothing:antialiased;
}

body.insightos-v2-page *{
    box-sizing:border-box;
}


/* ---------------------------------------------------------
   UNIVERSAL TOP NAV
   --------------------------------------------------------- */

.ios-v2-global-nav{
    position:sticky;

    top:0;

    z-index:9990;

    min-height:70px;

    padding:10px 18px;

    display:flex;
    align-items:center;

    gap:12px;

    border-bottom:
        1px solid var(--ios-line);

    background:
        rgba(247,247,251,.91);

    backdrop-filter:
        blur(26px)
        saturate(145%);
}

.ios-v2-global-logo{
    width:45px;
    height:45px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:#202124;

    color:#fff !important;

    text-decoration:none;

    font-size:12px;

    font-weight:950;
}

.ios-v2-global-brand{
    min-width:0;
}

.ios-v2-global-brand strong{
    display:block;

    font-size:11px;

    letter-spacing:-.03em;
}

.ios-v2-global-brand small{
    display:block;

    margin-top:2px;

    color:var(--ios-muted);

    font-size:6px;

    font-weight:850;

    letter-spacing:.13em;
}

.ios-v2-global-links{
    margin-left:22px;

    display:flex;
    align-items:center;

    gap:3px;
}

.ios-v2-global-links a{
    min-height:38px;

    padding:0 12px;

    display:flex;
    align-items:center;

    border-radius:19px;

    color:#60646d !important;

    text-decoration:none !important;

    font-size:8px;

    font-weight:800;
}

.ios-v2-global-links a:hover{
    background:
        rgba(66,72,96,.06);
}

.ios-v2-global-links a.current{
    background:
        var(--ios-primary-container);

    color:#17245e !important;
}

.ios-v2-global-actions{
    margin-left:auto;

    display:flex;

    gap:6px;
}

.ios-v2-global-actions a{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:
        1px solid var(--ios-line);

    border-radius:50%;

    background:
        rgba(255,255,255,.82);

    color:inherit !important;

    text-decoration:none !important;
}


/* ---------------------------------------------------------
   GENERIC PAGE CONTAINER
   --------------------------------------------------------- */

body.insightos-v2-page main,
body.insightos-v2-page .container,
body.insightos-v2-page .content,
body.insightos-v2-page .wrapper,
body.insightos-v2-page .shell{
    max-width:1380px;
}


/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

body.insightos-v2-page h1{
    letter-spacing:-.06em;

    font-weight:620;
}

body.insightos-v2-page h2{
    letter-spacing:-.04em;

    font-weight:650;
}

body.insightos-v2-page h3{
    letter-spacing:-.025em;
}


/* ---------------------------------------------------------
   CARD / PANEL NORMALIZATION
   --------------------------------------------------------- */

body.insightos-v2-page
:is(
    .card,
    .panel,
    .box,
    .widget,
    .section-card,
    .dashboard-card,
    .story-card,
    .source-card,
    .entity-card
){
    border:
        1px solid var(--ios-line) !important;

    border-radius:
        var(--ios-radius-lg) !important;

    background:
        var(--ios-surface) !important;

    box-shadow:none;

    backdrop-filter:
        blur(18px);
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

body.insightos-v2-page
:is(
    button,
    .btn,
    .button
){
    border-radius:
        18px;

    transition:
        transform .18s var(--ios-ease),
        box-shadow .18s var(--ios-ease);
}

body.insightos-v2-page
:is(
    button,
    .btn,
    .button
):hover{
    transform:
        translateY(-1px);
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

body.insightos-v2-page
:is(
    input,
    select,
    textarea
){
    border:
        1px solid var(--ios-line);

    border-radius:
        15px;

    outline:none;
}

body.insightos-v2-page
:is(
    input,
    select,
    textarea
):focus{
    border-color:
        rgba(64,84,178,.40);

    box-shadow:
        0 0 0 3px
        rgba(64,84,178,.08);
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

body.insightos-v2-page table{
    width:100%;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    border:
        1px solid var(--ios-line);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.82);
}

body.insightos-v2-page th{
    background:
        var(--ios-soft);

    color:#575c65;

    font-size:7px;

    letter-spacing:.08em;

    text-transform:uppercase;
}

body.insightos-v2-page th,
body.insightos-v2-page td{
    padding:
        12px 14px;

    border-bottom:
        1px solid var(--ios-line);
}

body.insightos-v2-page tr:last-child td{
    border-bottom:0;
}


/* ---------------------------------------------------------
   STATUS CHIPS
   --------------------------------------------------------- */

.ios-v2-chip{
    display:inline-flex;
    align-items:center;

    min-height:27px;

    padding:0 9px;

    border-radius:14px;

    background:var(--ios-soft);

    color:#5f646d;

    font-size:7px;

    font-weight:850;
}

.ios-v2-chip.good{
    background:var(--ios-green);
    color:#245d38;
}

.ios-v2-chip.warn{
    background:var(--ios-gold);
    color:#77591c;
}

.ios-v2-chip.bad{
    background:var(--ios-red);
    color:#7e3038;
}


/* ---------------------------------------------------------
   MOBILE BOTTOM NAV
   --------------------------------------------------------- */

.ios-v2-bottom-nav{
    display:none;
}


@media(max-width:900px){

    .ios-v2-global-links{
        display:none;
    }

    .ios-v2-global-brand{
        display:none;
    }

    .ios-v2-bottom-nav{
        position:fixed;

        left:12px;
        right:12px;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        z-index:9999;

        min-height:65px;

        padding:6px;

        display:grid;

        grid-template-columns:
            repeat(4,1fr);

        gap:4px;

        border:
            1px solid rgba(255,255,255,.6);

        border-radius:28px;

        background:
            rgba(246,247,251,.93);

        backdrop-filter:
            blur(24px);

        box-shadow:
            0 16px 50px
            rgba(18,21,30,.13);
    }

    .ios-v2-bottom-nav a{
        min-height:51px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:3px;

        border-radius:21px;

        color:#60646d !important;

        text-decoration:none !important;

        font-size:6px;

        font-weight:800;
    }

    .ios-v2-bottom-nav a.current{
        background:
            var(--ios-primary-container);

        color:#17245d !important;
    }

    .ios-v2-bottom-nav b{
        font-size:16px;

        font-weight:500;
    }

    body.insightos-v2-page{
        padding-bottom:85px;
    }
}