/* Modern neutral interface overrides */
:root {
    --ui-bg: #f5f6f4;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f0f2ef;
    --ui-border: #e1e5df;
    --ui-border-strong: #d2d8d0;
    --ui-text: #17201c;
    --ui-muted: #69736d;
    --ui-accent: #315c48;
    --ui-accent-dark: #244536;
    --ui-accent-soft: #e9f0ec;
    --ui-sidebar: #18211d;
    --ui-sidebar-muted: #9ca8a1;
    --ui-danger: #b54747;
    --ui-radius: 12px;
    --ui-shadow: 0 1px 2px rgba(21, 31, 26, .04), 0 10px 30px rgba(21, 31, 26, .05);
}

body, button, input, select, textarea { font-family: "HKGrotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.admin-body { background: var(--ui-bg); color: var(--ui-text); }
.admin-body .page-content { background: var(--ui-bg); padding-top: calc(70px + 1.75rem); }
.admin-body .card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: none; }
.admin-body .card-header { background: transparent; border-bottom-color: var(--ui-border); padding: 1.15rem 1.25rem; }
.admin-body .card-body { padding: 1.25rem; }
.admin-body .form-control, .admin-body .form-select, .admin-body .select2-container--default .select2-selection--single {
    min-height: 42px; border-color: var(--ui-border-strong); border-radius: 8px; background-color: var(--ui-surface); color: var(--ui-text);
}
.admin-body .form-control:focus, .admin-body .form-select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(49, 92, 72, .11); }
.admin-body .form-label { color: #46514b; font-weight: 600; }
.admin-body .btn { border-radius: 8px; font-weight: 600; box-shadow: none; }
.admin-body .btn-success, .admin-body .btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); }
.admin-body .btn-success:hover, .admin-body .btn-primary:hover { background: var(--ui-accent-dark); border-color: var(--ui-accent-dark); }
.admin-body .table { color: var(--ui-text); }
.admin-body .table > :not(caption) > * > * { border-bottom-color: var(--ui-border); padding: .85rem .75rem; }
.admin-body .table thead th { background: #f2f4f1; color: #56615b; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-body .pagination .page-link { border-color: var(--ui-border); color: var(--ui-text); }
.admin-body .pagination .active > .page-link { background: var(--ui-accent); border-color: var(--ui-accent); color: white; }

/* App shell */
html[data-layout="vertical"] body.admin-body .app-menu.navbar-menu {
    background-color: var(--ui-sidebar) !important;
    background-image: none !important;
    border-right: 0;
    width: 270px;
}
html[data-layout="vertical"] body.admin-body .navbar-brand-box {
    background-color: var(--ui-sidebar) !important;
    height: 70px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
}
.admin-body .navbar-brand-box .logo { line-height: normal; }
.admin-body .navbar-brand-box .logo-lg { display: flex; align-items: center; gap: 10px; }
.admin-body .navbar-brand-box .logo-lg img { max-width: 92px; object-fit: contain; }
.sidebar-brand-name { color: #f5f7f5; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.admin-body .navbar-menu .navbar-nav { padding: 14px 12px 30px; }
.admin-body .navbar-menu .navbar-nav .nav-link { border-radius: 8px; color: #bac4be; margin: 2px 0; padding: .72rem .8rem; }
.admin-body .navbar-menu .navbar-nav .nav-link i { color: #8f9c95; font-size: 1.15rem; }
.admin-body .navbar-menu .navbar-nav .nav-link:hover { color: white; background: rgba(255,255,255,.055); }
.admin-body .navbar-menu .navbar-nav .nav-link:hover i { color: #dce5df; }
.admin-body .navbar-menu .navbar-nav .nav-link.active, .admin-body .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] { background: rgba(126, 174, 147, .14); color: #eef7f1; }
.admin-body .navbar-menu .navbar-nav .nav-link.active i, .admin-body .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] i { color: #a8cdb9; }
.admin-body .navbar-menu .navbar-nav .menu-title { color: #6f7c75; font-size: .66rem; letter-spacing: .12em; padding: 18px 12px 8px; }
.admin-body .navbar-menu .navbar-nav .nav-sm .nav-link { color: var(--ui-sidebar-muted); padding: .5rem .75rem .5rem 3rem; }
.admin-body #page-topbar { left: 270px; height: 70px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ui-border); box-shadow: none; backdrop-filter: blur(12px); }
.admin-body .navbar-header { height: 70px; padding: 0 24px; }
.admin-body .main-content { margin-left: 270px; }
.topbar-page-title { flex-direction: column; justify-content: center; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--ui-border); }
.topbar-page-title span { color: var(--ui-muted); font-size: .68rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.topbar-page-title strong { color: var(--ui-text); font-size: .94rem; margin-top: 4px; }
.warehouse-switcher { background: var(--ui-surface-muted); border: 1px solid var(--ui-border); color: #3d4942; }
.warehouse-switcher:hover, .warehouse-switcher:focus { background: var(--ui-border); color: var(--ui-text); }
.admin-body .topbar-user { background: transparent; }
.admin-body .header-profile-user { width: 34px; height: 34px; }
.user-role-text { color: var(--ui-muted); font-size: .68rem; line-height: 1; }
.admin-body .dropdown-menu { border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow); padding: .5rem; }
.admin-body .dropdown-item { border-radius: 7px; }

/* Login */
.auth-body { margin: 0; background: #f4f5f2; color: var(--ui-text); }
.modern-auth { display: grid; grid-template-columns: minmax(380px, .92fr) minmax(480px, 1.08fr); min-height: 100vh; }
.auth-intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 48px 56px; background: var(--ui-sidebar); color: white; }
.auth-intro::after { content: ""; position: absolute; right: -130px; bottom: -180px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 1.05rem; font-weight: 700; }
.auth-brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.08); }
.auth-brand-mark img { width: 30px; height: 30px; object-fit: contain; }
.auth-brand-mark span { font-size: .82rem; letter-spacing: .04em; }
.auth-intro-copy { position: relative; z-index: 1; max-width: 540px; }
.auth-eyebrow { display: block; margin-bottom: 14px; color: #819087; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-intro .auth-eyebrow { color: #9fb3a7; }
.auth-intro-copy h1 { max-width: 500px; margin: 0 0 20px; color: #f6f8f6; font-size: clamp(2.35rem, 4vw, 4.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.auth-intro-copy p { max-width: 450px; margin: 0; color: #b7c2bb; font-size: 1.05rem; line-height: 1.7; }
.auth-intro-footer { position: relative; z-index: 1; margin: 0; color: #819087; font-size: .8rem; }
.auth-form-panel { display: grid; place-items: center; padding: 48px; background: #fafbf9; }
.auth-form-wrap { width: 100%; max-width: 430px; }
.auth-mobile-brand { display: none; }
.auth-heading { margin-bottom: 30px; }
.auth-heading h2 { margin: 0 0 10px; color: var(--ui-text); font-size: 2rem; font-weight: 650; letter-spacing: -.025em; }
.auth-heading p { margin: 0; color: var(--ui-muted); font-size: .98rem; }
.auth-form .form-label { margin-bottom: 8px; color: #38423d; font-size: .84rem; font-weight: 650; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; z-index: 2; left: 15px; top: 50%; color: #7b8680; font-size: 1.05rem; transform: translateY(-50%); }
.auth-input-wrap .form-control { height: 50px; padding: 0 46px; border: 1px solid var(--ui-border-strong); border-radius: 9px; background: white; color: var(--ui-text); font-size: .93rem; }
.auth-input-wrap .form-control:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(49,92,72,.1); }
.auth-input-wrap .password-addon { position: absolute; z-index: 3; top: 0; right: 2px; width: 45px; height: 50px; padding: 0; color: #7b8680; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border: 1px solid var(--ui-accent); border-radius: 9px; background: var(--ui-accent); color: white; font-weight: 650; }
.auth-submit:hover { background: var(--ui-accent-dark); border-color: var(--ui-accent-dark); color: white; transform: translateY(-1px); }
.auth-alert { display: flex; align-items: flex-start; gap: 10px; margin: -10px 0 24px; padding: 12px 14px; border: 1px solid #eccdcd; border-radius: 8px; background: #fbf2f2; color: var(--ui-danger); font-size: .86rem; }
.auth-alert i { font-size: 1rem; }
.auth-security-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; color: #89928d; font-size: .76rem; }

/* Dashboard */
.dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 20px 0 34px; }
.dashboard-kicker { display: block; margin-bottom: 8px; color: #7a857f; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-welcome h1 { margin: 0 0 9px; color: var(--ui-text); font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 620; letter-spacing: -.035em; }
.dashboard-welcome p { max-width: 650px; margin: 0; color: var(--ui-muted); font-size: .98rem; }
.session-pill { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted); font-size: .78rem; }
.session-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4f8a69; box-shadow: 0 0 0 4px #e7f0ea; }
.dashboard-section-heading { display: flex; justify-content: space-between; margin-bottom: 12px; }
.dashboard-section-heading h2, .dashboard-panel-heading h3 { margin: 0; color: var(--ui-text); font-size: 1.15rem; font-weight: 650; }
.quick-action-card { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 112px; padding: 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text); transition: .18s ease; }
.quick-action-card:hover { border-color: #bcc9c1; box-shadow: var(--ui-shadow); color: var(--ui-text); transform: translateY(-2px); }
.quick-action-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 1.2rem; }
.quick-action-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.quick-action-card strong { font-size: .94rem; font-weight: 650; }
.quick-action-card small { margin-top: 4px; color: var(--ui-muted); font-size: .76rem; }
.quick-action-arrow { position: absolute; top: 14px; right: 14px; color: #9ca59f; }
.dashboard-panel { background: var(--ui-surface); }
.dashboard-panel-heading { margin-bottom: 10px; }
.operation-list > a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 13px; padding: 15px 2px; border-bottom: 1px solid var(--ui-border); color: var(--ui-text); }
.operation-list > a:last-child { border-bottom: 0; padding-bottom: 2px; }
.operation-list > a > i:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #f0f2ef; color: #59655e; font-size: 1.05rem; }
.operation-list > a > span { display: flex; flex-direction: column; }
.operation-list strong { font-size: .9rem; }
.operation-list small { margin-top: 3px; color: var(--ui-muted); font-size: .76rem; }
.operation-list > a > i:last-child { color: #9aa39e; }
.operation-list > a:hover strong, .operation-list > a:hover > i:last-child { color: var(--ui-accent); }
.dashboard-help .card-body { display: flex; flex-direction: column; align-items: flex-start; }
.workspace-icon { display: grid; width: 46px; height: 46px; margin: 14px 0 18px; place-items: center; border-radius: 11px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 1.3rem; }
.dashboard-help h3 { margin: 0 0 8px; color: var(--ui-text); font-size: 1.1rem; }
.dashboard-help p { margin: 0 0 20px; color: var(--ui-muted); font-size: .85rem; line-height: 1.55; }
.workspace-note { margin-top: auto; color: #7a857f; font-size: .75rem; }

@media (max-width: 991.98px) {
    .modern-auth { grid-template-columns: 1fr; }
    .auth-intro { display: none; }
    .auth-form-panel { padding: 40px 24px; }
    .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 52px; color: var(--ui-text); font-weight: 700; }
    .auth-brand-monogram { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: var(--ui-sidebar); color: white; font-size: .76rem; }
    html[data-layout="vertical"] body.admin-body .app-menu.navbar-menu { width: 250px; }
    .admin-body .main-content { margin-left: 0; }
    .admin-body #page-topbar { left: 0; }
}
@media (max-width: 767.98px) {
    .admin-body .navbar-header { padding: 0 12px; }
    .admin-body .page-content { padding-left: 4px; padding-right: 4px; }
    .dashboard-welcome { align-items: flex-start; flex-direction: column; padding-top: 8px; }
    .session-pill { align-self: flex-start; }
    .admin-body #page-topbar .btn-success span { display: none; }
}
@media (max-width: 420px) {
    .auth-form-panel { padding: 28px 20px; }
    .auth-mobile-brand { margin-bottom: 38px; }
    .auth-heading h2 { font-size: 1.75rem; }
}