:root{--primary:#4f46e5;--sidebar:#111827;--button:#4f46e5;--accent:#06b6d4;--bg:#f4f7fb;--surface:#fff;--surface2:#f8fafc;--text:#172033;--muted:#64748b;--border:#e5e7eb;--shadow:0 18px 45px rgba(15,23,42,.08)}
        html[data-theme=dark]{--bg:#0f172a;--surface:#1e293b;--surface2:#111827;--text:#f1f5f9;--muted:#94a3b8;--border:#334155;--shadow:0 18px 45px rgba(0,0,0,.3)}
        *{transition:background-color .22s,color .22s,border-color .22s,box-shadow .22s} body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
        .sidebar{position:fixed;inset:0 auto 0 0;width:282px;background:var(--sidebar);color:#dbeafe;z-index:1040;box-shadow:12px 0 30px rgba(15,23,42,.18);display:flex;flex-direction:column}.sidebar.collapsed{width:84px}
        .brand{height:74px;display:flex;gap:.8rem;align-items:center;padding:0 1.2rem;border-bottom:1px solid rgba(255,255,255,.08)}.brand-logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;font-size:1.25rem}.brand span{display:block;color:#9fb0cc;font-size:.76rem}.sidebar.collapsed .brand-copy,.sidebar.collapsed .menu-text,.sidebar.collapsed .menu-section,.sidebar.collapsed .chevron{display:none}
        .menu{padding:1rem;overflow:auto}.menu-section{font-size:.68rem;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:#94a3b8;margin:.8rem .75rem .45rem}.menu-link{width:100%;display:flex;gap:.75rem;align-items:center;border:0;background:transparent;color:#dbeafe;text-decoration:none;padding:.72rem .82rem;border-radius:12px;font-weight:700;font-size:.92rem}.menu-link i{width:22px;text-align:center}.menu-link:hover,.menu-link.active{background:rgba(255,255,255,.12);color:#fff}.menu-link.active{box-shadow:inset 4px 0 0 var(--accent)}.submenu{display:none;padding-left:2.55rem}.submenu.show{display:block}.submenu .menu-link{font-size:.86rem;padding:.55rem .75rem}
        .main{margin-left:282px;min-height:100vh}.sidebar.collapsed+.main{margin-left:84px}.topbar{height:74px;position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}html[data-theme=dark] .topbar{background:rgba(30,41,59,.78)}
        .page-wrap{padding:1.45rem;animation:fadeIn .25s}.soft-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.metric-card{min-height:132px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));overflow:hidden;position:relative}.metric-card:hover,.quick-action:hover{transform:translateY(-3px)}.metric-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.35rem}.metric-value{font-size:2rem;font-weight:800}
        .btn-primary,.btn-success{background:var(--button);border-color:var(--button)}.btn-outline-primary{border-color:var(--button);color:var(--button)}.btn-outline-primary:hover{background:var(--button);border-color:var(--button)}.quick-action{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;padding:.85rem;font-weight:800}.form-control,.form-select{background:var(--surface);color:var(--text);border-color:var(--border);border-radius:12px}.form-floating>label{color:var(--muted)}
        .modal-content,.dropdown-menu{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px}.table-card{padding:1rem}.table-responsive{max-height:64vh}.table{--bs-table-bg:var(--surface);--bs-table-color:var(--text);--bs-table-border-color:var(--border)}.table thead th,table.dataTable thead th{position:sticky;top:0;background:var(--surface2);color:var(--text);z-index:2}.table-striped>tbody>tr:nth-of-type(odd)>*{background:color-mix(in srgb,var(--surface2) 72%,transparent);color:var(--text)}.dt-container .dt-input,.dt-container .dt-select{background:var(--surface);color:var(--text);border-color:var(--border);border-radius:10px}div.dt-processing{display:none!important}
        .inventory-page{display:flex;flex-direction:column;gap:.75rem}.inventory-shell{overflow:hidden;border-radius:12px}.inventory-hero{background:var(--surface);border-bottom:1px solid var(--border);padding:.8rem 1rem}.inventory-icon{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:1rem}.inventory-title{font-size:1rem;line-height:1.2}.inventory-subtitle{font-size:.76rem}.inventory-toolbar .btn{min-height:34px;border-radius:8px;font-weight:700;font-size:.82rem;padding:.35rem .65rem}.inventory-table-wrap{padding:.55rem .75rem .75rem}.inventory-table{border-collapse:separate!important;border-spacing:0 .24rem!important}.inventory-table thead th{border:0!important;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)!important;padding:.42rem .55rem!important}.inventory-table tbody tr{box-shadow:0 4px 12px rgba(15,23,42,.035)}.inventory-table tbody td{border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;background:var(--surface)!important;padding:.48rem .55rem!important;vertical-align:middle;font-size:.82rem}.inventory-table tbody td:first-child{border-left:1px solid var(--border)!important;border-radius:7px 0 0 7px}.inventory-table tbody td:last-child{border-right:1px solid var(--border)!important;border-radius:0 7px 7px 0}.inventory-code{display:inline-flex;align-items:center;gap:.25rem;padding:.24rem .42rem;border-radius:7px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-weight:800;white-space:nowrap;font-size:.76rem}.inventory-cell-title{font-weight:800;color:var(--text);line-height:1.15}.inventory-cell-subtitle{margin-top:.08rem;font-size:.69rem;color:var(--muted)}.inventory-qty{display:inline-flex;min-width:42px;justify-content:center;padding:.24rem .45rem;border-radius:7px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 72%,var(--text));font-weight:800;font-size:.78rem}.inventory-action-btn{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:7px;padding:0}.inventory-footer{border-top:1px solid var(--border);padding:.55rem .75rem .7rem;background:color-mix(in srgb,var(--surface2) 70%,transparent)}.inventory-footer .btn{min-height:32px;border-radius:8px;font-size:.8rem;padding:.3rem .6rem}.inventory-page .dt-container .dt-search input,.inventory-page .dt-container .dt-length select{min-height:32px;border-radius:8px;font-size:.8rem;padding-block:.25rem}.inventory-page .dt-container .dt-layout-row{margin-block:.35rem}.inventory-page .dt-container .dt-info,.inventory-page .dt-container label{font-size:.78rem;color:var(--muted)}.inventory-page .dt-container .dt-paging .dt-paging-button{border-radius:7px!important;border:1px solid var(--border)!important;margin-inline:.12rem;padding:.25rem .48rem!important;font-size:.78rem}
        .select2-container--default .select2-selection--single{height:46px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px;color:var(--text)}.select2-dropdown{background:var(--surface);color:var(--text);border-color:var(--border)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800}.theme-dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.18)}.theme-dot.active{outline:3px solid color-mix(in srgb,var(--primary) 24%,transparent)}.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:1030}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
        .sidebar{background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--text);border-right:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));box-shadow:10px 0 28px rgba(15,23,42,.06)}html[data-theme=dark] .sidebar{background:var(--sidebar);color:#dbeafe;border-right-color:color-mix(in srgb,var(--primary) 34%,transparent)}.brand{height:68px;border-bottom:1px solid color-mix(in srgb,var(--primary) 16%,var(--border))}html[data-theme=dark] .brand{border-bottom-color:rgba(255,255,255,.08)}.brand-logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 10px 22px color-mix(in srgb,var(--primary) 26%,transparent)}.brand-copy strong{color:var(--text)}html[data-theme=dark] .brand-copy strong{color:#fff}.brand span{color:var(--muted)}.menu{padding:.7rem}.menu-section{color:var(--muted);margin:1rem .7rem .45rem}.menu-link{color:#334155;border-radius:10px;padding:.62rem .72rem;font-size:.88rem}.menu-link i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}.menu-link:hover,.menu-link.active{background:color-mix(in srgb,var(--primary) 10%,transparent);color:color-mix(in srgb,var(--primary) 70%,var(--text))}.menu-link.active{box-shadow:inset 3px 0 0 var(--primary)}.submenu{padding-left:.65rem;margin-left:.75rem;border-left:1px dashed color-mix(in srgb,var(--primary) 22%,var(--border))}html[data-theme=dark] .menu-link{color:#dbeafe}html[data-theme=dark] .menu-link i{color:#fff;background:color-mix(in srgb,var(--primary) 38%,transparent)}html[data-theme=dark] .menu-link:hover,html[data-theme=dark] .menu-link.active{background:color-mix(in srgb,var(--primary) 28%,transparent);color:#fff}.topbar{height:68px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 10px 28px rgba(15,23,42,.04)}.topbar .btn-light{background:var(--surface2);border-color:var(--border);color:var(--text)}.page-wrap{padding:1rem}.soft-card{border-radius:12px;box-shadow:0 10px 28px rgba(15,23,42,.055)}.page-panel,.inventory-page{animation:fadeIn .18s ease-out}.quick-action{border-radius:10px;padding:.72rem .8rem}.quick-action i{color:var(--primary)}
        @media(max-width:991px){.sidebar{transform:translateX(-105%);width:282px}.sidebar.mobile-open{transform:translateX(0)}.sidebar.collapsed{width:282px}.sidebar.collapsed .brand-copy,.sidebar.collapsed .menu-text,.sidebar.collapsed .menu-section,.sidebar.collapsed .chevron{display:block}.main,.sidebar.collapsed+.main{margin-left:0}.drawer-backdrop.show{display:block}.topbar{height:auto;min-height:68px}.profile-name{display:none}}
/* Common reusable admin surfaces */
.app-shell { width: 100%; }
.app-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    color: #fff;
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #111827), color-mix(in srgb, var(--accent) 78%, var(--primary))),
        var(--primary);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 22%, transparent);
}
.app-hero h1 { margin: 0 0 .2rem; font-size: 1.28rem; font-weight: 800; line-height: 1.2; }
.app-hero p { margin: 0; opacity: .86; font-size: .85rem; }
.app-hero-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 1.2rem; }
.app-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.btn-modern { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 36px; padding: .45rem .8rem; border-radius: 8px; font-weight: 800; font-size: .86rem; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn-modern:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15,23,42,.12); }
.btn-primary-modern { color: #fff; border: 1px solid color-mix(in srgb, var(--button) 88%, #000); background: var(--button); }
.btn-primary-modern:hover, .btn-primary-modern:focus { color: #fff; background: color-mix(in srgb, var(--button) 88%, #000); }
.btn-secondary-modern { color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent); background: var(--surface); }
.btn-secondary-modern:hover, .btn-secondary-modern:focus { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 44%, transparent); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.data-container { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 72%, var(--surface)); }
.search-control { position: relative; width: min(280px, 100%); }
.search-control i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-control .form-control { padding-left: 2.35rem; min-height: 38px; }
.table-scroll { overflow-x: auto; padding: .35rem .75rem .75rem; }
.modal-body-comfy { padding: 1.5rem; }
.upload-dropzone { border: 1.5px dashed color-mix(in srgb, var(--primary) 42%, var(--border)); border-radius: 10px; padding: 1.5rem; text-align: center; cursor: pointer; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.upload-dropzone.is-dragging { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.upload-dropzone i { display: block; margin-bottom: .5rem; color: var(--primary); font-size: 1.9rem; }
.upload-dropzone p { margin: 0; color: var(--primary); font-weight: 800; }
.file-input-hidden { display: none; }
.js-chart { min-height: 285px; }
.dropdown-menu-control { min-width: 260px; }
.form-textarea-sm { height: 90px; }
.form-textarea-md { height: 100px; }
.text-end-col { text-align: right; }

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface2) 86%, var(--primary)), var(--bg));
}
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(100%, 430px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 28px 70px rgba(15,23,42,.16); padding: 2rem; }
.login-card .brand-logo { width: 58px; height: 58px; border-radius: 16px; font-size: 1.65rem; }
.login-card .btn-primary { min-height: 48px; border-radius: 12px; font-weight: 800; }

