/* Invoice history is the same page in the admin portal and the POS: every admin rule also applies inside #pane-invoices on the POS, and to the bill dialog it opens (#receiptModal.invoice-reprint, set by viewInvoiceDetail). :where() keeps the original specificity, so the admin portal cascade is unchanged. */ /* Admin workspace. Keep POS controls and printed receipts on their own stylesheet. */ .admin-page-heading { display: none; } .admin-menu-toggle { display: none; } .admin-nav-backdrop { display: none; } .management-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .management-page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; } .management-pagination button { min-height: 40px; padding: 8px 12px; border: 1px solid #dce5dd; border-radius: 8px; background: #ffffff; color: #24553c; font: inherit; cursor: pointer; } .management-pagination button:disabled { opacity: .45; cursor: default; } #mgmtProductsFeedback { color: #9c4f36; font-size: 12px; } /* Table management follows the existing green admin workspace. */ .admin-table-dialog { width: min(480px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid #d9e4da; border-radius: 18px; background: #fff; color: #20382d; box-shadow: 0 24px 80px #12372340; } .admin-table-dialog::backdrop { background: #142b20a6; backdrop-filter: blur(3px); } .admin-table-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; } .admin-table-dialog-heading h2 { font-size: 21px; } .admin-table-dialog-heading > button { width: 36px; height: 36px; border: 1px solid #dce5dd; border-radius: 9px; background: #f4f7f1; color: #42624e; cursor: pointer; } .admin-table-dialog label { display: block; margin: 18px 0 7px; font-size: 12px; font-weight: 600; } .admin-table-dialog input, .admin-table-dialog select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #d5e2d7; border-radius: 9px; background: #fbfcf9; color: #20382d; font: inherit; font-size: 16px; } .admin-table-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .admin-table-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } .admin-table-primary, .admin-table-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #d6e2d7; border-radius: 9px; background: #fff; color: #315b40; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .admin-table-primary { background: #176544; border-color: #176544; color: #fff; } .admin-table-primary:disabled, .admin-table-secondary:disabled { opacity: .5; cursor: default; } .admin-tables-feedback { margin: 14px 0; padding: 12px 14px; border: 1px solid #d6e5d8; border-radius: 9px; background: #edf5ed; color: #285b3a; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; } .admin-tables-feedback.is-error { border-color: #eed6c7; background: #fff4ed; color: #9c3c1d; } .admin-tables-hint { margin-top: 18px; color: #677a6b; font-size: 12px; line-height: 1.7; } @media screen { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-panel { padding: clamp(16px, 2.5vw, 28px); border: 1px solid var(--admin-line); border-radius: 16px; background: #fff; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-heading h2 { font-size: 20px; color: #203e2c; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-heading p { max-width: 560px; margin-top: 7px; color: #697c6d; font-size: 12px; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-heading > button { flex-shrink: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 26px; padding: 18px; border-radius: 12px; background: #f3f6ef; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters label { display: flex; flex: 1 1 180px; flex-direction: column; gap: 8px; min-width: 0; color: #496552; font-size: 11px; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters .admin-tables-search { flex-grow: 2; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters input, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #d7e2d6; border-radius: 8px; background: #fff; color: #294e35; font-size: 14px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-summary { margin: 22px 0 16px; color: #5c7563; font-size: 12px; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid #d9e5d8; border-radius: 13px; background: #fbfdf8; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card.is-occupied { border-color: #eadfc9; background: #fffcf5; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e8f1e2; color: #3d7749; font-size: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-status { color: #47704c; font-size: 11px; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .is-occupied .admin-table-status { color: #a6721c; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .is-occupied .admin-table-icon { background: #fff0d0; color: #a6721c; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card h3 { margin-top: 17px; color: #203c2d; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card > p { margin: 5px 0 20px; color: #6b806e; font-size: 12px; overflow-wrap: anywhere; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #e1e9dd; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card-footer > span { color: #7a8a79; font-size: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card-footer > div { display: flex; gap: 8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card button { min-height: 40px; padding: 8px 10px; border: 1px solid #dce5d7; border-radius: 8px; background: #fff; color: #3b6742; font-size: 12px; cursor: pointer; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card button.admin-table-delete { border-color: #eadcd0; color: #a24a2a; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card button:disabled { opacity: .4; cursor: default; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-empty { grid-column: 1 / -1; padding: 35px 16px; text-align: center; color: #6f8270; background: #f7f9f4; border-radius: 12px; line-height: 1.8; } @media (max-width: 600px) { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-heading { align-items: flex-start; flex-direction: column; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-heading > button { width: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters { gap: 12px; padding: 12px; margin-top: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters label { flex-basis: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters input, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters select { font-size: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-tables-filters > button { width: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-table-card button { min-height: 44px; } } } @media screen { /* A shared header must be allowed to wrap even on a wide, zoomed display. */ .app-header { height: auto; min-height: 56px; flex-wrap: wrap; } .header-left, .header-right, .system-nav, .branch-select-container { min-width: 0; } .header-left { flex-shrink: 1; } .header-right { flex-wrap: wrap; } .system-nav { flex-wrap: wrap; } .branch-select { min-width: 0; max-width: 100%; text-overflow: ellipsis; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) { --admin-ink: #20382d; --admin-muted: #66776d; --admin-line: #e1e8e2; --admin-surface: #ffffff; --admin-green: #176544; --admin-radius: 16px; --admin-gap: 24px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) body { height: 100dvh; background: #f4f6f3; color: var(--admin-ink); font-size: 14px; -webkit-font-smoothing: antialiased; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) button, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) a, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) input, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) select, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) textarea { font: inherit; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #71ba95; outline-offset: 3px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) [hidden] { display: none !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .main-body { min-height: 0; min-width: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .tab-pane { min-width: 0; scrollbar-gutter: stable; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .tab-pane.active { display: block; } /* Brand and session first; a dedicated second row for navigation. */ :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand actions' 'nav nav'; gap: 0 20px !important; height: auto !important; min-height: 0; padding: 0 clamp(16px, 2.5vw, 40px) !important; background: #154f38; box-shadow: 0 1px 0 #103f2d, 0 4px 16px #173d2510; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .header-left { grid-area: brand; order: initial; gap: 14px !important; padding: 12px 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-white-badge { min-width: 0; flex-shrink: 1; padding: 5px 12px 5px 6px; border-radius: 10px; gap: 8px; box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-img { width: 36px; height: 32px; flex-shrink: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-text-container { min-width: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-text { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-author-text { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-sub-badge { display: none !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-select-container { flex: 0 1 230px; gap: 9px !important; padding: 9px 12px !important; max-width: 250px; border-color: #ffffff29; background: #ffffff0e; border-radius: 9px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-select-container > i { color: #bbd7c6; font-size: 13px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-select { width: 100%; max-width: none; font-size: 13px !important; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .header-right { grid-area: actions; order: initial; margin: 0; gap: 10px !important; justify-content: flex-end; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .clock-badge { padding: 7px 9px; background: #103f2b; color: #c2d8ca; font-size: 12px; font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-header-sync { min-height: 34px; box-shadow: none !important; border-radius: 8px !important; background: #ffffff0d !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-header-sync .btn-sync-text { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .network-status-badge { min-height: 30px; font-size: 11px; background: transparent; border-color: #ffffff26; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .user-profile-badge { gap: 9px; background: transparent; border: 0; padding: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .user-role-tag { background: #d8e9d9; color: #215234; font-size: 10px; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .cashier-info { max-width: 175px; min-width: 0; gap: 7px; font-size: 12px; font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) #cashierName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-logout { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .system-nav { display: flex; grid-area: nav; order: initial; width: auto; min-width: 0; margin: 0; padding: 8px 0 10px; justify-content: flex-start; flex-wrap: wrap; overflow: visible; border-top: 1px solid #ffffff1a; gap: 6px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sys-tab-btn { min-height: 36px; padding: 9px 13px !important; font-size: 13px !important; font-weight: 500 !important; color: #d0e3d7; border-radius: 7px !important; box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sys-tab-btn.active { background: #edf5ed; color: #194f35; font-weight: 700 !important; box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sys-tab-btn:hover { background: #ffffff17; color: #ffffff; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sys-tab-btn.active:hover { background: #ffffff; color: #194f35; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-nav-tax-shortcut { background: transparent !important; border-color: #ffffff26 !important; color: #d0e3d7 !important; box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) #btnSwitchPortalNav { margin-left: auto; } /* One spacing system for every management page and its nested content. */ :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) :is(.dashboard-wrapper, .invoices-wrapper, .sync-wrapper) { width: 100%; max-width: 1560px; min-width: 0; margin: 0 auto; padding: 30px clamp(20px, 2.8vw, 44px) 48px; gap: var(--admin-gap); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-eyebrow { margin-bottom: 8px; color: #647364; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-page-heading h1 { color: var(--admin-ink); font-size: clamp(24px, 2.1vw, 30px); font-weight: 700; letter-spacing: -1px; line-height: 1.3; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-page-description { margin-top: 8px; color: var(--admin-muted); font-size: 12px; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-scope-badge { display: inline-flex; align-items: center; flex-shrink: 0; gap: 8px; padding: 9px 12px; background: #eaf0e8; color: #426548; border: 1px solid #dce6d9; border-radius: 24px; font-size: 11px; font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-scope-dot { width: 6px; height: 6px; border-radius: 50%; background: #60996a; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .manage-sub-tabs { align-self: flex-start; max-width: 100%; padding: 5px; margin: 0; border: 1px solid #dee6dc; background: #eaf0e7; border-radius: 11px; gap: 4px; flex-wrap: wrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-manage-sub { min-height: 38px; padding: 9px 15px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 500; background: transparent; color: #66776b; box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-manage-sub.active { border-color: #dce5d9; background: #ffffff; color: #205d3c; font-weight: 700; box-shadow: 0 2px 4px #263e2310; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .manage-sub-pane { display: none; min-width: 0; flex-direction: column; gap: var(--admin-gap); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .manage-sub-pane.active { display: flex; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .manage-sub-pane > * { min-width: 0; margin-bottom: 0 !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-report-feedback { padding: 12px 16px; color: #516859; background: #e9f0e6; border: 1px solid #d5e3d0; border-radius: 10px; line-height: 1.6; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-report-feedback.is-error { color: #923e36; background: #fff5f2; border-color: #f0d7d0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure { border: 1px solid var(--admin-line); border-radius: 12px; background: #ffffff; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure > summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure > summary::-webkit-details-marker { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; flex-shrink: 0; border-bottom: 2px solid #76916c; border-right: 2px solid #76916c; transform: rotate(45deg); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure[open] > summary::after { transform: rotate(225deg); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure > summary > i { color: #628354; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure strong { display: block; color: #3a5633; font-size: 13px; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure small { display: block; margin-top: 5px; color: #65745d; font-size: 11px; line-height: 1.6; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-body { display: flex; flex-direction: column; gap: 20px; padding: 0 20px 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-body > * { margin-bottom: 0 !important; } /* Date controls are independent groups, free to wrap before they collide. */ :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .revenue-period-header { padding: 14px 16px; border: 1px solid var(--admin-line); border-radius: 12px; box-shadow: none; gap: 12px 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .period-toggle-group { background: #f0f3ed; border-radius: 8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-period-toggle { min-height: 36px; padding: 8px 12px; font-size: 12px; font-weight: 500; gap: 6px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-period-toggle.active { background: #ffffff; color: var(--admin-green); font-weight: 700; box-shadow: 0 1px 4px #203f2420; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .period-date-controls { gap: 8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .date-input-wrapper input { min-height: 37px; background: #ffffff; border: 1px solid #dce4d8; border-radius: 7px; font-size: 12px; font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-quick-date { min-height: 34px; padding: 7px 9px; border-color: #e1e7dd; background: #ffffff; color: #617064; font-size: 11px; font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-quick-date:hover { background: #edf3e9; color: #205d3c; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .period-status-badge { padding: 7px 10px; border: 0; border-radius: 6px; color: #5c7562; background: #eff4ec; font-size: 11px; font-weight: 600; } /* Quiet surfaces and tabular numbers make the figures the visual priority. */ :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; min-width: 0; min-height: 154px; gap: 14px; padding: 20px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius); background: #ffffff; box-shadow: 0 2px 3px #28392103; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-card.gradient-emerald { background: #edf5ed; border-color: #d2e2cf; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-icon { width: 40px; height: 40px; border-radius: 10px; background: #f1f5ee; color: #688169; font-size: 17px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .gradient-emerald .kpi-icon { background: #216546; color: #ffffff; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-details { min-width: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-title { min-height: 35px; color: #6a786e; font-size: 11px; font-weight: 500; line-height: 1.7; text-transform: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-value { margin: 5px 0 8px; color: #203d2d; font-size: clamp(21px, 1.9vw, 29px); font-weight: 700; line-height: 1.25; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-sub { display: block; color: #657261; font-size: 11px; line-height: 1.8; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-growth-container { flex-wrap: wrap; gap: 6px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-growth-container small { color: #77837a; font-size: 11px; line-height: 1.6; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-growth-badge { padding: 3px 6px; font-size: 10px; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .analytics-row { min-width: 0; gap: var(--admin-gap); align-items: stretch; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) :is(.analytics-card, .branch-split-card, .sync-store-card) { min-width: 0; padding: 22px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius); background: var(--admin-surface); box-shadow: 0 2px 3px #28392103; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head { align-items: flex-start; gap: 16px; padding-bottom: 17px; margin-bottom: 18px; border-color: #edf0e9; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head > div { min-width: 0; max-width: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .btn-export-excel { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 13px; border: 1px solid #dce5d6; border-radius: 8px; color: #416a36; background: #f3f7ed; font-size: 12px; font-weight: 600; cursor: pointer; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head h3 { color: #304836; font-size: 15px; font-weight: 700; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head h3 > i { margin-right: 3px; color: #6c8a70; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-desc { margin-top: 5px; color: #667360; font-size: 12px; line-height: 1.8; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-desc strong { font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .area-split-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .area-split-row.single-branch { grid-template-columns: minmax(0, 1fr) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-split-card { display: flex; flex-direction: column; padding: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-split-card .card-head { min-height: 78px; gap: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .badge-branch-total { flex-shrink: 0; padding: 7px 9px; background: #eff5eb; color: #35623d; border-radius: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-card-body { flex: 1; gap: 14px; margin-top: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-box { min-width: 0; padding: 12px; border-radius: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-box.kid-box { border-color: #ede4cf; background: #fbf8ef; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-box.cafe-box, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-box.garden-box { border-color: #dbe7d8; background: #f1f6ed; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-header { min-height: 30px; gap: 5px; font-size: 11px; font-weight: 600; line-height: 1.5; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-amount { font-size: clamp(16px, 1.45vw, 22px); font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-sub { margin-top: 6px; color: #67745e; font-size: 11px; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-divider-vs { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-progress-container { height: 6px; border-radius: 6px; background: #edf0e9; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-drinks-indicator { margin-top: auto; padding: 9px 10px; border-color: #e4ebde; border-radius: 8px; background: #f6f8f2; color: #687c60; font-size: 11px; font-weight: 500; line-height: 1.8; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .chart-container-bar { min-width: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .chart-legend-badge-group { gap: 7px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .badge-legend { font-size: 11px !important; font-weight: 500 !important; padding: 5px 8px !important; white-space: normal; line-height: 1.6; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .drink-item { padding: 11px 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .drink-item-left { min-width: 0; font-size: 11px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .drink-item-right { flex-shrink: 0; font-size: 11px; } /* Scroll data tables locally; never make the entire workspace wider. */ :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .table-responsive { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #e8ede3; border-radius: 10px; scrollbar-width: thin; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table { font-size: 13px; text-align: left; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table th { padding: 14px; border-bottom: 1px solid #dde6d8; background: #f5f7f1; color: #5c7054; font-size: 11px; font-weight: 600; white-space: nowrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table td { padding: 14px; border-color: #edf1e8; line-height: 1.7; vertical-align: middle; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table tbody tr:last-child td { border-bottom: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table tbody tr:hover { background: #f9fbf6; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table:has(#branchStatsTableBody) { min-width: 1060px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table:has(#userMgmtTableBody) { min-width: 1200px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .data-table:has(#invoicesTableBody) { min-width: 850px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .user-permission-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 230px; max-width: 340px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .user-permission-chip { display: inline-flex; padding: 3px 6px; border: 1px solid #dce6d5; border-radius: 5px; background: #f1f6eb; color: #58704b; font-size: 10px; font-weight: 500; line-height: 1.5; white-space: nowrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .percent-badge { font-size: 10px; font-weight: 600; border-color: #dce6d4; color: #537545; background: #eff5e9; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .top-cat-item { background: #f6f8f2; border-color: #e7ecdf; padding: 11px 12px; gap: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .top-cat-name { font-size: 11px; font-weight: 600; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .top-cat-badge { font-size: 10px; flex-shrink: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) :is(.product-mgmt-filter-bar, .invoices-filter-bar) { flex-wrap: wrap; gap: 14px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .invoices-filter-bar { padding: 16px 20px; border-color: var(--admin-line); border-radius: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-filter-group, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .filter-group { min-width: 0; gap: 8px; font-size: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-filter-search { min-width: 200px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-filter-search input, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .custom-select, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-text-input { min-height: 40px; max-width: 100%; border-color: #dce4d5; border-radius: 8px; font-size: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-count-badge { border: 1px solid #e4eadc; background: #f3f6ee; color: #77856e; font-size: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-add-new-product, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-refresh { min-height: 38px; border-radius: 8px; padding: 9px 13px; font-size: 11px; font-weight: 600; background: #216546; box-shadow: none; white-space: normal; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .holiday-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .holiday-cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .holiday-form-grid > *, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .setting-form-grid-2 > * { min-width: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-cards-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--admin-gap); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-card { min-width: 0; border-color: var(--admin-line); border-radius: var(--admin-radius); box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-settings-wrapper { padding: 0; display: flex; flex-direction: column; gap: var(--admin-gap); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-status-banner { margin: 0; gap: 20px; padding: 18px; border: 1px solid #dfe7d8; background: #f1f6eb; box-shadow: none; flex-wrap: wrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-status-banner .status-pulse-dot { background: #96a58d; box-shadow: none; animation: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-status-banner.is-connected .status-pulse-dot { background: #36845c; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-status-banner .banner-title { color: #315435; font-size: 14px; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-status-banner .banner-sub { color: #748269; font-size: 12px; line-height: 1.8; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-status-banner .badge-online-pill { color: #596f4e; background: #e4eddc; font-size: 11px; font-weight: 500; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-header-styled { align-items: flex-start; gap: 10px; background: #f5f8f0; border-color: #e5ebdf; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-header-styled h4 { font-size: 13px; line-height: 1.7; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-hero { padding: 26px 12px 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-hero h2 { color: #234731; font-size: 25px; line-height: 1.5; letter-spacing: -0.8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-hero p { max-width: 680px; margin: 12px auto 0; color: var(--admin-muted); font-size: 12px; line-height: 1.9; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-hero-icon { font-size: 32px; color: #658d5a; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-store-card h3 { padding-top: 22px; font-size: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-sync-all { max-width: 100%; padding: 14px 24px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.7; white-space: normal; box-shadow: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-status-log { max-width: 100%; overflow-wrap: anywhere; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .store-meta { overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-overlay { padding: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-content { max-height: calc(100dvh - 32px); max-width: min(900px, 100%); border-radius: 16px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-header { flex-shrink: 0; gap: 12px; padding: 18px 20px; background: #f3f7ed; font-size: 14px; line-height: 1.6; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-body { min-height: 0; overflow-y: auto; padding: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-actions { flex-shrink: 0; flex-wrap: wrap; gap: 10px; padding: 16px 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-actions button { min-height: 40px; white-space: normal; } @media (max-width: 1180px) { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .clock-badge { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .cashier-info { max-width: 125px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .area-split-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-split-card:last-child { grid-column: 1 / -1; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-split-card:last-child .card-head { min-height: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .einvoice-cards-grid { grid-template-columns: minmax(0, 1fr); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head { flex-wrap: wrap; } } @media (max-width: 900px) { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .app-header { position: relative; gap: 0 12px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .header-left { gap: 10px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-text { font-size: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-select-container { flex-basis: 160px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .cashier-info, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .user-role-tag { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sys-tab-btn { padding: 8px 10px !important; font-size: 11px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; color: #e8f2e8; border: 1px solid #ffffff29; border-radius: 8px; background: transparent; font-size: 12px; cursor: pointer; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .system-nav { display: none; position: absolute; top: calc(100% + 8px); right: 12px; width: min(580px, calc(100% - 24px)); max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)); margin: 0; padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #ffffff29; border-radius: 14px; background: #154f38; box-shadow: 0 16px 44px #102d3440; z-index: 2; } .admin-portal.admin-nav-open .system-nav { display: grid; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .system-nav .sys-tab-btn { justify-content: flex-start; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 58px; padding: 10px !important; white-space: normal !important; line-height: 1.5 !important; font-size: 12px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) #btnSwitchPortalNav { margin-left: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: #102d3440; z-index: 90; cursor: pointer; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .analytics-row:not(.area-split-row) { flex-direction: column; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-cards-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) { --admin-gap: 18px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .app-header { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'brand' 'actions' 'nav'; padding: 0 12px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .header-left { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); padding: 8px 0 4px; gap: 12px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-white-badge { padding: 4px 7px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-img { width: 28px !important; height: 28px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .brand-logo-text { font-size: 11px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-select-container { width: 100%; max-width: none; padding: 8px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-select { font-size: 16px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .header-right { justify-content: flex-end; padding: 0 0 8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-menu-toggle { order: -1; margin-right: auto; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .network-status-badge { margin-right: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-header-sync { padding: 6px 9px !important; min-height: 30px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) :is(.dashboard-wrapper, .invoices-wrapper, .sync-wrapper) { padding: 22px 14px 32px !important; gap: 18px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-page-heading h1 { font-size: 25px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-eyebrow { font-size: 9px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-page-description { font-size: 11px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-scope-badge { font-size: 10px; padding: 6px 9px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .manage-sub-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 3px; margin: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-manage-sub { justify-content: center; flex-direction: column; min-width: 0; padding: 9px 4px; font-size: 10px; line-height: 1.5; white-space: normal; text-align: center; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .revenue-period-header { padding: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .period-toggle-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; overflow: visible; gap: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-period-toggle { justify-content: center; padding: 7px 4px; font-size: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-period-toggle i { display: none; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .period-date-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .date-input-wrapper input { width: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .quick-date-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .btn-quick-date { font-size: 10px; padding: 6px 4px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .period-status-badge { justify-content: center; padding: 8px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-card { display: flex; flex-direction: column; gap: 12px; padding: 14px !important; min-height: 0; border-radius: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-title { min-height: 35px; font-size: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-value { font-size: 20px !important; letter-spacing: -0.7px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-icon { width: 33px; height: 33px; font-size: 14px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-sub, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-growth-container small { font-size: 9px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .area-split-row { grid-template-columns: minmax(0, 1fr) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-split-card:last-child { grid-column: auto; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .branch-split-card .card-head { min-height: 0; flex-direction: row; flex-wrap: nowrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head { flex-direction: column; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-head h3 { font-size: 13px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .card-desc { font-size: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .badge-branch-total { padding: 6px 8px; font-size: 12px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .split-stat-amount { font-size: 20px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-filter-group { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-filter-group select, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .filter-group select { min-width: 0; width: 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .p-filter-search { flex-basis: 100%; min-width: 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .holiday-form-grid, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .setting-form-grid-2 { grid-template-columns: minmax(0, 1fr) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .manage-sub-pane [style*='grid-template-columns'] { grid-template-columns: minmax(0, 1fr) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .invoices-filter-bar .filter-group { display: grid; flex: 1; gap: 7px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .invoices-filter-bar { padding: 14px; align-items: flex-end; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-hero { padding: 12px 0; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .sync-hero h2 { font-size: 22px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-overlay { padding: 10px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-content { width: 100%; max-height: calc(100dvh - 20px); } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-header, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-body, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-actions { padding: 14px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .modal-actions button { flex: 1 1 100%; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-disclosure > summary { padding: 14px; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .admin-settings-body { padding: 0 12px 12px; } } @media (max-width: 360px) { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-grid { grid-template-columns: minmax(0, 1fr) !important; } :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) .kpi-card { display: grid; grid-template-columns: 33px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) *, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) *::before, :is(.admin-portal, .pos-portal :where(#pane-invoices, #receiptModal.invoice-reprint)) *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } } } /* Cài đặt in ấn theo chi nhánh */ .admin-print-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid #e0e9e1; border-radius: 12px; } .admin-print-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; } .admin-print-table th, .admin-print-table td { padding: 12px; border-bottom: 1px solid #edf2ed; text-align: left; vertical-align: middle; } .admin-print-table thead th { background: #f4f8f3; color: #42624e; font-size: 12px; font-weight: 700; } .admin-print-table tbody th strong { display: block; color: #203e2c; } .admin-print-table tbody th small { color: #6f8273; font-size: 11px; } .admin-print-table select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #d5e2d7; border-radius: 8px; background: #fbfcf9; color: #20382d; font: inherit; font-size: 14px; } .admin-print-table select.is-custom { border-color: #176544; background: #eef7f0; font-weight: 600; } .admin-print-empty { color: #6f8273; text-align: center !important; } .admin-print-subtitle { margin-top: 22px; font-size: 15px; color: #203e2c; } .admin-print-devices { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: #4d6354; } .admin-print-devices li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #f6f8f5; } .admin-print-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #b6c2b9; } .admin-print-devices li.is-online .admin-print-dot { background: #22c55e; }