/* Amvika POS — Lacquer & Gold Leaf
   ພື້ນຢາງຮັກຂຽວເຂັ້ມ · ເສັ້ນຄຳບາງ · Noto Serif Lao */

:root {
  --ink:      #0E1E1A;
  --ink-1:    #142A24;
  --ink-2:    #1B382F;
  --ink-3:    #23473C;
  --line:     #2C5247;
  --line-hi:  #3D6B5C;

  --brass:    #C6A34F;
  --brass-lo: #8A7233;
  --brass-hi: #E8D39A;

  --ivory:    #F3EFE6;
  --ivory-2:  #C3CFC9;
  --ivory-3:  #86A096;

  --clay:     #C4553D;
  --clay-lo:  #4A241C;
  --sage:     #6FA286;
  --sage-lo:  #1E3D2F;

  --r:   10px;
  --r-lg: 16px;

  --f-display: 'Noto Serif Lao', 'Phetsarath OT', 'Saysettha OT', Georgia, serif;
  --f-body:    'Noto Sans Lao', 'Phetsarath OT', 'Saysettha OT', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ຕ້ອງມາກ່ອນທຸກ display rule ຂອງ .bar/.sheet ບໍ່ດັ່ງນັ້ນ hidden ຈະບໍ່ເຮັດວຽກ */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: 1.35; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

/* ປ້າຍຫົວຂໍ້ນ້ອຍ — ຕົວອັກສອນຫ່າງ ແບບປ້າຍທອງເຫຼືອງສະຫຼັກ */
.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  font-family: var(--f-mono);
  font-weight: 500;
}

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---- ພື້ນຜິວ ---- */
.panel {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.hair { height: 1px; background: var(--line); border: 0; margin: 0; }
.hair-brass { height: 1px; background: var(--brass-lo); border: 0; margin: 0; opacity: .6; }

/* ---- ປຸ່ມ ---- */
button { font-family: var(--f-body); font-size: 16px; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line-hi);
  background: var(--ink-2);
  color: var(--ivory);
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--ink-3); border-color: var(--brass-lo); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.btn-gold {
  background: var(--brass);
  border-color: var(--brass-hi);
  color: #1A1407;
  font-weight: 600;
}
.btn-gold:hover { background: var(--brass-hi); border-color: var(--brass-hi); }

.btn-quiet { background: transparent; border-color: var(--line); color: var(--ivory-2); }
.btn-danger { background: var(--clay-lo); border-color: var(--clay); color: #F2C7BC; }
.btn-lg { padding: 18px 24px; font-size: 18px; }
.btn-block { width: 100%; }

/* ---- ຟອມ ---- */
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: 16px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brass); }
input::placeholder { color: var(--ivory-3); }
label { display: block; font-size: 13px; color: var(--ivory-3); margin: 14px 0 6px; }

/* ---- ປ້າຍສະຖານະ ---- */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; border: 1px solid;
}
.tag-new    { color: var(--brass-hi); border-color: var(--brass-lo); background: #33290E; }
.tag-cook   { color: #E8C9A0; border-color: #7A5A2E; background: #3A2A12; }
.tag-ready  { color: #A8E0C0; border-color: #35704F; background: var(--sage-lo); }
.tag-served { color: var(--ivory-3); border-color: var(--line); background: transparent; }

/* ---- ໃບອໍເດີ (signature) ---- */
.ticket {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 18px;
}
/* ຂອບເທິງແບບຮອຍປຸແຍກໃບບິນ */
.ticket::before {
  content: '';
  position: absolute; top: -9px; left: -1px; right: -1px; height: 9px;
  background:
    radial-gradient(circle at 5px 0, transparent 5px, var(--line) 5px, var(--line) 6px, var(--ink-1) 6px) 0 0/10px 9px repeat-x;
}
.ticket-new { border-color: var(--brass-lo); }

@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter .38s cubic-bezier(.2,.7,.3,1); }
  @keyframes enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}

/* ---- ຕາຕະລາງ ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 10px 12px; color: var(--brass);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--f-mono); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
td { padding: 12px; border-bottom: 1px solid var(--ink-2); }
td.r, th.r { text-align: right; }

/* ---- ຂໍ້ຄວາມແຈ້ງເຕືອນ ---- */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink-3); border: 1px solid var(--brass-lo);
  color: var(--ivory); padding: 12px 22px; border-radius: 999px;
  font-size: 14px; z-index: 9000; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#toast.on { opacity: 1; }

/* ---- ໂໝດພັກຈໍ ---- */
#dim {
  position: fixed; inset: 0; z-index: 400;
  background: #000; color: var(--ivory-3);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  transition: opacity .5s;
}
#dim.on { display: flex; }
#dim .dclock { font-family: var(--f-mono); font-size: 46px; color: #2A4A40; }
#dim .dnote  { font-size: 13px; color: #1E3A32; }
#dim .dcount { font-family: var(--f-mono); font-size: 15px; color: #3A6152; }

/* ---- ສະຖານະການເຊື່ອມຕໍ່ ---- */
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ivory-3); }
.conn .d { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.conn.off .d { background: var(--clay); }
.conn.off { color: var(--clay); }

/* ---- ສະວິດ ---- */
.sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ivory-2); cursor: pointer; }
.sw input { width: auto; }

/* ---- ໜ້າຫວ່າງ ---- */
.empty { text-align: center; padding: 56px 20px; color: var(--ivory-3); }
.empty .eyebrow { display: block; margin-bottom: 10px; }

.muted { color: var(--ivory-3); }
.gold  { color: var(--brass); }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }