/* =========================================================
SENTRIFOX DESIGN SYSTEM - BASE
========================================================= */

:root{

    /* Primary Brand */
    --accent:#02C39A;
    --accent-hover:#00A884;

    /* Layout Colors */
    --sidebar-bg:#02C39A;
    --background:#F6F8F7;
    --content-bg:#FFFFFF;

    /* Text */
    --text-primary:#0F172A;
    --text-secondary:#6B7280;

    /* Borders */
    --border-light:rgba(0,0,0,0.06);

    /* Glass effect */
    --glass-bg:rgba(255,255,255,0.65);
    --glass-border:rgba(255,255,255,0.25);
    --glass-blur:14px;

    /* Radius */
    --radius-lg:16px;
    --radius-md:12px;
    --radius-sm:8px;

    /* Shadow */
    --shadow-soft:0 10px 25px rgba(0,0,0,0.05);

    /* Sidebar */
    --sidebar-width:200px;
    --sidebar-collapsed:80px;

}

/* =========================================================
RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    min-height:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    min-height:100vh;
    min-height:100dvh;
    min-height:-webkit-fill-available;
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", sans-serif;
    background:var(--background);
    background-attachment:fixed;
    color:var(--text-primary);
    overflow-x:hidden;
    -webkit-tap-highlight-color:rgba(2, 195, 154, 0.15);
}

body.has-sidebar-open{
    overflow:hidden;
}

@supports (overflow:clip){
    body.has-sidebar-open{
        overflow:clip;
    }
}

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

::-webkit-scrollbar{
    width:6px;
}

::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,0.15);
    border-radius:10px;
}

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

a{
    text-decoration:none;
    color:inherit;
}

/* =========================================================
BUTTON RESET
========================================================= */

button{
    border:none;
    outline:none;
    cursor:pointer;
    font-family:inherit;
}

/* =========================================================
INPUTS
========================================================= */

input,
select,
textarea{

    font-family:inherit;
    padding:10px 14px;

    border-radius:8px;
    border:1px solid var(--border-light);

    transition:all .2s ease;

}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(2,195,154,0.15);

}

/* =========================================================
UTILITIES
========================================================= */

.flex{
    display:flex;
}

.grid{
    display:grid;
}

.center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.space-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.text-muted{
    color:var(--text-secondary);
}

.card{
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    padding:20px;
}