:root {
    --sidebar-width: 254px;
    --navbar-height: 72px;
    --page-bg: #f4f3ef;
    --card-bg: #ffffff;
    --border: #e7e6e2;
    --text: #222222;
    --muted: #62625e;
    --primary: #111111;
    --success: #00a650;
    --danger: #dc2734;
    --radius: 11px;
}

* { box-sizing: border-box; }

html { font-size: 14px; }

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background: var(--page-bg);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .875rem;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: #333333; }
button, input { font: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--border);
}

.sidebar-inner { display: flex; height: 100%; flex-direction: column; padding: 0 19px 20px; }
.sidebar-brand {
    display: flex;
    height: var(--navbar-height);
    margin: 0 -19px 21px;
    padding: 0 30px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 1.42rem;
    font-weight: 700;
}
.sidebar-brand:hover { color: var(--text); }
.brand-mark { display: inline-flex; color: var(--primary); font-size: 2rem; line-height: 1; }
.sidebar-nav { flex: 1; overflow-y: auto; }
.sidebar-nav .nav { gap: 3px; }
.sidebar-nav .nav-link {
    display: flex;
    min-height: 41px;
    padding: 9px 12px;
    align-items: center;
    gap: 14px;
    border-radius: 8px;
    color: #263a57;
    font-weight: 500;
}
.sidebar-nav .nav-link i { width: 20px; color: #60738f; font-size: 1.28rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: #f4f3ef; }
.sidebar-nav .nav-link.active { background: #e9e8e3; color: var(--primary); font-weight: 600; }
.sidebar-nav .nav-link.active i { color: var(--primary); }
.nav-section-label { margin: 27px 9px 9px; color: #50627c; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.sidebar-meta { margin-top: 18px; padding: 18px; border-radius: 10px; background: #f5f7fa; color: var(--muted); font-size: .75rem; }
.sidebar-date { display: flex; gap: 13px; margin-bottom: 35px; }
.sidebar-date i { color: #526b8d; font-size: 1.15rem; }
.sidebar-date strong, .sidebar-date span { display: block; }
.sidebar-date strong { margin-bottom: 4px; color: var(--text); font-size: .76rem; }
.sidebar-version { line-height: 1.7; }

.app-shell { min-height: 100vh; margin-left: var(--sidebar-width); }
.app-navbar { position: sticky; top: 0; z-index: 1030; height: var(--navbar-height); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); }
.navbar-content { display: flex; width: 100%; height: 100%; padding: 0 25px 0 31px; align-items: center; gap: 20px; }
.icon-button { display: inline-grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; background: transparent; color: #263a57; font-size: 1.2rem; }
.sidebar-toggle { margin-left: -9px; }
.navbar-search {
    display: flex;
    width: 365px;
    height: 40px;
    padding: 0 8px 0 13px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.navbar-search i { color: #51637d; font-size: 1rem; }
.navbar-search input { min-width: 0; flex: 1; border: 0; outline: none; color: var(--text); background: transparent; font-size: .81rem; }
.navbar-search input::placeholder { color: #53647d; opacity: 1; }
.navbar-search kbd { padding: 3px 6px; border: 1px solid #e2e7ee; border-radius: 5px; background: #f8fafc; color: #52627a; font-family: inherit; font-size: .7rem; font-weight: 500; box-shadow: none; }
.navbar-actions { display: flex; margin-left: auto; align-items: center; gap: 16px; }
.branch-selector, .user-menu { display: flex; padding: 0; align-items: center; border: 0; background: transparent; color: var(--text); text-align: left; }
.branch-selector { min-width: 168px; }
.branch-icon { display: inline-grid; width: 40px; height: 40px; margin-right: 9px; place-items: center; border: 1px solid var(--border); border-radius: 8px; font-size: 1.25rem; }
.branch-copy, .user-copy { display: flex; flex-direction: column; }
.branch-copy small, .user-copy small { color: var(--muted); font-size: .71rem; }
.branch-copy strong, .user-copy strong { font-size: .81rem; font-weight: 500; }
.selector-chevron { margin-left: auto; font-size: .7rem; }
.notification-button { position: relative; border-right: 1px solid var(--border); border-left: 1px solid var(--border); width: 52px; border-radius: 0; }
.notification-count { position: absolute; top: 2px; right: 6px; display: grid; width: 16px; height: 16px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #e72c38; color: #fff; font-size: .55rem; font-weight: 700; }
.user-menu { min-width: 145px; }
.avatar { display: inline-grid; width: 40px; height: 40px; margin-right: 9px; place-items: end center; overflow: hidden; border-radius: 50%; background: #e7e6e2; color: #15233a; font-size: 1.7rem; }
.user-copy strong { font-size: .92rem; }
.dropdown-menu { padding: 6px; border-color: var(--border); border-radius: 9px; box-shadow: 0 8px 24px rgba(29,45,72,.08); font-size: .8rem; }
.dropdown-item { border-radius: 6px; }
.dropdown-item.active { background: #e9e8e3; color: var(--primary); }

.app-main { padding: 22px 25px 0; }
.page-heading { display: flex; margin-bottom: 22px; align-items: center; justify-content: space-between; }
.page-heading h1 { margin: 0 0 3px; font-size: 1.72rem; font-weight: 700; letter-spacing: -.03em; }
.page-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.date-selector, .period-selector { display: flex; height: 41px; padding: 0 14px; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #263a57; font-size: .77rem; font-weight: 500; }
.date-selector i:last-child, .period-selector i { margin-left: 6px; font-size: .65rem; }

.dashboard-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); box-shadow: 0 1px 2px rgba(17,27,46,.025); }
.kpi-row { --bs-gutter-x: 15px; }
.kpi-card { position: relative; display: flex; min-height: 126px; padding: 24px 18px; align-items: center; gap: 18px; }
.kpi-icon { display: grid; width: 61px; height: 61px; flex: 0 0 61px; place-items: center; border-radius: 18px; font-size: 1.85rem; }
.tone-primary { background: #efeee9; color: var(--primary); }
.tone-success { background: #e8f8ef; color: #00a650; }
.tone-warning { background: #fff3df; color: #ff9800; }
.tone-danger { background: #fdebed; color: #dc2734; }
.kpi-content { min-width: 0; }
.kpi-content h2 { margin: 0 0 6px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.kpi-value { margin-bottom: 6px; color: #0d1729; font-size: 1.68rem; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: -.025em; }
.kpi-trend { color: var(--success); font-size: .72rem; white-space: nowrap; }
.kpi-link { font-size: .72rem; font-weight: 500; white-space: nowrap; }
.card-menu { position: absolute; top: 19px; right: 12px; padding: 0; border: 0; background: transparent; color: #243954; }
.dashboard-row { margin-top: 0; padding-top: 14px; --bs-gutter-x: 15px; }
.chart-card, .summary-card { min-height: 344px; }
.card-heading { display: flex; min-height: 54px; padding: 15px 19px; align-items: center; justify-content: space-between; }
.card-heading h2 { margin: 0; font-size: .91rem; font-weight: 700; }
.card-heading a { font-size: .76rem; font-weight: 500; }
.period-selector { height: 37px; }
.chart-legend { display: flex; padding: 0 20px 4px; gap: 30px; color: #42536d; font-size: .72rem; }
.chart-legend span { display: flex; align-items: center; gap: 10px; }
.legend-line { display: inline-block; width: 23px; border-top: 3px solid var(--primary); border-radius: 2px; }
.legend-line.previous { border-top: 2px dashed #7eb0ff; }
.chart-wrap { height: 247px; padding: 7px 16px 12px 7px; }
.summary-card .card-heading { margin-bottom: 7px; }
.summary-list { margin: 0; padding: 0 19px 17px; }
.summary-row { display: flex; min-height: 42px; margin: 0; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; font-size: .78rem; }
.summary-row:last-child { border-bottom: 0; }
.summary-row dt { font-weight: 400; }
.summary-row dd { margin: 0; font-weight: 600; }
.summary-row.summary-strong { color: #101a2c; font-weight: 700; }
.summary-row.summary-strong dt, .summary-row.summary-strong dd { font-weight: 700; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.card-heading-bordered { border-bottom: 1px solid #edf1f5; }
.table-card, .stock-card { min-height: 329px; }
.recent-sales-table { min-width: 700px; color: #263a57; font-size: .7rem; }
.recent-sales-table > :not(caption) > * > * { padding: 10px 10px; border-bottom-color: #eff2f6; white-space: nowrap; }
.recent-sales-table thead th { background: #f4f3ef; color: #253650; font-weight: 600; }
.recent-sales-table thead th:first-child, .recent-sales-table tbody td:first-child { padding-left: 20px; width: 40px; }
.recent-sales-table tbody tr:last-child td { border-bottom: 0; }
.table-card-footer { padding: 8px 19px 13px; text-align: right; }
.table-card-footer a { font-size: .75rem; font-weight: 500; }
.stock-list { padding: 0 19px 11px; }
.stock-item { display: flex; min-height: 62px; padding: 8px 0; align-items: center; border-bottom: 1px solid #edf1f5; }
.stock-item:last-child { border-bottom: 0; }
.product-thumb { display: grid; width: 56px; height: 42px; margin-right: 15px; place-items: center; border: 1px solid #e8ecf2; border-radius: 7px; background: #fff; color: #e14b2d; font-size: 1.45rem; }
.stock-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.stock-copy strong { overflow: hidden; margin-bottom: 3px; font-size: .76rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stock-copy span, .stock-count span { color: var(--muted); font-size: .68rem; }
.stock-count { display: flex; margin-left: 12px; flex-direction: column; align-items: flex-end; }
.stock-count strong { color: var(--danger); font-size: .76rem; }
.app-footer { display: none; padding: 22px 2px; color: var(--muted); font-size: .72rem; justify-content: space-between; }
.app-offcanvas { width: 276px !important; border-right: 0 !important; }
.app-offcanvas .sidebar-inner { padding-top: 0; }
.offcanvas-close { position: absolute; top: 15px; right: 10px; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; }

@media (min-width: 1400px) {
    .app-main { padding-right: 25px; padding-left: 25px; }
}

@media (max-width: 1199.98px) {
    .chart-card, .summary-card { min-height: auto; }
    .summary-card { height: auto !important; }
    .table-card, .stock-card { min-height: auto; }
}

@media (max-width: 991.98px) {
    :root { --navbar-height: 64px; }
    .app-shell { margin-left: 0; }
    .app-navbar { height: var(--navbar-height); }
    .navbar-content { padding: 0 16px; gap: 10px; }
    .sidebar-toggle { margin-left: 0; }
    .navbar-search { width: min(340px, 42vw); }
    .branch-selector { min-width: 48px; }
    .branch-copy, .branch-selector .selector-chevron, .user-copy, .user-menu .selector-chevron { display: none; }
    .branch-icon, .avatar { margin-right: 0; }
    .user-menu { min-width: 40px; }
    .app-main { padding: 20px 16px 0; }
    .app-footer { display: flex; }
}

@media (max-width: 575.98px) {
    .navbar-content { gap: 4px; }
    .navbar-search { flex: 1; width: auto; }
    .navbar-search kbd { display: none; }
    .navbar-actions { gap: 5px; }
    .notification-button { width: 42px; border: 0; }
    .branch-icon, .avatar { width: 36px; height: 36px; }
    .page-heading { align-items: flex-start; gap: 12px; }
    .page-heading h1 { font-size: 1.45rem; }
    .page-heading p { font-size: .78rem; }
    .date-selector { width: 41px; padding: 0; justify-content: center; }
    .date-selector span, .date-selector i:last-child { display: none; }
    .kpi-card { min-height: 112px; padding: 18px; }
    .kpi-icon { width: 55px; height: 55px; flex-basis: 55px; }
    .chart-wrap { height: 225px; }
}

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

/* Products module */
.compact-primary { display: inline-flex; min-height: 41px; padding: 9px 15px; align-items: center; gap: 7px; border-radius: 8px; font-size: .79rem; font-weight: 600; }
.app-alert { margin-bottom: 16px; padding: 11px 42px 11px 14px; border-radius: 9px; font-size: .78rem; }
.product-summary-row { margin-bottom: 15px; --bs-gutter-x: 15px; }
.product-summary-card { display: flex; min-height: 90px; padding: 16px 18px; align-items: center; gap: 14px; }
.product-summary-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; font-size: 1.35rem; }
.product-summary-card > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.product-summary-card small { margin-bottom: 4px; color: var(--muted); font-size: .72rem; font-weight: 500; white-space: nowrap; }
.product-summary-card strong { font-size: 1.42rem; line-height: 1; }
.products-panel, .data-table-card { overflow: hidden; }
.data-table-controls { border-bottom: 1px solid var(--border); }
.data-table-toolbar { display: flex; min-height: 62px; padding: 12px 18px; align-items: center; justify-content: space-between; gap: 18px; }
.data-table-entries { display: flex; margin: 0; align-items: center; gap: 9px; color: #465a75; font-size: .73rem; font-weight: 400; }
.data-table-entries .form-select { width: 62px; height: 35px; padding-top: 0; padding-bottom: 0; border-color: #d7dee8; border-radius: 7px; color: #263a57; font-size: .72rem; }
.data-table-search { display: flex; width: 250px; height: 37px; padding: 0 12px; align-items: center; gap: 9px; border: 1px solid #d7dee8; border-radius: 7px; background: #fff; }
.data-table-search:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .18rem rgba(13,110,253,.08); }
.data-table-search i { color: #60718a; }
.data-table-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); font-size: .73rem; }
.data-table-search input::placeholder { color: #8793a5; }
.data-table-filters { display: flex; min-height: 55px; padding: 9px 18px 10px; align-items: center; gap: 10px; border-top: 1px solid #edf1f5; background: #fbfcfe; }
.filter-select-wrap { width: 180px; }
.status-filter-wrap { width: 135px; }
.data-table-filters .form-select { height: 35px; border-color: #dce2ea; border-radius: 7px; color: #34465f; font-size: .72rem; }
.filter-button { height: 37px; padding: 0 16px; border-color: #d5dce5; color: #34465f; font-size: .74rem; }
.clear-filters { color: var(--muted); font-size: .73rem; }
.product-table { min-width: 790px; color: #263a57; font-size: .72rem; }
.product-table > :not(caption) > * > * { padding: 10px 14px; border-right: 1px solid #edf1f5; border-bottom-color: #edf1f5; vertical-align: middle; }
.product-table > :not(caption) > * > *:last-child { border-right: 0; }
.product-table thead th { padding-top: 9px; padding-bottom: 9px; background: #fafbfd; color: #53627a; font-size: .66rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.product-table tbody tr { transition: background-color .12s ease; }
.product-table tbody tr:hover > * { background: #fafcff; }
.product-table thead th:first-child, .product-table tbody td:first-child { padding-left: 19px; }
.product-table thead th:last-child, .product-table tbody td:last-child { padding-right: 19px; }
.sortable-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #53627a; }
.sortable-heading:hover, .sortable-heading.active { color: var(--primary); }
.sortable-heading i { color: #bdc6d2; font-size: .58rem; }
.sortable-heading.active i { color: var(--primary); }
.product-name-cell { display: flex; min-width: 170px; flex-direction: column; }
.product-name-cell strong { margin-bottom: 2px; color: #172238; font-size: .77rem; font-weight: 600; }
.product-name-cell small { color: var(--muted); font-size: .65rem; }
.sku-text { color: #3d506b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 600; }
.price-cell { color: #172238; font-weight: 600; white-space: nowrap; }
.stock-value { display: inline-block; min-width: 20px; color: #283a54; font-weight: 600; }
.stock-value.low { color: var(--danger); }
.low-stock-label { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 10px; background: #fff0f1; color: #c72632; font-size: .59rem; font-weight: 600; }
.status-badge { display: inline-flex; padding: 4px 8px; border-radius: 12px; font-size: .64rem; font-weight: 600; }
.status-active { background: #e8f7ee; color: #008c42; }
.status-inactive { background: #f0f2f5; color: #69778a; }
.product-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.product-actions form { margin: 0; }
.table-action { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; border: 1px solid #e0e5ec; border-radius: 7px; background: #fff; color: #49617e; font-size: .78rem; }
.table-action:hover { border-color: #bfd2f2; background: #f4f8ff; color: var(--primary); }
.table-action.action-danger:hover { border-color: #f0c5c9; background: #fff6f6; color: var(--danger); }
.table-action.action-success:hover { color: var(--success); }
.empty-table { height: 160px; color: var(--muted) !important; text-align: center; vertical-align: middle; }
.data-table-footer { display: flex; min-height: 64px; padding: 12px 18px; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #edf1f5; background: #fff; }
.data-table-pagination { display: flex; align-items: center; gap: 6px; }
.data-table-pagination .page-nav, .data-table-pagination .page-number { display: inline-grid; min-width: 34px; height: 34px; padding: 0 10px; place-items: center; border: 1px solid #d9e0e9; border-radius: 6px; background: #fff; color: #344861; font-size: .7rem; font-weight: 500; }
.data-table-pagination .page-number { min-width: 34px; padding: 0 7px; border-color: transparent; }
.data-table-pagination .page-number:hover, .data-table-pagination .page-nav:hover { border-color: #bcd1f1; color: var(--primary); }
.data-table-pagination .page-number.active { border-color: transparent; background: #e9e8e3; color: var(--primary); }
.data-table-pagination .page-nav.disabled { border-color: #e5e9ef; color: #a5afbd; cursor: default; }
.page-ellipsis { display: inline-grid; width: 25px; height: 34px; place-items: center; color: #758398; }
.data-table-info { color: #53647c; font-size: .68rem; white-space: nowrap; }

/* Product form */
/* Inventory uses the canonical Products table and form components. */
.inventory-status-0 { background: #feecec; color: #be3434; }
.inventory-status-1 { background: #fff5df; color: #996715; }
.inventory-status-2 { background: #e8f8ef; color: #228459; }
.inventory-history-table { min-width: 1080px; }
.inventory-history-table .inventory-notes { min-width: 160px; max-width: 280px; white-space: pre-wrap; overflow-wrap: anywhere; }
.inventory-date-filter { min-width: 145px; }
.inventory-date-filter label { display: block; color: #53647c; font-size: .65rem; }
.inventory-date-filter input { border-color: #dce2ea; font-size: .72rem; }
.data-table-card .data-table-filters:has(.inventory-date-filter) { flex-wrap: wrap; }

.form-page-heading { margin-bottom: 18px; }
.back-link { display: inline-flex; margin-bottom: 9px; align-items: center; gap: 6px; color: #52647d; font-size: .72rem; font-weight: 500; }
.product-form { width: min(980px, 100%); padding-bottom: 30px; }
.form-card { margin-bottom: 15px; }
.form-card-heading { padding: 17px 20px; border-bottom: 1px solid var(--border); }
.form-card-heading h2 { margin: 0 0 3px; font-size: .91rem; font-weight: 700; }
.form-card-heading p { margin: 0; color: var(--muted); font-size: .71rem; }
.form-card-body { padding: 20px; }
.product-form .form-label { margin-bottom: 6px; color: #2d3e57; font-size: .72rem; font-weight: 600; }
.product-form .form-control, .product-form .form-select, .product-form .input-group-text { min-height: 39px; border-color: #dce2ea; border-radius: 7px; font-size: .77rem; }
.product-form textarea.form-control { min-height: 82px; resize: vertical; }
.product-form .input-group-text { min-height: auto; border-radius: 7px 0 0 7px; background: #f4f3ef; color: #53647c; }
.product-form .input-group .form-control { border-radius: 0 7px 7px 0; }
.product-form .form-control:focus, .product-form .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .18rem rgba(13,110,253,.1); }
.product-form .form-text { margin-top: 5px; color: #7a8798; font-size: .65rem; }
.required-mark { color: var(--danger); }
/* Product Options forms share the existing product form foundation. */
.product-edit-tabs { width: min(980px,100%); margin-bottom: 18px; gap: 8px; }
.product-edit-tabs .nav-link { border-radius: 8px; font-size: .78rem; }
.option-choice-row { display: grid; grid-template-columns: minmax(150px,2fr) minmax(100px,1fr) 95px 110px 125px; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.option-choice-row > *, .assigned-choice-fields > * { min-width: 0; }
.option-default-control { align-self: center; font-size: .72rem; }
.option-assignment-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.option-selection-summary { color: var(--muted); font-size: .72rem; }
.option-assignment-context { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.option-assignment-context > div { width: 110px; flex: 0 0 110px; }
.assigned-choice-row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(0,4fr); gap: 15px; align-items: center; padding: 15px 0; border-top: 1px solid var(--border); }
.assigned-choice-fields { display: grid; grid-template-columns: minmax(130px,1.5fr) minmax(90px,1fr) 90px 115px; gap: 12px; min-width: 0; }
.option-choice-toggle { font-size: .77rem; }
.option-choice-disabled .assigned-choice-fields { opacity: .55; }
#productOptionsForm .form-check-label, #optionLibraryForm .form-check-label { overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    .option-choice-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .option-choice-name { grid-column: 1 / -1; }
    .assigned-choice-row { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 575.98px) {
    .assigned-choice-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .option-assignment-heading { align-items: flex-start; flex-direction: column; }
    .option-assignment-context { align-items: flex-start; flex-direction: column; gap: 12px; }
    .option-assignment-context > div { flex-basis: auto; }
    .product-edit-tabs .nav-link { padding: 9px 12px; }
}
.optional-label { margin-left: 4px; padding: 2px 6px; border-radius: 8px; background: #f0f3f7; color: #718096; font-size: .58rem; font-weight: 500; text-transform: uppercase; }
.field-error { width: 100%; margin-top: .25rem; color: var(--bs-form-invalid-color); font-size: .7rem; }
.form-options-grid { display: grid; margin-top: 20px; padding-top: 18px; grid-template-columns: 1fr 220px; gap: 25px; border-top: 1px solid #edf1f5; }
.form-option { display: flex; max-width: 460px; align-items: center; justify-content: space-between; cursor: pointer; }
.form-option > span:first-child { display: flex; flex-direction: column; }
.form-option strong { margin-bottom: 3px; color: #2d3e57; font-size: .73rem; font-weight: 600; }
.form-option small { color: var(--muted); font-size: .66rem; }
.form-option .form-check { margin: 0 0 0 15px; padding-left: 2.5em; }
.form-check-input { cursor: pointer; }
.status-option .form-select { width: 100%; }
.current-stock-box { display: flex; margin-top: 19px; padding: 13px 15px; align-items: center; gap: 12px; border: 1px solid #e0e8f3; border-radius: 8px; background: #f8fbff; }
.current-stock-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #e7f0ff; color: var(--primary); font-size: 1rem; }
.current-stock-box > span:nth-child(2) { display: flex; flex-direction: column; }
.current-stock-box small { color: var(--muted); font-size: .65rem; }
.current-stock-box strong { color: #172238; font-size: 1rem; }
.stock-note { margin-left: auto; color: #718096; font-size: .65rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.form-actions .btn { min-width: 110px; min-height: 40px; border-radius: 8px; font-size: .75rem; font-weight: 600; }

@media (max-width: 767.98px) {
    .products-heading { align-items: center; }
    .product-summary-card { min-height: 82px; padding: 13px; gap: 10px; }
    .product-summary-icon { width: 42px; height: 42px; flex-basis: 42px; }
    .product-summary-card small { white-space: normal; }
    .data-table-filters { flex-wrap: wrap; }
    .filter-select-wrap { flex: 1; width: auto; min-width: 145px; }
    .status-filter-wrap { min-width: 120px; }
    .data-table-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
    .data-table-info { order: -1; }
    .form-options-grid { grid-template-columns: 1fr; gap: 18px; }
    .stock-note { display: none; }
}

@media (max-width: 575.98px) {
    .products-heading .compact-primary { width: 42px; min-height: 42px; padding: 0; justify-content: center; font-size: 0; }
    .products-heading .compact-primary i { font-size: 1rem; }
    .product-summary-card { align-items: flex-start; flex-direction: column; }
    .product-summary-card strong { font-size: 1.2rem; }
    .data-table-toolbar { padding: 13px; align-items: stretch; flex-direction: column; }
    .data-table-search { width: 100%; }
    .data-table-filters { padding: 11px 13px 13px; }
    .filter-button { flex: 1; }
    .data-table-footer { padding: 13px; }
    .data-table-pagination { width: 100%; flex-wrap: wrap; }
    .form-card-body, .form-card-heading { padding: 16px; }
    .current-stock-box { align-items: flex-start; }
    .form-actions .btn { flex: 1; }
}

/* BELLA identity: operational geometry and functional status colors stay intact. */
.bella-wordmark { width:128px; height:auto; }
.bella-app-label { color:#62625e; font-size:.72rem; font-weight:600; letter-spacing:.12em; }
.bella-navbar-wordmark { width:76px; height:auto; flex-shrink:0; }
.sidebar-nav .nav-link { color:#333; }
.sidebar-nav .nav-link i,.nav-section-label,.sidebar-date i { color:#70706b; }
.sidebar-nav .nav-link.active { box-shadow:inset 3px 0 #333; }
.avatar { color:#333; }
.btn-primary { --bs-btn-bg:#111; --bs-btn-border-color:#111; --bs-btn-hover-bg:#333; --bs-btn-hover-border-color:#333; --bs-btn-active-bg:#333; --bs-btn-active-border-color:#333; --bs-btn-disabled-bg:#555; --bs-btn-disabled-border-color:#555; --bs-btn-focus-shadow-rgb:51,51,51; }
.btn-outline-primary { --bs-btn-color:#333; --bs-btn-border-color:#aaa9a4; --bs-btn-hover-bg:#333; --bs-btn-hover-border-color:#333; --bs-btn-active-bg:#111; --bs-btn-active-border-color:#111; --bs-btn-focus-shadow-rgb:51,51,51; }
.text-primary { color:var(--primary)!important; }
.nav-pills { --bs-nav-pills-link-active-bg:#333; }
.form-check-input:checked { background-color:#333; border-color:#333; }
:focus-visible { outline:2px solid #444; outline-offset:3px; }