:root {
    --ink: #17243a;
    --ink-2: #24344d;
    --muted: #6b778c;
    --line: #e3e7ee;
    --surface: #ffffff;
    --canvas: #f4f5f7;
    --gold: #e9b949;
    --gold-soft: #fff5d9;
    --red: #d94b4b;
    --red-soft: #fff0f0;
    --green: #198754;
    --green-soft: #eaf7f0;
    --shadow: 0 18px 50px rgba(21, 36, 58, 0.08);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 5%, rgba(233, 185, 73, 0.12), transparent 24rem),
        var(--canvas);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
code { color: var(--ink-2); font-size: 0.9em; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    width: 260px;
    flex-direction: column;
    padding: 30px 22px 22px;
    overflow-y: auto;
    color: #fff;
    background:
        linear-gradient(155deg, rgba(255,255,255,0.04), transparent 45%),
        #16233a;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 2px 7px 30px;
    text-align: center;
}

.brand-logo {
    display: block;
    width: 73px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18));
}

.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-family: Georgia, serif; font-size: 18px; letter-spacing: 0.08em; }
.brand-copy small { color: #aeb8c8; font-size: 12px; letter-spacing: 0.05em; }
.version-tag { display: inline-flex; margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: #17243a; background: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: 0; vertical-align: 1px; }

.main-nav { display: grid; gap: 8px; }
.nav-group { display: grid; gap: 4px; }

.nav-link {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border-radius: 12px;
    color: #bec7d5;
    font-size: 14px;
    font-weight: 650;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-link:hover { color: #fff; background: rgba(255,255,255,0.07); transform: translateX(2px); }
.nav-link.is-active { color: #17243a; background: var(--gold); }
.nav-group-toggle { width: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.nav-group-toggle.is-active { color: #fff; background: rgba(255,255,255,0.08); }
.nav-chevron { font-size: 16px; transition: transform 160ms ease; }
.nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 4px; padding: 2px 0 4px 39px; }
.nav-submenu-link { display: grid; grid-template-columns: 12px 1fr auto; min-height: 38px; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px; color: #aeb9c9; font-size: 11px; font-weight: 700; }
.nav-submenu-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-submenu-link.is-active { color: #17243a; background: #f0d273; }
.nav-icon { font-size: 22px; line-height: 1; text-align: center; }
.nav-count { min-width: 24px; padding: 3px 7px; border-radius: 999px; color: #fff; background: rgba(255,255,255,0.12); font-size: 11px; text-align: center; }
.nav-link.is-active .nav-count { color: #fff; background: #17243a; }
.nav-submenu-link.is-active .nav-count { color: #fff; background: #17243a; }

.sidebar-footer { display: grid; gap: 4px; margin-top: auto; padding: 18px 10px 0; border-top: 1px solid rgba(255,255,255,0.1); color: #9eabbd; }
.sidebar-footer > span { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-footer > strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer form { margin-top: 8px; }
.logout-button { width: 100%; min-height: 36px; border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; color: #dbe1ea; background: rgba(255,255,255,0.06); cursor: pointer; font-size: 10px; font-weight: 800; }
.logout-button:hover { color: #fff; background: rgba(217,75,75,0.28); }

.main-content { min-height: 100vh; margin-left: 260px; padding: 32px clamp(22px, 4vw, 62px) 52px; }
.topbar { display: flex; max-width: 1440px; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 28px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: #8b6b1e; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; }
.topbar h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; }

.view-panel { display: none; max-width: 1440px; margin: 0 auto; }
.view-panel.is-active { display: block; animation: enter 220ms ease-out both; }

.welcome-card { position: relative; display: flex; min-height: 330px; align-items: center; gap: 28px; padding: clamp(32px, 6vw, 76px); overflow: hidden; border: 1px solid rgba(23,36,58,0.06); border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, #16233a 0%, #223958 72%, #2b466a 100%); box-shadow: 0 24px 60px rgba(22,35,58,0.2); }
.welcome-card::after { position: absolute; right: -80px; bottom: -140px; width: 360px; height: 360px; border: 70px solid rgba(233,185,73,0.1); border-radius: 50%; content: ""; }
.welcome-card > * { position: relative; z-index: 1; }
.welcome-card .section-kicker { color: #e9c66d; }
.welcome-card h2 { max-width: 780px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4.5vw, 58px); line-height: 1.12; }
.welcome-mark { display: grid; width: 92px; height: 92px; flex: 0 0 auto; place-items: center; border: 2px solid rgba(233,185,73,0.55); border-radius: 28px; color: #17243a; background: var(--gold); font-family: Georgia, serif; font-size: 55px; font-weight: 900; box-shadow: 0 18px 40px rgba(5,12,24,0.25); }

@keyframes enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric-card { display: flex; min-height: 120px; align-items: center; justify-content: space-between; padding: 24px; border: 1px solid rgba(23,36,58,0.06); border-radius: var(--radius-lg); background: rgba(255,255,255,0.88); box-shadow: 0 12px 30px rgba(23,36,58,0.045); }
.metric-card div { display: grid; gap: 8px; }
.metric-card span { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-card strong { font-family: Georgia, serif; font-size: 34px; line-height: 1; }
.metric-card--navy { color: #fff; border-color: transparent; background: linear-gradient(145deg, #17243a, #223653); box-shadow: 0 18px 34px rgba(23,36,58,0.2); }
.metric-card--navy span { color: #bfc9d8; }
.metric-symbol { display: grid !important; width: 47px; height: 47px; place-items: center; border-radius: 15px; color: #fff !important; background: rgba(255,255,255,0.1); font-size: 22px !important; }
.metric-symbol--gold { color: #8a6410 !important; background: var(--gold-soft); }
.metric-symbol--red { color: #b12e2e !important; background: var(--red-soft); }

.content-card { overflow: hidden; border: 1px solid rgba(23,36,58,0.065); border-radius: var(--radius-lg); background: rgba(255,255,255,0.94); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 27px 30px 18px; }
.section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(22px, 2.2vw, 29px); font-weight: 700; }
.section-heading p:not(.section-kicker) { max-width: 680px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.section-heading--labels { align-items: center; }
.section-heading--selectable { align-items: center; }
.section-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 30px 22px; border-bottom: 1px solid var(--line); }
.toolbar--labels { flex-wrap: wrap; }
.toolbar--labels .search-box { flex: 1 1 340px; }
.toolbar-filters { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.search-box { display: flex; width: min(540px, 100%); height: 44px; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid #d9dee7; border-radius: 12px; color: #7e8999; background: #fafbfc; transition: border 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.search-box:focus-within { border-color: #c69a31; background: #fff; box-shadow: 0 0 0 4px rgba(233,185,73,0.15); }
.search-box > span { font-size: 23px; transform: rotate(-15deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.search-box input::placeholder { color: #99a2b0; }
.limit-control, .filter-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.limit-control select, .filter-control select, .field select, .field input { border: 1px solid #d8dde6; border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
.limit-control select, .filter-control select { height: 42px; padding: 0 34px 0 12px; cursor: pointer; }
.limit-control select:focus, .filter-control select:focus, .field select:focus, .field input:focus { border-color: #c69a31; box-shadow: 0 0 0 4px rgba(233,185,73,0.14); }

.table-wrap { overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; }
.app-table th { padding: 13px 18px; color: #7d8797; background: #fafbfc; font-size: 10px; font-weight: 800; letter-spacing: 0.11em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.app-table th:first-child, .app-table td:first-child { padding-left: 30px; }
.app-table th:last-child, .app-table td:last-child { padding-right: 30px; }
.app-table td { padding: 17px 18px; border-top: 1px solid #edf0f4; color: #4b5668; font-size: 13px; vertical-align: middle; }
.app-table tbody tr { transition: background 130ms ease; }
.app-table tbody tr:hover { background: #fffdf7; }
.number-column { width: 70px; }
.status-column { width: 155px; }
.change-column { width: 175px; }
.action-column { width: 150px; text-align: right !important; }
.action-column--wide { width: 270px; }
.checkbox-column { width: 50px; }
.item-name { display: block; color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.4; }
.item-subline { display: block; margin-top: 4px; color: #929cab; font-size: 11px; }
.price-text { color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
.strike-price { display: block; margin-bottom: 3px; color: #98a1ae; font-size: 11px; text-decoration: line-through; }
.spec-summary { display: -webkit-box; max-width: 340px; overflow: hidden; color: #697487; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.date-text { color: #5f6b7d; white-space: nowrap; }
.date-text small { display: block; margin-top: 3px; color: #9aa3af; }
.category-pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.category-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.category-pill--reguler { color: #8a681b; background: #fff4ce; }
.category-pill--promo { color: #bd3434; background: #ffe8e8; }
.category-pill--laptop_pc { color: #296a9a; background: #e8f3ff; }
.master-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.master-status::before { width: 7px; height: 7px; border-radius: 50%; content: ""; }
.master-status--ready { color: #16764a; background: var(--green-soft); }
.master-status--ready::before { background: #26a269; box-shadow: 0 0 0 4px rgba(38,162,105,0.11); }
.master-status--empty { color: #7e8999; background: #f1f3f6; }
.master-status--empty::before { background: #aab2be; }
.has-label-row { background: linear-gradient(90deg, rgba(234,247,240,0.65), transparent 38%); }
.has-label-row:hover { background: #f3fbf7 !important; }
.price-increased-row { box-shadow: inset 3px 0 0 #d59a20; }
.price-decreased-row { box-shadow: inset 3px 0 0 #23895d; }
.app-table tbody tr.is-selected { background: #fff9e8; }
.app-table tbody tr.is-selected:hover { background: #fff5d7 !important; }
.mobile-card.is-selected { background: #fff9e8; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

.primary-button, .secondary-button, .text-button, .danger-button, .row-button, .icon-button {
    border: 0;
    cursor: pointer;
    font-weight: 750;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, opacity 140ms ease;
}
.primary-button, .secondary-button, .danger-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 11px; }
.primary-button { color: #17243a; background: var(--gold); box-shadow: 0 9px 22px rgba(201,150,34,0.18); }
.primary-button:hover { background: #f0c45b; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(201,150,34,0.25); }
.secondary-button { color: #fff; background: var(--ink); }
.secondary-button:hover { background: #223653; transform: translateY(-1px); }
.secondary-button--outline { color: var(--ink); border: 1px solid #ccd3de; background: #fff; box-shadow: none; }
.secondary-button--outline:hover { background: #f5f7fa; }
.secondary-button span { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: rgba(255,255,255,0.13); font-size: 10px; }
.danger-button { color: #fff; background: var(--red); }
.danger-button:hover { background: #c83e3e; }
.button-count { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: rgba(255,255,255,0.16); font-size: 10px; }
.text-button { min-height: 40px; padding: 0 12px; color: #6b7585; background: transparent; }
.text-button:hover { color: var(--ink); background: #f1f3f6; border-radius: 9px; }
.row-button { min-height: 34px; padding: 0 11px; border-radius: 9px; color: #536074; background: #f1f3f6; font-size: 11px; }
.row-button:hover { color: var(--ink); background: #e8ebf0; transform: translateY(-1px); }
.row-button--primary { color: #17243a; background: #f4d582; }
.row-button--primary:hover { background: var(--gold); }
.row-button--danger { width: 34px; padding: 0; color: #bd3b3b; background: var(--red-soft); }
.row-button--danger:hover { color: #fff; background: var(--red); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled, .row-button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; box-shadow: none; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #707b8c; background: #f1f3f6; font-size: 25px; font-weight: 400; line-height: 1; }
.icon-button:hover { color: var(--ink); background: #e7eaf0; }

.table-footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 30px; border-top: 1px solid var(--line); }
.table-footer p { margin: 0; color: #8993a2; font-size: 11px; }
.master-pagination { display: flex; align-items: center; gap: 8px; }
.pagination-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid #dce1e9; border-radius: 9px; color: #536074; background: #fff; cursor: pointer; font-size: 10px; font-weight: 800; transition: border 140ms ease, background 140ms ease, color 140ms ease; }
.pagination-button:hover:not(:disabled) { border-color: #d2b05c; color: var(--ink); background: #fff9e8; }
.pagination-button:disabled { cursor: not-allowed; opacity: 0.42; }
.pagination-button span { font-size: 16px; line-height: 1; }
.pagination-info { min-width: 105px; color: #687487; font-size: 10px; font-weight: 800; text-align: center; white-space: nowrap; }
.mobile-list { display: none; }

.empty-state { padding: 56px 24px !important; text-align: center; }
.empty-state strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 15px; }
.empty-state span { color: #919aa8; }
.loading-row td { height: 72px; }
.skeleton { display: block; height: 13px; border-radius: 999px; background: linear-gradient(90deg,#eef0f4 20%,#f9fafb 50%,#eef0f4 80%); background-size: 200% 100%; animation: shimmer 1.25s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 22px; }
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,17,29,0.62); backdrop-filter: blur(5px); animation: fadeIn 160ms ease both; }
.modal-panel { position: relative; z-index: 1; width: min(100%, 620px); max-height: calc(100vh - 44px); overflow-y: auto; border: 1px solid rgba(255,255,255,0.6); border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(7,14,25,0.3); animation: modalIn 180ms ease-out both; }
.modal-panel--preview { width: min(100%, 720px); }
.modal-panel--bulk { width: min(100%, 780px); }
.modal-panel--confirm { width: min(100%, 420px); padding: 32px; text-align: center; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 28px 19px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-family: Georgia, serif; font-size: 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 28px; }
.field { display: grid; align-content: start; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field > label { color: #3f4b5d; font-size: 12px; font-weight: 800; }
.field > small { color: #8d96a5; font-size: 10px; line-height: 1.4; }
.field select, .field input { width: 100%; height: 44px; padding: 0 13px; }
.currency-input { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid #d8dde6; border-radius: 10px; background: #fff; transition: border 160ms ease, box-shadow 160ms ease; }
.currency-input:focus-within { border-color: #c69a31; box-shadow: 0 0 0 4px rgba(233,185,73,0.14); }
.currency-input span { padding-left: 13px; color: #8c96a5; font-size: 12px; font-weight: 800; }
.currency-input input { border: 0; box-shadow: none !important; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 18px 28px 24px; border-top: 1px solid var(--line); }
.preview-stage { display: grid; min-height: 310px; place-items: center; padding: 42px 30px; overflow: auto; background: #eef0f4; }
.preview-heading { background: #fff; }
.danger-symbol { display: grid; width: 50px; height: 50px; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: #ba3030; background: var(--red-soft); font-size: 25px; font-weight: 900; }
.modal-panel--confirm h2 { margin: 0; font-family: Georgia, serif; font-size: 26px; }
.modal-panel--confirm p { margin: 9px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.modal-panel--confirm .modal-actions { justify-content: center; margin-top: 20px; padding: 20px 0 0; }
body.has-modal { overflow: hidden; }

.master-autocomplete { position: relative; }
.master-autocomplete > input { display: block; }
.autocomplete-results { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; max-height: 260px; overflow-y: auto; border: 1px solid #d8dde6; border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(23,36,58,0.17); }
.autocomplete-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 13px; border: 0; border-top: 1px solid #edf0f4; color: var(--ink); background: #fff; cursor: pointer; text-align: left; }
.autocomplete-option:first-child { border-top: 0; }
.autocomplete-option:hover, .autocomplete-option:focus { outline: 0; background: #fff9e8; }
.autocomplete-option strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-option span { flex: 0 0 auto; color: #6f7988; font-size: 11px; font-weight: 800; }
.autocomplete-message { padding: 16px 13px; color: #7d8797; font-size: 11px; text-align: center; }
#masterLookupHint.is-selected { color: #17734a; font-weight: 700; }

.bulk-selected-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.bulk-selected-heading label { display: block; color: #3f4b5d; font-size: 12px; font-weight: 800; }
.bulk-selected-heading small { display: block; margin-top: 3px; color: #8d96a5; font-size: 10px; line-height: 1.4; }
.text-button--small { min-height: 30px; padding: 0 8px; font-size: 10px; }
.bulk-items-list { display: grid; max-height: 290px; overflow-y: auto; border: 1px solid #dfe3ea; border-radius: 12px; background: #fafbfc; }
.bulk-item-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 210px) 34px; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid #e7eaf0; }
.bulk-item-row:first-child { border-top: 0; }
.bulk-item-copy { min-width: 0; }
.bulk-item-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bulk-item-copy span { display: block; margin-top: 4px; color: #6e7989; font-size: 11px; font-weight: 800; }
.bulk-strike-field { display: grid; gap: 4px; }
.bulk-strike-field > span { color: #717c8d; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.bulk-strike-field .currency-input input { height: 36px; padding-right: 9px; }
.bulk-strike-field .currency-input span { padding-left: 9px; font-size: 10px; }
.bulk-empty { padding: 22px 14px; color: #7d8797; font-size: 11px; text-align: center; }
.bulk-remove-button { align-self: center; }

.price-change { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.price-change--naik { color: #9a6510; background: #fff2cc; }
.price-change--turun { color: #147149; background: #e8f7ef; }
.price-change-detail { display: block; margin-top: 4px; color: #8b95a4; font-size: 9px; white-space: nowrap; }
.price-change-empty { color: #a0a8b4; }

.import-notice { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid #dce8df; border-radius: 12px; color: #315a45; background: #f1faf5; }
.import-notice strong { font-size: 12px; }
.import-notice span { font-size: 10px; line-height: 1.5; }
.import-template-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed #d5dae3; border-radius: 11px; color: #7b8594; font-size: 10px; }
.import-message { padding: 12px 14px; border: 1px solid #efc7c7; border-radius: 11px; color: #9f3030; background: #fff2f2; font-size: 11px; line-height: 1.5; }
.import-message.is-success { border-color: #bfe2ce; color: #176942; background: #eef9f3; }
.import-preview { display: grid; gap: 10px; }
.import-preview-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.import-preview-summary--multi { grid-template-columns: 1.15fr .8fr .8fr; }
.import-preview-summary > div { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid #e1e5eb; border-radius: 11px; background: #fafbfc; }
.import-preview-summary span { color: #87919f; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.import-preview-summary strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.import-file-list { display: grid; max-height: 170px; overflow: auto; border: 1px solid #e1e5eb; border-radius: 11px; background: #fff; }
.import-file-item { display: grid; grid-template-columns: 24px minmax(0, 1.5fr) minmax(75px, .8fr) auto; align-items: center; gap: 9px; min-height: 38px; padding: 7px 10px; border-bottom: 1px solid #edf0f4; color: #667185; font-size: 9px; }
.import-file-item:last-child { border-bottom: 0; }
.import-file-number { display: inline-flex; width: 21px; height: 21px; align-items: center; justify-content: center; border-radius: 50%; color: #17304d; background: #edf3f9; font-weight: 800; }
.import-file-name { overflow: hidden; color: var(--ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.import-file-sheet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-file-item strong { color: #315a45; font-size: 9px; white-space: nowrap; }
.import-preview-table { max-height: 230px; overflow: auto; border: 1px solid #e1e5eb; border-radius: 11px; }
.app-table--compact th, .app-table--compact td { padding: 10px 12px !important; }
.import-preview > small { color: #8d96a5; font-size: 9px; }
.field input[type="file"] { height: auto; min-height: 44px; padding: 9px 11px; font-size: 11px; }
.field input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 0; border-radius: 8px; color: var(--ink); background: #f0d58c; cursor: pointer; font-weight: 800; }

.toast-region { position: fixed; z-index: 200; right: 24px; bottom: 24px; display: grid; width: min(360px, calc(100vw - 48px)); gap: 9px; }
.toast { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.55); border-radius: 13px; color: #fff; background: #17243a; box-shadow: 0 17px 45px rgba(12,22,38,0.22); animation: toastIn 180ms ease-out both; font-size: 12px; line-height: 1.45; }
.toast::before { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #17243a; background: #5ee09a; content: "✓"; font-size: 11px; font-weight: 900; }
.toast.is-error::before { color: #fff; background: #e05d5d; content: "!"; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ================================================================
   DESAIN LABEL ASLI — DISALIN TANPA PERUBAHAN DARI FILE PENGGUNA
   ================================================================ */
.label-card, .label-card * { box-sizing: content-box; font-family: Arial, sans-serif; }
.label-card { position: relative; background: white; border: 2px solid #333; overflow: hidden; margin: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.label-card.reguler, .label-card.promo { width: 340px; height: 190px; display: flex; flex-direction: column; }
.label-card.reguler::before, .label-card.promo::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background-image: url('../logo.png'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.08; z-index: 0; filter: invert(1); pointer-events: none; }
.label-header { height: 35px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; font-weight: bold; position: relative; z-index: 10;}
.badge { padding: 3px 8px; border-radius: 3px; font-size: 14px; font-weight: bold; }
.label-body { padding: 8px 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 10;}
.product-name { font-size: 12px; font-weight: bold; margin-bottom: 2px; text-transform: uppercase; }
.product-price { font-size: 32px; font-weight: 900; margin: 2px 0; letter-spacing: -0.5px; }
.product-price span { font-size: 16px; font-weight: bold; }
.specs { margin: 0; padding-left: 18px; font-size: 11px; font-weight: bold; line-height: 1.3; }
.label-logo { height: 18px; margin-right: 6px; vertical-align: middle; }

.reguler { border-color: #eab308; } .reguler .label-header { background-color: #eab308; color: #000000; } .reguler .badge { display: none; } .reguler .label-logo { filter: brightness(0); }
.promo { border-color: #dc2626; background-color: #fef08a; } .promo .label-header { background-color: #dc2626; color: #ffffff; } .promo .badge { background-color: #fde047; color: #dc2626; border: none; } .promo .label-logo { filter: brightness(0) invert(1); } .promo .product-price { color: #dc2626; } .promo .harga-coret { font-size: 11px; color: #6b7280; text-decoration: line-through; margin-bottom: -4px; } .promo-footer { background-color: #dc2626; color: white; text-align: center; font-size: 10px; font-weight: bold; padding: 2px; text-transform: uppercase; position: relative; z-index: 10;}

.label-card.laptop_pc {
    width: 100%; max-width: 650px; aspect-ratio: 1 / 1.414; background-color: #ffffff;
    border: 3px solid #0f172a; display: flex; flex-direction: column;
    padding: 4%; box-sizing: border-box; text-align: center; color: #0f172a;
}
.lt-header { display: flex; align-items: center; justify-content: center; margin-bottom: 3%; padding-bottom: 2%; border-bottom: 2px solid #e2e8f0;}
.lt-logo { height: 40px; margin-right: 15px; }
.lt-brand-title { font-size: 24px; font-weight: 900; letter-spacing: 2px; color: #475569;}
.lt-merek { font-size: 55px; font-weight: 900; text-transform: uppercase; line-height: 1; margin-top: 10px; }
.lt-seri { font-size: 28px; font-weight: 700; color: #475569; margin-top: 5px; margin-bottom: 15px; }
.lt-image-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; margin: 15px 0; min-height: 250px; }
.lt-image-container img { max-width: 90%; max-height: 100%; object-fit: contain; }
.lt-specs-wrap { background-color: #f8fafc; padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #e2e8f0; }
.lt-specs-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; text-align: left; }
.lt-specs-list li { font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: flex-start; }
.lt-specs-list li::before { content: "✓"; margin-right: 8px; font-size: 15px; color: #10b981; font-weight: 900;}
.lt-price-wrap { border-top: 3px solid #0f172a; padding-top: 15px; margin-top: auto; }
.lt-price { font-size: 80px; font-weight: 900; color: #dc2626; line-height: 1; text-shadow: 2px 2px 0px rgba(0,0,0,0.05); }
.lt-price span { font-size: 30px; vertical-align: top; color: #0f172a; margin-right: 5px;}
.lt-harga-coret { font-size: 24px; color: #94a3b8; text-decoration: line-through; font-weight: bold; margin-bottom: 5px; }

#printArea { display: none; }
.print-wrapper { margin: 0; padding: 0; border: none; }

@media print {
    body { background-color: white !important; }
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea { display: flex !important; position: absolute; left: 0; top: 0; flex-wrap: wrap; gap: 15px; width: 100%; justify-content: flex-start; background-color: white !important; }
    .hide-on-print { display: none !important; }
    * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important; }

    .print-wrapper { page-break-inside: avoid; }
    .label-card.laptop_pc { width: 210mm !important; height: 297mm !important; max-width: none; border: none; padding: 12mm; page-break-after: always; }
    .label-card.laptop_pc .lt-merek { font-size: 80px; }
    .label-card.laptop_pc .lt-seri { font-size: 38px; }
    .label-card.laptop_pc .lt-image-container { margin: 25px 0; }
    .label-card.laptop_pc .lt-specs-list li { font-size: 20px; padding: 5px 0; }
    .label-card.laptop_pc .lt-price { font-size: 110px; }
    .label-card.laptop_pc .lt-harga-coret { font-size: 35px; }
}

@media (max-width: 1020px) {
    .sidebar { width: 220px; padding-inline: 16px; }
    .main-content { margin-left: 220px; padding-inline: 24px; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 100px; }
    .label-table th:nth-child(4), .label-table td:nth-child(4) { display: none; }
}

@media (max-width: 760px) {
    .sidebar { position: sticky; top: 0; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 12px 15px; overflow: visible; }
    .brand { flex-direction: row; justify-content: flex-start; gap: 9px; padding: 0; text-align: left; }
    .brand-logo { width: 32px; height: 38px; filter: none; }
    .brand-copy small { display: none; }
    .brand-copy strong { font-size: 14px; }
    .main-nav { display: flex; margin-left: auto; gap: 5px; }
    .nav-group { position: relative; display: block; }
    .nav-link { display: flex; min-height: 38px; gap: 5px; padding: 0 10px; font-size: 11px; }
    .nav-icon { font-size: 17px; }
    .nav-count { display: none; }
    .nav-submenu { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 190px; gap: 4px; padding: 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: #16233a; box-shadow: 0 18px 42px rgba(4,10,20,0.28); }
    .nav-submenu .nav-count { display: inline-block; }
    .sidebar-footer { display: block; margin: 0 0 0 5px; padding: 0; border: 0; }
    .sidebar-footer > span, .sidebar-footer > strong { display: none; }
    .sidebar-footer form { margin: 0; }
    .logout-button { width: auto; min-height: 34px; padding: 0 9px; font-size: 9px; }
    .main-content { margin-left: 0; padding: 22px 15px 38px; }
    .topbar { align-items: flex-start; }
    .topbar h1 { font-size: 30px; }
    .top-create-button { min-height: 38px; padding: 0 12px; font-size: 11px; }
    .metric-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .metric-card { min-height: 90px; padding: 14px; border-radius: 14px; }
    .metric-card strong { font-size: 25px; }
    .metric-symbol { display: none !important; }
    .welcome-card { min-height: 270px; gap: 18px; padding: 34px 26px; }
    .welcome-mark { width: 68px; height: 68px; border-radius: 21px; font-size: 40px; }
    .section-heading { padding: 22px 18px 14px; }
    .section-heading--labels { align-items: flex-start; }
    .section-heading--selectable { align-items: flex-start; }
    .section-heading-actions { flex-wrap: wrap; }
    .section-heading--labels .secondary-button { white-space: nowrap; }
    .toolbar { align-items: stretch; padding: 0 18px 18px; }
    .toolbar--labels { display: grid; }
    .toolbar-filters { justify-content: stretch; flex-wrap: wrap; }
    .toolbar-filters > label { flex: 1 1 150px; justify-content: flex-end; }
    .search-box { width: 100%; }
    .limit-control span { display: none; }
    .table-wrap { display: none; }
    .mobile-list { display: grid; gap: 0; }
    .mobile-card { display: grid; gap: 13px; padding: 18px; border-top: 1px solid var(--line); }
    .mobile-card:first-child { border-top: 0; }
    .mobile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .mobile-card-price { color: var(--ink); font-size: 13px; font-weight: 850; white-space: nowrap; }
    .mobile-card-actions { display: flex; flex-wrap: wrap; gap: 7px; }
    .mobile-card .row-button { flex: 1; }
    .mobile-checkbox { display: flex; align-items: flex-start; gap: 10px; }
    .mobile-checkbox input { margin-top: 4px; }
    .table-footer { padding: 0 18px; }
    .table-footer--master { min-height: 66px; flex-wrap: wrap; gap: 9px; padding-block: 10px; }
    .form-grid { grid-template-columns: 1fr; padding: 20px; }
    .field--full { grid-column: auto; }
    .modal-header { padding: 21px 20px 16px; }
    .modal-actions { padding: 16px 20px 20px; }
    .preview-stage { min-height: 280px; padding: 30px 10px; }
    .bulk-item-row { grid-template-columns: minmax(0, 1fr) 34px; }
    .bulk-strike-field { grid-row: 2; grid-column: 1 / -1; }
    .bulk-remove-button { grid-row: 1; grid-column: 2; }
    .import-template-row { align-items: flex-start; flex-direction: column; }
}

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 12%, rgba(233,185,73,0.18), transparent 25rem), linear-gradient(145deg, #111c30, #203653); }
.login-shell { width: min(100%, 460px); }
.login-card { padding: 34px; border: 1px solid rgba(255,255,255,0.6); border-radius: 24px; background: rgba(255,255,255,0.98); box-shadow: 0 32px 90px rgba(5,12,24,0.34); }
.login-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.login-brand img { width: 52px; height: 60px; object-fit: contain; }
.login-brand div { display: grid; gap: 2px; }
.login-brand strong { color: var(--ink); font-family: Georgia, serif; font-size: 19px; letter-spacing: 0.08em; }
.login-brand span { color: #8993a2; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.login-heading { padding: 27px 0 20px; }
.login-heading h1 { margin: 0; color: var(--ink); font-family: Georgia, serif; font-size: 31px; }
.login-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.login-alert { margin-bottom: 16px; padding: 12px 13px; border: 1px solid #efc7c7; border-radius: 10px; color: #9f3030; background: #fff2f2; font-size: 11px; line-height: 1.45; }
.login-form { display: grid; gap: 15px; }
.login-form label { display: grid; gap: 7px; }
.login-form label > span { color: #3f4b5d; font-size: 11px; font-weight: 800; }
.login-form input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #d8dde6; border-radius: 10px; color: var(--ink); background: #fff; outline: 0; }
.login-form input:focus { border-color: #c69a31; box-shadow: 0 0 0 4px rgba(233,185,73,0.14); }
.login-submit { width: 100%; margin-top: 3px; }
.login-version { margin: 22px 0 0; color: #98a1ae; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }

@media (max-width: 520px) {
    .brand-copy { display: none; }
    .topbar { display: grid; grid-template-columns: 1fr; }
    .top-create-button { width: 100%; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 82px; }
    .welcome-card { display: grid; min-height: 300px; align-content: center; }
    .login-page { padding: 14px; }
    .login-card { padding: 26px 22px; border-radius: 19px; }
    .toolbar { display: grid; }
    .toolbar-filters { display: grid; grid-template-columns: 1fr; }
    .toolbar-filters > label { justify-content: space-between; }
    .toolbar-filters select { min-width: 0; flex: 1; }
    .limit-control { justify-content: flex-end; }
    .section-heading--labels { display: grid; }
    .section-heading-actions { display: grid; width: 100%; }
    .section-heading-actions .secondary-button, .section-heading-actions .danger-button { width: 100%; }
    .section-heading--selectable { display: grid; }
    .table-footer--master { display: grid; }
    .master-pagination { width: 100%; justify-content: space-between; }
    .pagination-button { flex: 1; }
    .import-preview-summary { grid-template-columns: 1fr; }
    .import-file-item { grid-template-columns: 24px minmax(0, 1fr) auto; }
    .import-file-sheet { display: none; }
    .modal { padding: 10px; }
    .modal-panel { max-height: calc(100vh - 20px); border-radius: 17px; }
    .preview-stage { justify-content: start; overflow-x: auto; }
}

/* Modul Packing v1.7.0 — berada di luar blok desain label yang dikunci. */
.packing-layout { display: grid; grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr); align-items: start; gap: 22px; }
.packing-recorder-card, .packing-archive-card { overflow: hidden; }
.packing-section-heading { align-items: flex-start; border-bottom: 1px solid var(--line); }
.packing-kind-pill { display: inline-flex; min-height: 30px; align-items: center; padding: 0 12px; border-radius: 999px; color: #fff; background: #275ea8; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.packing-view[data-kind="retur"] .packing-kind-pill { background: #dc7629; }
.packing-recorder-body { display: grid; gap: 16px; padding: 0 24px 24px; }
.packing-camera-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 15px; background: #07101e; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
.packing-camera-stage video { display: block; width: 100%; height: 100%; object-fit: cover; background: #07101e; }
.packing-camera-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 24px; color: #cad3e1; background: radial-gradient(circle at 50% 40%, #1e314b, #0c1728 70%); text-align: center; }
.packing-camera-placeholder strong { color: #fff; font-size: 13px; }
.packing-camera-placeholder span { max-width: 290px; color: #94a3b8; font-size: 10px; line-height: 1.5; }
.packing-recording-indicator { position: absolute; z-index: 3; top: 13px; left: 13px; display: flex; min-height: 27px; align-items: center; gap: 7px; padding: 0 10px; border-radius: 999px; color: #fff; background: rgba(172,25,25,0.9); backdrop-filter: blur(8px); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; }
.packing-recording-indicator span { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: packingPulse 800ms ease-in-out infinite alternate; }
@keyframes packingPulse { to { opacity: 0.25; } }
.packing-camera-stage.is-recording { box-shadow: 0 0 0 3px #d83d3d, 0 13px 34px rgba(188,35,35,0.18); }
.packing-camera-stage.is-mismatch { animation: packingShake 340ms ease; box-shadow: 0 0 0 3px #a91717, 0 0 36px rgba(189,22,22,0.32); }
@keyframes packingShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.packing-status { display: flex; min-height: 58px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e0e5ec; border-radius: 12px; background: #f8fafc; }
.packing-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #8491a3; box-shadow: 0 0 0 5px rgba(132,145,163,0.12); }
.packing-status > div { display: grid; gap: 3px; }
.packing-status strong { color: var(--ink); font-size: 11px; }
.packing-status span:last-child { color: var(--muted); font-size: 9px; line-height: 1.45; }
.packing-status[data-state="ready"] { border-color: #c7e5d2; background: #f3fbf6; }
.packing-status[data-state="ready"] .packing-status-dot { background: #26a760; box-shadow: 0 0 0 5px rgba(38,167,96,0.12); }
.packing-status[data-state="recording"] { border-color: #efc4c4; background: #fff5f5; }
.packing-status[data-state="recording"] .packing-status-dot { background: #d83d3d; box-shadow: 0 0 0 5px rgba(216,61,61,0.12); }
.packing-status[data-state="saving"] { border-color: #c8dcf2; background: #f3f8fe; }
.packing-status[data-state="saving"] .packing-status-dot { background: #347cc6; box-shadow: 0 0 0 5px rgba(52,124,198,0.12); }
.packing-status[data-state="error"] { border-color: #efc4c4; background: #fff5f5; }
.packing-status[data-state="error"] .packing-status-dot { background: #bf2f2f; }

.packing-recording-meta { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 9px; }
.packing-recording-meta > div { display: grid; min-width: 0; gap: 4px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.packing-recording-meta span { color: #8d97a6; font-size: 8px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.packing-recording-meta strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.packing-scan-field { display: grid; gap: 7px; }
.packing-scan-field > span { color: #3e4a5b; font-size: 10px; font-weight: 850; }
.packing-scan-field input { width: 100%; height: 51px; padding: 0 14px; border: 2px solid #d8dee7; border-radius: 11px; color: var(--ink); background: #fff; outline: none; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
.packing-scan-field input:focus { border-color: #c89a31; box-shadow: 0 0 0 4px rgba(233,185,73,0.14); }
.packing-scan-field input:disabled { color: #9ca5b2; background: #f1f3f6; cursor: not-allowed; }
.packing-camera-button { width: 100%; }
.packing-action-notice { display: grid; gap: 13px; padding: 14px; border: 1px solid; border-radius: 12px; }
.packing-action-notice > div:first-child { display: grid; gap: 4px; }
.packing-action-notice strong { color: var(--ink); font-size: 11px; }
.packing-action-notice span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.packing-action-notice--warning { border-color: #ead392; background: #fff9e9; }
.packing-action-notice--error { border-color: #edc7c7; background: #fff4f4; }
.packing-notice-actions { display: flex; justify-content: flex-end; gap: 8px; }
.packing-notice-actions button { min-height: 36px; }
.packing-recorder-note { margin: 0; color: #8b95a3; font-size: 9px; line-height: 1.55; text-align: center; }
.packing-video-resi { display: grid; gap: 3px; }
.packing-video-resi strong { color: var(--ink); font-size: 11px; }
.packing-video-resi span { color: #919baa; font-size: 8px; }
.packing-size { color: #4c596b; font-size: 10px; font-weight: 800; white-space: nowrap; }
.packing-table .row-actions a.row-button, .packing-view .mobile-card-actions a.row-button { display: inline-flex; align-items: center; justify-content: center; }
.modal-panel--video { width: min(900px, 96vw); }
.packing-video-player-wrap { padding: 0 24px; }
.packing-video-player-wrap video { display: block; width: 100%; max-height: 68vh; border-radius: 14px; background: #050a12; box-shadow: 0 14px 38px rgba(5,12,24,0.18); }
.modal-actions a.primary-button { text-decoration: none; }

@media (max-width: 1260px) {
    .packing-layout { grid-template-columns: minmax(340px, 0.9fr) minmax(440px, 1.1fr); }
}

@media (max-width: 1020px) {
    .packing-layout { grid-template-columns: 1fr; }
    .packing-recorder-card { max-width: 720px; }
}

@media (max-width: 760px) {
    .packing-recorder-body { padding: 0 18px 20px; }
    .packing-section-heading { display: flex; }
    .packing-video-player-wrap { padding: 0 18px; }
}

@media (max-width: 520px) {
    .sidebar .brand { display: none; }
    .main-nav { margin-left: 0; }
    .nav-link { padding-inline: 7px; }
    .nav-link .nav-icon { display: none; }
    .packing-section-heading { display: grid; }
    .packing-kind-pill { justify-self: start; }
    .packing-recording-meta { grid-template-columns: 1fr 1fr; }
    .packing-recording-meta > div:first-child { grid-column: 1 / -1; }
    .packing-notice-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .packing-notice-actions button { width: 100%; }
    .packing-video-player-wrap { padding: 0 12px; }
}


/* Daftar Label */
.date-filter-control input[type="date"] {
    width: 158px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-weight: 700;
    outline: none;
}
.date-filter-control input[type="date"]:focus {
    border-color: #c69a31;
    box-shadow: 0 0 0 4px rgba(233,185,73,0.14);
}

@media (max-width: 720px) {
    .date-filter-control input[type="date"] {
        width: 100%;
        min-width: 0;
    }
}

/* v2.0: struktur Item List */
#masterView .app-table { min-width: 1180px; }
.item-code { display: inline-block; color: #27364d; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.item-meta-pill { display: inline-flex; max-width: 180px; padding: 5px 8px; border-radius: 999px; color: #46536a; background: #eef2f7; font-size: 10px; font-weight: 800; line-height: 1.2; }
.product-meta { margin-bottom: 2px; color: #5e6877; font-size: 7px; font-weight: 800; letter-spacing: .02em; line-height: 1.25; text-transform: uppercase; }
#importPreview .app-table { min-width: 780px; }
.autocomplete-option { align-items: flex-start; }
.autocomplete-option strong { max-width: 54%; white-space: normal; }
.autocomplete-option span { max-width: 44%; text-align: right; white-space: normal; }

.field input[readonly] { color: #4d596b; background: #f3f5f8; cursor: default; }
.field input[readonly]:focus { border-color: #d8dde6; box-shadow: none; }

/* v2.2.0: dashboard statistik */
.dashboard-welcome-card { min-height: 220px; margin-bottom: 18px; }
.dashboard-welcome-card h2 { font-size: clamp(28px, 3.2vw, 46px); }
.dashboard-welcome-card p:not(.section-kicker) { max-width: 720px; margin: 12px 0 0; color: #c9d4e4; font-size: 13px; line-height: 1.6; }
.dashboard-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.dashboard-stat-card { display: flex; min-height: 142px; align-items: center; gap: 15px; padding: 22px; border: 1px solid rgba(23,36,58,.07); border-radius: var(--radius-lg); color: var(--ink); background: rgba(255,255,255,.96); box-shadow: var(--shadow); text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.dashboard-stat-card:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(22,35,58,.13); }
.dashboard-stat-card > span:last-child { display: grid; min-width: 0; gap: 4px; }
.dashboard-stat-card small { color: #7d8898; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.dashboard-stat-card strong { color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 31px; line-height: 1; }
.dashboard-stat-card em { overflow: hidden; color: #687486; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stat-card em b { color: #b63c35; }
.dashboard-stat-card--navy { color: #fff; background: linear-gradient(135deg, #16233a, #29466d); }
.dashboard-stat-card--navy small, .dashboard-stat-card--navy em { color: #cbd7e7; }
.dashboard-stat-card--navy strong { color: #fff; }
.dashboard-stat-card--invoice { border-color: rgba(238,116,39,.22); background: linear-gradient(135deg, #fffaf5, #fff); }
.dashboard-stat-icon { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: #fff; background: #314c73; font-size: 22px; font-weight: 900; }
.dashboard-stat-icon--gold { color: #5f4300; background: #f2c75e; }
.dashboard-stat-icon--green { background: #2d9364; }
.dashboard-stat-icon--red { background: #c64b45; }
.dashboard-stat-icon--orange { background: #ee7427; }
.dashboard-stat-icon--purple { background: #7556a6; }
.dashboard-detail-card { margin-bottom: 18px; }
.dashboard-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0 30px 30px; background: #e8ecf1; }
.dashboard-detail-grid > div { display: grid; min-height: 92px; align-content: center; gap: 7px; padding: 18px; background: #fff; }
.dashboard-detail-grid span { color: #7d8796; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-detail-grid strong { color: var(--ink); font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 1050px) {
    .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .dashboard-stat-grid { grid-template-columns: 1fr; }
    .dashboard-stat-card { min-height: 116px; padding: 18px; }
    .dashboard-detail-grid { grid-template-columns: 1fr; padding: 0 18px 18px; }
}

/* v2.3.0: filter gabungan Master Barang dan durasi Packing */
.packing-duration { display:inline-flex; min-width:58px; justify-content:center; padding:5px 8px; border-radius:8px; color:#33455e; background:#edf3fa; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9px; font-weight:850; }
#masterView .toolbar-filters { flex-wrap: wrap; }
#masterView .toolbar { align-items: flex-end; }
@media (max-width: 1180px) { #masterView .toolbar { display:grid; } #masterView .toolbar-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { #masterView .toolbar-filters { grid-template-columns:1fr; } }

/* v2.4.0 — Multi-user dan pengelolaan akun */
.sidebar-role-badge { display:inline-flex; width:max-content; margin-top:4px; padding:3px 8px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#dbe7f8; background:rgba(255,255,255,.08); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-account-actions { display:flex; align-items:stretch; gap:7px; margin-top:9px; }
.sidebar-account-actions form { flex:1 1 auto; }
.sidebar-account-actions .logout-button { width:100%; height:100%; margin-top:0; }
.user-admin-secret-link { display:inline-flex; width:38px; min-height:38px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:9px; color:rgba(255,255,255,.55); background:rgba(255,255,255,.035); text-decoration:none; transition:.18s ease; }
.user-admin-secret-link:hover, .user-admin-secret-link:focus-visible, .user-admin-secret-link.is-active { color:#fff; border-color:rgba(243,161,95,.65); background:rgba(243,161,95,.15); }
.user-management-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.user-editor-card { position:sticky; top:18px; }
.protected-superadmin-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; margin-bottom:16px; padding:14px 16px; border:1px solid #d7e1ee; border-radius:12px; background:linear-gradient(135deg,#f8fbff,#fff9f3); }
.protected-superadmin-card div { display:grid; gap:3px; }
.protected-superadmin-card small { color:#697386; }
.user-role-pill, .user-status-pill { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:4px 8px; border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.user-role-pill--super { color:#7a2e00; background:#ffe4ce; }
.user-role-pill--admin { color:#173b68; background:#dbeafe; }
.user-role-pill--user { color:#59431a; background:#fef3c7; }
.user-status-pill.is-active { color:#14532d; background:#dcfce7; }
.user-status-pill.is-inactive { color:#7f1d1d; background:#fee2e2; }
.user-toolbar { margin-bottom:14px; }
.user-editor-card form { display:grid; gap:14px; }
.user-editor-card .field { display:grid; gap:6px; }
.user-editor-card .field > span { font-weight:700; font-size:12px; }
.user-editor-card .field small { color:#6b7280; font-size:10px; line-height:1.4; }
.user-active-checkbox { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid #dbe2eb; border-radius:9px; background:#f8fafc; font-size:12px; font-weight:700; }
.user-form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:3px; }
.user-mobile-card { display:grid; gap:9px; padding:14px; border:1px solid #dbe2eb; border-radius:12px; background:#fff; }
.user-mobile-card > div:first-child { display:grid; gap:2px; }
.user-mobile-card > div:nth-child(2) { display:flex; flex-wrap:wrap; gap:6px; }
.user-mobile-card small, .user-mobile-card p { color:#667085; font-size:11px; }
.empty-state-cell, .empty-state-card { padding:25px !important; color:#6b7280; text-align:center; }
@media (max-width:1100px) { .user-management-layout { grid-template-columns:1fr; } .user-editor-card { position:static; } }
@media (max-width:680px) { .protected-superadmin-card { grid-template-columns:1fr; } }
.nav-group[hidden], .nav-link[hidden], .dashboard-stat-card[hidden], .dashboard-detail-grid > div[hidden] { display:none !important; }

/* v2.5.0: ganti password mandiri */
.account-password-link { display:inline-flex; width:38px; min-height:38px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:9px; color:rgba(255,255,255,.62); background:rgba(255,255,255,.035); font-size:15px; text-decoration:none; transition:.18s ease; }
.account-password-link:hover, .account-password-link:focus-visible, .account-password-link.is-active { color:#fff; border-color:rgba(243,161,95,.65); background:rgba(243,161,95,.15); }
.password-page-layout { display:grid; grid-template-columns:minmax(0,720px) minmax(260px,1fr); gap:20px; align-items:start; }
.password-card { max-width:720px; }
.password-account-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 22px; }
.password-account-summary > div { display:grid; gap:5px; padding:14px 16px; border:1px solid #e3e8ef; border-radius:12px; background:#f8fafc; }
.password-account-summary span { color:#697386; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.password-account-summary strong { color:#172238; font-size:14px; overflow-wrap:anywhere; }
.password-change-form { display:grid; gap:17px; }
.password-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:5px; }
.password-alert { margin:0 0 18px; padding:13px 15px; border:1px solid; border-radius:11px; font-size:13px; line-height:1.5; }
.password-alert--error { border-color:#f2b8b5; color:#8c1d18; background:#fff2f1; }
.password-alert--success { border-color:#a9d6c4; color:#155d43; background:#effaf5; }
.password-help-card { position:sticky; top:20px; }
.password-help-card h2 { margin:5px 0 16px; font-size:20px; }
.password-help-card ul { display:grid; gap:12px; margin:0; padding-left:20px; color:#556174; font-size:13px; line-height:1.55; }
@media (max-width:1050px) { .password-page-layout { grid-template-columns:1fr; } .password-card { max-width:none; } .password-help-card { position:static; } }
@media (max-width:640px) { .password-account-summary { grid-template-columns:1fr; } .password-form-actions { align-items:stretch; flex-direction:column-reverse; } .password-form-actions > * { width:100%; justify-content:center; } }

/* v2.7.0: mobile barcode/QR scanner, locked resi, and local upload queue */
.packing-scan-guide { position:absolute; z-index:4; inset:0; display:grid; align-content:center; justify-items:center; gap:12px; padding:22px; color:#fff; background:rgba(2,8,20,.22); pointer-events:none; }
.packing-scan-guide > span { display:block; width:min(82%,420px); aspect-ratio:2.7/1; border:3px solid #fff; border-radius:16px; box-shadow:0 0 0 999px rgba(0,0,0,.28),0 0 25px rgba(255,255,255,.28); }
.packing-scan-guide > strong { max-width:330px; padding:7px 11px; border-radius:999px; background:rgba(7,16,30,.76); font-size:10px; line-height:1.4; text-align:center; }
.packing-mobile-scanner-tools { display:grid; gap:7px; }
.packing-mobile-scanner-tools button { width:100%; min-height:46px; }
.packing-mobile-scanner-tools span { color:#7d8795; font-size:8.5px; line-height:1.45; text-align:center; }
.packing-resi-confirm { display:grid; gap:13px; padding:14px; border:1px solid #bddbc8; border-radius:12px; background:#f2fbf5; }
.packing-resi-confirm > div:first-child { display:grid; gap:4px; }
.packing-resi-confirm span { color:#668071; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.packing-resi-confirm strong { overflow-wrap:anywhere; color:#143f28; font-size:16px; letter-spacing:.035em; }
.packing-resi-confirm small { color:#668071; font-size:8.5px; line-height:1.45; }
.packing-record-button { width:100%; min-height:50px; background:#b72f2f; }
.packing-record-button:hover { background:#982626; }
.packing-upload-queue { display:grid; gap:9px; padding:13px 14px; border:1px solid #cdd9e8; border-radius:12px; background:#f5f8fc; }
.packing-upload-queue-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.packing-upload-queue-head > div { display:grid; gap:3px; }
.packing-upload-queue-head strong { color:var(--ink); font-size:10px; }
.packing-upload-queue-head span,.packing-upload-queue small { color:#748094; font-size:8.5px; line-height:1.45; }
.packing-upload-progress { overflow:hidden; height:7px; border-radius:999px; background:#dce4ef; }
.packing-upload-progress span { display:block; width:0; height:100%; border-radius:inherit; background:#347cc6; transition:width .2s ease; }
.packing-camera-stage.is-scanning { box-shadow:0 0 0 3px #4ca66e,0 13px 34px rgba(38,167,96,.18); }
.packing-scan-field input.is-locked { border-color:#d7dce4; color:#596374; background:#eef1f5; }
@media (max-width: 900px), (pointer: coarse) {
    .packing-mobile-scanner-tools { display:grid !important; }
    .packing-scan-field input { height:54px; font-size:16px; }
    .packing-resi-confirm .packing-notice-actions { grid-template-columns:1fr; }
    .packing-resi-confirm .packing-notice-actions button { min-height:44px; }
}
.packing-mobile-scanner-tools[hidden],
.packing-resi-confirm[hidden],
.packing-scan-guide[hidden],
.packing-upload-queue[hidden],
.packing-record-button[hidden] { display:none !important; }


/* v2.7.1 — Mobile UI: navigasi bawah, konten penuh, dan kontrol sentuh. */
@media (max-width: 760px) {
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

    .sidebar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 120;
        width: 100%;
        height: calc(70px + env(safe-area-inset-bottom));
        padding: 7px max(7px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(7px, env(safe-area-inset-left));
        flex-direction: row;
        align-items: stretch;
        gap: 5px;
        overflow: visible;
        border-top: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 -12px 32px rgba(5,12,24,.26);
    }
    .sidebar .brand { display: none !important; }

    .main-nav {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        gap: 4px;
        margin: 0;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .main-nav::-webkit-scrollbar { display: none; }
    .nav-group { position: static; display: block; flex: 0 0 auto; }
    .nav-link {
        display: flex;
        width: 70px;
        min-width: 70px;
        min-height: 56px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 5px 3px;
        border-radius: 12px;
        font-size: 8.5px;
        line-height: 1.05;
        text-align: center;
        scroll-snap-align: start;
    }
    .nav-link:hover { transform: none; }
    .nav-link .nav-icon { display: block !important; font-size: 18px; line-height: 1; }
    .nav-link .nav-chevron { display: none; }
    .nav-count { display: none !important; }

    .nav-submenu {
        position: fixed;
        z-index: 140;
        inset: auto 10px calc(76px + env(safe-area-inset-bottom)) 10px;
        width: auto;
        max-height: min(58vh, 420px);
        padding: 10px;
        overflow-y: auto;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 16px;
        background: #16233a;
        box-shadow: 0 18px 48px rgba(4,10,20,.42);
    }
    .nav-submenu-link {
        min-height: 46px;
        padding: 0 14px;
        border-radius: 11px;
        font-size: 12px;
    }
    .nav-submenu .nav-count { display: inline-flex !important; }

    .sidebar-footer {
        display: flex;
        flex: 0 0 auto;
        align-items: stretch;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .sidebar-footer > span,
    .sidebar-footer > strong,
    .sidebar-footer > small { display: none !important; }
    .sidebar-account-actions { display: flex; align-items: stretch; gap: 3px; margin: 0; }
    .sidebar-account-actions form { flex: 0 0 auto; margin: 0; }
    .account-password-link,
    .user-admin-secret-link,
    .logout-button {
        width: 38px !important;
        min-width: 38px;
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }
    .logout-button { font-size: 0 !important; }
    .logout-button::before { content: '↪'; font-size: 18px; font-weight: 900; }

    .main-content {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        margin-left: 0;
        padding: 18px 12px 26px;
        overflow-x: hidden;
    }
    .topbar, .view-panel { width: 100%; max-width: 100%; }
    .topbar { margin-bottom: 16px; }
    .topbar h1 { font-size: 27px; }
    .content-card { max-width: 100%; border-radius: 17px; }

    .dashboard-welcome-card { min-height: 180px; padding: 26px 20px; border-radius: 18px; }
    .dashboard-welcome-card .welcome-mark { width: 58px; height: 58px; font-size: 34px; }
    .dashboard-welcome-card h2 { font-size: 28px; }
    .dashboard-stat-grid { grid-template-columns: 1fr; gap: 12px; }
    .dashboard-stat-card { min-height: 102px; padding: 16px; border-radius: 17px; }
    .dashboard-stat-card strong { font-size: 29px; }
    .dashboard-stat-icon { width: 48px; height: 48px; border-radius: 14px; }

    .packing-layout { gap: 14px; }
    .packing-recorder-card, .packing-archive-card { width: 100%; border-radius: 17px; }
    .packing-recorder-body { padding: 0 12px 16px; }
    .packing-camera-stage { border-radius: 12px; }
    .packing-scan-field input { height: 54px; font-size: 15px; }
    .packing-recording-meta { gap: 7px; }
    .packing-recording-meta > div { padding: 9px; }
    .packing-action-notice { padding: 12px; }
    .packing-notice-actions { grid-template-columns: 1fr; }
    .packing-notice-actions button { min-height: 46px; }

    button, .primary-button, .secondary-button, .row-button, select, input { touch-action: manipulation; }
}

@media (max-width: 390px) {
    .nav-link { width: 64px; min-width: 64px; }
    .account-password-link,
    .user-admin-secret-link,
    .logout-button { width: 34px !important; min-width: 34px; }
    .main-content { padding-inline: 10px; }
    .dashboard-stat-card { padding: 14px; }
}

/* v2.7.2 — satu halaman rekam, arsip video bertahap, dan preview lebih besar. */
.packing-layout,
.packing-layout.is-record-mode,
.packing-layout.is-archive-mode {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
.packing-recorder-card,
.packing-archive-card {
    width: 100%;
    max-width: none;
}
.packing-recorder-body {
    width: 100%;
    padding-top: 24px;
}
.packing-camera-stage {
    width: 100%;
    min-height: 430px;
    max-height: 70vh;
    aspect-ratio: 16 / 9;
}
.packing-archive-heading {
    min-height: 84px;
}
.packing-archive-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}
.packing-load-more-sentinel {
    width: 100%;
    height: 18px;
}
.packing-load-more-sentinel.is-loading::after {
    display: block;
    width: 22px;
    height: 22px;
    margin: -4px auto 0;
    border: 3px solid #dfe5ed;
    border-top-color: #c99022;
    border-radius: 50%;
    content: '';
    animation: packingArchiveSpin .7s linear infinite;
}
@keyframes packingArchiveSpin { to { transform: rotate(360deg); } }
.packing-archive-footer { position: sticky; bottom: 0; z-index: 2; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); }

@media (max-width: 1020px) {
    .packing-recorder-card { max-width: none; }
    .packing-camera-stage { min-height: 360px; }
}

@media (max-width: 760px) {
    .packing-recorder-body { gap: 11px; padding: 12px; }
    .packing-camera-stage { min-height: 52vh; max-height: none; aspect-ratio: 9 / 13; }
    .packing-archive-heading { min-height: 0; padding: 17px 16px; }
    .packing-archive-heading .danger-button { width: 100%; }
    .packing-archive-card .toolbar { padding: 0 12px 14px; }
    .packing-archive-footer { bottom: calc(70px + env(safe-area-inset-bottom)); }

    /* Selama merekam, seluruh kontrol utama muat dalam satu viewport HP. */
    body.is-packing-recording {
        height: 100dvh;
        padding: 0;
        overflow: hidden;
        background: #07101e;
    }
    body.is-packing-recording .sidebar,
    body.is-packing-recording .topbar {
        display: none !important;
    }
    body.is-packing-recording .main-content {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }
    body.is-packing-recording .packing-view,
    body.is-packing-recording .packing-layout,
    body.is-packing-recording .packing-recorder-card,
    body.is-packing-recording .packing-recorder-body {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
    }
    body.is-packing-recording .packing-recorder-card {
        border: 0;
        border-radius: 0;
        background: #07101e;
        box-shadow: none;
    }
    body.is-packing-recording .packing-recorder-body {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
    }
    body.is-packing-recording .packing-camera-stage {
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
        aspect-ratio: auto;
        border-radius: 12px;
    }
    body.is-packing-recording .packing-recording-meta {
        position: absolute;
        z-index: 8;
        top: calc(max(6px, env(safe-area-inset-top)) + 8px);
        right: 14px;
        display: grid;
        width: min(70vw, 340px);
        grid-template-columns: 1.35fr .65fr;
        gap: 5px;
    }
    body.is-packing-recording .packing-recording-meta > div {
        min-height: 42px;
        padding: 7px 9px;
        border-color: rgba(255,255,255,.2);
        background: rgba(5,12,24,.72);
        backdrop-filter: blur(8px);
    }
    body.is-packing-recording .packing-recording-meta > div:nth-child(3) { display: none; }
    body.is-packing-recording .packing-recording-meta span { color: #b9c7d9; }
    body.is-packing-recording .packing-recording-meta strong { color: #fff; }
    body.is-packing-recording .packing-status,
    body.is-packing-recording .packing-scan-field,
    body.is-packing-recording .packing-mobile-scanner-tools,
    body.is-packing-recording .packing-resi-confirm,
    body.is-packing-recording .packing-camera-button,
    body.is-packing-recording .packing-action-notice,
    body.is-packing-recording .packing-upload-queue,
    body.is-packing-recording .packing-recorder-note {
        display: none !important;
    }
    body.is-packing-recording .packing-record-button {
        display: inline-flex !important;
        min-height: 54px;
        flex: 0 0 54px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .packing-camera-stage { min-height: 50vh; }
    body.is-packing-recording .packing-recording-meta { width: 68vw; }
}


/* v2.7.4 — layout rekam desktop 1080p: kamera kiri, kontrol kanan. */
@media (min-width: 1021px) {
    .packing-layout.is-record-mode .packing-recorder-body,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recorder-body {
        display: grid;
        grid-template-columns: minmax(0, 1.72fr) minmax(330px, .68fr);
        grid-template-areas:
            "camera status"
            "camera meta"
            "camera scan"
            "camera scanner"
            "camera confirm"
            "camera record"
            "camera camera-button"
            "camera overwrite"
            "camera upload-error"
            "camera upload-queue"
            "camera note";
        grid-auto-rows: auto;
        align-items: start;
        gap: 10px 16px;
        padding: 18px 20px 20px;
    }

    .packing-layout.is-record-mode .packing-camera-stage,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-camera-stage {
        grid-area: camera;
        width: 100%;
        min-width: 0;
        min-height: 0;
        max-height: calc(100dvh - 245px);
        aspect-ratio: 16 / 9;
        align-self: start;
    }

    .packing-layout.is-record-mode .packing-status,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-status {
        grid-area: status;
        min-height: 54px;
        padding: 10px 12px;
    }

    .packing-layout.is-record-mode .packing-recording-meta,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recording-meta {
        grid-area: meta;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }
    .packing-layout.is-record-mode .packing-recording-meta > div,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recording-meta > div {
        min-height: 45px;
        padding: 8px 9px;
    }
    .packing-layout.is-record-mode .packing-recording-meta > div:first-child,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recording-meta > div:first-child {
        grid-column: 1 / -1;
    }

    .packing-layout.is-record-mode .packing-scan-field,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-scan-field { grid-area: scan; gap: 5px; }
    .packing-layout.is-record-mode .packing-scan-field input,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-scan-field input { height: 46px; }
    .packing-layout.is-record-mode .packing-mobile-scanner-tools,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-mobile-scanner-tools { grid-area: scanner; }
    .packing-layout.is-record-mode .packing-resi-confirm,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-resi-confirm { grid-area: confirm; }
    .packing-layout.is-record-mode .packing-record-button,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-record-button { grid-area: record; min-height: 48px; }
    .packing-layout.is-record-mode .packing-camera-button,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-camera-button { grid-area: camera-button; min-height: 44px; }
    .packing-layout.is-record-mode #packingOverwriteNotice,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) #packingOverwriteNotice { grid-area: overwrite; }
    .packing-layout.is-record-mode #packingUploadNotice,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) #packingUploadNotice { grid-area: upload-error; }
    .packing-layout.is-record-mode .packing-upload-queue,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-upload-queue { grid-area: upload-queue; }
    .packing-layout.is-record-mode .packing-recorder-note,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recorder-note {
        grid-area: note;
        font-size: 8px;
        line-height: 1.4;
    }
}

/* Jaga seluruh area rekam tetap terlihat pada viewport desktop pendek, termasuk
   layar 1920×1080 dengan toolbar browser dan taskbar Windows. */
@media (min-width: 1021px) and (max-height: 950px) {
    .main-content { padding-top: 20px; padding-bottom: 22px; }
    .topbar { margin-bottom: 16px; }
    .topbar h1 { font-size: clamp(30px, 2.5vw, 38px); }

    .packing-layout.is-record-mode .packing-recorder-body,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recorder-body {
        gap: 8px 14px;
        padding: 14px 16px 16px;
    }
    .packing-layout.is-record-mode .packing-camera-stage,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-camera-stage {
        max-height: calc(100dvh - 210px);
    }
    .packing-layout.is-record-mode .packing-status,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-status {
        min-height: 48px;
        padding: 8px 10px;
    }
    .packing-layout.is-record-mode .packing-recording-meta > div,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recording-meta > div {
        min-height: 39px;
        gap: 2px;
        padding: 6px 8px;
    }
    .packing-layout.is-record-mode .packing-scan-field input,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-scan-field input { height: 42px; }
    .packing-layout.is-record-mode .packing-camera-button,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-camera-button,
    .packing-layout.is-record-mode .packing-record-button,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-record-button { min-height: 42px; }
    .packing-layout.is-record-mode .packing-recorder-note,
    .packing-view:not([hidden]) .packing-layout:not(.is-archive-mode) .packing-recorder-note { display: none; }
}

/* v2.7.5 — pagination arsip, unduh massal, dan retensi 5 bulan. */
.packing-archive-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.packing-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.pagination-pages {
    display: flex;
    align-items: center;
    gap: 5px;
}
.packing-pagination .pagination-button {
    min-width: 34px;
    padding: 0 9px;
}
.packing-pagination .pagination-button.is-active {
    border-color: var(--ink);
    color: #fff;
    background: var(--ink);
}
.pagination-ellipsis {
    display: inline-grid;
    min-width: 24px;
    height: 34px;
    place-items: center;
    color: #8a94a3;
    font-size: 12px;
}

@media (max-width: 760px) {
    .packing-archive-heading {
        align-items: stretch;
    }
    .packing-archive-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .packing-archive-actions .secondary-button,
    .packing-archive-actions .danger-button {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }
    .packing-archive-footer {
        display: grid;
        gap: 10px;
        padding: 12px;
    }
    .packing-pagination {
        justify-content: center;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .pagination-pages {
        flex: 0 0 auto;
    }
    .packing-pagination .pagination-button {
        flex: 0 0 auto;
    }
}

/* v2.8.0 — navigasi mobile drawer, menu akun, dan kartu daftar ringkas. */
.mobile-menu-trigger,
.mobile-account-trigger,
.mobile-shell-backdrop,
.mobile-account-sheet { display: none; }

.mobile-kebab-button {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    color: #263850;
    background: #eef2f7;
    cursor: pointer;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.mobile-compact-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e4e9f0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 37, 61, .06);
}
.mobile-compact-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.mobile-compact-card-main { min-width: 0; }
.mobile-compact-card-title {
    display: block;
    margin-top: 5px;
    color: #1b2d47;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.mobile-compact-card-value { color: #142944; font-size: 15px; font-weight: 900; white-space: nowrap; }
.mobile-compact-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: #6b7788;
    font-size: 9px;
    line-height: 1.35;
}
.mobile-compact-select { display: flex; align-items: flex-start; gap: 10px; }

.mobile-list-action-sheet {
    position: fixed;
    z-index: 310;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    display: none;
    max-height: min(72vh, 520px);
    padding: 16px;
    overflow-y: auto;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(8, 20, 38, .34);
}
.mobile-list-action-sheet.is-open { display: block; }
.mobile-list-action-backdrop {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: none;
    border: 0;
    background: rgba(9, 18, 31, .55);
}
.mobile-list-action-backdrop.is-open { display: block; }
.mobile-list-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mobile-list-action-head strong { display: block; color: #172b45; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.mobile-list-action-head span { color: #788496; font-size: 9px; }
.mobile-list-action-buttons { display: grid; gap: 9px; }
.mobile-list-action-buttons > * { width: 100%; min-height: 46px; justify-content: center; }

@media (max-width: 760px) {
    body { padding-bottom: 0 !important; }
    body.mobile-drawer-open,
    body.mobile-account-open { overflow: hidden; }

    .mobile-menu-trigger,
    .mobile-account-trigger {
        display: inline-flex;
        width: 42px;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid #dce3ec;
        border-radius: 12px;
        color: #172b45;
        background: #fff;
        box-shadow: 0 5px 15px rgba(24, 44, 72, .08);
        cursor: pointer;
        font-size: 20px;
    }
    .topbar {
        position: sticky;
        z-index: 80;
        top: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin: -18px -12px 16px;
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
        border-bottom: 1px solid #e5eaf1;
        background: rgba(247, 249, 252, .96);
        backdrop-filter: blur(14px);
    }
    .topbar > div:first-of-type { min-width: 0; }
    .topbar .eyebrow { display: none; }
    .topbar h1 { overflow: hidden; margin: 0; font-size: 20px !important; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .topbar .primary-button { grid-column: 1 / -1; width: 100%; }

    .sidebar {
        position: fixed !important;
        z-index: 220 !important;
        inset: 0 auto 0 0 !important;
        width: min(84vw, 320px) !important;
        height: 100dvh !important;
        padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        overflow-y: auto !important;
        border: 0 !important;
        box-shadow: 18px 0 50px rgba(5, 13, 26, .32) !important;
        transform: translateX(-106%);
        transition: transform .22s ease;
    }
    .sidebar.is-mobile-open { transform: translateX(0); }
    .sidebar .brand { display: flex !important; }
    .main-nav {
        display: grid !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
        margin: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }
    .nav-group { position: relative !important; display: block !important; width: 100% !important; }
    .nav-link {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        justify-content: stretch !important;
        gap: 10px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
    .nav-link .nav-icon { display: block !important; font-size: 17px !important; }
    .nav-link .nav-chevron { display: block !important; }
    .nav-submenu {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        max-height: none !important;
        margin: 4px 0 6px 20px !important;
        padding: 4px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.06) !important;
        box-shadow: none !important;
    }
    .nav-submenu-link { min-height: 42px !important; padding: 0 12px !important; font-size: 10px !important; }
    .sidebar-footer { display: none !important; }

    .mobile-shell-backdrop {
        position: fixed;
        z-index: 210;
        inset: 0;
        display: block;
        opacity: 0;
        border: 0;
        background: rgba(7, 16, 29, .56);
        pointer-events: none;
        transition: opacity .18s ease;
    }
    .mobile-shell-backdrop[hidden] { display: none !important; }
    .mobile-shell-backdrop.is-visible { opacity: 1; pointer-events: auto; }

    .mobile-account-sheet {
        position: fixed;
        z-index: 230;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        display: block;
        padding: 18px;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(7, 18, 34, .36);
    }
    .mobile-account-sheet[hidden] { display: none !important; }
    .mobile-account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e6ebf1; }
    .mobile-account-head small { display: block; color: #8b6a1b; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
    .mobile-account-head strong { display: block; margin-top: 4px; color: #172b45; font-size: 17px; }
    .mobile-account-head span { display: inline-flex; margin-top: 6px; padding: 4px 8px; border-radius: 999px; color: #fff; background: #243b5b; font-size: 8px; font-weight: 800; }
    .mobile-account-head button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #eef2f7; font-size: 20px; }
    .mobile-account-links { display: grid; gap: 8px; padding-top: 14px; }
    .mobile-account-links > a,
    .mobile-account-logout-form button {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        gap: 12px;
        padding: 0 14px;
        border: 0;
        border-radius: 12px;
        color: #263850;
        background: #f3f6f9;
        text-decoration: none;
        cursor: pointer;
        font: inherit;
    }
    .mobile-account-logout-form { margin: 0; }
    .mobile-account-logout-form button { color: #a33030; background: #fff0f0; }

    .main-content { padding-bottom: 24px !important; }
    .mobile-list { gap: 9px; }
    .mobile-card-actions,
    .invoice-mobile-actions { display: none !important; }
    .packing-archive-footer { bottom: 0 !important; }
}


/* v2.8.5: satu header Daftar Label + sinkronisasi desktop/mobile */
.label-archive-card .label-toolbar-primary {
    padding-top: 24px;
}
.label-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 10px 30px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfd;
}
.label-bulk-summary {
    display: grid;
    gap: 3px;
    color: var(--muted);
}
.label-bulk-summary > span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.label-bulk-summary > strong {
    color: var(--ink);
    font-size: 12px;
}
.label-bulk-actions {
    flex-wrap: nowrap;
}
.label-bulk-actions button {
    min-height: 40px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    #labelsView .content-card {
        border-radius: 18px;
    }
    .label-archive-card .label-toolbar-primary {
        padding: 16px 16px 14px;
    }
    .label-bulk-toolbar {
        display: grid;
        gap: 10px;
        min-height: 0;
        padding: 12px 16px;
    }
    .label-bulk-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .label-bulk-summary > strong {
        font-size: 11px;
    }
    .label-bulk-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }
    .label-bulk-actions .danger-button,
    .label-bulk-actions .secondary-button {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding-inline: 10px;
        font-size: 10px;
    }
    #labelsView .toolbar-filters {
        gap: 8px;
    }
    #labelsView .toolbar-filters > label {
        width: 100%;
        flex: 1 1 100%;
    }
    #labelsView .toolbar-filters select,
    #labelsView .toolbar-filters input {
        min-width: 0;
        flex: 1;
    }
    #labelsView .mobile-list {
        border-top: 0;
    }
}

@media (max-width: 520px) {
    #labelsView .label-bulk-summary > span {
        display: none;
    }
    #labelsView .label-bulk-summary {
        justify-content: flex-end;
    }
    #labelsView .label-bulk-actions {
        grid-template-columns: 1fr 1fr;
    }
}


/* v2.9.0 — header daftar tetap dan pola list seragam */
.topbar-action-groups { min-width: 0; }
.topbar-action-group { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.topbar-action-group[hidden] { display: none !important; }
.topbar-title-block { min-width: 0; }

body.list-page-mode { overflow: hidden; }
body.list-page-mode .main-content {
    display: flex;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
body.list-page-mode .topbar {
    position: relative;
    z-index: 40;
    width: 100%;
    max-width: 1440px;
    min-height: 86px;
    flex: 0 0 auto;
    margin: 0 auto;
    padding: 16px 20px;
    border-bottom: 1px solid #e1e6ed;
    background: rgba(247,248,250,.97);
    backdrop-filter: blur(14px);
}
body.list-page-mode .topbar h1 { font-size: clamp(27px, 2.7vw, 38px); }
body.list-page-mode .view-panel.is-active {
    display: flex;
    width: 100%;
    max-width: 1440px;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    animation: none;
}
body.list-page-mode .list-page-card {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body.list-page-mode .list-filter-row {
    position: relative;
    z-index: 30;
    min-height: 70px;
    flex: 0 0 auto;
    margin: 0;
    padding: 13px 20px;
    border-bottom: 1px solid #e4e8ee;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
}
body.list-page-mode .list-page-card > .table-wrap {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
}
body.list-page-mode .list-page-card > .mobile-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.list-page-mode .list-page-card > .table-footer {
    position: relative;
    z-index: 25;
    flex: 0 0 auto;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
}
body.list-page-mode #packingView,
body.list-page-mode #packingView .packing-layout.is-archive-mode {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}
body.list-page-mode #packingArchiveCard { flex: 1 1 auto; }
body.list-page-mode .packing-archive-footer { position: relative; bottom: auto; }

@media (max-width: 760px) {
    body.list-page-mode .main-content { padding-inline: 0 !important; }
    body.list-page-mode .topbar {
        min-height: 70px;
        padding: 10px 12px;
        gap: 9px;
        border-radius: 0;
    }
    body.list-page-mode .topbar h1 { font-size: 21px !important; }
    body.list-page-mode .topbar .eyebrow { display: none; }
    .topbar-action-groups { max-width: 62vw; overflow-x: auto; scrollbar-width: none; }
    .topbar-action-groups::-webkit-scrollbar { display: none; }
    .topbar-action-group { width: max-content; gap: 6px; }
    .topbar-action-group .primary-button,
    .topbar-action-group .secondary-button,
    .topbar-action-group .danger-button {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 10px;
        white-space: nowrap;
    }
    body.list-page-mode .list-filter-row {
        display: flex !important;
        min-height: 62px;
        align-items: center;
        gap: 8px;
        padding: 9px 10px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    body.list-page-mode .list-filter-row::-webkit-scrollbar { display: none; }
    body.list-page-mode .list-filter-row .search-box { min-width: 235px; flex: 0 0 235px; }
    body.list-page-mode .list-filter-row .toolbar-filters {
        display: flex !important;
        width: max-content;
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        gap: 7px;
    }
    body.list-page-mode .list-filter-row .toolbar-filters > label { flex: 0 0 auto; }
    body.list-page-mode .list-filter-row .filter-control > span,
    body.list-page-mode .list-filter-row .limit-control > span { display: none; }
    body.list-page-mode .list-filter-row select,
    body.list-page-mode .list-filter-row input[type="date"] { min-width: 130px; height: 42px; }
    body.list-page-mode .list-page-card { border-radius: 0; }
    body.list-page-mode .list-page-card > .mobile-list { padding: 10px; }
    body.list-page-mode .list-page-card > .table-footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

body.list-page-mode .list-page-card .app-table thead th { position: sticky; top: 0; z-index: 12; box-shadow: 0 1px 0 #e4e8ee; }
@media (max-width: 760px) {
    body.list-page-mode .topbar-action-group .primary-button,
    body.list-page-mode .topbar-action-group .secondary-button,
    body.list-page-mode .topbar-action-group .danger-button {
        width: auto;
        grid-column: auto;
    }
}

/* v2.9.1 — mobile action icons, load-more lists, and safe navigation layers */

@media (max-width: 760px) {
    /* The mobile shell must always stay above list/filter layers. */
    body.list-page-mode .topbar,
    body.transaction-list-mode .invoice-topbar,
    .topbar {
        position: sticky !important;
        z-index: 3000 !important;
        top: 0;
    }
    .mobile-menu-trigger,
    .mobile-account-trigger {
        position: relative;
        z-index: 3010 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }
    .mobile-shell-backdrop { z-index: 3900 !important; }
    .sidebar { z-index: 4000 !important; }
    .mobile-account-sheet { z-index: 4100 !important; }
    body.list-page-mode .list-filter-row,
    body.transaction-list-mode .list-filter-row { z-index: 1000 !important; }

    /* Compact icon actions in fixed list headers. */
    .topbar-action-group button[data-mobile-icon],
    #transactionTopButton[data-mobile-icon] {
        position: relative;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        overflow: visible;
        color: transparent !important;
        font-size: 0 !important;
        border-radius: 12px !important;
    }
    .topbar-action-group button[data-mobile-icon]::before,
    #transactionTopButton[data-mobile-icon]::before {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #172b45;
        content: attr(data-mobile-icon);
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
    }
    .topbar-action-group .primary-button[data-mobile-icon]::before,
    #transactionTopButton.primary-button[data-mobile-icon]::before { color: #172b45; }
    .topbar-action-group .danger-button[data-mobile-icon]::before { color: #9d2c2c; }
    .topbar-action-group button[data-mobile-icon] > span {
        position: absolute;
        top: -5px;
        right: -5px;
        display: grid;
        min-width: 18px;
        height: 18px;
        place-items: center;
        padding: 0 4px;
        border: 2px solid #f7f9fc;
        border-radius: 999px;
        color: #fff !important;
        background: #1d304a;
        font-size: 8px !important;
        line-height: 1;
    }
    .topbar-action-group button[data-mobile-icon] > span:first-child:not(:last-child) { display: none; }
    .topbar-action-groups { max-width: none !important; overflow: visible !important; }

    /* On mobile the card is the scrolling surface; filter stays on top and load-more follows the list. */
    body.list-page-mode .list-page-card,
    body.transaction-list-mode .list-page-card {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    body.list-page-mode .list-filter-row,
    body.transaction-list-mode .list-filter-row {
        position: sticky !important;
        top: 0;
    }
    body.list-page-mode .list-page-card > .mobile-list,
    body.transaction-list-mode .list-page-card > .mobile-list {
        min-height: auto !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    body.list-page-mode .list-page-card > .table-footer,
    body.transaction-list-mode .list-page-card > .table-footer {
        position: static !important;
        flex: 0 0 auto;
        padding: 10px 12px max(14px, env(safe-area-inset-bottom));
    }
    body.list-page-mode .master-pagination,
    body.list-page-mode .packing-pagination,
    body.transaction-list-mode .master-pagination { display: none !important; }
}
@media (max-width: 760px) {
    #topCreateButton[data-mobile-icon] > span,
    #transactionTopButton[data-mobile-icon] > span { display: none !important; }
}


/* v2.9.2 — mobile shell controls stay clickable on every page */
@media (max-width: 760px) {
    .mobile-menu-trigger,
    .mobile-account-trigger {
        position: fixed !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        z-index: 6500 !important;
        isolation: isolate;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    .mobile-menu-trigger { left: 12px !important; }
    .mobile-account-trigger { right: 12px !important; }
    .topbar {
        min-height: 62px;
        padding-left: 66px !important;
        padding-right: 66px !important;
        z-index: 6000 !important;
    }
    .mobile-shell-backdrop { z-index: 6600 !important; }
    .sidebar { z-index: 6700 !important; }
    .mobile-account-sheet { z-index: 6800 !important; }
    body.mobile-drawer-open .mobile-menu-trigger,
    body.mobile-account-open .mobile-account-trigger { z-index: 6900 !important; }
    body.list-page-mode .list-filter-row,
    body.transaction-list-mode .list-filter-row,
    .packing-archive-footer { z-index: 900 !important; }
}

/* v2.9.3 — global mobile header, independent from each page layout */
.mobile-global-header { display: none; }

@media (max-width: 760px) {
    :root { --mobile-global-header-height: 60px; }

    body.has-mobile-global-header {
        padding-top: calc(var(--mobile-global-header-height) + env(safe-area-inset-top)) !important;
    }

    .mobile-global-header {
        position: fixed;
        z-index: 9000;
        top: 0;
        right: 0;
        left: 0;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        min-height: calc(var(--mobile-global-header-height) + env(safe-area-inset-top));
        align-items: end;
        gap: 10px;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px;
        border-bottom: 1px solid #dfe5ed;
        background: rgba(247, 249, 252, .98);
        box-shadow: 0 4px 18px rgba(18, 37, 61, .08);
        backdrop-filter: blur(14px);
        isolation: isolate;
        pointer-events: auto;
    }

    .mobile-global-header .mobile-menu-trigger,
    .mobile-global-header .mobile-account-trigger {
        position: static !important;
        z-index: auto !important;
        display: inline-grid !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        place-items: center;
        align-self: end;
        border: 1px solid #d8e0e9;
        border-radius: 12px;
        color: #172b45;
        background: #fff;
        box-shadow: 0 4px 12px rgba(24, 44, 72, .08);
        cursor: pointer;
        font-size: 20px;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .mobile-global-title {
        min-width: 0;
        align-self: center;
        overflow: hidden;
        color: #172b45;
        font-size: 18px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The original page topbar only keeps page-specific action buttons. */
    .mobile-source-topbar {
        position: sticky !important;
        z-index: 1800 !important;
        top: calc(var(--mobile-global-header-height) + env(safe-area-inset-top)) !important;
        display: none !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid #e5eaf1 !important;
        background: rgba(247, 249, 252, .97) !important;
        box-shadow: none !important;
    }

    .mobile-source-topbar.mobile-source-topbar--has-actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .mobile-source-topbar > .topbar-title-block,
    .mobile-source-topbar > div:first-child:not(.topbar-action-groups),
    .mobile-source-topbar > .eyebrow,
    .mobile-source-topbar > h1 {
        display: none !important;
    }

    .mobile-source-topbar .topbar-action-groups,
    .mobile-source-topbar .topbar-action-group {
        display: flex;
        width: auto;
        max-width: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .mobile-source-topbar .topbar-action-groups::-webkit-scrollbar,
    .mobile-source-topbar .topbar-action-group::-webkit-scrollbar { display: none; }

    .main-content { min-height: calc(100dvh - var(--mobile-global-header-height)); }

    .mobile-shell-backdrop { z-index: 9100 !important; }
    .sidebar { z-index: 9200 !important; }
    .mobile-account-sheet { z-index: 9300 !important; }

    body.mobile-drawer-open .mobile-global-header,
    body.mobile-account-open .mobile-global-header { z-index: 9400; }

    /* Remove old floating coordinates from previous hotfixes. */
    body.has-mobile-global-header > .mobile-menu-trigger,
    body.has-mobile-global-header > .mobile-account-trigger,
    .mobile-source-topbar > .mobile-menu-trigger,
    .mobile-source-topbar > .mobile-account-trigger { display: none !important; }
}

/* v2.9.3-final — server-rendered global mobile application header */
@media (max-width: 760px) {
    body.has-mobile-global-header {
        --mobile-global-header-height: 60px;
        padding-top: calc(var(--mobile-global-header-height) + env(safe-area-inset-top)) !important;
    }

    body.mobile-shell-locked { overflow: hidden !important; overscroll-behavior: none; }

    #mobileGlobalHeader.mobile-global-header {
        position: fixed !important;
        z-index: 10000 !important;
        inset: 0 0 auto 0 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        box-sizing: border-box;
        width: 100%;
        min-height: calc(var(--mobile-global-header-height) + env(safe-area-inset-top));
        align-items: end;
        gap: 10px;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px;
        border-bottom: 1px solid #dfe5ed;
        background: rgba(247, 249, 252, .985);
        box-shadow: 0 4px 18px rgba(18, 37, 61, .10);
        transform: translate3d(0, 0, 0);
        isolation: isolate;
        contain: layout paint;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #mobileGlobalHeader > * {
        position: relative;
        z-index: 2;
        pointer-events: auto !important;
    }

    #mobileGlobalMenuButton,
    #mobileGlobalAccountButton {
        position: static !important;
        inset: auto !important;
        z-index: 2 !important;
        display: inline-grid !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center;
        border: 1px solid #d8e0e9 !important;
        border-radius: 12px !important;
        color: #172b45 !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(24, 44, 72, .08) !important;
        cursor: pointer;
        font: 800 20px/1 Arial, sans-serif !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #mobileGlobalMenuButton:active,
    #mobileGlobalAccountButton:active { transform: scale(.96); }

    #mobileGlobalTitle {
        align-self: center;
        min-width: 0;
        overflow: hidden;
        color: #172b45;
        font: 900 18px/1.15 Arial, sans-serif;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mobileShellBackdrop.mobile-shell-backdrop { z-index: 10100 !important; }
    .sidebar { z-index: 10200 !important; }
    #mobileAccountSheet.mobile-account-sheet { z-index: 10300 !important; }

    body.mobile-drawer-open #mobileGlobalHeader,
    body.mobile-account-open #mobileGlobalHeader { z-index: 10400 !important; }

    /* The full-screen transaction editor has its own header. */
    body.transaction-editor-open #mobileGlobalHeader { display: none !important; }
    body.transaction-editor-open.has-mobile-global-header { padding-top: 0 !important; }

    /* No page overlay may capture touches above the application header. */
    body:not(.mobile-drawer-open):not(.mobile-account-open) #mobileGlobalHeader {
        pointer-events: auto !important;
    }
}

/* =====================================================================
   v3.2.5 — Label print isolation
   Only the generated label sheet may enter the browser print tree.
   This prevents mobile header buttons, sidebar controls, backdrops,
   modals, toolbars, and other fixed UI from appearing as blank boxes.
   ===================================================================== */
@media print {
    @page {
        size: A4 portrait;
    }

    html,
    body,
    body.has-mobile-global-header {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    /* Strong isolation: printArea is a direct child of body. */
    body > :not(#printArea) {
        display: none !important;
    }

    #printArea {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #fff !important;
        transform: none !important;
    }

    #printArea,
    #printArea * {
        visibility: visible !important;
    }

    /* Explicitly neutralize screen-only decoration inside label output. */
    #printArea .print-wrapper,
    #printArea .label-card {
        box-shadow: none !important;
    }

    #printArea .label-logo {
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #printArea .label-card.reguler .badge {
        display: none !important;
    }
}