.modal-header { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-bottom: 0; }
.modal-header .btn-close { filter: brightness(0) invert(1); }
.modal-footer { background: color-mix(in srgb, var(--surface2) 78%, var(--surface)); border-top: 1px solid var(--border); }
.form-label { color: var(--text); font-weight: 700; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 16%, transparent); }
.status-pill { display: inline-flex; align-items: center; gap: .32rem; min-width: 74px; justify-content: center; padding: .28rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .01em; }
.status-pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.status-pill.is-active { color: #15803d; background: rgba(34,197,94,.13); }
.status-pill.is-inactive { color: #b91c1c; background: rgba(239,68,68,.12); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; text-align: left; }
.detail-item { padding: .8rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface2) 72%, var(--surface)); }
.detail-label { margin-bottom: .22rem; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.detail-value { color: var(--text); font-weight: 800; word-break: break-word; }
.detail-popup { color: var(--text); }

.sidebar { background: linear-gradient(180deg, color-mix(in srgb,var(--surface) 92%,var(--primary)), var(--surface)); }
html[data-theme=dark] .sidebar { background: linear-gradient(180deg, color-mix(in srgb,var(--primary) 18%,#0f172a), #0f172a 56%, #111827); }
.brand { position: relative; }
.brand::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--primary) 42%,transparent), transparent); }
.brand-copy strong { font-size: .96rem; letter-spacing: .01em; }
.menu-link { position: relative; }
.menu-link.active::after { content: ""; position: absolute; right: .7rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
.submenu .menu-link.active::after { right: .55rem; }
.topbar { gap: .75rem; }
.topbar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .9; }
#topTitle { font-size: 1.05rem; letter-spacing: .01em; }
.avatar { box-shadow: 0 8px 18px color-mix(in srgb,var(--primary) 24%,transparent); }
.dropdown-menu { box-shadow: 0 22px 44px rgba(15,23,42,.13); }

@media (max-width: 767px) {
    .app-hero { align-items: stretch; flex-direction: column; }
    .app-actions { justify-content: stretch; }
    .app-actions .btn { width: 100%; }
    .data-toolbar { align-items: stretch; flex-direction: column; }
    .search-control { width: 100%; }
    .detail-grid { grid-template-columns: 1fr; }
}