:root {
    --hnt-green: #00633f;
    --hnt-green-dark: #004d31;
    --hnt-green-light: #e6f3ed;
    --hnt-red: #e21a22;
    --hnt-surface: #f6f8f7;
    --hnt-border: #dde5e1;
    --hnt-text: #1d2924;
    --hnt-muted: #64736c;
    --hnt-sidebar-width: 270px;
    --hnt-sidebar-collapsed: 82px;
    --bs-primary: var(--hnt-green);
    --bs-primary-rgb: 0, 99, 63;
    --bs-success: var(--hnt-green);
    --bs-success-rgb: 0, 99, 63;
    --bs-link-color: var(--hnt-green);
    --bs-link-hover-color: var(--hnt-green-dark);
    --bs-body-color: var(--hnt-text);
    --bs-body-bg: var(--hnt-surface);
}

body { color: var(--hnt-text); }
a { color: var(--hnt-green); }
.btn-primary { --bs-btn-bg: var(--hnt-green); --bs-btn-border-color: var(--hnt-green); --bs-btn-hover-bg: var(--hnt-green-dark); --bs-btn-hover-border-color: var(--hnt-green-dark); --bs-btn-active-bg: var(--hnt-green-dark); }
.form-control:focus, .form-check-input:focus { border-color: #57a582; box-shadow: 0 0 0 .25rem rgba(0, 99, 63, .15); }
.form-check-input:checked { background-color: var(--hnt-green); border-color: var(--hnt-green); }

.app-shell { display: flex; width: 100%; min-height: 100vh; background: var(--hnt-surface); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; width: var(--hnt-sidebar-width); flex-direction: column; overflow: hidden; background: #fff; border-right: 1px solid var(--hnt-border); transition: width .22s ease; }
.sidebar-brand { display: flex; height: 80px; padding: 17px 22px; align-items: center; justify-content: center; border-bottom: 1px solid var(--hnt-border); }
.brand-horizontal { width: 100%; height: 46px; object-fit: contain; }
.brand-icon { display: none; width: 48px; height: 48px; object-fit: contain; }
.sidebar-nav { display: grid; gap: 6px; padding: 18px 12px; }
.nav-item { display: flex; min-height: 48px; gap: 12px; padding: 11px 14px; align-items: center; color: #405049; border-radius: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-item:hover { color: var(--hnt-green-dark); background: var(--hnt-green-light); }
.nav-item.active { color: #fff; background: var(--hnt-green); box-shadow: 0 4px 12px rgba(0, 99, 63, .18); }
.nav-item:focus-visible, .nav-group-toggle:focus-visible { outline: 3px solid rgba(226, 26, 34, .45); outline-offset: 2px; }
.nav-symbol { display: inline-grid; width: 24px; flex: 0 0 24px; place-items: center; font-size: 1.25rem; }
.nav-group { display: grid; gap: 4px; }
.nav-group-toggle { display: flex; width: 100%; min-height: 46px; gap: 12px; padding: 10px 14px; align-items: center; color: #405049; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 700; text-align: left; white-space: nowrap; }
.nav-group-toggle:hover, .nav-group.active > .nav-group-toggle { color: var(--hnt-green-dark); background: var(--hnt-green-light); }
.nav-chevron { margin-left: auto; transition: transform .18s ease; }
.nav-group.expanded .nav-chevron { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 4px; padding-left: 15px; }
.nav-submenu[hidden] { display: none; }
.nav-child { min-height: 42px; padding-block: 8px; font-size: .94rem; }
.nav-child.active { border-left: 4px solid var(--hnt-red); }
.sidebar-footer { margin-top: auto; padding: 18px 25px; color: var(--hnt-muted); border-top: 1px solid var(--hnt-border); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.main-column { width: calc(100% - var(--hnt-sidebar-width)); min-width: 0; margin-left: var(--hnt-sidebar-width); transition: width .22s ease, margin-left .22s ease; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; height: 80px; padding: 0 20px; align-items: center; gap: 14px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--hnt-border); }
.sidebar-toggle { width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--hnt-green); background: var(--hnt-green-light); border-radius: 10px; font-size: 1.2rem; }
.sidebar-toggle:hover { color: #fff; background: var(--hnt-green); }
.topbar-title { color: var(--hnt-green-dark); font-weight: 700; }
.account-button { display: flex; align-items: center; gap: 9px; color: var(--hnt-text); border: 1px solid var(--hnt-border); border-radius: 999px; }
.brand-avatar { width: 31px; height: 31px; border-radius: 50%; object-fit: contain; }
.content-fluid { width: 100%; padding: 24px; }
.card { border: 1px solid var(--hnt-border) !important; border-radius: 14px; box-shadow: 0 4px 18px rgba(22, 50, 38, .06) !important; }
.erp-body.sidebar-collapsed .sidebar { width: var(--hnt-sidebar-collapsed); }
.erp-body.sidebar-collapsed .main-column { width: calc(100% - var(--hnt-sidebar-collapsed)); margin-left: var(--hnt-sidebar-collapsed); }
.erp-body.sidebar-collapsed .brand-horizontal, .erp-body.sidebar-collapsed .nav-label, .erp-body.sidebar-collapsed .nav-submenu { display: none; }
.erp-body.sidebar-collapsed .brand-icon { display: block; }
.erp-body.sidebar-collapsed .sidebar-brand { padding-inline: 12px; }
.erp-body.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 10px; }
.erp-body.sidebar-collapsed .nav-group-toggle { justify-content: center; padding-inline: 10px; }
.mobile-sidebar { --bs-offcanvas-width: min(310px, 88vw); }
.mobile-sidebar .offcanvas-header { min-height: 80px; border-bottom: 1px solid var(--hnt-border); }
.mobile-brand { width: 210px; max-width: 68vw; height: 50px; object-fit: contain; }

.auth-body { min-height: 100vh; background: var(--hnt-surface); }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 42%) 1fr; }
.auth-brand-panel { position: relative; display: flex; padding: clamp(36px, 6vw, 84px); flex-direction: column; justify-content: center; color: #fff; overflow: hidden; background: var(--hnt-green-dark); }
.auth-brand-panel::after { position: absolute; width: 240px; height: 240px; right: -100px; bottom: -100px; content: ''; border: 34px solid rgba(226,26,34,.65); border-radius: 50%; }
.auth-brand-logo { width: min(270px, 72%); aspect-ratio: 1; margin-bottom: 36px; border: 8px solid rgba(255,255,255,.14); border-radius: 50%; object-fit: contain; background: #fff; }
.auth-eyebrow { margin-bottom: 8px; color: #a9d7c2; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.auth-brand-panel h1 { max-width: 560px; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 750; }
.auth-intro { max-width: 560px; color: #d5e9df; font-size: 1.05rem; }
.auth-content { display: flex; padding: 24px; align-items: center; justify-content: center; }
.auth-card { width: min(100%, 460px); padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--hnt-border); border-radius: 16px; box-shadow: 0 14px 36px rgba(26, 57, 43, .1); }
.auth-card .row > * { width: 100%; }
.auth-card .card { border: 0 !important; box-shadow: none !important; }
.auth-card .card-body { padding: 0 !important; }
.auth-mobile-brand { display: none; }
.auth-title { color: var(--hnt-green-dark); font-weight: 750; }
.brand-accent { width: 44px; height: 4px; margin: 12px 0 26px; background: var(--hnt-red); border-radius: 99px; }

@media (max-width: 991.98px) {
    .main-column { width: 100%; margin-left: 0; }
    .topbar { height: 68px; padding-inline: 16px; }
    .content-fluid { padding: 20px 16px; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand-panel { display: none; }
    .auth-content { min-height: 100vh; flex-direction: column; }
    .auth-mobile-brand { display: block; width: min(300px, 78vw); margin-bottom: 22px; }
    .auth-mobile-brand img { width: 100%; height: 68px; object-fit: contain; }
}
@media (max-width: 575.98px) {
    .topbar-title { display: none; }
    .content-fluid { padding: 16px 12px; }
    .auth-content { padding: 18px 14px; }
    .auth-card { padding: 24px 20px; }
}