@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

/* Mint product family. Status/chart colours stay separate; solid actions meet WCAG AA. */
:root {
    --mint-font: Inter, 'Noto Sans Thai', Tahoma, sans-serif;
    --mint-heading-font: Outfit, 'Noto Sans Thai', Tahoma, sans-serif;
    --mint-brand-gradient: linear-gradient(120deg, #17ae83 5%, #3b83ef 94%);
    --mint-radius: 16px;
    --mint-shadow: 0 12px 35px rgba(20, 38, 62, .055);
    --mint-primary: #13795b;
    --mint-primary-hover: #0d6248;
    --mint-primary-soft: #eef9f4;
    --mint-primary-border: #d8eee6;
    --mint-blue: #3068aa;
    --mint-blue-dark: #244f82;
    --mint-ink: #111827;
    --mint-muted: #637083;
    --mint-canvas: #f7fafc;
    --mint-surface: #ffffff;
    --mint-border: #e5eaf0;
    --mint-focus: rgba(19, 121, 91, .18);
    --mint-accent-gradient: var(--mint-brand-gradient);
    --mint-hero-gradient: linear-gradient(120deg, #142b3b, #173c50 58%, #1b5260);
    --brand-green: var(--mint-primary);
    --brand-green-dark: var(--mint-primary-hover);
    --brand-blue: var(--mint-blue);
    --brand-blue-dark: var(--mint-blue-dark);
    --brand-gradient: var(--mint-accent-gradient);
}
body:is([data-sidebar], .landing-page, .auth-page) {
    font-family: var(--mint-font);
    color: var(--mint-ink);
}
body[data-sidebar] { background-color: var(--mint-canvas); }
body:is([data-sidebar], .landing-page, .auth-page) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--mint-heading-font);
    line-height: 1.45;
}
body:is([data-sidebar], .landing-page, .auth-page) :is(input, select, textarea, button, .btn) {
    font-family: var(--mint-font);
}
body:is([data-sidebar], .landing-page, .auth-page) :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--mint-primary);
    outline-offset: 3px;
}

/* Presentation only: leave sidebar widths, POS touch targets and document layouts intact. */
@media screen {
    body[data-sidebar=light] #page-topbar {
        background: rgba(255, 255, 255, .94);
        border-bottom: 1px solid var(--mint-border);
        box-shadow: 0 6px 24px rgba(20, 38, 62, .035);
        backdrop-filter: blur(16px);
    }
    body[data-sidebar=light] .vertical-menu { border-right: 1px solid var(--mint-border); }
    body[data-sidebar=light] #sidebar-menu { padding-inline: 10px; }
    body[data-sidebar=light] #sidebar-menu a { border-radius: 9px; }
    body[data-sidebar=light] #sidebar-menu a:hover {
        background: var(--mint-primary-soft);
        color: var(--mint-primary);
    }
    body[data-sidebar=light] #sidebar-menu .menu-title {
        color: var(--mint-muted);
        font-size: 11px;
        letter-spacing: .08em;
    }
    body[data-sidebar=light] .main-content .card {
        border: 1px solid var(--mint-border);
        border-radius: var(--mint-radius);
        box-shadow: var(--mint-shadow);
    }
    body[data-sidebar=light] :is(.dropdown-menu, .modal-content) {
        border: 1px solid var(--mint-border);
        border-radius: var(--mint-radius);
        box-shadow: var(--mint-shadow);
    }
    body[data-sidebar=light] :is(.form-control, .form-select) { border-radius: 9px; }
    body[data-sidebar=light] .footer { background: var(--mint-canvas); color: var(--mint-muted); }
}

