/* =========================================================
   INSIGHTOS V2
   Legacy-page compatibility layer

   Purpose:
   Transform existing pages visually without changing
   PHP business logic, forms, data contracts or APIs.
   ========================================================= */

:root{
    --compat-bg:#f7f7fb;

    --compat-surface:
        rgba(255,255,255,.86);

    --compat-surface-solid:
        #ffffff;

    --compat-soft:
        #eef0f5;

    --compat-soft-2:
        #e5e8ef;

    --compat-line:
        rgba(45,48,58,.09);

    --compat-text:
        #1b1c20;

    --compat-muted:
        #737780;

    --compat-primary:
        #4054b2;

    --compat-primary-container:
        #dfe3ff;

    --compat-green:
        #daf5e1;

    --compat-blue:
        #e1e8ff;

    --compat-pink:
        #ffe2ef;

    --compat-gold:
        #ffefca;

    --compat-red:
        #ffdfe2;

    --compat-radius-sm:
        15px;

    --compat-radius-md:
        22px;

    --compat-radius-lg:
        28px;

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


/* =========================================================
   PAGE FOUNDATION
   ========================================================= */

body.insightos-v2-page{
    margin:0;

    min-height:100vh;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(67,85,181,.10),
            transparent 30rem
        ),
        radial-gradient(
            circle at 96% 8%,
            rgba(243,117,178,.07),
            transparent 27rem
        ),
        var(--compat-bg) !important;

    color:
        var(--compat-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;
}


/* =========================================================
   OLD NAV / SIDEBAR NORMALIZATION
   ========================================================= */

body.insightos-v2-page
:is(
    aside,
    .sidebar,
    .side-nav,
    .sidenav,
    .navigation,
    .nav-sidebar
){
    border-color:
        var(--compat-line) !important;
}


body.insightos-v2-page
:is(
    header,
    .header,
    .topbar,
    .navbar,
    .top-nav
){
    border-color:
        var(--compat-line) !important;
}


/* =========================================================
   CONTENT WIDTH
   ========================================================= */

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


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

body.insightos-v2-page h1{
    color:
        var(--compat-text) !important;

    letter-spacing:
        -.055em !important;

    font-weight:
        620 !important;
}


body.insightos-v2-page h2{
    color:
        var(--compat-text) !important;

    letter-spacing:
        -.04em !important;

    font-weight:
        650 !important;
}


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


body.insightos-v2-page
:is(
    p,
    .muted,
    .description,
    .subtitle,
    .secondary-text
){
    line-height:
        1.65;
}


/* =========================================================
   CARDS / PANELS
   ========================================================= */

body.insightos-v2-page
:is(
    .card,
    .panel,
    .box,
    .widget,
    .module,
    .section,
    .section-card,
    .content-card,
    .stat-card,
    .metric-card,
    .dashboard-card,
    .table-card,
    .form-card,
    .workspace-card
){
    border:
        1px solid
        var(--compat-line) !important;

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

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

    box-shadow:
        none !important;

    backdrop-filter:
        blur(18px);
}


/* =========================================================
   SMALL METRIC / STAT BLOCKS
   ========================================================= */

body.insightos-v2-page
:is(
    .stat,
    .metric,
    .kpi,
    .summary-card,
    .count-card
){
    border:
        1px solid
        var(--compat-line) !important;

    border-radius:
        var(--compat-radius-md) !important;

    background:
        var(--compat-surface) !important;
}


/* =========================================================
   FORMS
   ========================================================= */

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

    border-radius:
        var(--compat-radius-sm) !important;

    background:
        rgba(255,255,255,.90) !important;

    color:
        var(--compat-text) !important;

    outline:
        none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


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

    box-shadow:
        0 0 0 4px
        rgba(64,84,178,.07) !important;
}


body.insightos-v2-page textarea{
    line-height:
        1.55;
}


/* =========================================================
   BUTTONS
   ========================================================= */

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

    transition:
        transform .18s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .18s
        cubic-bezier(.2,.8,.2,1);
}


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


/* =========================================================
   TABLES
   ========================================================= */

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

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    overflow:hidden;

    border:
        1px solid
        var(--compat-line) !important;

    border-radius:
        20px !important;

    background:
        var(--compat-surface) !important;
}


body.insightos-v2-page th{
    background:
        var(--compat-soft) !important;

    color:
        #575c65 !important;

    font-size:
        7px;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


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

    border-color:
        var(--compat-line) !important;
}


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


/* =========================================================
   BADGES
   ========================================================= */

body.insightos-v2-page
:is(
    .badge,
    .tag,
    .pill,
    .chip,
    .status
){
    border-radius:
        999px !important;
}


/* =========================================================
   MODALS
   ========================================================= */

body.insightos-v2-page
:is(
    .modal-content,
    .dialog,
    .popup,
    .popover
){
    border:
        1px solid
        var(--compat-line) !important;

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

    background:
        rgba(255,255,255,.95) !important;

    box-shadow:
        var(--compat-shadow) !important;
}


/* =========================================================
   CODE / TERMINAL
   ========================================================= */

body.insightos-v2-page
:is(
    pre,
    code,
    .terminal,
    .console,
    .log
){
    border-radius:
        14px;
}


/* =========================================================
   PAGE HERO UPGRADE
   ========================================================= */

body.insightos-v2-page
:is(
    .hero,
    .page-header,
    .page-title,
    .title-area,
    .heading
){
    border-color:
        var(--compat-line);
}


/* =========================================================
   LINKS
   ========================================================= */

body.insightos-v2-page a{
    text-underline-offset:
        3px;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

body.insightos-v2-page *{
    scrollbar-width:
        thin;

    scrollbar-color:
        #c8cad2
        transparent;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

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


    body.insightos-v2-page
    :is(
        .container,
        .content,
        .page-content,
        .main-content,
        main
    ){
        max-width:
            100%;
    }


    body.insightos-v2-page table{
        display:block;

        overflow-x:auto;

        white-space:
            nowrap;
    }
}


@media(max-width:600px){

    body.insightos-v2-page
    :is(
        .grid,
        .cards,
        .card-grid,
        .stats-grid,
        .metrics-grid
    ){
        grid-template-columns:
            1fr !important;
    }


    body.insightos-v2-page h1{
        overflow-wrap:
            anywhere;
    }
}