:root {
    --ink: #111b35;
    --muted: #64708a;
    --line: #dbe3ef;
    --line-soft: #eaf0f6;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --sidebar: #fbfcfe;
    --primary: #175cd3;
    --primary-dark: #124baa;
    --primary-soft: #edf4ff;
    --success: #079455;
    --success-soft: #ecfdf3;
    --warning: #dc6803;
    --warning-soft: #fff7ed;
    --danger: #d92d20;
    --danger-soft: #fef3f2;
    --shadow: 0 12px 34px rgba(20, 42, 75, .10);
    --sidebar-width: 248px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
.btn { --bs-btn-font-size: 13px; --bs-btn-font-weight: 700; --bs-btn-padding-y: .62rem; --bs-btn-padding-x: .94rem; --bs-btn-border-radius: 8px; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-soft); --bs-btn-hover-border-color: #cbd5e1; }
.form-control, .form-select { border-color: #ced8e6; border-radius: 8px; color: var(--ink); font-size: 13px; min-height: 40px; box-shadow: none !important; }
.form-control:focus, .form-select:focus { border-color: #84adf4; box-shadow: 0 0 0 3px rgba(23, 92, 211, .09) !important; }
.form-label { color: #34405a; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.select2-container { font-size: 13px; min-width: 0; }
.select2-container--default .select2-selection--single { background: #fff; border: 1px solid #ced8e6; border-radius: 8px; height: 40px; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: #84adf4; box-shadow: 0 0 0 3px rgba(23, 92, 211, .09); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 38px; padding-left: 12px; padding-right: 34px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7c879b; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 7px; }
.select2-container--default .select2-selection--single .select2-selection__clear { color: #7c879b; float: none; margin: 0; position: absolute; right: 28px; z-index: 2; }
.select2-dropdown { border: 1px solid #b9c7da; border-radius: 8px; box-shadow: 0 12px 28px rgba(20, 42, 75, .14); overflow: hidden; z-index: 1070; }
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #ced8e6; border-radius: 6px; color: var(--ink); font-size: 12px; min-height: 34px; outline: 0; padding: 5px 9px; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #84adf4; box-shadow: 0 0 0 3px rgba(23, 92, 211, .08); }
.select2-results__option { font-size: 12px; padding: 9px 11px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--primary); }
.select2-container--default .select2-results__option--selected { background: var(--primary-soft); color: var(--primary-dark); }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sidebar-width);
    min-height: 100vh;
    padding: 0 16px 18px;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    z-index: 1040;
}
.brand { align-items: center; color: var(--ink); display: flex; font-size: 19px; font-weight: 800; gap: 10px; height: 72px; padding: 0 6px; text-decoration: none; letter-spacing: -.4px; }
.brand-logo { display: block; flex: 0 0 30px; height: 34px; object-fit: contain; width: 30px; }
.brand .brand-logo { height: 32px; }
.main-nav { display: grid; gap: 5px; padding-top: 12px; }
.nav-item { align-items: center; border-radius: 8px; color: #44506a; display: flex; font-size: 13px; font-weight: 600; gap: 13px; min-height: 44px; padding: 0 12px; position: relative; text-decoration: none; transition: .16s ease; }
.nav-item i { color: #526079; font-size: 17px; width: 20px; }
.nav-item:hover { background: #f1f5fb; color: var(--ink); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-item.active::before { background: var(--primary); border-radius: 0 4px 4px 0; content: ""; height: 26px; left: -16px; position: absolute; width: 3px; }
.nav-item.active i { color: var(--primary); }
.sidebar-user { border-top: 1px solid var(--line); margin-top: auto; padding-top: 15px; }
.user-button { align-items: center; background: transparent; border: 0; border-radius: 9px; color: var(--ink); display: flex; padding: 8px; text-align: left; width: 100%; }
.user-button:hover { background: #f2f5fa; }
.avatar { align-items: center; background: #e8f0ff; border-radius: 50%; color: var(--primary); display: flex; flex: 0 0 38px; font-size: 11px; font-weight: 800; height: 38px; justify-content: center; }
.user-meta { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0 9px; }
.user-meta strong { font-size: 12px; font-weight: 700; }
.user-meta small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-button > i { color: var(--muted); font-size: 12px; }
.sidebar-user .dropdown-menu { border-color: var(--line); font-size: 12px; min-width: 205px; }

.main-column { margin-left: var(--sidebar-width); min-width: 0; width: calc(100% - var(--sidebar-width)); }
.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; height: 64px; justify-content: space-between; padding: 0 28px; }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #34405a; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.icon-button:hover { background: var(--surface-soft); }
.icon-button i { font-size: 18px; }
.topbar-actions { align-items: center; display: flex; gap: 13px; margin-left: auto; }
.topbar-divider { background: var(--line); height: 26px; width: 1px; }
.workspace-name { font-size: 12px; font-weight: 700; }
.sidebar-toggle { visibility: hidden; }

.content { margin: 0 auto; max-width: 1480px; padding: 30px 32px 46px; }
.page-head { align-items: flex-start; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 22px; }
.page-head h1 { font-size: 27px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; margin: 0 0 7px; }
.page-head p { color: var(--muted); font-size: 13px; margin: 0; }
.page-head .btn { min-width: 116px; }

.metric-rail { border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; min-height: 112px; overflow: hidden; }
.metric { align-items: center; display: flex; gap: 15px; min-width: 0; padding: 22px; position: relative; }
.metric + .metric::before { background: var(--line); content: ""; height: 62px; left: 0; position: absolute; top: 25px; width: 1px; }
.metric-icon { align-items: center; background: var(--primary-soft); border-radius: 10px; color: var(--primary); display: flex; flex: 0 0 46px; font-size: 20px; height: 46px; justify-content: center; }
.metric:nth-child(2) .metric-icon { background: var(--success-soft); color: var(--success); }
.metric:nth-child(3) .metric-icon { background: #f0efff; color: #6938ef; }
.metric:nth-child(4) .metric-icon { background: var(--warning-soft); color: var(--warning); }
.metric-copy { display: grid; min-width: 0; }
.metric-copy small { color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-copy strong { font-size: 21px; font-weight: 700; letter-spacing: -.5px; margin-top: 3px; white-space: nowrap; }
.metric-copy em { color: var(--success); font-size: 10px; font-style: normal; margin-top: 2px; }
.overview-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .7fr); }
.chart-panel, .activity-panel { border: 1px solid var(--line); border-radius: 11px; min-width: 0; padding: 20px; }
.panel-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.panel-heading h2 { font-size: 14px; font-weight: 800; margin: 0 0 3px; }
.panel-heading p { color: var(--muted); font-size: 10px; margin: 0; }
.live-indicator { color: var(--muted); font-size: 10px; }
.live-indicator i { background: var(--success); border-radius: 50%; display: inline-block; height: 6px; margin-right: 4px; width: 6px; }
.chart-wrap { height: 285px; position: relative; }
.activity-feed { display: grid; }
.activity-item { align-items: flex-start; display: grid; gap: 10px; grid-template-columns: 29px minmax(0, 1fr); padding: 11px 0; position: relative; }
.activity-item + .activity-item { border-top: 1px solid var(--line-soft); }
.activity-bullet { align-items: center; background: var(--primary-soft); border-radius: 50%; color: var(--primary); display: flex; font-size: 12px; height: 29px; justify-content: center; width: 29px; }
.activity-item strong { display: block; font-size: 11px; line-height: 1.4; }
.activity-item p { color: var(--muted); font-size: 10px; margin: 2px 0 0; overflow-wrap: anywhere; }
.empty-activity { color: var(--muted); font-size: 12px; padding: 50px 10px; text-align: center; }
.quick-links { border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; overflow: hidden; }
.quick-links a { align-items: center; color: var(--ink); display: grid; gap: 13px; grid-template-columns: 36px minmax(0,1fr) auto; min-height: 88px; padding: 18px 20px; text-decoration: none; }
.quick-links a + a { border-left: 1px solid var(--line); }
.quick-links a:hover { background: var(--surface-soft); }
.quick-links > a > i:first-child { align-items: center; background: var(--primary-soft); border-radius: 8px; color: var(--primary); display: flex; font-size: 16px; height: 36px; justify-content: center; }
.quick-links > a > i:last-child { color: var(--muted); }
.quick-links span { display: grid; }
.quick-links strong { font-size: 12px; }
.quick-links small { color: var(--muted); font-size: 10px; margin-top: 3px; }

.manager-panel { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.filter-bar { align-items: center; display: flex; gap: 12px; padding: 14px 16px; }
.search-field { align-items: center; border: 1px solid #ced8e6; border-radius: 8px; display: flex; flex: 0 1 330px; height: 40px; padding: 0 12px; }
.search-field:focus-within { border-color: #84adf4; box-shadow: 0 0 0 3px rgba(23, 92, 211, .09); }
.search-field i { color: var(--muted); font-size: 15px; }
.search-field input { background: transparent; border: 0; color: var(--ink); flex: 1; font-size: 13px; min-width: 0; outline: 0; padding: 0 9px; }
.filter-select { display: block; flex: 0 1 190px; min-width: 150px; }
.filter-reset { margin-left: auto; }
.bulk-bar { align-items: center; background: #f8fbff; border-bottom: 1px solid #bcd2f5; border-top: 1px solid #bcd2f5; display: flex; justify-content: space-between; min-height: 48px; padding: 7px 16px; }
.bulk-bar strong { font-size: 12px; }
.bulk-actions { align-items: center; display: flex; gap: 8px; }
.bulk-actions .select2-container { min-width: 165px; }
#bulkStatus + .select2-container .select2-selection--single { height: 32px; }
#bulkStatus + .select2-container .select2-selection__rendered { line-height: 30px; }
#bulkStatus + .select2-container .select2-selection__arrow { height: 30px; }
.bulk-actions .btn { font-size: 11px; }
.table-responsive { scrollbar-color: #cbd5e1 transparent; }
.data-table { min-width: 850px; }
.data-table > :not(caption) > * > * { border-bottom-color: var(--line-soft); padding: 11px 13px; }
.data-table thead th { background: var(--surface-soft); border-bottom-color: var(--line); color: #47536a; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody td { color: #33405a; font-size: 11px; height: 55px; white-space: nowrap; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: #fbfdff; }
.data-table tbody tr.selected-row { background: #f4f8ff; }
.select-col { text-align: center; width: 42px; }
.form-check-input { border-color: #aab6c7; box-shadow: none !important; height: 15px; margin-top: 0; width: 15px; }
.sort-button { align-items: center; background: transparent; border: 0; color: inherit; display: inline-flex; font-size: inherit; font-weight: inherit; gap: 5px; padding: 0; text-transform: inherit; }
.sort-button i { color: #98a2b3; font-size: 11px; }
.sort-button.active i { color: var(--primary); }
.primary-cell { align-items: center; display: flex; gap: 10px; min-width: 190px; }
.entity-icon { align-items: center; background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 7px; color: #64748b; display: inline-flex; flex: 0 0 32px; font-size: 14px; height: 32px; justify-content: center; }
.primary-cell strong { color: var(--ink); display: block; font-size: 11px; font-weight: 700; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.primary-cell small { color: var(--muted); display: block; font-size: 9px; margin-top: 2px; }
.status-badge { border: 1px solid; border-radius: 5px; display: inline-block; font-size: 9px; font-weight: 700; line-height: 20px; padding: 0 8px; text-transform: capitalize; }
.status-active, .status-delivered { background: var(--success-soft); border-color: #abefc6; color: #067647; }
.status-low_stock, .status-pending { background: var(--warning-soft); border-color: #fedf89; color: #b54708; }
.status-draft, .status-inactive, .status-cancelled { background: #f2f4f7; border-color: #d0d5dd; color: #475467; }
.status-confirmed, .status-processing, .status-shipped { background: var(--primary-soft); border-color: #b2ccff; color: #175cd3; }
.row-actions { display: flex; gap: 3px; justify-content: flex-end; }
.row-action { align-items: center; background: transparent; border: 0; border-radius: 6px; color: #64748b; display: flex; height: 30px; justify-content: center; width: 30px; }
.row-action:hover { background: #eef3f8; color: var(--ink); }
.row-action.delete:hover { background: var(--danger-soft); color: var(--danger); }
.loading-cell, .empty-cell { color: var(--muted) !important; height: 270px !important; text-align: center; }
.loading-cell { padding-top: 90px !important; }
.loading-cell .spinner-border { margin-right: 7px; }
.empty-state { display: inline-grid; gap: 7px; justify-items: center; }
.empty-state i { color: #98a2b3; font-size: 27px; }
.empty-state strong { color: #34405a; font-size: 13px; }
.table-footer { align-items: center; color: var(--muted); display: flex; font-size: 10px; justify-content: space-between; min-height: 64px; padding: 12px 16px; }
.pagination { gap: 4px; }
.pagination .page-link { align-items: center; border-color: var(--line); border-radius: 6px !important; color: #34405a; display: flex; font-size: 10px; height: 30px; justify-content: center; min-width: 30px; }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
.pagination .page-item.disabled .page-link { color: #b1bac7; }

.category-panel { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.category-toolbar { align-items: center; display: flex; justify-content: space-between; min-height: 76px; padding: 16px 20px; }
.category-toolbar h2 { font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.category-toolbar p { color: var(--muted); font-size: 10px; margin: 0; }
.category-toolbar-actions { display: flex; gap: 8px; }
.category-columns, .category-row { display: grid; grid-template-columns: minmax(300px, 1fr) 90px 110px 132px; }
.category-columns { background: var(--surface-soft); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); color: #47536a; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 11px 16px; text-transform: uppercase; }
.category-columns span:not(:first-child) { text-align: center; }
.category-branch { list-style: none; margin: 0; padding: 0; }
.category-children { max-height: 3000px; opacity: 1; overflow: hidden; transition: max-height .22s ease, opacity .18s ease; }
.category-children.collapsed { max-height: 0; opacity: 0; }
.category-row { align-items: center; border-bottom: 1px solid var(--line-soft); min-height: 66px; padding: 8px 16px 8px calc(16px + (var(--tree-depth) * 31px)); position: relative; }
.category-row:hover { background: #fbfdff; }
.category-row::before { background: #dbe4f0; content: ""; display: block; height: 1px; left: calc(4px + (var(--tree-depth) * 31px)); position: absolute; top: 33px; width: calc(var(--tree-depth) * 19px); }
.category-name-cell { align-items: center; display: flex; min-width: 0; }
.tree-toggle, .tree-toggle-spacer { flex: 0 0 28px; height: 28px; margin-right: 3px; width: 28px; }
.tree-toggle { align-items: center; background: transparent; border: 0; border-radius: 6px; color: #64748b; display: inline-flex; justify-content: center; }
.tree-toggle:hover { background: #edf3f9; color: var(--ink); }
.tree-toggle i { font-size: 11px; }
.category-folder { align-items: center; background: var(--primary-soft); border-radius: 7px; color: var(--primary); display: inline-flex; flex: 0 0 34px; font-size: 16px; height: 34px; justify-content: center; margin-right: 11px; }
.category-title { display: grid; min-width: 0; }
.category-title strong { color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-title small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.category-product-count { color: #455168; font-size: 11px; font-weight: 700; text-align: center; }
.category-row > span:nth-child(3) { text-align: center; }
.category-actions { display: flex; gap: 3px; justify-content: center; }
.category-loading, .category-empty { align-items: center; color: var(--muted); display: flex; gap: 9px; justify-content: center; min-height: 250px; }
.category-empty { flex-direction: column; font-size: 11px; }
.category-empty i { color: #98a2b3; font-size: 28px; }
.category-empty strong { color: #34405a; font-size: 13px; }

.entity-modal-dialog { max-width: 1120px; }
.entity-modal-header { align-items: flex-start; padding: 21px 24px 17px; }
.entity-modal-header .modal-title { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.entity-modal-header p { color: var(--muted); font-size: 11px; margin: 4px 0 0; }
.entity-modal-body { display: grid; gap: 19px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 22px 24px; }
.entity-modal-footer { padding: 15px 24px; }
.entity-modal-footer .btn { min-width: 102px; }
.field-group { margin: 0; min-width: 0; }
.field-group .select2-container { max-width: 100%; }
.danger-icon { align-items: center; background: var(--danger-soft); border-radius: 50%; color: var(--danger); display: inline-flex; font-size: 20px; height: 48px; justify-content: center; width: 48px; }
.modal-content { border: 0; border-radius: 12px; box-shadow: var(--shadow); }
.modal-header, .modal-footer { border-color: var(--line); }
.toast { background: #fff; color: var(--ink); font-size: 12px; }
.sidebar-scrim { display: none; }

.detail-breadcrumb { align-items: center; color: var(--muted); display: inline-flex; font-size: 11px; font-weight: 700; gap: 6px; margin-bottom: 10px; text-decoration: none; }
.detail-breadcrumb:hover { color: var(--primary); }
.product-detail-head { margin-bottom: 18px; }
.product-detail-shell { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.product-detail-tabs { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 4px; min-height: 58px; padding: 0 18px; }
.product-detail-tabs button { align-items: center; align-self: stretch; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); display: inline-flex; font-size: 12px; font-weight: 700; gap: 8px; padding: 0 16px; }
.product-detail-tabs button:hover { color: var(--ink); }
.product-detail-tabs button.active { border-bottom-color: var(--primary); color: var(--primary); }
.product-detail-tabs button i { font-size: 15px; }
.tab-count { align-items: center; background: #eef2f7; border-radius: 999px; color: #4b5870; display: inline-flex; font-size: 9px; height: 20px; justify-content: center; min-width: 20px; padding: 0 6px; }
.product-detail-tabs button.active .tab-count { background: var(--primary-soft); color: var(--primary); }
.product-detail-content { min-height: 510px; }
.product-info-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 510px; }
.product-image-panel { background: var(--surface-soft); border-right: 1px solid var(--line); padding: 24px; }
.product-image-panel > small { color: var(--muted); display: block; font-size: 9px; line-height: 1.5; margin-top: 9px; text-align: center; }
.product-image-frame { align-items: center; aspect-ratio: 1 / 1; background: #fff; border: 1px dashed #b9c5d5; border-radius: 10px; color: #8b97aa; display: flex; flex-direction: column; gap: 9px; justify-content: center; margin-bottom: 14px; overflow: hidden; position: relative; }
.product-image-frame i { font-size: 31px; }
.product-image-frame span { font-size: 10px; font-weight: 600; }
.product-image-frame img { height: 100%; object-fit: contain; width: 100%; }
.product-image-frame.uploading::after { align-items: center; background: rgba(255,255,255,.84); content: "Uploading…"; display: flex; font-size: 11px; font-weight: 700; inset: 0; justify-content: center; position: absolute; }
.product-info-main { min-width: 0; padding: 24px; }
.product-section-heading { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 20px; }
.product-section-heading h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.product-section-heading p { color: var(--muted); font-size: 10px; margin: 0; }
.product-summary-rail { border: 1px solid var(--line); border-radius: 9px; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 23px; overflow: hidden; }
.product-summary-rail > div { display: grid; gap: 4px; min-height: 75px; padding: 15px 18px; }
.product-summary-rail > div + div { border-left: 1px solid var(--line); }
.product-summary-rail span { color: var(--muted); font-size: 9px; font-weight: 600; }
.product-summary-rail strong { font-size: 18px; letter-spacing: -.3px; }
.product-info-grid { display: grid; gap: 19px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-description-field { grid-column: 1 / -1; }
.product-description-field textarea { min-height: 138px; resize: vertical; }
.supplier-section-heading { margin: 0; min-height: 78px; padding: 16px 18px; }
.supplier-filter-bar { align-items: center; border-top: 1px solid var(--line-soft); display: flex; gap: 12px; padding: 14px 16px; }
.supplier-data-table { min-width: 780px; }
.product-link { color: inherit; text-decoration: none; }
.product-link:hover strong { color: var(--primary); }
.table-link { color: var(--primary); font-weight: 700; text-decoration: none; }
.table-link:hover { color: var(--primary-dark); text-decoration: underline; }
.row-action.view { text-decoration: none; }
.entity-icon.has-image { background: #fff; overflow: hidden; }
.entity-icon.has-image img { height: 100%; object-fit: contain; width: 100%; }

.login-page { background: #fff; min-height: 100vh; }
.login-shell { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr); min-height: 100vh; }
.login-story { background: #0b1633; color: #fff; display: flex; flex-direction: column; overflow: hidden; padding: 44px 56px; position: relative; }
.login-brand { align-items: center; display: flex; font-size: 20px; font-weight: 800; gap: 10px; position: relative; z-index: 2; }
.login-story-copy { margin: auto 0; max-width: 500px; position: relative; z-index: 2; }
.login-story-copy h1 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 800; letter-spacing: -2.4px; line-height: 1.05; margin: 0 0 22px; }
.login-story-copy p { color: #b9c5dc; font-size: 16px; line-height: 1.7; margin: 0; max-width: 430px; }
.login-visual { inset: 0; opacity: .75; pointer-events: none; position: absolute; }
.visual-line { border: 1px solid rgba(132, 173, 255, .15); border-radius: 50%; position: absolute; }
.line-one { height: 620px; right: -360px; top: 14%; width: 620px; }
.line-two { height: 360px; right: -175px; top: 31%; width: 360px; }
.visual-node { background: #2e90fa; border: 6px solid rgba(255,255,255,.13); border-radius: 50%; height: 26px; position: absolute; width: 26px; }
.node-one { right: 130px; top: 24%; }.node-two { bottom: 21%; right: 54px; }.node-three { bottom: 33%; right: 245px; }
.login-footnote { color: #7f8ca5; font-size: 11px; margin: 0; position: relative; z-index: 2; }
.login-form-wrap { align-items: center; display: flex; justify-content: center; padding: 42px; }
.login-form { max-width: 390px; width: 100%; }
.login-form h2 { font-size: 29px; font-weight: 800; letter-spacing: -.8px; margin: 0 0 7px; }
.login-form > p { font-size: 13px; margin-bottom: 30px; }
.login-form .form-control-lg { font-size: 14px; min-height: 49px; }
.login-form .btn-lg { font-size: 14px; min-height: 49px; }
.security-note { color: var(--muted); font-size: 10px !important; line-height: 1.5; margin: 22px auto 0 !important; max-width: 300px; text-align: center; }
.mobile-brand { align-items: center; display: none; font-size: 18px; font-weight: 800; gap: 9px; margin-bottom: 42px; }

@media (max-width: 1100px) {
    .metric { padding: 18px 16px; }
    .metric-icon { flex-basis: 40px; height: 40px; }
    .metric-copy strong { font-size: 18px; }
    .overview-grid { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 900px) {
    :root { --sidebar-width: 248px; }
    .sidebar { box-shadow: var(--shadow); transform: translateX(-102%); transition: transform .22s ease; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-scrim { background: rgba(15, 23, 42, .42); inset: 0; position: fixed; z-index: 1030; }
    body.sidebar-open .sidebar-scrim { display: block; }
    .main-column { margin-left: 0; width: 100%; }
    .sidebar-toggle { visibility: visible; }
    .content { padding: 26px 22px 40px; }
    .metric-rail { grid-template-columns: repeat(2, 1fr); }
    .metric:nth-child(3)::before { display: none; }
    .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
    .overview-grid { grid-template-columns: 1fr; }
    .quick-links { grid-template-columns: 1fr; }
    .quick-links a + a { border-left: 0; border-top: 1px solid var(--line); }
    .login-shell { grid-template-columns: minmax(330px, .75fr) minmax(420px, 1.25fr); }
    .login-story { padding: 36px; }
    .entity-modal-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-info-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .product-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .topbar { height: 58px; padding: 0 15px; }
    .content { padding: 22px 15px 34px; }
    .workspace-name { display: none; }
    .topbar-divider { display: none; }
    .page-head { align-items: center; }
    .page-head h1 { font-size: 23px; }
    .page-head p { font-size: 11px; }
    .page-head .btn { min-width: 0; }
    .metric-rail { grid-template-columns: 1fr; }
    .metric { min-height: 91px; }
    .metric + .metric::before { display: none; }
    .metric:nth-child(n+2) { border-top: 1px solid var(--line); }
    .chart-panel, .activity-panel { padding: 16px; }
    .chart-wrap { height: 240px; }
    .filter-bar { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
    .search-field { flex-basis: auto; grid-column: 1 / -1; max-width: none; }
    .filter-select { min-width: 0; width: 100%; }
    .filter-reset { grid-column: 1 / -1; margin: 0; }
    .bulk-bar { align-items: flex-start; gap: 8px; }
    .bulk-actions { flex-wrap: wrap; justify-content: flex-end; }
    .bulk-actions .select2-container { min-width: 142px; width: auto !important; }
    .table-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
    .category-toolbar { align-items: flex-start; gap: 14px; }
    .category-toolbar-actions { flex-direction: column; }
    .category-columns { display: none; }
    .category-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 76px; padding-left: calc(8px + (var(--tree-depth) * 18px)); padding-right: 8px; }
    .category-row::before { display: none; }
    .category-product-count, .category-row > span:nth-child(3) { display: none; }
    .category-actions { justify-content: flex-end; }
    .tree-toggle, .tree-toggle-spacer { flex-basis: 24px; width: 24px; }
    .category-folder { flex-basis: 31px; height: 31px; margin-right: 8px; }
    .entity-modal-dialog { margin: 12px; max-width: none; }
    .entity-modal-header, .entity-modal-body, .entity-modal-footer { padding-left: 18px; padding-right: 18px; }
    .entity-modal-body { grid-template-columns: 1fr; }
    .product-detail-head { align-items: flex-end; }
    .product-detail-tabs { overflow-x: auto; padding: 0 8px; }
    .product-detail-tabs button { flex: 0 0 auto; padding: 0 12px; }
    .product-info-layout { grid-template-columns: 1fr; }
    .product-image-panel { border-bottom: 1px solid var(--line); border-right: 0; display: grid; gap: 12px; grid-template-columns: 112px minmax(0, 1fr); padding: 18px; }
    .product-image-frame { grid-row: 1 / span 2; margin: 0; }
    .product-image-panel > small { grid-column: 1 / -1; margin: 0; text-align: left; }
    .product-info-main { padding: 18px; }
    .product-section-heading { align-items: flex-start; }
    .product-section-heading .btn { flex: 0 0 auto; }
    .product-summary-rail { grid-template-columns: 1fr; }
    .product-summary-rail > div { min-height: 63px; }
    .product-summary-rail > div + div { border-left: 0; border-top: 1px solid var(--line); }
    .product-info-grid { grid-template-columns: 1fr; }
    .supplier-section-heading { align-items: center; }
    .supplier-filter-bar { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
    .supplier-filter-bar .search-field { grid-column: 1 / -1; }
    .supplier-filter-bar .filter-reset { grid-column: auto; }
    .login-shell { display: block; }
    .login-story { display: none; }
    .login-form-wrap { min-height: 100vh; padding: 28px 22px; }
    .mobile-brand { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}