:root {
    --ink: #172033;
    --muted: #667085;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --line: #e6eaf0;
    --brand: #3268e8;
    --brand-dark: #2455cc;
    --danger: #dc3545;
    --shadow: 0 12px 28px rgba(20, 32, 56, .07);
}

* { -webkit-tap-highlight-color: transparent; }
body { background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.text-secondary { color: var(--muted) !important; }
.card { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.table-card, .metric-card { border-color: var(--line); box-shadow: 0 5px 18px rgba(20, 32, 56, .045); }
.metric-card { transition: transform .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn { min-height: 38px; border-radius: 10px; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 5px 13px rgba(50, 104, 232, .2); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-light, .btn-outline-secondary { border-color: var(--line); background: #fff; color: #475467; }
.btn-outline-primary { color: var(--brand); border-color: #cbd8ff; }
.btn-outline-primary:hover { background: #eef3ff; border-color: #b6c8ff; color: var(--brand-dark); }
.form-control, .form-select, .input-group-text { min-height: 42px; border-color: #d7dde7; border-radius: 10px; }
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child), .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-control:focus, .form-select:focus { border-color: #8eacff; box-shadow: 0 0 0 .22rem rgba(50, 104, 232, .12); }
.form-label { margin-bottom: .45rem; color: #344054; font-size: .875rem; font-weight: 650; }
.form-text { color: var(--muted); }
.alert { border: 0; border-radius: 12px; box-shadow: 0 5px 15px rgba(20, 32, 56, .06); }
.badge { border-radius: 999px; font-weight: 600; }
.table { --bs-table-color: var(--ink); --bs-table-hover-bg: #f7f9fd; }
.table > :not(caption) > * > * { border-bottom-color: #edf0f5; }
.table thead th { color: #667085; font-size: .73rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 22px 70px rgba(17, 24, 39, .22); overflow: hidden; }
.modal-header { padding: 1.1rem 1.3rem; border-bottom-color: var(--line); background: linear-gradient(115deg, #fff, #f5f8ff); }
.modal-body { padding: 1.3rem; }
.modal-footer { padding: 1rem 1.3rem; border-top-color: var(--line); background: #fbfcfe; }
.modal-backdrop.show { opacity: .44; }
.btn-close:focus { box-shadow: 0 0 0 .2rem rgba(50, 104, 232, .18); }

.sidebar { flex: 0 0 248px; width: 248px; min-height: 100vh; background: linear-gradient(160deg, #18243a, #111b2d); }
.sidebar .nav-link { color: #b7c3d8; border-radius: 10px; margin: .25rem 0; padding: .75rem .8rem; transition: background-color .16s ease, color .16s ease; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.content { flex: 1 1 auto; width: calc(100% - 248px); min-width: 0; max-width: 1680px; }
.grid-search { max-width: 460px; }
.data-table-wrap { position: relative; max-height: calc(100vh - 250px); overflow: auto; background: #fff; }
.data-table { min-width: 900px; font-size: .8rem; }
.data-table > :not(caption) > * > * { padding: .55rem .65rem; white-space: nowrap; }
.data-table thead th { position: sticky; top: 0; z-index: 5; background: #fbfcfe; border-bottom: 1px solid var(--line); }
.data-table .sticky-col { position: sticky; left: 0; z-index: 3; min-width: 92px; background: #fff; }
.data-table thead .sticky-col { z-index: 7; background: #fbfcfe; }
.data-table .sticky-col-2 { position: sticky; left: 92px; z-index: 3; min-width: 180px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; background: #fff; box-shadow: 3px 0 5px rgba(17, 24, 39, .035); }
.data-table thead .sticky-col-2 { z-index: 7; background: #fbfcfe; }
.data-table .code-col { width: 92px; }
.data-table .name-col { width: 200px; }
.data-table .action-col { width: 86px; }
.data-table .btn { min-height: 31px; padding: .2rem .45rem; }
.grid-sentinel { height: 1px; }
.image-dropzone { min-height: 160px; border: 1.5px dashed #aab9d0; border-radius: 14px; background: #f8faff; color: #64748b; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; cursor: pointer; transition: .16s ease; }
.image-dropzone:hover, .image-dropzone.is-dragging { border-color: var(--brand); background: #eef3ff; color: var(--brand); }
.image-dropzone img { width: 100%; height: 190px; object-fit: contain; background: #fff; }
.image-dropzone #removeItemImage { position: absolute; top: .6rem; right: .6rem; }
.quantity-control { display: flex; }
.quantity-control .form-control { text-align: center; border-radius: 0; min-width: 0; }
.quantity-control button { width: 42px; border: 1px solid #d7dde7; background: #f8fafc; color: #344054; }
.quantity-control button:first-child { border-radius: 10px 0 0 10px; }
.quantity-control button:last-child { border-radius: 0 10px 10px 0; }
.quantity-control button:hover { background: #eaf0fb; }
.live-total { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; background: linear-gradient(100deg, #edf3ff, #f7faff); color: #244a9a; border: 1px solid #dce7ff; border-radius: 12px; }
.live-total strong { font-size: 1.1rem; }
.item-thumb { width: 32px; height: 32px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; flex: 0 0 auto; }
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { height: 42px; border: 1px solid #d7dde7; border-radius: 10px; padding: 7px 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-dropdown { border-color: #d7dde7; border-radius: 10px; overflow: hidden; }
.select2-container--open .select2-selection--single { border-color: #8eacff; box-shadow: 0 0 0 .22rem rgba(50, 104, 232, .12); }

.page-shell { max-width: 1120px; }
.page-hero { margin-bottom: 1.5rem; padding: 1.4rem 1.5rem; border: 1px solid #e4eaff; border-radius: 18px; background: linear-gradient(115deg, #fff, #f0f5ff); }
.page-hero h1 { margin-bottom: .25rem; }
.action-card { height: 100%; }
.action-card .card-body { padding: 1.35rem; }
.danger-card { border-color: #f0c8cd; }
.danger-card .card-header { background: #fff7f7; border-bottom-color: #f3d9dc; }
.reset-modal .modal-header { background: linear-gradient(115deg, #fff4f4, #fff); }
.reset-modal .warning-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #fff1f2; color: var(--danger); font-size: 1.4rem; }

@media (max-width: 767px) {
    body { padding-bottom: 75px; }
    .content { width: 100%; padding: 1rem !important; }
    .sidebar { position: fixed !important; inset: auto 0 0; z-index: 1030; flex: 0 0 100%; width: 100%; min-height: 0; padding: .35rem .45rem !important; box-shadow: 0 -3px 14px rgba(17, 24, 39, .2); }
    .sidebar > a { display: none !important; }
    .sidebar nav { flex-direction: row !important; justify-content: space-around; }
    .sidebar .nav-link { flex: 1; margin: 0; padding: .4rem .2rem; text-align: center !important; font-size: .68rem; }
    .sidebar .nav-link .bi { display: block; margin: 0 0 .14rem !important; font-size: 1.15rem; }
    .menu-text { display: block; }
    header { align-items: flex-start !important; gap: .75rem; }
    header h1 { font-size: 1.25rem; }
    header .badge { white-space: nowrap; }
    .modal-dialog { margin: .6rem; }
    .modal-body { padding: 1.1rem; }
    .data-table-wrap { max-height: calc(100vh - 268px); }
    .data-table { font-size: .75rem; }
    .data-table > :not(caption) > * > * { padding: .42rem .48rem; }
    .data-table .sticky-col { min-width: 76px; }
    .data-table .sticky-col-2 { left: 76px; min-width: 145px; max-width: 160px; }
    .data-table .code-col { width: 76px; }
    .data-table .name-col { width: 155px; }
    .page-hero { padding: 1.15rem; }
}