@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #18211d;
  --muted: #64726a;
  --canvas: #f2f5f1;
  --surface: #ffffff;
  --line: #dfe8e0;
  --leaf: #087f5b;
  --leaf-dark: #05543f;
  --sun: #f3b63f;
  --coral: #e46b4f;
  --sky: #4d83b8;
  --radius: 16px;
}

* { box-sizing: border-box; }
body { background: var(--canvas); color: var(--ink); font-family: "Manrope", "Segoe UI", sans-serif; letter-spacing: 0; }
body::before { position: fixed; inset: 0; z-index: 0; pointer-events: none; content: ""; opacity: .42; background-image: radial-gradient(rgba(8,127,91,.11) .7px, transparent .7px); background-size: 18px 18px; }
.app-shell { position: relative; min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: flex-start; z-index: 1040; overflow: hidden; background-color: var(--ink); background-image: linear-gradient(155deg, #172b24 0%, #0e583e 100%), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.04) 19px 20px); background-blend-mode: normal, screen; color: #ecf6ed; min-height: 100vh; padding: 28px 18px; box-shadow: 12px 0 32px rgba(19,48,35,.12); }
.sidebar::after { position: absolute; right: -42px; bottom: 40px; width: 150px; height: 220px; content: ""; opacity: .12; background: var(--sun); clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%); transform: rotate(12deg); }
.reports-sidebar { position: relative; }
.sidebar-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.sidebar-head .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand { position: relative; z-index: 1; font-size: 1.35rem; font-weight: 800; color: #fff; text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ink); background: linear-gradient(145deg, #ffd66b, var(--sun)); border-radius: 11px 11px 11px 3px; font-size: .98rem; font-weight: 800; margin-right: 7px; box-shadow: 0 7px 16px rgba(0,0,0,.18); }
.side-label { position: relative; z-index: 1; color: #a8c3b2; font-size: .68rem; font-weight: 800; letter-spacing: 0; margin: 34px 12px 10px; text-transform: uppercase; }
.nav-link { position: relative; z-index: 1; color: #d2ded5; border-radius: 11px; padding: 11px 12px; margin: 3px 0; font-weight: 700; transition: background .2s ease, transform .2s ease, color .2s ease; }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.14); transform: translateX(3px); }
.nav-link.active { box-shadow: inset 3px 0 0 var(--sun), 0 8px 20px rgba(0,0,0,.12); }
.nav-link i { width: 24px; color: #f7c64c; }
.profile-panel { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.16); margin-top: 30px; padding: 19px 10px 0; }
.role-badge { color: #102117; background: #b9e5ae; font-size: .69rem; font-weight: 800; border-radius: 999px; padding: 4px 9px; }
.main-content { padding: 28px clamp(18px, 3vw, 42px); max-width: 1580px; }
.topbar { min-height: 48px; margin-bottom: 28px; }
.cashier-topbar { position: sticky; top: var(--cashier-sidebar-height, 0px); z-index: 1039; background: var(--canvas); padding-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cashier-role-control { margin-left: auto; }
.cashier-side-label-hidden { display: none; }
.cashier-sidebar-role { position: relative; top: auto; right: auto; z-index: 1030; display: flex; justify-content: flex-end; margin: 16px 0 0; }
.sidebar-head .cashier-sidebar-role { flex: 0 0 auto; margin: 0; }
.cashier-sidebar-role .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cashier-sidebar-role .btn, body:has(#menus) .topbar > .dropdown .btn { padding: .45rem .6rem; font-size: .8rem; line-height: 1.25; }
body:has(#menus) .topbar { min-height: 0; margin-bottom: 0; }
body:has(#menus) .topbar > div:first-child { display: none; }
body:has(#menus) .side-label { display: none; }
.cashier-category-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding: 8px 2px 2px; scrollbar-width: thin; }
.cashier-category-nav .category-filter { flex: 0 0 auto; }
.page-title { font-size: clamp(1.55rem, 2vw, 2.15rem); font-weight: 800; margin: 0; }
.page-subtitle { color: var(--muted); margin: 4px 0 0; }
.btn { border-radius: 10px; font-weight: 800; border-width: 1px; padding: .65rem .9rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--leaf), #0b9a70); border-color: var(--leaf); box-shadow: 0 8px 16px rgba(8,127,91,.18); }
.btn-primary:hover, .btn-primary:focus { background: var(--leaf-dark); border-color: var(--leaf-dark); }
.btn-edit-account { background: var(--leaf); border-color: var(--leaf); color: #fff; box-shadow: 0 6px 14px rgba(8,127,91,.2); }
.btn-edit-account:hover, .btn-edit-account:focus { background: var(--leaf-dark); border-color: var(--leaf-dark); color: #fff; }
.accounts-table { table-layout: fixed; min-width: 820px; }
.accounts-table th:nth-child(1), .accounts-table td:nth-child(1) { width: 21%; }
.accounts-table th:nth-child(2), .accounts-table td:nth-child(2) { width: 29%; }
.accounts-table th:nth-child(3), .accounts-table td:nth-child(3) { width: 18%; }
.accounts-table th:nth-child(4), .accounts-table td:nth-child(4) { width: 14%; }
.accounts-table th:nth-child(5), .accounts-table td:nth-child(5) { width: 18%; }
.accounts-table .account-admin-item { margin-bottom: .45rem; line-height: 1.3; }
.accounts-table .account-admin-item:last-child { margin-bottom: 0; }
.accounts-table .btn-edit-account { padding: .38rem .62rem; border-radius: 8px; font-size: .78rem; line-height: 1.2; white-space: nowrap; }
.btn-warning { background: linear-gradient(135deg, #ffd264, var(--sun)); border-color: var(--sun); color: #332300; }
.btn-coral { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn-light { background: rgba(255,255,255,.8); border-color: var(--line); color: var(--ink); }
.btn-light:hover { background: #fff; border-color: #c7d8cb; color: var(--leaf-dark); }
.report-action-view { color: #fff; background: var(--sky); border-color: var(--sky); box-shadow: 0 6px 12px rgba(77,131,184,.2); }
.report-action-view:hover, .report-action-view:focus { color: #fff; background: #28618f; border-color: #28618f; }
.report-action-print { color: #fff; background: var(--leaf); border-color: var(--leaf); box-shadow: 0 6px 12px rgba(8,127,91,.2); }
.report-action-print:hover, .report-action-print:focus { color: #fff; background: var(--leaf-dark); border-color: var(--leaf-dark); }
.panel { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,252,249,.96)); border: 1px solid rgba(207,222,211,.9); border-radius: var(--radius); box-shadow: 0 14px 32px rgba(29,58,43,.08), inset 0 1px 0 rgba(255,255,255,.92); }
.panel-header { padding: 20px 22px; background: linear-gradient(90deg, rgba(247,251,247,.94), rgba(255,255,255,.7)); border-bottom: 1px solid var(--line); }
.panel-title { font-size: 1rem; font-weight: 800; margin: 0; }
.stat-card { position: relative; overflow: hidden; padding: 22px; height: 100%; border-top: 3px solid var(--leaf); border-left: 1px solid rgba(207,222,211,.9); background: linear-gradient(135deg, #ffffff 0%, #eff8f1 100%); }
.stat-card::after { position: absolute; top: -28px; right: -25px; width: 104px; height: 145px; content: ""; opacity: .8; background: rgba(8,127,91,.08); clip-path: polygon(45% 0, 100% 0, 63% 100%, 0 100%); transform: rotate(16deg); }
.stat-card > * { position: relative; z-index: 1; }
.stat-card.sun { border-top-color: var(--sun); background: linear-gradient(135deg, #fff 0%, #fff8e8 100%); }
.stat-card.sun::after { background: rgba(243,182,63,.16); }
.stat-card.coral { border-top-color: var(--coral); background: linear-gradient(135deg, #fff 0%, #fff1ed 100%); }
.stat-card.coral::after { background: rgba(228,107,79,.12); }
.stat-label { color: var(--muted); font-size: .77rem; font-weight: 800; text-transform: uppercase; }
.stat-value { font-size: 1.75rem; font-weight: 800; margin-top: 7px; }
.dashboard-stat { min-height: 142px; }
.stat-note { color: var(--muted); font-size: .78rem; margin-top: 8px; }
.dashboard-top-menu-panel { overflow: hidden; }
.dashboard-chart-badge { display: inline-flex; align-items: center; gap: 7px; color: #126a40; background: #eaf7ed; border: 1px solid #b9e5ae; border-radius: 999px; padding: 7px 11px; font-size: .72rem; font-weight: 800; }
.dashboard-chart-badge i { color: var(--sun); }
.dashboard-top-menu-chart-wrap { position: relative; height: 230px; padding: 16px 22px 18px; }
.dashboard-top-menu-chart-wrap.is-empty { display: grid; place-items: center; }
.dashboard-chart-empty { display: grid; place-items: center; gap: 8px; color: var(--muted); font-size: .84rem; text-align: center; }
.dashboard-chart-empty i { color: #b6c5b9; font-size: 2rem; }
.dashboard-chart-panel { overflow: hidden; }
.dashboard-chart-wrap { height: 360px; padding: 22px 24px 24px; }
.dashboard-periods .btn { min-width: 88px; }
.category-filter { border: 1px solid var(--line); background: rgba(255,255,255,.8); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: .84rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.category-filter.active, .category-filter:hover { border-color: var(--leaf); background: var(--leaf); color: #fff; box-shadow: 0 7px 14px rgba(8,127,91,.16); transform: translateY(-1px); }
.menu-card { position: relative; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; box-shadow: 0 8px 18px rgba(29,58,43,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.menu-card::after { position: absolute; top: 0; right: 0; width: 42px; height: 4px; content: ""; background: var(--leaf); border-radius: 0 0 0 10px; }
.menu-card:hover { border-color: #b9d9c2; transform: translateY(-5px); box-shadow: 0 16px 28px rgba(29,58,43,.14); }
#menu-grid { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
.menu-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #dfe6de; transition: transform .35s ease; }
.menu-card:hover .menu-image { transform: scale(1.04); }
.menu-card-body { padding: 9px 10px 10px; background: linear-gradient(180deg, #fff, #f8fbf8); }
.menu-name { font-weight: 800; font-size: .78rem; line-height: 1.25; }
.menu-price { display: inline-flex; color: var(--leaf); background: #eaf7ed; border-radius: 999px; padding: 3px 6px; font-weight: 800; font-size: .68rem; margin-top: 6px; }
.order-panel { position: sticky; top: 18px; }
.order-panel { border-top: 4px solid var(--leaf); }
.order-panel .panel-header { padding-top: 16px; }
.menu-picker { position: relative; z-index: 2; }
.menu-autocomplete-results { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 1050; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 28px rgba(24,33,29,.14); }
.menu-autocomplete-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; }
.menu-autocomplete-option:last-child { border-bottom: 0; }
.menu-autocomplete-option:hover, .menu-autocomplete-option.active { background: #eaf7ed; color: var(--leaf-dark); }
.menu-autocomplete-empty { padding: 12px; color: var(--muted); font-size: .88rem; }
.order-list { min-height: 170px; max-height: 43vh; overflow-y: auto; }
.order-item { padding: 13px 0; border-bottom: 1px dashed var(--line); }
.order-discount-label { display: block; margin-top: 8px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.order-discount-input { max-width: 120px; margin-top: 3px; }
.order-discount-editor { margin-top: 1px; }
.order-discount-toggle { display: inline-flex; align-items: center; gap: 1px; margin-top: 2px; padding: 4px 7px; border: 1px solid var(--leaf); border-radius: 7px; background: var(--leaf); color: #fff; font-size: .6rem; line-height: 1; font-weight: 800; }
.order-discount-toggle i { font-size: .64rem; }
.order-discount-toggle:hover { border-color: var(--leaf-dark); background: var(--leaf-dark); color: #fff; }
.quantity-controls { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #f5f9f5; }
.quantity-controls button { width: 29px; height: 28px; border: 0; background: transparent; color: var(--leaf-dark); font-weight: 800; transition: background .2s ease; }
.quantity-controls button:hover { background: #dff2e4; }
.quantity-controls span { min-width: 27px; text-align: center; font-size: .82rem; font-weight: 700; }
.empty-order { padding: 45px 15px; text-align: center; color: var(--muted); }
.empty-order i { display: block; color: #c6cec7; font-size: 2.2rem; margin-bottom: 9px; }
.payment-option { position: relative; isolation: isolate; min-height: 96px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 12px 5px; text-align: center; cursor: pointer; font-size: .75rem; font-weight: 800; background: #fff; box-shadow: 0 7px 15px rgba(29,58,43,.06); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.payment-option::before { position: absolute; top: -22px; right: -18px; z-index: -1; width: 74px; height: 74px; content: ""; opacity: .72; clip-path: polygon(35% 0, 100% 0, 100% 65%, 0 100%); transform: rotate(12deg); }
.payment-option::after { position: absolute; top: 0; right: 16px; left: 16px; height: 3px; content: ""; border-radius: 0 0 8px 8px; }
.payment-option:hover { transform: translateY(-3px); border-color: #9cc9a8; box-shadow: 0 12px 20px rgba(29,58,43,.12); }
.payment-option i { position: relative; z-index: 1; display: grid !important; place-items: center; width: 36px; height: 36px; margin: 0 !important; border-radius: 11px; font-size: 1.05rem; }
.payment-option:has(input[value="cash"])::before { background: rgba(8,127,91,.13); }
.payment-option:has(input[value="cash"])::after { background: var(--leaf); }
.payment-option:has(input[value="cash"]) { background: #dff3e4; border-color: #a9d8b5; color: #126a40; }
.payment-option:has(input[value="cash"]) i { color: var(--leaf-dark); background: #dff3e4; }
.payment-option:has(input[value="qris"])::before { background: rgba(77,131,184,.14); }
.payment-option:has(input[value="qris"])::after { background: var(--sky); }
.payment-option:has(input[value="qris"]) { background: #e3f0fb; border-color: #a9cde5; color: #28618f; }
.payment-option:has(input[value="qris"]) i { color: #28618f; background: #e3f0fb; }
.payment-option:has(input[value="card"])::before { background: rgba(243,182,63,.2); }
.payment-option:has(input[value="card"])::after { background: var(--sun); }
.payment-option:has(input[value="card"]) { background: #fff0c2; border-color: #f0d477; color: #8a5a00; }
.payment-option:has(input[value="card"]) i { color: #8a5a00; background: #fff0c2; }
.payment-option input { display: none; }
.payment-option:has(input:checked) { background: #eaf7ed; border-color: var(--leaf); color: var(--leaf-dark); box-shadow: 0 7px 14px rgba(8,127,91,.12); }
.payment-option:has(input[value="cash"]:checked) { background: #b9e5ae; }
.payment-option:has(input[value="qris"]:checked) { background: #eef7fd; border-color: var(--sky); color: #28618f; box-shadow: 0 7px 14px rgba(77,131,184,.15); }
.payment-option:has(input[value="qris"]:checked) { background: #c8e5f7; }
.payment-option:has(input[value="card"]:checked) { background: #fff8e5; border-color: var(--sun); color: #704700; box-shadow: 0 7px 14px rgba(243,182,63,.18); }
.payment-option:has(input[value="card"]:checked) { background: #ffe29a; }
.payment-change { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #eaf7ed; border: 1px solid #b9e5ae; border-radius: 10px; color: var(--leaf-dark); }
.payment-change strong { font-size: 1.2rem; }
.payment-status-field { min-width: 0; max-width: 100%; overflow: visible; }
.payment-status-control { position: relative; min-width: 0; }
.payment-status-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; padding: .68rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.85); color: var(--ink); font: inherit; text-align: left; }
.payment-status-toggle:focus { outline: 0; border-color: #8bc6a0; box-shadow: 0 0 0 .22rem rgba(8,127,91,.12); }
.payment-status-toggle i { flex: 0 0 auto; color: var(--muted); }
.payment-status-menu { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 1060; display: grid; max-height: 160px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 24px rgba(24,33,29,.16); }
.payment-status-menu[hidden] { display: none; }
.payment-status-menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; text-align: left; }
.payment-status-menu button:hover, .payment-status-menu button[aria-selected="true"] { background: #eaf7ed; color: var(--leaf-dark); }
.payment-status-field > .form-select[hidden] { display: none !important; }
.table { margin: 0; }
.table th { color: var(--muted); font-size: .72rem; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .86rem 1rem; border-bottom-color: var(--line); vertical-align: middle; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: #f5faf5; }
.table td:last-child { white-space: nowrap; }
.debt-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.debt-table { min-width: 1120px; }
.debt-table td { white-space: nowrap; }
.debt-table td:nth-child(5), .debt-table td:nth-child(7) { min-width: 190px; white-space: normal; }
.debt-table td:nth-child(8) { min-width: 170px; }
.category-color-dot { display: inline-block; margin-right: 10px; vertical-align: middle; }
#menus table td:last-child { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
#menus table td:last-child .admin-delete-form { order: 99; }
.table td:last-child > form { display: inline-flex; margin: 0; vertical-align: middle; }
.table td:last-child > .btn, .table td:last-child > form .btn, .table td:last-child > form + .btn { display: inline-flex; margin: 0 0 0 .25rem; vertical-align: middle; }
.admin-delete-form { display: inline-flex; margin: 0 0 0 .25rem; vertical-align: middle; }
.admin-fullwidth-panel { width: 100%; }
body:has(#menus) .nav.nav-pills { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
body:has(#menus) .nav.nav-pills > li { min-width: 0; }
body:has(#menus) .nav.nav-pills > li > button { width: 100%; min-height: 44px; border-width: 1px; }
body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#menus"] { color: #126a40; background: #dff3e4; border-color: #a9d8b5; }
body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#menus"].active, body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#menus"]:hover { color: #fff; background: var(--leaf); border-color: var(--leaf); }
body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#categories"] { color: #8a4b00; background: #fff0c2; border-color: #f0d477; }
body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#categories"].active, body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#categories"]:hover { color: #332300; background: var(--sun); border-color: var(--sun); }
body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#staff"] { color: #18527a; background: #dceefa; border-color: #a9cde5; }
body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#staff"].active, body:has(#menus) .nav.nav-pills > li > button[data-bs-target="#staff"]:hover { color: #fff; background: #3282b8; border-color: #3282b8; }
body:has(#staff) > .app-shell .main-content > .row.g-3.mb-4 > :nth-child(3), body:has(#staff) > .app-shell .main-content > .row.g-3.mb-4 > :nth-child(4) { display: none; }
.status-paid { color: #126a40; background: #dff3e4; font-size: .72rem; font-weight: 800; padding: 5px 9px; border-radius: 999px; }
.status-debt { color: #8a4b00; background: #fff0c2; font-size: .72rem; font-weight: 800; padding: 5px 9px; border-radius: 999px; }
.login-page { position: relative; z-index: 1; min-height: 100vh; margin: 0; background: transparent; }
.login-layout { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); gap: 0; padding: 0; }
.login-side { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(30px, 6vw, 88px) clamp(28px, 7vw, 110px); color: #e4f1e8; background: linear-gradient(145deg, #12271d 0%, #1c553b 68%, #087f5b 100%); border-radius: 0; box-shadow: none; }
.login-side h1 { font-family: inherit; font-weight: 800; letter-spacing: 0; }
.login-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 1.35rem; font-weight: 800; }
.login-logo, .sidebar-logo { width: 40px; height: 40px; object-fit: cover; border-radius: 12px; background: #fff; }
.sidebar-logo { width: 31px; height: 31px; margin-right: 7px; vertical-align: middle; }
.login-welcome { max-width: 650px; padding: 40px 0 7vh; }
.login-welcome h1 { font-family: inherit; font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 800; line-height: 1.05; margin: 12px 0 20px; }
.login-welcome p:last-child { max-width: 480px; color: #c4ddca; font-size: 1.08rem; line-height: 1.7; }
.eyebrow { color: var(--sun); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-card { display: flex; align-items: center; min-height: 100vh; background: rgba(255,255,255,.96); border: 0; border-radius: 0; box-shadow: none; }
.login-card-inner { width: min(100%, 420px); margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 56px); }
.login-account-brand { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 32px; color: var(--ink); font-size: 1.25rem; font-weight: 800; }
.login-account-brand .login-logo, .login-account-brand .brand-mark { flex: 0 0 auto; }
.login-mobile-brand { display: none; margin-bottom: 28px; }
.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; top: 50%; left: 15px; z-index: 1; color: var(--leaf); transform: translateY(-50%); }
.login-input-wrap .form-control { padding-left: 43px; }
.login-card .form-control::placeholder { color: #56645b; opacity: 1; }
.login-settings-logo-preview { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 12px; background: #f2f5f1; overflow: hidden; }
.login-settings-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.login-settings-logo-preview .brand-mark { margin: 0; }
.account-logo-preview img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.account-logo-preview .brand-mark { width: 62px; height: 62px; margin: 0; font-size: 1.5rem; }
.pwa-icon-preview { width: 76px; height: 76px; object-fit: cover; border: 1px solid var(--line); border-radius: 16px; background: #f2f5f1; box-shadow: 0 8px 18px rgba(29,58,43,.1); }
.pwa-info-panel { border-top: 4px solid var(--sun); }
.account-settings-link { display: inline-flex; align-items: center; margin-bottom: 22px; color: var(--leaf-dark); font-weight: 700; text-decoration: none; }
.account-settings-link:hover { color: var(--leaf); }
.form-control, .form-select { border-color: var(--line); border-radius: 10px; padding: .68rem .85rem; background-color: rgba(255,255,255,.85); }
.form-control:focus, .form-select:focus { border-color: #8bc6a0; box-shadow: 0 0 0 .22rem rgba(8,127,91,.12); }
.form-label { color: #3b4d42; font-weight: 700; }
.alert { border-radius: 10px; border: 0; }
.alert.flash-toast {
  --toast-accent: var(--leaf);
  --toast-bg: #eff9f1;
  --toast-line: #b9e5ae;
  --toast-text: #12462c;
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1080;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 14px 17px;
  overflow: hidden;
  color: var(--toast-text) !important;
  background: var(--toast-bg) !important;
  border: 1px solid var(--toast-line) !important;
  border-left: 4px solid var(--toast-accent) !important;
  box-shadow: 0 16px 34px rgba(24, 33, 29, .16);
  animation: flash-toast-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
.alert.flash-toast.alert-warning {
  --toast-accent: #c47a00;
  --toast-bg: #fff8e5;
  --toast-line: #f0d477;
  --toast-text: #704700;
}
.alert.flash-toast.alert-danger {
  --toast-accent: var(--coral);
  --toast-bg: #fff1ed;
  --toast-line: #f2b7a8;
  --toast-text: #7a291a;
}
.alert.flash-toast.alert-info {
  --toast-accent: #3282b8;
  --toast-bg: #eef7fd;
  --toast-line: #a9cde5;
  --toast-text: #18527a;
}
.flash-toast-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--toast-accent);
  border-radius: 50%;
  font-size: 1.05rem;
}
.flash-toast-message { padding-top: 7px; font-weight: 700; line-height: 1.4; }
.flash-toast .btn-close,
.flash-toast-close {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  opacity: .65;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 1.1rem;
  line-height: 1;
}
.flash-toast .btn-close:hover,
.flash-toast-close:hover { opacity: 1; background: rgba(24, 33, 29, .08); }
.flash-toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--toast-accent);
  transform-origin: left;
  animation: flash-toast-progress var(--toast-duration, 5s) linear both;
}
.flash-toast-closing { animation: flash-toast-out .22s ease forwards !important; }
@keyframes flash-toast-in {
  from { opacity: 0; transform: translate3d(24px, -8px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes flash-toast-out {
  to { opacity: 0; transform: translate3d(24px, -8px, 0) scale(.96); }
}
@keyframes flash-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) {
  .alert.flash-toast { top: 12px; right: 16px; width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .alert.flash-toast { animation: none; }
  .flash-toast-progress { animation-duration: 0s; }
}
.modal-content { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 48px rgba(24,33,29,.2); }
.receipt-print { display: none; }
.receipt-header { text-align: center; }
.receipt-brand { font-size: 1.3rem; font-weight: 800; letter-spacing: .12em; }
.receipt-divider { overflow: hidden; white-space: nowrap; }
.receipt-meta { display: flex; justify-content: space-between; gap: 12px; }
.receipt-item + .receipt-item { margin-top: 8px; }
.receipt-total { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #000; font-size: 1.05em; }
.receipt-thanks { margin-top: 22px; text-align: center; }
@media print {
  @page { margin: 8mm; size: auto; }
  body.is-printing > *:not(.print-stage) { display: none !important; }
  body.is-printing { background: #fff; }
  .print-stage { display: block !important; width: 80mm; margin: 0 auto; }
  .print-stage .receipt-print { display: block; width: 100%; color: #000; background: #fff; font-family: "Courier New", monospace; font-size: 11px; line-height: 1.4; }
}
@media (max-width: 1199.98px) {
  .app-shell { align-content: flex-start; }
  .sidebar { flex: 0 0 auto; width: 100%; min-height: auto; padding: 14px 18px; overflow: visible; }
  .sidebar::after { display: none; }
  .reports-sidebar, body:has(#menus) .sidebar { position: sticky; top: 0; height: auto; align-self: auto; z-index: 1040; }
  body:has(#menus) .topbar > .dropdown { position: static; width: auto; margin-left: auto; }
  .side-label, .profile-panel { display: none; }
  .cashier-sidebar-role { margin-top: 14px; }
  .sidebar .nav { flex-direction: row !important; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
  .sidebar .nav-link { margin: 0; padding: 8px 10px; font-size: .85rem; }
  .sidebar .nav-link i { width: auto; margin-right: 3px; }
  .main-content { padding-top: 20px; }
  body:has(#menus) #categories > .row > .col-lg-7 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  body:has(#menus) #categories .panel { width: 100%; }
  body:has(#menus) #categories .panel-header { gap: 12px; }
  body:has(#menus) #categories .panel-header .btn { flex: 0 0 auto; }
  body:has(#menus) #staff > .row > .col-lg-7 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  body:has(#menus) #staff .panel { width: 100%; }
  body:has(#menus) #staff .panel-header { gap: 12px; }
  body:has(#menus) #staff .panel-header .btn { flex: 0 0 auto; }
  .order-panel { position: static; margin-top: 18px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .login-side { justify-content: center; }
  .login-welcome { padding: clamp(34px, 5vh, 60px) 0 0; }
  .main-content { padding: 24px 26px 36px; }
  .dashboard-top-menu-chart-wrap { height: 240px; padding: 16px 24px 18px; }
  .dashboard-chart-wrap { height: 330px; padding: 22px 28px 24px; }
  .panel-header { padding: 18px 22px; }
}
@media (max-width: 767.98px) {
  .login-layout { display: block; padding: 0; }
  .login-side { min-height: 300px; padding: 28px 24px 34px; border-radius: 0; }
  .login-welcome { padding: 35px 0 0; }
  .login-welcome h1 { font-size: clamp(2rem, 8vw, 3.1rem); }
  .login-welcome p:last-child { display: block; font-size: .94rem; line-height: 1.55; }
  .login-card { min-height: calc(100vh - 300px); border-radius: 0; box-shadow: none; }
  .login-card-inner { padding-block: 38px; }
  .login-mobile-brand { display: block; }
}
@media (min-width: 768px) {
  #menu-grid > .col { flex: 0 0 25%; max-width: 25%; }
}
@media (min-width: 1200px) {
  .sidebar { flex: 0 0 100%; width: 100%; min-height: auto; padding: 14px 26px 12px; overflow: visible; box-shadow: 0 10px 24px rgba(19,48,35,.12); }
  .sidebar::after { display: none; }
  .side-label, .profile-panel { display: none; }
  .sidebar .nav { flex-direction: row !important; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
  .sidebar .nav-link { margin: 0; padding: 8px 10px; font-size: .85rem; }
  .sidebar .nav-link i { width: auto; margin-right: 3px; }
  .main-content { padding-top: 20px; }
  body:has(#menus) .topbar > .dropdown { position: static; width: auto; margin-left: auto; }
  #menu-grid > .col { flex: 0 0 20%; max-width: 20%; }
}
@media (max-width: 575.98px) {
  .main-content { padding-inline: 13px; }
  .topbar { margin-bottom: 20px; }
  .topbar > div:last-child { margin-top: 14px; width: 100%; }
  .topbar .btn { flex: 1; }
  #staff .panel-header { padding: 14px 15px; }
  #staff .panel-title { min-width: 0; }
  #categories .panel-header { padding: 14px 15px; }
  #categories .table th, #categories .table td { padding: .72rem .7rem; }
  .admin-delete-form .btn { padding: .5rem .65rem; }
  .menu-image { height: auto; aspect-ratio: 4 / 3; }
  .dashboard-chart-wrap { height: 280px; padding: 16px 12px 18px; }
  .dashboard-top-menu-chart-wrap { height: 230px; padding: 14px 12px 16px; }
  .dashboard-periods { width: 100%; }
  .dashboard-periods .btn { flex: 1; }
  .login-side { min-height: 270px; }
  .login-card { min-height: calc(100vh - 270px); }
  .login-card-inner { padding-inline: 22px; }
}