.btn-primary, .btn-primary.dropdown-toggle {
    background: var(--mint-primary) !important;
    border-color: var(--mint-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: var(--mint-primary-hover) !important;
    border-color: var(--mint-primary-hover) !important;
    color: #fff !important;
}
.btn-outline-primary { color: var(--mint-primary) !important; border-color: var(--mint-primary) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background: var(--mint-primary) !important; color: #fff !important; }
.bg-primary, .badge-primary { background-color: var(--mint-primary) !important; }
.text-primary { color: var(--mint-primary) !important; }
.text-muted { color: var(--mint-muted) !important; }
.border-primary { border-color: var(--mint-primary) !important; }
a.text-primary:hover { color: var(--mint-primary-hover) !important; }
.page-link { color: var(--mint-primary) !important; }
.page-item.active .page-link { color: #fff !important; background: var(--mint-primary) !important; border-color: var(--mint-primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--mint-primary) !important; box-shadow: 0 0 0 3px var(--mint-focus) !important; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, .15) !important; }
.form-check-input:checked { background-color: var(--mint-primary); border-color: var(--mint-primary); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--mint-primary) !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--mint-primary) !important; }
body[data-sidebar=light] .vertical-menu { background: var(--mint-surface); }
body[data-sidebar=light] #sidebar-menu .mm-active > a,
body[data-sidebar=light] #sidebar-menu a.active { background: var(--mint-primary-soft); color: var(--mint-primary) !important; border-radius: 8px; }
body[data-sidebar=light] #sidebar-menu .mm-active > a i,
body[data-sidebar=light] #sidebar-menu a.active i { color: var(--mint-primary) !important; }
body[data-sidebar=colored] .vertical-menu, body[data-sidebar=colored] .navbar-brand-box { background: var(--mint-hero-gradient) !important; }

/* Public pages match MintERP/MintHRM exactly; transactional controls retain solid AA colours. */
body.landing-page, body.auth-page {
    --primary: #20b483;
    --primary-dark: #09896b;
    --green: #20b483;
    --green-dark: #09896b;
    --cyan: #4385ed;
    --blue: #4385ed;
    --text: var(--mint-ink);
    --muted: var(--mint-muted);
    --bg: var(--mint-canvas);
    --bg-section: var(--mint-surface);
    --bg-alt: var(--mint-canvas);
    --glass-border: var(--mint-border);
    --gradient: var(--mint-accent-gradient);
    --gradient-rev: var(--mint-accent-gradient);
    --gradient-hero: linear-gradient(180deg, #f7fafc 0%, #fff 42%, #f9fbfd 100%);
}
.navbar-public .nb-btn-register,
body.landing-page .navbar-public .nb-btn-register,
body.auth-page .navbar-public .nb-btn-register,
body.landing-page .btn-hero-primary,
body.landing-page .btn-cta,
body.landing-page .btn-price-choose.filled,
body.auth-page .btn-login,
body.auth-page .btn-register {
    background: var(--mint-brand-gradient); color: #fff; box-shadow: 0 10px 26px rgba(31, 165, 142, .22);
}
.navbar-public .nb-btn-register:hover,
body.landing-page .navbar-public .nb-btn-register:hover,
body.auth-page .navbar-public .nb-btn-register:hover,
body.landing-page .btn-hero-primary:hover,
body.landing-page .btn-cta:hover,
body.landing-page .btn-price-choose.filled:hover,
body.auth-page .btn-login:hover,
body.auth-page .btn-register:hover {
    background: var(--mint-brand-gradient);
    box-shadow: 0 14px 32px rgba(31, 137, 181, .28);
}
.navbar-public .nb-btn-login { border-color: var(--mint-primary-border); color: var(--mint-primary); }
.navbar-public .nb-btn-login:hover { background: var(--mint-primary-soft); color: var(--mint-primary) !important; }
body:is(.landing-page, .auth-page) .navbar-public .nb-link:hover,
body:is(.landing-page, .auth-page) .navbar-public .nb-link.nb-active { color: var(--mint-primary) !important; }
body.landing-page .hero-badge, body.landing-page .section-tag { background: var(--mint-primary-soft); border-color: var(--mint-primary-border); color: var(--mint-primary); }
body.landing-page .feature-icon { background: var(--mint-primary-soft); }
body.landing-page .hero-subtitle { color: var(--mint-muted); }
body.landing-page .cta-section, body.auth-page .left-panel { background: var(--mint-hero-gradient); }
body.landing-page .footer { background: var(--mint-ink); }
body.landing-page .btn-price-choose.outline { background: var(--mint-primary-soft); color: var(--mint-primary); border-color: var(--mint-primary-border); }
body.auth-page .form-header h2 { color: var(--mint-ink); }
body.auth-page .form-links a, body.auth-page .form-footer a { color: var(--mint-primary); }
body.auth-page .input-group-icon input:focus { border-color: var(--mint-primary); box-shadow: 0 0 0 3px var(--mint-focus); }
body.auth-page .input-group-icon input.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .15); }
body:is(.landing-page, .auth-page) .navbar-public {
    background: rgba(255, 255, 255, .84);
    border-bottom-color: var(--mint-border);
    box-shadow: 0 6px 24px rgba(20, 38, 62, .035);
}
body:is(.landing-page, .auth-page) .navbar-public .nb-brand img { height: 40px; }
.navbar-public .nb-brand-by {
    padding-left: 12px;
    border-left: 1px solid var(--mint-border);
    color: var(--mint-muted);
    font-size: 11px;
    white-space: nowrap;
}
.navbar-public .nb-mobile-menu { margin-top: 10px; border-top: 1px solid var(--mint-border); }
.navbar-public .nb-mobile-menu summary {
    padding: 12px 0;
    min-height: 44px;
    color: var(--mint-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.navbar-public .nb-mobile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-bottom: 8px; }
.navbar-public .nb-mobile-links .nb-link { min-height: 44px; display: flex; align-items: center; }
body:is(.landing-page, .auth-page) .navbar-public .nb-link { color: #4c596a !important; }
/* Same low-contrast grid and right-hand glow as the reference hero, not a tinted canvas. */
body.landing-page .hero-section::before {
    opacity: .28;
    background-image: linear-gradient(rgba(100, 116, 139, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 116, 139, .10) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
body.landing-page .hero-orb-1 {
    top: 2%;
    right: -11%;
    width: 78%;
    height: 96%;
    background: radial-gradient(ellipse at 32% 42%, rgba(61, 202, 160, .15), transparent 48%), radial-gradient(ellipse at 72% 55%, rgba(86, 151, 238, .13), transparent 54%);
    filter: blur(24px);
}
body.landing-page .hero-orb-2 { display: none; }
body.landing-page .hero-image-wrap::before { background: none; }
body.landing-page .hero-title { line-height: 1.28; }
body.landing-page .hero-image-wrap img { animation: none; filter: drop-shadow(0 22px 55px rgba(20, 38, 62, .12)); }
body.landing-page :is(.hero-badge, .section-tag) {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #188d72;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}
body.landing-page :is(.btn-hero-primary, .btn-hero-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 22px;
    font-size: 14px;
}
body.landing-page .feature-icon { background: #e8f8f1; }
body.landing-page .feature-icon i {
    background: none;
    color: #118e70;
    -webkit-text-fill-color: currentColor;
}
body.landing-page .hero-title .highlight { background-image: var(--mint-brand-gradient); }
body:is(.landing-page, .auth-page) .navbar-public .nb-brand-text { background-image: var(--mint-brand-gradient); }
body.auth-page .input-group-icon input { font-family: var(--mint-font); }

@media (max-width: 480px) {
    body:is(.landing-page, .auth-page) .navbar-public .nb-brand img { height: 30px; }
    body:is(.landing-page, .auth-page) .navbar-public :is(.nb-btn-login, .nb-btn-register) {
        padding: 10px;
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body:is([data-sidebar], .landing-page, .auth-page) { scroll-behavior: auto; }
    body:is(.landing-page, .auth-page) :is(.btn-hero-primary, .btn-cta, .btn-price-choose, .feature-card, .price-card-preview, .nb-btn-register) {
        transition: none;
        transform: none;
    }
    body.landing-page .tech-scroll-track { animation: none; }
}