/* =============================================================================
 * FILE: base.css
 * TÊN TIẾNG VIỆT: Thiết lập nền, reset và quy tắc HTML chung
 * PHẠM VI: CSS nền tảng dùng chung; không chứa nghiệp vụ riêng của app.
 * ============================================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;

    min-height:100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(35,59,93,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.65),
            transparent 35%
        ),
        var(--bg-main);

    color:var(--text-main);

    font-family:
        "Segoe UI",
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

    font-size:14px;
    line-height:1.5;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* TYPOGRAPHY */

h1,h2,h3,h4,h5,h6{
    margin:0;
    color:var(--navy);
    font-weight:900;
    letter-spacing:-.02em;
}

h1{
    font-size:34px;
}

h2{
    font-size:28px;
}

h3{
    font-size:24px;
}

h4{
    font-size:20px;
}

h5{
    font-size:18px;
}

h6{
    font-size:16px;
}

p{
    margin:0;
}

small{
    color:var(--muted);
}

/* LINKS */

a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition-fast);
}

a:hover{
    text-decoration:none;
}

/* IMAGES */

img{
    max-width:100%;
    display:block;
}

/* LISTS */

ul,
ol{
    margin:0;
    padding-left:18px;
}

/* SELECTION */

::selection{
    background:rgba(35,59,93,.18);
    color:var(--navy);
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:rgba(35,59,93,.04);
}

::-webkit-scrollbar-thumb{
    background:rgba(35,59,93,.18);
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(35,59,93,.30);
}

/* LAYOUT HELPERS */

.page-wrapper{
    margin-left:var(--sidebar-width);
    min-height:100vh;
    padding:24px;
}

.page-title{
    color:var(--navy);
    font-size:28px;
    font-weight:950;
    margin-bottom:6px;
    letter-spacing:-.03em;
}

.page-subtitle{
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

/* CONTENT WIDTH */

.container-fluid{
    padding-left:0;
    padding-right:0;
}

/* DIVIDERS */

.divider{
    height:1px;
    width:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(35,59,93,.12),
            transparent
        );
}

/* BADGE BASE */

.badge{
    font-weight:800;
    border-radius:999px;
    padding:.5rem .8rem;
}

/* TEXT COLORS */

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

.text-primary{
    color:var(--navy) !important;
}

.text-success{
    color:var(--success) !important;
}

.text-danger{
    color:var(--danger) !important;
}

.text-warning{
    color:var(--warning-dark) !important;
}

.text-info{
    color:var(--info) !important;
}

/* GLASS PANEL */

.glass-panel{
    border:1px solid rgba(255,255,255,.72);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.52)
        );

    backdrop-filter:blur(26px) saturate(180%);
    -webkit-backdrop-filter:blur(26px) saturate(180%);

    box-shadow:
        var(--shadow-card),
        inset 0 1px 0 rgba(255,255,255,.90);

    border-radius:var(--radius-xl);
}

/* LOADING */

.loading-spinner{
    width:38px;
    height:38px;

    border-radius:50%;

    border:3px solid rgba(35,59,93,.15);
    border-top-color:var(--navy);

    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

/* UTILITIES */

.cursor-pointer{
    cursor:pointer;
}

.w-fit{
    width:fit-content;
}

.rounded-xl{
    border-radius:var(--radius-xl) !important;
}

.rounded-2xl{
    border-radius:var(--radius-2xl) !important;
}

.shadow-soft{
    box-shadow:var(--shadow-soft) !important;
}

.border-soft{
    border:1px solid rgba(35,59,93,.10) !important;
}

/* RESPONSIVE */

@media (max-width:992px){

    .page-wrapper{
        padding:18px;
    }

    h1{
        font-size:28px;
    }

    h2{
        font-size:24px;
    }

    .page-title{
        font-size:24px;
    }
}

@media (max-width:768px){

    body{
        font-size:13px;
    }

    .page-wrapper{
        margin-left:0;
        padding:14px;
    }

    h1{
        font-size:24px;
    }

    h2{
        font-size:21px;
    }

    .page-title{
        font-size:22px;
    }

    .page-subtitle{
        font-size:13px;
    }
}