/* ============================================================
   BREAK POINT BILLIARDS — POS / cashier interface
   Optimized for tablet + desktop.
   ============================================================ */
:root {
  --black:#050605; --deep:#07150F; --pool:#123D2A; --billiard:#1D6B45;
  --gold:#C9A227; --white:#F5F5F5; --muted:#B7B7B7;
  --panel:#0e1a14; --panel2:#0b1510; --line:rgba(255,255,255,0.08);
  --input-bg:rgba(255,255,255,0.04);
  --fh:'Oswald',sans-serif; --fb:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
/* ---- LIGHT MODE ---- */
html[data-theme="light"] {
  --black:#eef1ee; --deep:#e4ece7; --pool:#dbe6e0;
  --panel:#ffffff; --panel2:#f7f9f8; --white:#16211b; --muted:#5c6b63;
  --line:rgba(16,33,27,0.12); --input-bg:#ffffff; --gold:#a9861a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--fb); background:var(--black); color:var(--white); -webkit-font-smoothing:antialiased; transition:background 0.3s var(--ease), color 0.3s var(--ease); }
button { font-family:inherit; cursor:pointer; }
input { font-family:inherit; }

/* ---- Auth ---- */
.pos-auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at top, var(--deep), var(--black)); padding:2rem; }
.pos-auth-card { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:2.4rem; }
.pos-auth-brand { font-family:'Bebas Neue',var(--fh); font-size:1.6rem; letter-spacing:0.1em; margin-bottom:1.4rem; }
.pos-auth-brand .dot { color:var(--gold); }
.pos-auth-brand small { color:var(--muted); font-size:0.8rem; letter-spacing:0.3em; }
.pos-auth-card label { display:block; font-family:var(--fh); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:0.9rem 0 0.4rem; }
.pos-auth-card input { width:100%; background:var(--input-bg); border:1px solid var(--line); color:var(--white); padding:0.8rem; border-radius:8px; font-size:1rem; }
.pos-auth-card input:focus { outline:none; border-color:var(--gold); }
.pos-auth-card button { width:100%; margin-top:1.4rem; background:var(--gold); color:#111; border:none; padding:0.9rem; border-radius:8px; font-family:var(--fh); letter-spacing:0.12em; font-size:1rem; }
.pos-auth-error { background:rgba(255,80,80,0.12); border:1px solid rgba(255,80,80,0.3); color:#ff9b9b; padding:0.7rem; border-radius:8px; font-size:0.9rem; }
.pos-auth-note { background:rgba(201,162,39,0.12); border:1px solid rgba(201,162,39,0.3); color:var(--gold); padding:0.7rem; border-radius:8px; font-size:0.9rem; }
.pos-auth-hint { text-align:center; color:var(--muted); font-size:0.82rem; margin-top:1rem; }

/* ---- Layout ---- */
.pos { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.pos-top { display:flex; align-items:center; gap:1rem; padding:0.8rem 1.4rem; background:var(--panel2); border-bottom:1px solid var(--line); }
.pos-top__brand { font-family:'Bebas Neue',var(--fh); font-size:1.4rem; letter-spacing:0.1em; }
.pos-top__brand .dot { color:var(--gold); }
.pos-top__brand small { color:var(--muted); font-size:0.7rem; letter-spacing:0.3em; }
.pos-top__user { margin-left:auto; color:var(--muted); font-size:0.9rem; }
.pos-theme-toggle { background:var(--input-bg); border:1px solid var(--line); color:var(--white); width:36px; height:36px; border-radius:50%; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.pos-theme-toggle:hover { border-color:var(--gold); color:var(--gold); }
.pos-top__logout { color:#ff9b9b; text-decoration:none; font-size:0.9rem; padding:0.4rem 0.9rem; border:1px solid rgba(255,80,80,0.3); border-radius:6px; }

.pos-grid { flex:1; display:grid; grid-template-columns: 280px 1fr 360px; gap:1px; background:var(--line); overflow:hidden; }
.pos-tables, .pos-products, .pos-order { background:var(--black); overflow-y:auto; padding:1rem; }
.pos-section-title { font-family:var(--fh); font-weight:500; letter-spacing:0.06em; font-size:1.1rem; margin-bottom:0.9rem; }

/* ---- Tables (left) ---- */
.pos-table-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
.pos-table { border:1px solid var(--line); border-radius:10px; padding:0.9rem 0.7rem; text-align:center; background:var(--panel2); transition:all 0.2s; }
.pos-table:hover { border-color:var(--gold); }
.pos-table.selected { border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,162,39,0.4) inset; }
.pos-table__name { font-family:var(--fh); letter-spacing:0.05em; font-size:1rem; }
.pos-table__status { font-size:0.64rem; letter-spacing:0.12em; margin-top:0.25rem; font-weight:600; }
.pos-table__sub { font-size:0.72rem; color:var(--muted); margin-top:0.3rem; }
.pos-table--available .pos-table__status { color:#74d79b; }
.pos-table--occupied { background:rgba(255,80,80,0.08); border-color:rgba(255,80,80,0.3); } .pos-table--occupied .pos-table__status { color:#ff9b9b; }
.pos-table--reserved { background:rgba(201,162,39,0.08); border-color:rgba(201,162,39,0.3); } .pos-table--reserved .pos-table__status { color:var(--gold); }
.pos-table--maintenance { opacity:0.6; } .pos-table--maintenance .pos-table__status { color:var(--muted); }

/* ---- Products (center) ---- */
.pos-cats { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.pos-cats button { background:var(--panel2); border:1px solid var(--line); color:var(--muted); padding:0.5rem 1rem; border-radius:20px; font-size:0.85rem; letter-spacing:0.04em; }
.pos-cats button.active { background:var(--gold); color:#111; border-color:var(--gold); font-weight:600; }
.pos-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0.7rem; }
.pos-product { border:1px solid var(--line); border-radius:10px; padding:0.9rem; background:var(--panel2); text-align:left; transition:all 0.15s; min-height:90px; display:flex; flex-direction:column; justify-content:space-between; }
.pos-product:hover { border-color:var(--gold); transform:translateY(-2px); }
.pos-product:disabled { opacity:0.4; cursor:not-allowed; }
.pos-product__name { font-size:0.9rem; font-weight:500; }
.pos-product__price { color:var(--gold); font-family:var(--fh); font-size:1.1rem; margin-top:0.4rem; }
.pos-product__stock { color:var(--muted); font-size:0.7rem; }
.pos-custom { margin-top:1rem; }

/* ---- Order (right) ---- */
.pos-order { display:flex; flex-direction:column; }
.pos-order__head { flex:0 0 auto; }
.pos-timer { background:linear-gradient(135deg,rgba(29,107,69,0.25),var(--panel2)); border:1px solid rgba(29,107,69,0.4); border-radius:12px; padding:0.9rem; margin-bottom:0.8rem; text-align:center; }
.pos-timer__clock { font-family:'Bebas Neue',var(--fh); font-size:2.6rem; letter-spacing:0.08em; color:var(--gold); line-height:1; }
.pos-timer__meta { font-size:0.74rem; color:var(--muted); margin-top:0.4rem; }
.pos-timer__amt { color:#74d79b; font-weight:600; }
.pos-order__items { flex:1; overflow-y:auto; margin:0.5rem 0; min-height:60px; }
.pos-empty { color:var(--muted); text-align:center; padding:2rem 0; }
.pos-item { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0; border-bottom:1px solid var(--line); }
.pos-item__info { flex:1; }
.pos-item__name { font-size:0.9rem; }
.pos-item__sub { font-size:0.72rem; color:var(--muted); }
.pos-item__total { font-family:var(--fh); color:var(--gold); }
.pos-item__x { background:none; border:none; color:#ff9b9b; font-size:1.1rem; padding:0 0.3rem; }

.pos-order__foot { flex:0 0 auto; border-top:1px solid var(--line); padding-top:0.8rem; }
.pos-session-controls { display:flex; gap:0.5rem; margin-bottom:0.8rem; }
.pos-session-controls .pos-btn { flex:1; }
.pos-totals { margin-bottom:0.8rem; }
.pos-row { display:flex; justify-content:space-between; align-items:center; padding:0.25rem 0; font-size:0.9rem; }
.pos-row--discount input { width:90px; text-align:right; background:var(--input-bg); border:1px solid var(--line); color:var(--white); padding:0.3rem 0.5rem; border-radius:6px; }
.pos-row--total { font-family:var(--fh); font-size:1.4rem; color:var(--gold); border-top:1px solid var(--line); margin-top:0.4rem; padding-top:0.6rem; }
.pos-actions { display:flex; gap:0.5rem; }

/* ---- Buttons ---- */
.pos-btn { border:1px solid transparent; border-radius:8px; padding:0.7rem 1rem; font-family:var(--fh); letter-spacing:0.06em; font-size:0.9rem; transition:all 0.2s; }
.pos-btn--gold { background:var(--gold); color:#111; }
.pos-btn--gold:hover { background:#e0b530; }
.pos-btn--gold:disabled { opacity:0.4; cursor:not-allowed; }
.pos-btn--ghost { background:transparent; color:var(--white); border-color:var(--line); }
.pos-btn--ghost:hover { border-color:var(--gold); color:var(--gold); }
.pos-btn--danger { background:transparent; color:#ff9b9b; border-color:rgba(255,80,80,0.4); }
.pos-btn--danger:hover { background:rgba(255,80,80,0.15); }
.pos-btn--big { flex:1; padding:1rem; font-size:1.05rem; }

/* ---- Modals ---- */
.pos-modal { position:fixed; inset:0; background:rgba(5,6,5,0.85); display:none; align-items:center; justify-content:center; z-index:500; padding:1rem; }
.pos-modal.open { display:flex; }
.pos-modal__box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.8rem; width:100%; max-width:420px; }
.pos-modal__box h3 { font-family:var(--fh); letter-spacing:0.05em; margin-bottom:1rem; }
.pos-modal__box label { display:block; font-family:var(--fh); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:0.8rem 0 0.4rem; }
.pos-modal__box input { width:100%; background:var(--input-bg); border:1px solid var(--line); color:var(--white); padding:0.8rem; border-radius:8px; font-size:1.1rem; }
.pos-modal__box input:focus { outline:none; border-color:var(--gold); }
.pos-modal__actions { display:flex; gap:0.6rem; margin-top:1.2rem; }
.pos-modal__actions .pos-btn { flex:1; }
.pos-pay-total { font-size:1.1rem; margin-bottom:0.5rem; } .pos-pay-total strong { color:var(--gold); font-family:var(--fh); font-size:1.5rem; }
.pos-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
.pos-methods button { background:var(--panel2); border:1px solid var(--line); color:var(--muted); padding:0.7rem 0.3rem; border-radius:8px; font-family:var(--fh); font-size:0.8rem; }
.pos-methods button.active { background:var(--gold); color:#111; border-color:var(--gold); }
.pos-change { margin-top:0.8rem; font-size:1rem; } .pos-change strong { color:#74d79b; font-family:var(--fh); font-size:1.3rem; }
.pos-pay-msg { color:#ff9b9b; font-size:0.85rem; margin-top:0.6rem; min-height:1em; }

/* ---- Toast ---- */
.pos-toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(120%); background:var(--panel); border:1px solid var(--gold); color:var(--white); padding:0.8rem 1.4rem; border-radius:10px; z-index:800; transition:transform 0.4s var(--ease); font-size:0.9rem; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.pos-toast.show { transform:translateX(-50%) translateY(0); }

/* ---- Responsive (tablet / mobile) ---- */
@media (max-width: 1100px) {
  .pos-grid { grid-template-columns: 220px 1fr 320px; }
}
@media (max-width: 860px) {
  .pos { height: auto; min-height: 100vh; overflow: visible; }
  .pos-grid { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: visible; }
  .pos-tables, .pos-products, .pos-order { overflow: visible; }
  .pos-table-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .pos-order { position: sticky; bottom: 0; background: var(--panel2); border-top: 2px solid var(--gold); z-index: 10; }
  .pos-product-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 520px) {
  .pos-top { flex-wrap: wrap; gap: 0.5rem 0.8rem; padding: 0.7rem 1rem; }
  .pos-top__user { font-size: 0.78rem; }
  .pos-table-grid { grid-template-columns: 1fr 1fr; }
  .pos-product-grid { grid-template-columns: 1fr 1fr; }
  .pos-product { min-height: 78px; padding: 0.7rem; }
  .pos-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.3rem; }
  .pos-cats button { white-space: nowrap; }
  .pos-timer__clock { font-size: 2.1rem; }
  .pos-modal__box { max-width: 100%; padding: 1.3rem; }
  .pos-methods { grid-template-columns: 1fr 1fr; }
  .pos-actions { flex-direction: column; }
  /* bigger touch targets */
  .pos-btn { padding: 0.85rem 1rem; }
}