:root{
    /* Brand green scale — light, airy, enterprise-friendly */
    --g-25:  #f7fdfa;
    --g-50:  #eafaf1;
    --g-100: #d8f3e3;
    --g-200: #b4e8cb;
    --g-300: #86d6ab;
    --g-400: #57c187;
    --g-500: #2fa96b;   /* primary accent */
    --g-600: #228a57;
    --g-700: #1c6f47;
    --g-800: #17583a;
    --g-900: #123f2a;

    /* Semantic status colors (kept distinct from brand green for clarity) */
    --status-excellent: #1f9d55;
    --status-good:      #1fa3c2;
    --status-warning:   #e2a220;
    --status-critical:  #d6483f;

    /* Neutrals & surfaces */
    --ink:        #16231d;
    --muted:      #64766d;
    --line:       #dfeee6;
    --surface:    #ffffff;
    --surface-alt:#f4faf7;

    /* Elevation */
    --shadow-sm: 0 2px 8px rgba(18,63,42,.06);
    --shadow:    0 12px 32px rgba(18,63,42,.08);
    --shadow-lg: 0 24px 56px rgba(18,63,42,.16);

    /* Shape & motion */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 20px;
    --transition: .18s ease;

    /* Backwards-compatible aliases (kept in case referenced elsewhere) */
    --green-950: var(--g-900);
    --green-900: var(--g-800);
    --green-800: var(--g-700);
    --green-700: var(--g-600);
    --green-600: var(--g-500);
    --green-500: var(--g-400);
    --green-100: var(--g-100);
    --green-50:  var(--g-50);
}

/* ---------- 2. Base / reset ---------- */
*{box-sizing:border-box}
html{font-size:16px; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

body{
    margin:0;
    background:
        radial-gradient(circle at 100% 0%, rgba(47,169,107,.05), transparent 40%),
        linear-gradient(160deg, var(--g-25) 0%, #f6fbf8 45%, #fbfefc 100%);
    color:var(--ink);
    font-family:Sarabun, system-ui, -apple-system, sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

a{color:var(--g-700)}
a:hover{color:var(--g-800)}

/* Slim, on-brand scrollbar */
*{scrollbar-width:thin; scrollbar-color:var(--g-300) transparent}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g-300); border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--g-400)}

/* Consistent, visible focus ring for keyboard users */
a:focus-visible,button:focus-visible,.btn:focus-visible,
.form-control:focus-visible,.form-select:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--g-500);
    outline-offset:2px;
}

/* ---------- 3. Layout ---------- */

/* Topbar */
.app-topbar{
    height:72px;
    background:linear-gradient(115deg, var(--g-800) 0%, var(--g-600) 55%, var(--g-400) 100%);
    box-shadow:0 4px 20px rgba(18,63,42,.18);
    position:sticky; top:0; z-index:1030;
}

/* กล่องโลโก้ */
.brand-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    background:linear-gradient(145deg,#ffffff,#f5f7fa);
    border:2px solid #198754;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(25,135,84,.15);
    overflow:hidden;
    transition:.25s ease;
}

.brand-mark:hover{
    transform:scale(1.05);
    box-shadow:0 10px 24px rgba(25,135,84,.25);
}

.brand-logo{
    width:48px;
    height:48px;
    object-fit:contain;
}

/* มือถือ */
@media (max-width:768px){
    .brand-mark{
        width:56px;
        height:56px;
        border-radius:14px;
    }

    .brand-logo{
        width:40px;
        height:40px;
    }
}

