/* QLReview UI — shared, mobile-first presentation layer. */
:root {
  --ui-red: #a92532;
  --ui-red-dark: #821d27;
  --ui-gold: #f2c45b;
  --ui-gold-soft: #fff5dc;
  --ui-ink: #30282b;
  --ui-muted: #70656a;
  --ui-line: #e8e0dc;
  --ui-bg: #faf8f5;
  --ui-white: #fff;
  --ui-radius: 16px;
  --ui-shadow: 0 4px 20px #49302b08;
  --primary-red: var(--ui-red);
  --primary-red-dark: var(--ui-red-dark);
  --gold: var(--ui-gold);
  --text-dark: var(--ui-ink);
}
html { width: 100%; max-width: none !important; overflow-x: clip !important; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ui-bg) !important; color: var(--ui-ink); font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important; font-size: 16px; line-height: 1.55; overflow-x: clip !important; }
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-white); color: var(--ui-ink); font-weight: 600; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
button:hover { background: var(--ui-gold-soft); border-color: #d5b16b; transform: none !important; }
button:active, [role="button"]:active { filter: brightness(.96); }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none !important; transform: none !important; }
a { color: var(--ui-red); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ui-red) !important; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: var(--ui-red) !important; box-shadow: 0 0 0 3px #a9253212 !important; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 48px !important; min-width: 0 !important; max-width: 100%; padding: 11px 13px !important;
  font-size: 16px !important; color: var(--ui-ink); border: 1px solid #bfb3ad !important;
  border-radius: 10px !important; background: var(--ui-white) !important; line-height: 1.5;
}
input::placeholder, textarea::placeholder, .input-group input::placeholder { color: #76686e; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-red); width: 20px; height: 20px; }
textarea { resize: vertical; min-height: 100px !important; }
label { color: var(--ui-ink); font-size: 14px; font-weight: 600; }
[hidden] { display: none !important; }
.ui-skip-link { position: fixed; left: 16px; top: -80px; z-index: 5000; padding: 12px 18px; background: white; border-radius: 10px; }
.ui-skip-link:focus { top: 12px; }
.container { display: block; height: auto !important; min-height: 100dvh; }
.main-content {
  margin: 0 !important; width: 100% !important; max-width: none !important; min-width: 0;
  height: auto !important; min-height: 100dvh; padding: 24px 16px calc(110px + env(safe-area-inset-bottom)) !important;
  background: var(--ui-bg) !important; overflow: visible !important;
}
.main-content h1, .sessions-header h2 { margin: 0 0 20px !important; padding: 0 !important; font-size: clamp(22px, 2.4vw, 30px) !important; font-weight: 750; color: var(--ui-ink) !important; line-height: 1.3; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; text-shadow: none !important; display: flex; align-items: center; gap: 12px; }
.main-content h1 i, .sessions-header h2 i { color: var(--ui-red) !important; font-size: .85em; }
.ui-page-header { margin-bottom: 20px !important; }
.ui-page-header h1 { margin: 0 !important; }
.ui-sales-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ui-sales-header .add-btn { margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ui-status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; background: var(--ui-gold-soft); color: #79500d; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ui-status-badge[data-status="trading"] { background: #f3efed; color: #5a5054; }
.ui-status-badge[data-status="sold"] { background: #edf3e7; color: #45602b; }
.ui-money { font-variant-numeric: tabular-nums; }
.ui-page-description { color: var(--ui-muted); font-size: 14px; margin: -8px 0 22px; }
.ui-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 16px; background: #fffffff5; border-bottom: 1px solid var(--ui-line); }
.ui-brand { display: flex; align-items: center; gap: 10px; color: var(--ui-ink); text-decoration: none; font-size: 17px; font-weight: 750; }
.ui-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ui-red); color: var(--ui-gold); font-size: 14px; letter-spacing: -.5px; }
.ui-topbar-meta { font-size: 13px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44%; }
.ui-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.ui-topbar-actions .ui-topbar-meta { max-width: 160px; }
.ui-section-switcher { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ui-section-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: #f7f3f0; color: var(--ui-muted); }
.ui-section-button svg { width: 22px; height: 22px; }
.ui-section-button[aria-pressed="true"] { background: var(--ui-gold-soft); border-color: #dfbf7a; color: var(--ui-red); }
@media (max-width: 768px) { .ui-topbar-actions:has(.ui-section-switcher) .ui-topbar-meta { display: none; } }
.hamburger { display: none !important; }
.sidebar { position: fixed !important; z-index: 200; top: 0 !important; left: 0; width: min(320px, calc(100vw - 56px)) !important; height: 100dvh !important; border: 0 !important; box-shadow: 8px 0 30px #30282b16; background: white !important; transform: translateX(-105%) !important; transition: transform .2s ease; visibility: hidden; }
.sidebar.active { transform: translateX(0) !important; visibility: visible; }
.ui-drawer-backdrop { position: fixed; inset: 0; z-index: 190; background: #30282b66; border: 0; border-radius: 0; }
.ui-drawer-close { position: fixed; right: 8px; top: max(12px, env(safe-area-inset-top)); z-index: 210; border: 0; background: white; color: var(--ui-red); font-size: 22px; width: 44px; padding: 4px; }
.ui-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 180; display: flex; justify-content: space-around; gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid var(--ui-line); box-shadow: 0 -4px 20px #30282b06; }
.ui-bottom-nav a, .ui-bottom-nav button { min-height: 54px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 2px; color: var(--ui-muted); font-size: 12px; line-height: 1.3; text-decoration: none; border: 0; border-radius: 10px; background: white; }
.ui-bottom-nav svg { width: 21px; height: 21px; }
.ui-bottom-nav [aria-current="page"], .ui-bottom-nav [aria-expanded="true"] { background: var(--ui-gold-soft); color: var(--ui-red); font-weight: 700; }
.ui-bottom-nav .ui-more-current { background: var(--ui-gold-soft); color: var(--ui-red); font-weight: 700; }
.ui-more-panel { position: fixed; z-index: 179; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 640px; max-height: calc(100dvh - 180px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--ui-line); border-radius: 18px; background: white; box-shadow: 0 -8px 36px #30282b20; }
.ui-more-panel h2 { margin: 0 0 12px; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--ui-ink); }
.ui-more-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ui-more-link { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 9px; color: var(--ui-ink); border: 1px solid transparent; border-radius: 10px; font-size: 13px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.ui-more-link i { width: 16px; flex-shrink: 0; text-align: center; color: var(--ui-red); }
.ui-more-link:hover, .ui-more-link[aria-current="page"] { background: var(--ui-gold-soft); color: var(--ui-red-dark); border-color: #ecd5a2; }
.ui-more-main { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; background: #f7f3f0; border-color: var(--ui-line); color: var(--ui-muted); font-size: 14px; }
.ui-more-main svg { width: 22px; height: 22px; }
.ui-more-pending { grid-column: 1 / -1; color: var(--ui-muted); font-size: 14px; margin: 0; }
.overview-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.overview-status-card { min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: 14px; background: white; box-shadow: var(--ui-shadow); }
.overview-status-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ui-muted); font-size: 14px; font-weight: 600; }
.overview-status-card h2 i { color: var(--ui-red); }
.overview-status-value { margin: 8px 0 4px; color: var(--ui-ink); font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.overview-status-hint { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.overview-status-card[data-state="warning"] { border-color: #dfbf7a; background: var(--ui-gold-soft); }
.overview-status-card[data-state="danger"], .overview-status-card[data-state="error"] { border-color: #e8b9be; }
.overview-status-card[data-state="danger"] .overview-status-value, .overview-status-card[data-state="error"] .overview-status-value { color: var(--ui-red); }
.overview-status-card button { margin-top: 10px; padding: 8px 12px; font-size: 13px; }
.add-btn, .btn-primary, .btn-login, .refresh-btn, .sell-btn, .action-btn, .modal-content form button { min-height: 46px !important; min-width: 44px !important; padding: 11px 16px !important; font-size: 14px !important; font-weight: 650; border-radius: 10px !important; box-shadow: none !important; border: 1px solid transparent; background: var(--ui-red) !important; color: white !important; }
.add-btn, .btn-login { background: var(--ui-gold) !important; color: #4a3112 !important; }
.add-btn { margin-bottom: 20px; }
.add-btn:hover, .btn-login:hover { background: #eab748 !important; }
.edit-btn, .action-btn.edit { background: var(--ui-gold-soft) !important; color: #79500d !important; border: 1px solid #e5cf9d !important; }
.delete-btn, .action-btn.delete { background: #fff0ef !important; color: var(--ui-red) !important; border: 1px solid #e8b9be !important; }
.edit-btn, .delete-btn, .sell-btn { min-height: 44px !important; min-width: 44px !important; padding: 9px 13px !important; border-radius: 10px; margin: 3px; font-size: 14px !important; box-shadow: none !important; }
.btn-cancel, .modal-content button.ui-cancel { background: white !important; color: var(--ui-muted) !important; border: 1px solid #bfb3ad !important; }
.search-bar, .filter-bar, .date-filter, .controls { display: flex !important; flex-direction: column; align-items: stretch !important; flex-wrap: wrap; gap: 12px !important; padding: 16px !important; margin: 0 0 20px !important; background: white !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow); }
.search-bar input, .search-bar select, .filter-bar input, .filter-bar select, .date-filter input, .controls input, .controls select { width: 100% !important; flex: 1 1 auto; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 10px !important; margin: 0 0 20px; }
.action-buttons button { flex: 1 1 140px; }
.action-buttons.received-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; max-width: 440px; margin-bottom: 16px; }
.received-actions .action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0 !important; min-height: 76px !important; padding: 8px !important; border: 1px solid var(--ui-line); border-radius: 12px !important; background: white !important; color: var(--ui-ink) !important; font-size: 12px !important; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: var(--ui-shadow) !important; }
.received-actions .action-btn i { color: var(--ui-red); font-size: 20px; }
.received-actions .btn-review-today { background: var(--ui-gold-soft) !important; border-color: #ecd5a2; color: var(--ui-red-dark) !important; }
.received-actions .action-btn:hover { background: #fff8e8 !important; border-color: #d5b16b; }
@media (min-width: 769px) { .received-actions .action-btn { flex-direction: row; min-height: 48px !important; } .received-actions .action-btn i { font-size: 16px; } }
.mobile-sort-bar { display: block; padding: 14px !important; margin-bottom: 16px; border: 1px solid var(--ui-line); border-radius: 14px; background: white; box-shadow: none; }
.mobile-sort-label { display: block; font-size: 13px; color: var(--ui-muted); margin-bottom: 8px; text-transform: none; }
.mobile-sort-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.mobile-sort-btn { min-height: 44px; padding: 8px 13px; font-size: 13px; background: white; color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 9px; }
.mobile-sort-btn.active { background: var(--ui-gold-soft); color: #79500d; border-color: #d5b16b; }
.mobile-sort-bar.ui-sort-compact { display: flex !important; align-items: center; gap: 10px; max-width: 440px; min-height: 72px; padding: 8px 10px !important; border-radius: 14px; box-shadow: var(--ui-shadow); }
.ui-sort-mark { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--ui-gold-soft); color: var(--ui-red); }
.ui-sort-mark svg { width: 20px; height: 20px; }
.ui-sort-field { position: relative; flex: 1; min-width: 0; }
.ui-sort-field label { position: absolute; top: 2px; left: 0; font-size: 11px; font-weight: 500; color: var(--ui-muted); pointer-events: none; }
.ui-sort-field::after { content: ''; position: absolute; right: 8px; top: 29px; width: 6px; height: 6px; border-right: 1.5px solid var(--ui-muted); border-bottom: 1.5px solid var(--ui-muted); transform: rotate(45deg); pointer-events: none; }
.ui-sort-field select.ui-sort-select { appearance: none; width: 100%; height: 54px; min-height: 54px !important; margin: 0; padding: 19px 26px 3px 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; cursor: pointer; }
.ui-sort-direction { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; min-width: 46px; min-height: 48px; padding: 5px; border: 1px solid #ecd5a2; border-radius: 10px; background: var(--ui-gold-soft); color: var(--ui-red-dark); }
.ui-sort-direction svg { width: 18px; height: 18px; }
.ui-sort-direction span { font-size: 10px; line-height: 1.2; font-weight: 600; }
.ui-sort-direction:disabled { background: #f7f3f0; border-color: var(--ui-line); color: var(--ui-muted); }
.summary, .totals { background: var(--ui-gold-soft) !important; border: 1px solid #ecd5a2 !important; color: #624716 !important; padding: 16px !important; border-radius: 12px !important; box-shadow: none !important; margin: 0 0 20px; font-size: 15px !important; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.summary .profit { color: #45602b; }
.summary .loss { color: var(--ui-red); }
.totals .total-label { color: #624716 !important; }
.totals .total-value { color: var(--ui-red) !important; font-variant-numeric: tabular-nums; }
.dashboard-section { padding: 0 !important; margin: 28px 0 !important; background: transparent; border: 0 !important; box-shadow: none !important; }
.dashboard-section h2 { padding: 0 !important; margin: 0 0 14px !important; font-size: 18px !important; background: none !important; color: var(--ui-ink); box-shadow: none !important; }
.dashboard-section h2::before { content: ''; display: inline-block; width: 4px; height: 20px; border-radius: 4px; background: var(--ui-gold); }
.dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 !important; }
.dashboard .card { padding: 18px 14px !important; background: white !important; border: 1px solid var(--ui-line) !important; border-radius: 14px; box-shadow: var(--ui-shadow); text-align: left; min-width: 0; }
.dashboard .card::before { display: none; }
.dashboard .card:hover { transform: none; box-shadow: var(--ui-shadow); }
.dashboard .card h3 { color: var(--ui-muted); font-size: 13px; text-transform: none; letter-spacing: normal; margin-bottom: 12px; line-height: 1.5; }
.dashboard .card h3 i { display: block; color: var(--ui-red); font-size: 17px; margin-bottom: 12px; }
.dashboard .card p, .dashboard .card span { color: var(--ui-ink); font-size: clamp(20px, 2.1vw, 28px); line-height: 1.3; font-weight: 750; text-shadow: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dashboard .card.ui-metric-main { background: var(--ui-red) !important; border-color: var(--ui-red) !important; }
.dashboard .card.ui-metric-main h3, .dashboard .card.ui-metric-main p { color: white; }
.dashboard .card.ui-metric-main i { color: var(--ui-gold); }
.ui-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.ui-quick-actions a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 16px; background: white; border: 1px solid var(--ui-line); border-radius: 12px; color: var(--ui-ink); text-decoration: none; font-size: 14px; font-weight: 600; flex: 1 1 145px; }
.ui-quick-actions a:first-child { background: var(--ui-gold); border-color: var(--ui-gold); color: #4a3112; }
.ui-quick-actions svg { width: 18px; height: 18px; }
.order-list, .report-table, .ui-table-scroll { padding: 0 !important; width: 100% !important; max-width: 100% !important; border: 1px solid var(--ui-line) !important; border-radius: 14px; background: white !important; box-shadow: var(--ui-shadow) !important; overflow-x: auto !important; overflow-y: visible !important; overscroll-behavior-x: contain; }
table, #orderTable, .order-list table { display: table; table-layout: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; border-collapse: collapse; border-radius: 0; background: white !important; box-shadow: none !important; overflow: visible !important; font-size: 14px; }
thead, #orderTable thead { display: table-header-group; background: var(--ui-gold-soft) !important; color: #624716; }
th, #orderTable thead th, .order-list th, .unsold-items th { background: var(--ui-gold-soft) !important; color: #624716 !important; border: 0 !important; border-bottom: 1px solid var(--ui-line) !important; box-shadow: none !important; font-weight: 650; position: static; white-space: nowrap; }
td, th, #orderTable td, #orderTable th, .order-list td, .order-list th { padding: 14px 16px !important; line-height: 1.5; text-align: left; border-bottom: 1px solid var(--ui-line); font-size: 14px; vertical-align: middle; }
td { overflow-wrap: anywhere; }
tr:nth-child(even), .order-list tr:nth-child(even) { background: #fcfbf9; }
tbody tr:hover, #orderTable tbody tr:hover { background: #fffaf0 !important; }
th[onclick] { cursor: pointer; }
th[onclick]:focus-visible { outline-offset: -4px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 16px 0; margin-top: 8px; font-size: 14px; }
.pagination button { background: white !important; color: var(--ui-red) !important; border: 1px solid var(--ui-line); box-shadow: none !important; }
.pagination select { width: auto; }
.ui-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; margin-bottom: 18px; border-radius: 12px; border: 1px solid #ecd5a2; background: var(--ui-gold-soft); color: #624716; font-size: 14px; }
.ui-feedback[data-state="error"] { border-color: #e8b9be; background: #fff0ef; color: var(--ui-red-dark); }
.ui-feedback span { flex: 1 1 180px; }
.ui-feedback button { padding: 7px 13px; font-size: 14px; }
.ui-empty { padding: 32px 20px; margin-bottom: 16px; text-align: center; background: white; border: 1px dashed #d8cbbf; border-radius: 14px; color: var(--ui-muted); font-size: 14px; }
.ui-empty strong { display: block; color: var(--ui-ink); font-size: 16px; margin-bottom: 8px; }
.ui-empty button { margin-top: 16px; }
.modal { z-index: 1000 !important; inset: 0; height: 100dvh; padding: 16px; overflow-y: auto; background: #30282b88; overscroll-behavior: contain; }
.modal-content { position: relative; background: white !important; width: 100% !important; max-width: 600px !important; max-height: calc(100dvh - 32px); padding: 22px !important; margin: 0 auto !important; border: 1px solid var(--ui-line) !important; border-radius: 18px !important; overflow-y: auto; box-shadow: 0 20px 60px #30282b26; }
.modal-content h2 { font-size: 20px; line-height: 1.4; color: var(--ui-ink); padding: 0 0 16px; margin: 0; border-bottom: 1px solid var(--ui-line); }
.modal-content form { display: flex; flex-direction: column; gap: 10px; max-height: none !important; overflow: visible !important; padding-right: 0 !important; }
.modal-content label, .modal-content form label { margin-top: 8px; color: var(--ui-ink); }
.modal-content h2 { padding-right: 48px; }
.ui-modal-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; margin: 0 !important; padding: 4px !important; background: white !important; color: var(--ui-muted) !important; font-size: 24px; border: 1px solid var(--ui-line); z-index: 6; }
.ui-modal-actions { position: sticky; bottom: -22px; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 0; background: white; border-top: 1px solid var(--ui-line); }
.ui-modal-actions button { width: 100%; margin: 0 !important; }
.modal-content input, .modal-content select, .modal-content textarea { width: 100%; }
.modal-content button { margin-top: 6px; }
.chart-container { min-width: 0 !important; width: 100% !important; height: 320px; padding: 14px; margin-bottom: 20px; border: 1px solid var(--ui-line); border-radius: 16px; background: white; }
.sessions-container, .config-display { padding: 20px; border: 1px solid var(--ui-line); background: white !important; border-radius: 16px; box-shadow: var(--ui-shadow) !important; max-width: 100%; }
.sessions-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; background: none !important; padding: 0 !important; }
.sessions-header h2 { font-size: 22px !important; margin: 0 !important; flex: 1 1 200px; }
.session-item { background: #fcfbf9 !important; border: 1px solid var(--ui-line) !important; box-shadow: none !important; }
.session-details { color: var(--ui-muted); overflow-wrap: anywhere; }
.badge { background: var(--ui-gold-soft); color: #79500d; box-shadow: none; font-size: 12px; }
.badge-danger { background: #fff0ef !important; color: var(--ui-red) !important; }
.badge-success, .badge-remember { background: #f0f4e9 !important; color: #45602b !important; }
.badge-warning { background: var(--ui-gold-soft) !important; color: #79500d !important; }
.badge-info { background: #f3efed !important; color: #5a5054 !important; }
/* The iframe shares the design system but keeps its own scroll area. */
body[data-ui-page="menu"] { background: white !important; height: 100dvh; overflow: hidden !important; }
.menu-content { height: 100dvh; overflow-y: auto; padding-bottom: 24px; color: var(--ui-ink); }
.ui-menu-brand { margin: 20px 20px 8px; }
.profile-section { background: none; padding: 20px; border-color: var(--ui-line); gap: 12px; }
.avatar { width: 42px; height: 42px; flex-shrink: 0; background: var(--ui-gold-soft); border-radius: 12px; box-shadow: none; }
.avatar i { color: #79500d; font-size: 20px; }
.profile-info { min-width: 0; }
.profile-info h3 { color: var(--ui-ink); font-size: 15px; overflow-wrap: anywhere; }
.role-badge, .role-badge.admin, .role-badge.user, .role-badge.khach { background: #f4efeb; color: #6c5750; font-size: 11px; text-shadow: none; text-transform: none; letter-spacing: normal; }
.status-cards { padding: 16px; border-color: var(--ui-line); gap: 8px; }
.status-card { padding: 10px; background: #faf8f5; border: 1px solid var(--ui-line); border-radius: 10px; }
.status-card:hover { background: #faf8f5; transform: none; }
.status-card > i { background: var(--ui-gold-soft); color: #79500d; width: 32px; height: 32px; font-size: 15px; }
.status-label { color: var(--ui-muted); text-transform: none; font-size: 12px; letter-spacing: normal; }
.status-value { color: var(--ui-ink); font-size: 13px; }
.status-value.danger, .status-value.warning { color: var(--ui-red); }
.menu-divider { padding: 18px 20px 8px; color: var(--ui-muted); font-size: 11px; }
.menu-link { min-height: 48px; font-size: 14px; padding: 12px; color: #51464c; border-radius: 10px; gap: 12px; }
.menu-link:hover { color: var(--ui-red); background: #fffaf0; }
.menu-link::before { display: none; }
.menu-link > i:first-child { color: var(--ui-muted); font-size: 17px; }
.menu-link.active, .submenu a.active { background: var(--ui-gold-soft); color: var(--ui-red-dark); font-weight: 650; }
.menu-link.active > i:first-child { color: var(--ui-red); }
.submenu { background: none; }
.submenu li a { min-height: 44px; color: #62575c; font-size: 13px; padding: 10px 12px 10px 46px; line-height: 1.5; border-radius: 8px; }
.submenu li a:hover { color: var(--ui-red); background: #fffaf0; }
.submenu li a i { color: var(--ui-muted); }
.submenu-icon { color: var(--ui-muted) !important; }
.menu-link:hover .submenu-icon { color: var(--ui-muted) !important; }
.status-card.danger > i { animation: none; background: #fff0ef; color: var(--ui-red); }
.submenu { display: none; transition: none; }
.menu-item.has-submenu.open > .submenu { display: block; max-height: none; padding: 4px 0; }
.menu-link.logout { color: var(--ui-red); background: #fff5f3; }
/* Login and standalone utilities. */
body[data-ui-page="dangnhap"] { min-height: 100dvh; overflow-y: auto !important; padding: 24px 16px; align-items: center; }
.bg-animation { display: none; }
.login-container { width: 440px; max-width: 100%; perspective: none; }
.login-card { padding: 28px 24px !important; background: white !important; border: 1px solid var(--ui-line); box-shadow: 0 16px 60px #49302b0c; animation: none; }
.login-header { margin-bottom: 28px; }
.login-header .icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ui-red); box-shadow: none; margin-bottom: 20px; }
.login-header .icon i { color: var(--ui-gold); font-size: 24px; }
.login-header h1 { font-size: 25px; color: var(--ui-ink); }
.login-header p { color: var(--ui-muted); margin-top: 8px; }
.input-group { margin-bottom: 20px; }
.input-group input:not([type="checkbox"]):not([type="radio"]) { padding-left: 44px !important; }
.input-group input[type="password"], #password { padding-right: 52px !important; }
.password-toggle { right: 4px; width: 44px; height: 44px; padding: 8px; min-height: 44px; background: transparent !important; border: 0; }
.password-toggle i { position: static !important; transform: none !important; color: var(--ui-muted); }
.remember-me label { min-height: 44px; }
.remember-me input[type="checkbox"] { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; clip-path: inset(50%); }
.checkbox-label { color: var(--ui-muted); font-size: 14px; }
.checkbox-custom { border-color: #bfb3ad !important; }
.remember-me input:checked + .checkbox-custom { background: var(--ui-red) !important; border-color: var(--ui-red) !important; }
.remember-me input:focus-visible + .checkbox-custom { outline: 3px solid var(--ui-red); outline-offset: 3px; }
.btn-login { min-height: 50px !important; }
.error-message { background: #fff0ef; color: var(--ui-red-dark); font-size: 14px; }
.success-overlay { background: var(--ui-red) !important; }
body[data-ui-page="maytinh"] { padding: 24px 16px; min-height: 100dvh; flex-direction: column; gap: 20px; }
.calculator { background: white; box-shadow: var(--ui-shadow); border: 1px solid var(--ui-line); padding: 20px; }
.calculator .title { color: var(--ui-ink); text-shadow: none; font-size: 22px; }
.calculator .display { background: var(--ui-gold-soft); box-shadow: none; border-color: #ecd5a2; }
.calculator .expression { color: var(--ui-muted); }
.calculator .result { color: var(--ui-red-dark); text-shadow: none; }
.calculator .btn { min-height: 54px; padding: 12px; box-shadow: none; }
.calculator .btn-number { background: #faf8f5; color: var(--ui-ink); }
.calculator .btn-operator, .calculator .btn-clear { background: var(--ui-red); color: white; }
.calculator .btn-function, .calculator .btn-equals, .calculator .btn-backspace { background: var(--ui-gold); color: #4a3112; }
.festival-container { max-width: 1000px; padding: 24px 16px; color: var(--ui-ink); }
.festival-header h1 { font-size: 26px; color: var(--ui-ink); }
.festival-item { background: white; border: 1px solid var(--ui-line); border-radius: 16px; padding: 22px; color: var(--ui-ink); box-shadow: var(--ui-shadow); }
.festival-name, .festival-section-title { color: var(--ui-red); }
.festival-date, .festival-country { color: var(--ui-muted); }
.language-selector { flex-wrap: wrap; gap: 10px; }
.language-selector button { margin: 0; }
.filter-button { background: white; color: var(--ui-ink); border: 1px solid var(--ui-line); }
.filter-button.active { background: var(--ui-gold); color: #4a3112; }
.ui-utility-back { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 12px; font-size: 14px; text-decoration: none; border: 1px solid var(--ui-line); border-radius: 10px; background: white; }
/* At phone widths, ordinary tables become labelled records. Rich order cards retain their existing actions. */
@media (max-width: 768px) {
  .order-list, .report-table { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .ui-record-table, .ui-record-table tbody, .ui-record-table tr { display: block !important; width: 100% !important; }
  .ui-record-table thead { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ui-record-table tbody tr { margin-bottom: 14px; padding: 8px 14px !important; background: white !important; border: 1px solid var(--ui-line) !important; border-radius: 14px; }
  .ui-record-table tbody td, #orderTable.ui-record-table tbody td { display: grid !important; grid-template-columns: minmax(88px, 35%) minmax(0, 1fr); gap: 12px; align-items: center; width: 100% !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid #f0ebe7 !important; font-size: 14px !important; text-align: left !important; }
  .ui-record-table td::before { content: attr(data-label); font-weight: 600; color: var(--ui-muted); font-size: 13px; }
  .ui-record-table td.ui-record-actions, .ui-record-table td[colspan] { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .ui-record-table td.ui-record-actions::before { width: 100%; }
  .ui-record-table tbody td:last-child { border-bottom: 0 !important; }
  #orderTable.ui-rich-table, .ui-rich-table tbody { display: block !important; }
  .ui-rich-table thead { display: none !important; }
  #orderTable.ui-rich-table tbody tr { display: block !important; background: transparent !important; border: 0 !important; margin-bottom: 14px !important; padding: 0 !important; }
  #orderTable.ui-rich-table tbody td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; }
  .ui-order-card { background: white !important; border: 1px solid var(--ui-line) !important; border-radius: 14px !important; box-shadow: var(--ui-shadow) !important; }
  .ui-order-card [onclick*="toggleCard"] { padding: 16px !important; min-height: 72px; }
  .ui-card-summary { background: white !important; gap: 12px; }
  .ui-card-summary > div:last-child { flex-shrink: 0; }
  .ui-card-summary > div:first-child { overflow: visible !important; }
  .ui-card-summary span { max-width: none !important; }
  .ui-card-summary > div:first-child > div:nth-child(2) span:last-child { white-space: normal !important; overflow: visible !important; }
  .ui-order-card .ui-card-text { font-size: 14px !important; line-height: 1.55 !important; }
  .ui-order-card button { min-height: 44px !important; min-width: 44px !important; font-size: 13px !important; padding: 10px 12px !important; box-shadow: none !important; }
  .ui-order-card .ui-card-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; }
  .ui-order-card .ui-card-actions button { flex: 1 1 100px !important; }
  .ui-card-details { grid-template-columns: minmax(0, 1fr) !important; }
  .ui-table-scroll { border: 0 !important; background: transparent !important; overflow-x: auto !important; }
  .ui-page-header > .add-btn, .main-content > .add-btn { width: 100%; }
  .modal-content { padding: 20px 16px !important; }
}
@media (min-width: 769px) {
  .main-content { padding: 32px 28px 120px !important; }
  .ui-topbar { padding: 12px 28px; }
  .search-bar, .filter-bar, .date-filter, .controls { flex-direction: row; align-items: center !important; }
  .search-bar input, .filter-bar input { flex: 2 1 220px; width: auto !important; }
  .search-bar select, .filter-bar select { flex: 1 1 160px; width: auto !important; }
  .controls input, .controls select, .date-filter input { flex: 1 1 140px; width: auto !important; }
  .dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mobile-sort-bar { display: none; }
  table { min-width: 640px !important; }
  .modal-content { margin: 32px auto !important; max-height: calc(100dvh - 96px); padding: 28px !important; }
  .chart-container { height: 420px; }
}
@media (min-width: 1100px) {
  .sidebar { width: 264px !important; transform: none !important; visibility: visible; z-index: 100; box-shadow: none; border-right: 1px solid var(--ui-line) !important; }
  .main-content { margin-left: 264px !important; width: calc(100% - 264px) !important; padding: 36px 40px 48px !important; }
  .ui-topbar { margin-left: 264px; padding: 12px 40px; }
  .ui-bottom-nav, .ui-more-panel, .ui-drawer-close, .ui-drawer-backdrop { display: none !important; }
  .dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard .card { padding: 22px !important; }
}
@media (min-width: 1600px) { .dashboard { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-height: 650px) { body[data-ui-page="dangnhap"] { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .sidebar, .ui-topbar, .ui-bottom-nav, .ui-more-panel, .hamburger, .ui-quick-actions, .ui-feedback { display: none !important; }
  .main-content { margin: 0 !important; width: 100% !important; padding: 0 !important; }
}
/* Compact order actions share the same icon style across purchase views. */
.ui-icon-actions { display: inline-flex; align-items: center; gap: 6px; }
.ui-card-quick-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ui-card-quick-actions > i { margin-left: 2px; }
.main-content button.ui-mini-action { display: inline-grid; place-items: center; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 7px !important; border: 1px solid var(--ui-line) !important; border-radius: 9px !important; box-shadow: none !important; background: white !important; color: var(--ui-red) !important; }
.main-content button.ui-mini-action svg { width: 17px; height: 17px; }
.main-content button.ui-mini-edit { background: var(--ui-gold-soft) !important; border-color: #ecd5a2 !important; color: #79500d !important; }
.main-content button.ui-mini-delete { background: #fff0ef !important; border-color: #e8b9be !important; }
.main-content button.ui-mini-action:hover { border-color: var(--ui-red) !important; }
th.ui-order-action-heading, td.ui-order-action-cell { width: 110px; white-space: nowrap; }
@media (max-width: 768px) {
  .main-content button.ui-mini-action { flex-basis: 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 12px !important; }
}
.ui-short-order-code { min-width: 0; max-width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; line-height: 1.5; }
.ui-card-summary .ui-short-order-code { flex: 1; }
.ui-order-code-disclosure { margin: 0; font-weight: 600; color: var(--ui-red); }
.ui-order-code-disclosure + .ui-order-code-disclosure { margin-top: 8px; }
.ui-order-code-disclosure summary { cursor: pointer; padding: 8px 0; }
.ui-order-code-disclosure summary:focus-visible { outline: 3px solid var(--ui-gold); outline-offset: 3px; border-radius: 4px; }
.ui-order-code-full { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0; padding: 8px; background: var(--ui-gold-soft); border: 1px solid var(--ui-line); border-radius: 8px; }
.ui-order-code-full > span { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; font-weight: 500; }
button.ui-order-code-copy { flex: 0 0 36px; width: 36px; min-width: 36px; min-height: 36px; padding: 6px !important; margin: 0 !important; border-radius: 8px !important; }
@media (max-width: 768px) {
  button.ui-order-code-copy { flex-basis: 44px; width: 44px; min-width: 44px; min-height: 44px; }
  .ui-order-code-disclosure summary { min-height: 44px; display: list-item; padding: 10px 0; box-sizing: border-box; }
}