/* TM-POS: tema merah di atas Sneat (struktur diadaptasi dari lexfia-admin.css).
   Warna utama mengikuti AppTheme Flutter: primary #8B1A1A, primaryLight #B22222, aksen oranye. */
:root {
  --pos-red: #c62828;
  --pos-red-dark: #8b1a1a;
  --pos-red-soft: rgba(198, 40, 40, 0.1);
  --pos-orange: #ff8c00;
  --pos-bg: #f4f1f1;
  --pos-card: #fff;
  --pos-border: #ece4e4;
  --pos-text: #2b2b2b;
  --pos-muted: #8a8a8a;
}

a { text-decoration: none; }

/* ── Shell (sidebar + navbar) ─────────────────────────────────────────── */
.content-wrapper { background: var(--pos-bg); }
.pos-app-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.5rem; }
.pos-app-brand img { height: 34px; width: auto; flex-shrink: 0; object-fit: contain; }
.pos-app-brand .brand-text { font-weight: 800; letter-spacing: .5px; color: var(--pos-red-dark); font-size: 1.15rem; line-height: 1.1; }
.pos-app-brand .brand-sub { display: block; font-size: .68rem; font-weight: 600; color: var(--pos-muted); letter-spacing: 0; }
.menu-header-text { font-size: .7rem; letter-spacing: .6px; }
.menu-item .badge { font-size: .65rem; }
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background: linear-gradient(90deg, var(--pos-red) 0%, #e53935 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(198, 40, 40, .3);
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link i { color: #fff !important; }
.bg-menu-theme .menu-inner > .menu-item.active:before { display: none; }
.store-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 99px; background: var(--pos-red-soft); color: var(--pos-red); font-weight: 600; font-size: .8rem; }
.messagelist { margin-bottom: 1rem; }
.messagelist li { border-radius: .6rem; border: none; font-weight: 500; margin-bottom: .5rem; }

/* ── Komponen umum ────────────────────────────────────────────────────── */
.card { border: 1px solid var(--pos-border); box-shadow: 0 2px 6px rgba(139, 26, 26, .04); border-radius: .85rem; }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-head h4 { margin: 0; font-weight: 700; }
.page-head .sub { color: var(--pos-muted); font-size: .85rem; }
.stat-card .card-body { display: flex; gap: .9rem; align-items: center; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.stat-icon.red { background: var(--pos-red-soft); color: var(--pos-red); }
.stat-icon.orange { background: rgba(255, 140, 0, .12); color: var(--pos-orange); }
.stat-icon.green { background: rgba(113, 221, 55, .14); color: #3c9a10; }
.stat-icon.blue { background: rgba(3, 195, 236, .12); color: #0396b8; }
.stat-icon.gray { background: rgba(133, 146, 163, .14); color: #69809a; }
.stat-label { font-size: .78rem; color: var(--pos-muted); margin-bottom: .1rem; }
.stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.table > :not(caption) > * > * { padding: .7rem 1rem; }
.table thead th { font-size: .72rem; letter-spacing: .4px; color: var(--pos-muted); background: #faf7f7; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--pos-muted); }
.empty-state i { font-size: 3rem; opacity: .4; display: block; margin-bottom: .5rem; }
.filter-pills .btn { border-radius: 99px; }
.btn { border-radius: .55rem; }
.form-control, .form-select { border-radius: .55rem; }
.form-control:focus, .form-select:focus { border-color: var(--pos-red); box-shadow: 0 0 0 .15rem rgba(198, 40, 40, .15); }
.errorlist { list-style: none; padding: 0; margin: .25rem 0 0; color: #ff3e1d; font-size: .8rem; }
.helptext, .form-text { font-size: .78rem; color: var(--pos-muted); }
.badge-soft-red { background: var(--pos-red-soft); color: var(--pos-red); }
.badge-soft-orange { background: rgba(255, 140, 0, .14); color: #c56b00; }
.badge-soft-green { background: rgba(113, 221, 55, .16); color: #3c9a10; }
.badge-soft-gray { background: rgba(133, 146, 163, .16); color: #5b6b7d; }
.badge-soft-blue { background: rgba(3, 195, 236, .14); color: #0386a3; }
.text-red { color: var(--pos-red) !important; }
.mini-bar { height: 8px; border-radius: 99px; background: #f1e8e8; overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--pos-red), var(--pos-orange)); border-radius: 99px; }

/* ── Kasir (layar Toko Flutter) ───────────────────────────────────────── */
.kasir-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; align-items: start; }
.kasir-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.kasir-toolbar .input-group { flex: 1 1 260px; }
.cat-scroll { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .8rem; scrollbar-width: thin; }
.cat-scroll .btn { white-space: nowrap; border-radius: 99px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.product-tile { background: var(--pos-card); border: 1px solid var(--pos-border); border-radius: .85rem; padding: .7rem; cursor: pointer; text-align: left; transition: transform .08s, box-shadow .15s, border-color .15s; position: relative; user-select: none; }
.product-tile:hover { border-color: var(--pos-red); box-shadow: 0 6px 16px rgba(198, 40, 40, .12); }
.product-tile:active { transform: scale(.97); }
.product-tile .thumb { height: 78px; border-radius: .6rem; background: linear-gradient(135deg, #fdecec, #fff4e5); display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: var(--pos-red); margin-bottom: .55rem; overflow: hidden; }
.product-tile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-tile .name { font-weight: 600; font-size: .88rem; line-height: 1.25; min-height: 2.2em; color: var(--pos-text); }
.product-tile .price { color: var(--pos-red); font-weight: 700; font-size: .9rem; }
.product-tile .qty-badge { position: absolute; top: .45rem; right: .45rem; background: var(--pos-red); color: #fff; border-radius: 99px; min-width: 24px; height: 24px; font-size: .75rem; font-weight: 700; display: none; place-items: center; padding: 0 .4rem; }
.product-tile.in-cart .qty-badge { display: grid; }
.product-tile.in-cart { border-color: var(--pos-red); background: #fffafa; }
.cart-panel { position: sticky; top: 90px; }
.cart-panel .card-body { display: flex; flex-direction: column; max-height: calc(100vh - 130px); }
.cart-items { overflow-y: auto; flex: 1 1 auto; margin: 0 -1.5rem; padding: 0 1.5rem; min-height: 120px; }
.cart-row { display: flex; gap: .6rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--pos-border); }
.cart-row .info { flex: 1 1 auto; min-width: 0; }
.cart-row .info .n { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-row .info .p { font-size: .78rem; color: var(--pos-muted); }
.qty-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--pos-border); border-radius: 99px; overflow: hidden; }
.qty-ctrl button { border: 0; background: transparent; width: 28px; height: 28px; color: var(--pos-red); font-weight: 700; }
.qty-ctrl button:hover { background: var(--pos-red-soft); }
.qty-ctrl input { width: 44px; border: 0; text-align: center; font-weight: 600; font-size: .85rem; background: transparent; color: inherit; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 0 .6rem; border-top: 2px solid var(--pos-border); margin-top: .4rem; }
.cart-total .amt { font-size: 1.5rem; font-weight: 800; color: var(--pos-red); }
.cart-fab { display: none; }
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.method-opt { border: 2px solid var(--pos-border); border-radius: .8rem; padding: .8rem; text-align: center; cursor: pointer; font-weight: 600; background: var(--pos-card); }
.method-opt i { display: block; font-size: 1.6rem; margin-bottom: .2rem; color: var(--pos-red); }
.method-opt.active { border-color: var(--pos-red); background: var(--pos-red-soft); color: var(--pos-red); }
.quick-cash { display: flex; flex-wrap: wrap; gap: .4rem; }
.quick-cash .btn { border-radius: 99px; }
.qris-box img { max-width: 240px; width: 100%; border-radius: .8rem; border: 1px solid var(--pos-border); }

@media (max-width: 1199.98px) {
  .kasir-wrap { grid-template-columns: 1fr; }
  .cart-panel { position: fixed; inset: auto 0 0 0; top: auto; z-index: 1080; transform: translateY(105%); transition: transform .25s; }
  .cart-panel.open { transform: none; }
  .cart-panel .card { border-radius: 1.2rem 1.2rem 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .15); }
  .cart-panel .card-body { max-height: 80vh; }
  .cart-fab { display: flex; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1070; justify-content: space-between; align-items: center; border-radius: 99px; padding: .85rem 1.3rem; box-shadow: 0 8px 22px rgba(198, 40, 40, .4); }
  .kasir-main { padding-bottom: 5rem; }
}

/* ── Denah meja (TableScreen Flutter) ────────────────────────────────── */
.zone-tabs .nav-link { border-radius: 99px; font-weight: 600; }
.zone-tabs .nav-link.active { background: var(--pos-red) !important; color: #fff !important; }
.floor { position: relative; min-height: 520px; border-radius: 1rem; background-color: #fff; background-image: radial-gradient(#ead9d9 1px, transparent 1px); background-size: 22px 22px; border: 1px solid var(--pos-border); overflow: hidden; }
.floor-table { position: absolute; width: 120px; min-height: 96px; border-radius: 1rem; padding: .6rem; color: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transition: transform .1s; text-align: left; border: 0; }
.floor-table:hover { transform: translateY(-2px); }
.floor-table .t-name { font-weight: 800; font-size: 1rem; }
.floor-table .t-meta { font-size: .72rem; opacity: .9; }
.floor-table.kosong { background: linear-gradient(135deg, #43a047, #2e7d32); }
.floor-table.terisi { background: linear-gradient(135deg, #e53935, #b71c1c); }
.floor-table.reservasi { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.floor.editing .floor-table { cursor: grab; outline: 2px dashed rgba(255, 255, 255, .7); outline-offset: -6px; }
.floor.editing .floor-table.dragging { cursor: grabbing; opacity: .85; z-index: 5; }
.legend-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: .3rem; vertical-align: -1px; }
@media (max-width: 767.98px) {
  .floor { min-height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: .7rem; }
  .floor-table { position: static; width: auto; }
}

/* ── Laundry ─────────────────────────────────────────────────────────── */
.status-flow { display: flex; align-items: center; gap: 0; }
.status-step { flex: 1; text-align: center; position: relative; }
.status-step .dot { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto .35rem; display: grid; place-items: center; font-size: 1.3rem; background: #f1e8e8; border: 3px solid #f1e8e8; position: relative; z-index: 1; }
.status-step.done .dot { background: #fff; border-color: var(--pos-red); }
.status-step.current .dot { background: var(--pos-red); border-color: var(--pos-red); box-shadow: 0 0 0 6px var(--pos-red-soft); }
.status-step:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 50%; width: 100%; height: 3px; background: #f1e8e8; }
.status-step.done:not(.current)::after { background: var(--pos-red); }
.status-step button { background: none; border: 0; padding: 0; color: inherit; font-weight: 600; font-size: .82rem; }
.laundry-card { border-left: 4px solid var(--pos-red); }
.laundry-card.st-masuk { border-left-color: #03c3ec; }
.laundry-card.st-proses { border-left-color: #ff8c00; }
.laundry-card.st-selesai { border-left-color: #43a047; }
.laundry-card.st-diambil { border-left-color: #8592a3; }

/* ── Struk / nota ────────────────────────────────────────────────────── */
.receipt { max-width: 380px; margin: 0 auto; background: #fff; color: #111; font-family: "Courier New", ui-monospace, monospace; font-size: 13px; padding: 1.4rem 1.2rem; border-radius: .6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); position: relative; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 6px 0, transparent 6px, #fff 6.5px) repeat-x; background-size: 12px 10px; }
.receipt .r-center { text-align: center; }
.receipt .r-line { border-top: 1px dashed #999; margin: .6rem 0; }
.receipt .r-row { display: flex; justify-content: space-between; gap: .5rem; }
.receipt .r-total { font-weight: 700; font-size: 15px; }
.success-burst { width: 72px; height: 72px; border-radius: 50%; background: rgba(113, 221, 55, .16); color: #3c9a10; display: grid; place-items: center; font-size: 2.4rem; margin: 0 auto .6rem; }
@media print {
  body * { visibility: hidden !important; }
  .print-area, .print-area * { visibility: visible !important; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none !important; }
  .receipt::after { display: none; }
  @page { margin: 6mm; }
}

/* ── Auth (login/daftar) ─────────────────────────────────────────────── */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; }
.auth-side { background: radial-gradient(circle at 20% 20%, #e53935 0%, #b71c1c 45%, #6d1010 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .06); right: -180px; bottom: -180px; }
.auth-side h2 { font-weight: 800; font-size: 2.1rem; line-height: 1.2; color: #fff; }
.auth-side .feat { display: flex; gap: .7rem; align-items: center; margin-bottom: .8rem; opacity: .95; }
.auth-side .feat i { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 1.2rem; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-form .inner { width: 100%; max-width: 430px; }
.biz-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.biz-options label { border: 2px solid var(--pos-border); border-radius: .9rem; padding: .8rem .4rem; text-align: center; cursor: pointer; font-weight: 600; font-size: .82rem; transition: all .15s; }
.biz-options label i { display: block; font-size: 1.7rem; color: var(--pos-red); margin-bottom: .2rem; }
.biz-options input { display: none; }
.biz-options input:checked + label { border-color: var(--pos-red); background: var(--pos-red-soft); color: var(--pos-red); }
@media (max-width: 991.98px) { .auth-split { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ── DARK MODE (toggle sama dengan lexfia: data-color-mode="dark") ───── */
[data-color-mode="dark"] {
  --pos-bg: #120d0d; --pos-card: #1c1515; --pos-border: #2f2424; --pos-text: #f1e9e9; --pos-muted: #a99999; --pos-red-soft: rgba(239, 83, 80, .16);
}
[data-color-mode="dark"] body { background: var(--pos-bg); color: var(--pos-text); }
[data-color-mode="dark"] .layout-menu, [data-color-mode="dark"] .bg-menu-theme,
[data-color-mode="dark"] .layout-navbar, [data-color-mode="dark"] .bg-navbar-theme { background: #181212 !important; border-color: var(--pos-border) !important; }
[data-color-mode="dark"] .menu-link, [data-color-mode="dark"] .menu-header { color: #d6c8c8 !important; }
[data-color-mode="dark"] .card, [data-color-mode="dark"] .modal-content, [data-color-mode="dark"] .dropdown-menu,
[data-color-mode="dark"] .list-group-item, [data-color-mode="dark"] .product-tile, [data-color-mode="dark"] .method-opt { background: var(--pos-card) !important; color: var(--pos-text); border-color: var(--pos-border) !important; }
[data-color-mode="dark"] .table { color: var(--pos-text); --bs-table-bg: transparent; border-color: var(--pos-border); }
[data-color-mode="dark"] .table thead th { background: #221a1a; color: var(--pos-muted); }
[data-color-mode="dark"] .table > :not(caption) > * > * { border-color: var(--pos-border); color: var(--pos-text); background: transparent; }
[data-color-mode="dark"] .form-control, [data-color-mode="dark"] .form-select, [data-color-mode="dark"] .input-group-text { background: #140f0f !important; color: var(--pos-text) !important; border-color: var(--pos-border) !important; }
[data-color-mode="dark"] h1, [data-color-mode="dark"] h2, [data-color-mode="dark"] h3, [data-color-mode="dark"] h4, [data-color-mode="dark"] h5, [data-color-mode="dark"] h6,
[data-color-mode="dark"] .card-title, [data-color-mode="dark"] .product-tile .name, [data-color-mode="dark"] .dropdown-item { color: var(--pos-text) !important; }
[data-color-mode="dark"] .text-muted { color: var(--pos-muted) !important; }
[data-color-mode="dark"] .floor { background-color: #181212; background-image: radial-gradient(#3a2b2b 1px, transparent 1px); }
[data-color-mode="dark"] .product-tile .thumb { background: linear-gradient(135deg, #2a1b1b, #2a2117); }
[data-color-mode="dark"] .product-tile.in-cart { background: #251919 !important; }
[data-color-mode="dark"] .btn-outline-secondary { color: #cdbcbc; border-color: #4a3a3a; }
[data-color-mode="dark"] .bg-white, [data-color-mode="dark"] .bg-light { background: var(--pos-card) !important; }
[data-color-mode="dark"] .modal-header, [data-color-mode="dark"] .modal-footer, [data-color-mode="dark"] .border-top, [data-color-mode="dark"] .border-bottom { border-color: var(--pos-border) !important; }
[data-color-mode="dark"] .auth-split, [data-color-mode="dark"] .auth-form { background: var(--pos-bg); }
[data-color-mode="dark"] .status-step .dot { background: #2a2020; border-color: #2a2020; }
[data-color-mode="dark"] .mini-bar { background: #2a2020; }

/* Tombol bahasa ID/EN (halaman login/daftar) */
.lang-pills { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--pos-border); background: var(--pos-card); gap: 2px; }
.lang-pills a { padding: .25rem .7rem; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--pos-muted); }
.lang-pills a.on { background: var(--pos-red); color: #fff; }