.brand-title{
    color:#fff; font-weight:700; font-size:.98rem; line-height:1.2;
    text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.brand-subtitle{
    color:rgba(255,255,255,.86); font-size:.74rem;
    text-shadow:0 1px 2px rgba(0,0,0,.14);
}
.brand-link, .brand-link:hover, .brand-link:focus{color:#fff; text-decoration:none}

/* App shell */
.app-layout{display:flex; min-height:calc(100vh - 72px)}

/* Sidebar — light mint surface instead of a dark panel */
.app-sidebar{
    width:276px; flex:none;
    padding:20px 14px;
    background:linear-gradient(180deg, var(--g-50) 0%, #ffffff 70%);
    border-right:1px solid var(--line);
    color:var(--ink);
}
.app-sidebar nav{display:grid; gap:4px}
.nav-section{
    font-size:.68rem; font-weight:700; letter-spacing:.08em;
    color:var(--muted); text-transform:uppercase;
    margin:18px 12px 6px;
}
.app-sidebar a{
    display:flex; align-items:center; gap:12px;
    color:var(--g-800);
    text-decoration:none;
    border-radius:13px;
    padding:11px 13px;
    font-size:.94rem;
    font-weight:500;
    transition:background var(--transition), color var(--transition), box-shadow var(--transition);
}
.app-sidebar a i{font-size:1.1rem; width:20px; text-align:center; color:var(--g-600)}
.app-sidebar a:hover{
    background:var(--g-100);
    color:var(--g-900);
}
.app-sidebar a.active{
    color:#fff;
    background:linear-gradient(90deg, var(--g-600), var(--g-500));
    box-shadow:0 6px 16px rgba(34,138,87,.28);
}
.app-sidebar a.active i{color:#fff}

/* Content */
.app-content{width:calc(100% - 276px); padding:28px; max-width:1800px}

/* Offcanvas (mobile menu) mirrors the sidebar styling */
.offcanvas{background:#ffffff; color:var(--ink)}
.offcanvas .btn-close{filter:none}
.offcanvas .app-sidebar{width:100%; padding:10px 0; background:none; border-right:0}

.user-menu{color:#fff; text-decoration:none; font-size:.9rem}
.user-menu:hover{color:#fff}
.notification-link{color:#fff; text-decoration:none}

/* ---------- 4. Components ---------- */

/* Cards */
.card, .card-kpi{
    background:rgba(255,255,255,.97);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    transition:box-shadow var(--transition), transform var(--transition);
}
.card-kpi{border:1px solid var(--line)}
.card-kpi:hover{box-shadow:var(--shadow-lg); transform:translateY(-1px)}

.metric-card{overflow:hidden; position:relative}
.metric-card:after{
    content:"";
    position:absolute; width:95px; height:95px; right:-28px; top:-35px;
    background:radial-gradient(circle, rgba(47,169,107,.20), transparent 70%);
}

.page-heading{font-size:1.42rem; font-weight:700; letter-spacing:-.02em; color:var(--g-900)}
.page-subtitle{color:var(--muted); font-size:.9rem}

/* Buttons */
.btn{border-radius:11px; font-weight:600; padding:.52rem .9rem; transition:transform var(--transition), box-shadow var(--transition), background var(--transition)}
.btn-kpi{
    border:0; color:#fff;
    background:linear-gradient(125deg, var(--g-700), var(--g-500));
    box-shadow:0 7px 16px rgba(34,138,87,.24);
}
.btn-kpi:hover, .btn-kpi:focus{
    color:#fff;
    background:linear-gradient(125deg, var(--g-800), var(--g-600));
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(34,138,87,.3);
}
.btn-kpi:active{transform:translateY(0)}
.btn-outline-success{border-color:var(--g-600); color:var(--g-700)}
.btn-outline-success:hover{background:var(--g-700); border-color:var(--g-700); color:#fff}

/* Forms */
.form-control, .form-select{
    border-radius:11px; border-color:#d7e6dc;
    padding:.58rem .75rem;
    transition:border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus{
    border-color:var(--g-400);
    box-shadow:0 0 0 .22rem rgba(47,169,107,.16);
}
.form-control-color{padding:.3rem; border-radius:9px}
.form-label{font-weight:600; font-size:.88rem; margin-bottom:.35rem; color:var(--g-900)}
.form-text{color:var(--muted)}
.form-check-input:checked{background-color:var(--g-600); border-color:var(--g-600)}
.form-check-input:focus{border-color:var(--g-400); box-shadow:0 0 0 .22rem rgba(47,169,107,.16)}
.input-group-text{background:var(--surface-alt); border-color:#d7e6dc; color:var(--muted)}

/* KPI color-threshold fields: tint the tier label by its data-tier */
.tier-label{position:relative; padding-left:16px}
.tier-label:before{
    content:""; position:absolute; left:0; top:.35em;
    width:9px; height:9px; border-radius:50%;
    background:var(--muted);
}
.tier-label[data-tier="excellent"]:before{background:var(--status-excellent)}
.tier-label[data-tier="good"]:before{background:var(--status-good)}
.tier-label[data-tier="warning"]:before{background:var(--status-warning)}
.tier-label[data-tier="critical"]:before{background:var(--status-critical)}

/* Tables */
.table{--bs-table-bg:transparent; --bs-table-hover-bg:#f0faf5; margin-bottom:0}
.table-kpi thead th{
    color:#eafff2;
    background:linear-gradient(110deg, var(--g-800), var(--g-600));
    border:0; white-space:nowrap; padding:.78rem;
    font-weight:600;
}
.table-kpi td{border-color:#edf3ef; padding:.78rem; vertical-align:middle}
.table-responsive{border-radius:13px}

/* Badges */
.badge{font-weight:600; border-radius:999px; padding:.42em .68em}
.badge-excellent{background:var(--status-excellent); color:#fff}
.badge-good{background:var(--status-good); color:#fff}
.badge-warning{background:var(--status-warning); color:#40300a}
.badge-critical{background:var(--status-critical); color:#fff}

/* Alerts */
.alert{border:0; border-radius:14px; box-shadow:0 8px 20px rgba(20,58,40,.06)}
.alert-light{background:var(--surface-alt); border:1px solid var(--line) !important; color:var(--ink)}

/* Dropdown menu */
.dropdown-menu{
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:.4rem;
}
.dropdown-item{border-radius:9px; padding:.5rem .7rem; font-size:.9rem}
.dropdown-item:hover, .dropdown-item:focus{background:var(--g-50); color:var(--g-800)}
.dropdown-item-text{font-size:.82rem}

/* Modals */
.modal-content{border-radius:18px; border:0; box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--line)}
.modal-footer{border-top:1px solid var(--line)}

/* Tabs */
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{
    color:var(--muted); font-weight:600; border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    padding:.6rem .9rem;
}
.nav-tabs .nav-link:hover{color:var(--g-700); border-color:var(--g-200)}
.nav-tabs .nav-link.active{
    color:var(--g-800);
    background:none;
    border-color:var(--g-600);
}

/* Empty-state helper (optional, additive — use where a list/table has no rows) */
.empty-state{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; padding:2.5rem 1rem; color:var(--muted); text-align:center;
}
.empty-state i{font-size:1.8rem; color:var(--g-300)}

/* ---------- 5. Login page ---------- */
.login-page main{display:grid; place-items:center}
.login-page{
    background:
        radial-gradient(circle at 15% 15%, rgba(47,169,107,.20), transparent 32%),
        radial-gradient(circle at 90% 85%, rgba(87,193,135,.18), transparent 38%),
        linear-gradient(150deg, var(--g-50) 0%, #eef9f3 45%, var(--g-100) 100%);
}
.login-card{
    border-radius:28px !important;
    box-shadow:0 28px 70px rgba(18,63,42,.16) !important;
    border:1px solid var(--line);
}
.login-card .brand-mark{
    background:linear-gradient(135deg, var(--g-600), var(--g-400));
    color:#fff;
    box-shadow:0 10px 22px rgba(34,138,87,.28);
}

/* ---------- 6. Mobile dock & responsive ---------- */
.mobile-only{display:none}
.mobile-dock{display:none}

@media (max-width:991.98px){
    .app-sidebar{display:none}
    .app-content{width:100%; padding:20px 16px 84px}
    .mobile-only{display:inline-flex}
    .app-topbar{height:64px}
    .brand-title{font-size:.86rem}
    .brand-subtitle{display:none}

    .mobile-dock{
        position:fixed; display:flex; justify-content:space-around; align-items:center;
        bottom:0; left:0; right:0; height:65px;
        background:rgba(255,255,255,.97);
        border-top:1px solid var(--line);
        z-index:1025;
        box-shadow:0 -5px 20px rgba(18,63,42,.08);
    }
    .mobile-dock a{font-size:.68rem; color:#597068; text-decoration:none; text-align:center; display:grid; gap:2px}
    .mobile-dock i{font-size:1.2rem}
    .mobile-dock a.active{color:var(--g-700); font-weight:700}

    .card, .card-kpi{border-radius:15px}
    .table-kpi{min-width:680px}
    .page-heading{font-size:1.2rem}
}

@media (max-width:575.98px){
    .app-content{padding:16px 12px 82px}
    .app-topbar .container-fluid{padding:0 12px !important}
    .brand-mark{width:36px; height:36px; border-radius:12px}
    .brand-title{max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .user-name{display:none}
    .btn{padding:.48rem .72rem}
    .modal-dialog{margin:.7rem}
    .modal-content{border-radius:18px}
    .row.g-3{--bs-gutter-y:.8rem}
}

/* ---------- 7. Print (useful for exporting KPI reports) ---------- */
@media print{
    .app-topbar, .app-sidebar, .mobile-dock, .offcanvas,
    .btn, .mobile-only, form button, .no-print{display:none !important}
    .app-layout{display:block}
    .app-content{width:100%; padding:0; max-width:none}
    body{background:#fff}
    .card, .card-kpi{box-shadow:none; border:1px solid #dfeee6}
}