/* =====================================================
   CUEVA | LIVE TABLES
   APPLE × TESLA WHITE / LIGHT DESIGN
   Common CSS handles sidebar, topbar and main layout
===================================================== */

:root{
  --page-bg:#f6f6f7;
  --surface:#ffffff;
  --surface-soft:#fafafa;
  --surface-hover:#f4f4f5;

  --text-primary:#151515;
  --text-secondary:#6f6f73;
  --text-muted:#9a9a9f;

  --accent:#c89b3c;
  --accent-dark:#9b7426;
  --accent-light:#f7e9c8;
  --accent-soft:rgba(200,155,60,.10);

  --border:#e8e8ea;
  --border-strong:#d8d8dc;

  --success:#29a36a;
  --success-dark:#18784c;
  --success-soft:#eaf8f1;

  --danger:#e34a4a;
  --danger-dark:#b72f2f;
  --danger-soft:#fff0f0;

  --warning:#d99220;
  --warning-dark:#a8650b;
  --warning-soft:#fff6e6;

  --blue:#4b73df;
  --blue-dark:#3157bd;
  --blue-soft:#edf2ff;

  --purple:#7458e8;
  --purple-dark:#5e43c9;
  --purple-soft:#f1edff;

  --dark:#2f3033;
  --dark-soft:#eeeeef;

  --shadow-xs:0 1px 2px rgba(0,0,0,.03);
  --shadow-sm:0 7px 22px rgba(0,0,0,.045);
  --shadow-md:0 15px 40px rgba(0,0,0,.075);
  --shadow-hover:0 20px 48px rgba(0,0,0,.095);
  --shadow-modal:0 30px 90px rgba(0,0,0,.20);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
}

/* =====================================================
   PAGE SPACING
===================================================== */

.stats-grid,
body > .card,
.main > .card{
  margin-left:28px;
  margin-right:28px;
}

/* =====================================================
   STAT GRIDS
===================================================== */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}

/* First stats row */
.stats-grid:first-of-type{
  padding-top:30px;
}

/* =====================================================
   STAT CARDS
===================================================== */

.stats-grid .stat-card{
  position:relative;
  min-height:128px;
  padding:22px;
  overflow:hidden;

  display:flex;
  align-items:center;
  gap:16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(250,250,250,.98)
    );

  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.stats-grid .stat-card::before{
  content:"";
  position:absolute;
  top:-65px;
  right:-65px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--accent-soft);
  pointer-events:none;
}

.stats-grid .stat-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-hover);
}

.stats-grid .stat-card > div:last-child{
  position:relative;
  z-index:1;
  min-width:0;
}

.stats-grid .stat-card h3{
  margin:0 0 7px;
  color:var(--text-primary);
  font-size:31px;
  font-weight:760;
  line-height:1;
  letter-spacing:-1px;
}

.stats-grid .stat-card p{
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:600;
}

/* =====================================================
   STAT ICONS
===================================================== */

.gold-icon{
  position:relative;
  z-index:1;

  width:56px;
  height:56px;
  min-width:56px;

  display:grid;
  place-items:center;

  color:#fff;
  font-size:20px;

  border-radius:17px;
  background:linear-gradient(145deg,#d9ae55,#9b7426);

  box-shadow:
    0 11px 24px rgba(200,155,60,.24),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.gold-icon.green{
  background:linear-gradient(145deg,#57ca8d,#198b57);
  box-shadow:0 11px 24px rgba(41,163,106,.22);
}

.gold-icon.blue{
  background:linear-gradient(145deg,#7192ef,#385fca);
  box-shadow:0 11px 24px rgba(75,115,223,.22);
}

.gold-icon.red{
  background:linear-gradient(145deg,#ef7d7d,#c93535);
  box-shadow:0 11px 24px rgba(227,74,74,.22);
}

.gold-icon.dark{
  background:linear-gradient(145deg,#55565a,#202124);
  box-shadow:0 11px 24px rgba(30,30,32,.20);
}

/* =====================================================
   SHARED CARD
===================================================== */

.card{
  margin-bottom:18px;
  padding:22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(252,252,252,.98)
    );

  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);

  transition:
    box-shadow .22s ease,
    border-color .22s ease;
}

.card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-md);
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.card-head h3{
  margin:0;
  color:var(--text-primary);
  font-size:18px;
  font-weight:730;
  letter-spacing:-.35px;
}

.card-head span{
  display:block;
  margin-top:5px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:500;
}

/* =====================================================
   LIVE TOOLBAR
===================================================== */

.live-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

#liveSearch{
  width:min(100%,420px);
  height:46px;
  padding:0 15px;

  color:var(--text-primary);
  background:var(--surface-soft);

  border:1px solid var(--border);
  border-radius:14px;
  outline:none;

  font:inherit;
  font-size:13px;
  font-weight:500;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#liveSearch::placeholder{
  color:#aaaab0;
}

#liveSearch:hover{
  background:var(--surface);
  border-color:var(--border-strong);
}

#liveSearch:focus{
  background:var(--surface);
  border-color:rgba(200,155,60,.72);
  box-shadow:0 0 0 4px var(--accent-soft);
}

.live-filters{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px;

  background:#eeeeef;
  border-radius:14px;
}

.filter-btn{
  min-width:72px;
  height:36px;
  padding:0 13px;

  color:var(--text-secondary);
  background:transparent;

  border:0;
  border-radius:10px;

  font:inherit;
  font-size:11px;
  font-weight:650;
  cursor:pointer;

  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.filter-btn:hover{
  color:var(--text-primary);
}

.filter-btn.active{
  color:var(--text-primary);
  background:var(--surface);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

/* =====================================================
   LIVE UPDATE INDICATOR
===================================================== */

.live-status-indicator{
  display:inline-flex;
  align-items:center;
  gap:8px;

  min-height:34px;
  padding:7px 11px;

  color:var(--success-dark);
  background:var(--success-soft);
  border-radius:999px;

  font-size:11px;
  font-weight:700;
}

.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);

  box-shadow:0 0 0 4px rgba(41,163,106,.13);
  animation:livePulse 1.8s infinite;
}

@keyframes livePulse{
  0%,100%{
    box-shadow:0 0 0 4px rgba(41,163,106,.13);
  }

  50%{
    box-shadow:0 0 0 8px rgba(41,163,106,.04);
  }
}

/* =====================================================
   GLOBAL BOOKING WARNING
===================================================== */

.global-booking-warning{
  display:none;
  margin-bottom:16px;
  padding:13px 15px;

  color:var(--warning-dark);
  background:var(--warning-soft);

  border:1px solid rgba(217,146,32,.25);
  border-radius:14px;

  font-size:12px;
  font-weight:650;
  line-height:1.5;
}

.global-booking-warning:not(:empty){
  display:block;
}

.global-booking-warning.danger{
  color:var(--danger-dark);
  background:var(--danger-soft);
  border-color:rgba(227,74,74,.22);
}

/* =====================================================
   LIVE TABLE GRID
===================================================== */

.live-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

/*
  Supports common classes that may be generated by JS:
  .live-table-card
  .table-live-card
  .table-card
*/

.live-table-card,
.table-live-card,
.live-grid > .table-card{
  position:relative;
  min-height:280px;
  padding:19px;
  overflow:hidden;

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:21px;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.live-table-card:hover,
.table-live-card:hover,
.live-grid > .table-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-md);
}

/* Active table */
.live-table-card.active,
.table-live-card.active,
.live-grid > .table-card.active{
  border-color:rgba(41,163,106,.32);
  background:
    linear-gradient(
      145deg,
      rgba(234,248,241,.55),
      #ffffff 55%
    );
}

/* Waiting/reserved */
.live-table-card.waiting,
.live-table-card.reserved,
.table-live-card.waiting,
.table-live-card.reserved,
.live-grid > .table-card.waiting{
  border-color:rgba(217,146,32,.30);
  background:
    linear-gradient(
      145deg,
      rgba(255,246,230,.62),
      #ffffff 55%
    );
}

/* Free table */
.live-table-card.free,
.table-live-card.free,
.live-grid > .table-card.free{
  border-color:rgba(75,115,223,.20);
}

/* Paused */
.live-table-card.paused,
.table-live-card.paused{
  border-color:rgba(116,88,232,.28);
  background:
    linear-gradient(
      145deg,
      rgba(241,237,255,.55),
      #ffffff 55%
    );
}

/* Checkout */
.live-table-card.checkout,
.table-live-card.checkout{
  border-color:rgba(227,74,74,.24);
  background:
    linear-gradient(
      145deg,
      rgba(255,240,240,.56),
      #ffffff 55%
    );
}

/* =====================================================
   DYNAMIC TABLE CARD CONTENT
===================================================== */

.table-card-head,
.live-table-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:17px;
}

.table-card-head h3,
.live-table-head h3{
  margin:0 0 5px;
  color:var(--text-primary);
  font-size:18px;
  font-weight:740;
  letter-spacing:-.4px;
}

.table-card-head p,
.live-table-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:11px;
}

.table-status,
.session-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:27px;
  padding:5px 10px;

  border-radius:999px;
  white-space:nowrap;

  font-size:10px;
  font-weight:700;
}

.table-status.active,
.session-status.active{
  color:var(--success-dark);
  background:var(--success-soft);
}

.table-status.free,
.session-status.free{
  color:var(--blue-dark);
  background:var(--blue-soft);
}

.table-status.waiting,
.session-status.waiting{
  color:var(--warning-dark);
  background:var(--warning-soft);
}

.table-status.paused,
.session-status.paused{
  color:var(--purple-dark);
  background:var(--purple-soft);
}

.table-status.checkout,
.session-status.checkout{
  color:var(--danger-dark);
  background:var(--danger-soft);
}

.table-customer,
.live-customer{
  padding:13px;
  margin-bottom:12px;

  background:var(--surface-soft);
  border-radius:14px;
}

.table-customer strong,
.live-customer strong{
  display:block;
  margin-bottom:4px;
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
}

.table-customer span,
.live-customer span{
  color:var(--text-secondary);
  font-size:11px;
}

.table-session-info,
.live-session-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-bottom:14px;
}

.table-session-info > div,
.live-session-info > div{
  padding:10px 11px;

  background:var(--surface-soft);
  border-radius:12px;
}

.table-session-info span,
.live-session-info span{
  display:block;
  margin-bottom:4px;

  color:var(--text-muted);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.table-session-info strong,
.live-session-info strong{
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
}

.live-timer,
.session-timer{
  margin-bottom:14px;
  padding:13px;

  color:var(--text-primary);
  background:var(--surface-soft);
  border-radius:14px;

  text-align:center;
}

.live-timer small,
.session-timer small{
  display:block;
  margin-bottom:5px;
  color:var(--text-muted);
  font-size:10px;
}

.live-timer strong,
.session-timer strong{
  font-size:25px;
  font-weight:760;
  letter-spacing:-.8px;
}

.live-timer.warning strong,
.session-timer.warning strong{
  color:var(--warning-dark);
}

.live-timer.danger strong,
.session-timer.danger strong{
  color:var(--danger);
}

/* =====================================================
   PROGRESS BAR
===================================================== */

.session-progress,
.table-progress{
  height:7px;
  margin-bottom:14px;
  overflow:hidden;

  background:#ededee;
  border-radius:999px;
}

.session-progress span,
.table-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#57ca8d,var(--success-dark));
}

.session-progress.warning span,
.table-progress.warning span{
  background:linear-gradient(90deg,#efc361,var(--warning));
}

.session-progress.danger span,
.table-progress.danger span{
  background:linear-gradient(90deg,#ef7d7d,var(--danger));
}

/* =====================================================
   TABLE CARD ACTIONS
===================================================== */

.table-actions,
.live-card-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.table-actions button,
.live-card-actions button,
.start-session-btn,
.start-booking-btn{
  min-height:39px;
  padding:8px 10px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  color:var(--text-primary);
  background:var(--surface);

  border:1px solid var(--border);
  border-radius:11px;

  font:inherit;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.table-actions button:hover,
.live-card-actions button:hover{
  color:var(--accent-dark);
  background:var(--accent-light);
  border-color:rgba(200,155,60,.35);
  transform:translateY(-1px);
}

.start-session-btn,
.start-booking-btn{
  width:100%;
  color:#fff;
  background:linear-gradient(145deg,#d7ac52,var(--accent-dark));
  border-color:transparent;
  box-shadow:0 8px 18px rgba(200,155,60,.21);
}

.start-session-btn:hover,
.start-booking-btn:hover{
  color:#fff;
  background:linear-gradient(145deg,#e1bb68,#9b7426);
  transform:translateY(-1px);
}

.checkout-card-btn{
  color:#fff !important;
  background:var(--success) !important;
  border-color:transparent !important;
}

/* =====================================================
   EMPTY STATE
===================================================== */

.empty-state{
  grid-column:1 / -1;
  min-height:250px;
  padding:45px 20px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:var(--text-secondary);
  text-align:center;
}

.empty-state i{
  width:64px;
  height:64px;
  margin-bottom:15px;

  display:grid;
  place-items:center;

  color:var(--accent-dark);
  background:var(--accent-light);
  border-radius:19px;

  font-size:25px;
}

.empty-state h3{
  margin:0 0 7px;
  color:var(--text-primary);
  font-size:17px;
  font-weight:720;
}

.empty-state p{
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
}

/* =====================================================
   MODALS
===================================================== */

.modal{
  position:fixed;
  inset:0;
  z-index:9999;

  display:none;
  align-items:center;
  justify-content:center;

  padding:20px;
  overflow-y:auto;

  background:rgba(10,10,12,.44);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.modal.active,
.modal.show,
.modal.open{
  display:flex;
}

.modal-content{
  width:min(100%,470px);
  max-height:90vh;
  padding:23px;

  overflow-y:auto;

  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;

  box-shadow:var(--shadow-modal);

  animation:modalEnter .22s ease;
}

.large-modal{
  width:min(100%,850px);
}

@keyframes modalEnter{
  from{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.modal-content > h3{
  margin:0 0 20px;
  color:var(--text-primary);
  font-size:21px;
  font-weight:740;
  letter-spacing:-.5px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:20px;
}

.modal-head h3{
  margin:0;
  color:var(--text-primary);
  font-size:22px;
  font-weight:740;
  letter-spacing:-.5px;
}

.close-modal{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  color:var(--text-secondary);
  background:var(--surface-soft);

  border:1px solid var(--border);
  border-radius:50%;

  cursor:pointer;
}

.close-modal:hover{
  color:var(--danger);
  background:var(--danger-soft);
}

/* =====================================================
   MODAL FORM ELEMENTS
===================================================== */

.form-group{
  margin-bottom:16px;
}

.form-group label{
  display:block;
  margin-bottom:8px;

  color:var(--text-secondary);
  font-size:12px;
  font-weight:650;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:0 14px;

  color:var(--text-primary);
  background:var(--surface-soft);

  border:1px solid var(--border);
  border-radius:14px;
  outline:none;

  font:inherit;
  font-size:13px;
  font-weight:500;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.form-group input,
.form-group select{
  height:47px;
}

.form-group textarea{
  min-height:88px;
  padding-top:12px;
  padding-bottom:12px;
  resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  background:var(--surface);
  border-color:rgba(200,155,60,.72);
  box-shadow:0 0 0 4px var(--accent-soft);
}

.form-group input[type="checkbox"]{
  width:16px;
  height:16px;
  margin-right:8px;
  accent-color:var(--accent);
}

/* =====================================================
   WALK-IN SESSION BOX
===================================================== */

.session-info-box{
  margin-bottom:18px;
  padding:14px;

  background:var(--accent-light);
  border:1px solid rgba(200,155,60,.22);
  border-radius:15px;
}

.session-info-box strong{
  display:block;
  margin-bottom:4px;

  color:var(--text-primary);
  font-size:15px;
  font-weight:720;
}

.session-info-box span{
  color:var(--accent-dark);
  font-size:12px;
  font-weight:650;
}

/* =====================================================
   MODAL ACTION BUTTONS
===================================================== */

.modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:20px;
}

.modal-actions button{
  min-height:45px;
  padding:9px 14px;

  border:0;
  border-radius:13px;

  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.modal-actions button:first-child{
  color:var(--text-primary);
  background:#ededee;
}

.modal-actions button:last-child{
  color:#fff;
  background:linear-gradient(145deg,#d7ac52,var(--accent-dark));
  box-shadow:0 9px 20px rgba(200,155,60,.22);
}

.modal-actions button:hover{
  transform:translateY(-1px);
}

.modal-actions .success-btn{
  background:var(--success);
  box-shadow:0 9px 20px rgba(41,163,106,.22);
}

/* =====================================================
   SESSION DETAILS MODAL
===================================================== */

.session-details{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);
  gap:17px;
  margin-bottom:17px;
}

.session-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.session-info > div{
  min-height:72px;
  padding:12px;

  background:var(--surface-soft);
  border:1px solid transparent;
  border-radius:14px;
}

.session-info label{
  display:block;
  margin-bottom:6px;

  color:var(--text-muted);
  font-size:9.5px;
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.session-info strong{
  display:block;
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
  overflow-wrap:anywhere;
}

.session-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.session-summary .summary-card{
  min-height:90px;
  padding:14px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:15px;
}

.session-summary .summary-card:last-child{
  background:
    linear-gradient(
      145deg,
      rgba(247,233,200,.65),
      rgba(255,255,255,.98)
    );
  border-color:rgba(200,155,60,.25);
}

.session-summary span{
  margin-bottom:7px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:600;
}

.session-summary h3{
  margin:0;
  color:var(--text-primary);
  font-size:20px;
  font-weight:750;
  letter-spacing:-.5px;
}

/* =====================================================
   NOTES BOX
===================================================== */

.notes-box{
  margin-bottom:17px;
  padding:14px;

  background:var(--surface-soft);
  border-radius:14px;
}

.notes-box strong{
  display:block;
  margin-bottom:6px;
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
}

.notes-box p{
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}

/* =====================================================
   SESSION ACTIONS
===================================================== */

.session-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.session-actions button{
  min-height:45px;
  padding:9px 11px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  color:var(--text-primary);
  background:var(--surface);

  border:1px solid var(--border);
  border-radius:12px;

  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.session-actions button:hover{
  color:var(--accent-dark);
  background:var(--accent-light);
  border-color:rgba(200,155,60,.35);
  transform:translateY(-1px);
}

#whatsappReceiptBtn{
  color:var(--success-dark);
  background:var(--success-soft);
  border-color:rgba(41,163,106,.18);
}

#checkoutBtn{
  color:#fff;
  background:var(--success);
  border-color:transparent;
}

/* =====================================================
   EXTENSION / DISCOUNT PREVIEWS
===================================================== */

.extension-preview,
.discount-preview{
  display:grid;
  gap:9px;
  margin-bottom:18px;
}

.extension-preview{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.discount-preview{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.extension-preview > div,
.discount-preview > div{
  padding:13px;

  background:var(--surface-soft);
  border-radius:13px;
}

.extension-preview span,
.discount-preview span{
  display:block;
  margin-bottom:6px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:600;
}

.extension-preview strong,
.discount-preview strong{
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
}

/* =====================================================
   MOVE WARNING
===================================================== */

.move-warning{
  padding:13px 14px;
  margin-bottom:18px;

  color:var(--warning-dark);
  background:var(--warning-soft);

  border:1px solid rgba(217,146,32,.22);
  border-radius:13px;

  font-size:12px;
  font-weight:600;
  line-height:1.5;
}

/* =====================================================
   CHECKOUT
===================================================== */

.checkout-customer{
  margin-bottom:15px;
  padding:13px;

  color:var(--text-primary);
  background:var(--accent-light);

  border:1px solid rgba(200,155,60,.22);
  border-radius:14px;

  text-align:center;
}

.checkout-customer strong{
  font-size:14px;
  font-weight:720;
}

#checkoutModal .modal-content{
  width:min(720px,calc(100vw - 28px));
}

.checkout-receipt-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:-5px 0 15px;
}

.checkout-receipt-meta span{
  padding:7px 10px;
  color:var(--text-secondary);
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}

.checkout-summary{
  display:grid;
  gap:9px;
  margin-bottom:17px;
}

.checkout-summary > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  padding:12px 13px;

  background:var(--surface-soft);
  border-radius:12px;
}

.checkout-summary span{
  color:var(--text-secondary);
  font-size:12px;
}

.checkout-summary span small{
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
}

.checkout-summary strong{
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
}

.checkout-summary .checkout-total{
  background:
    linear-gradient(
      145deg,
      rgba(247,233,200,.72),
      rgba(255,255,255,.98)
    );

  border:1px solid rgba(200,155,60,.24);
}

.checkout-summary .checkout-total strong{
  font-size:18px;
  color:var(--accent-dark);
}

.checkout-summary .checkout-extra-items{
  display:grid;
  gap:7px;
  padding:10px 13px;
  background:#fff;
  border:1px dashed rgba(200,155,60,.38);
}

.checkout-summary .checkout-extra-items[hidden]{
  display:none;
}

.checkout-extra-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:4px 0;
}

.checkout-extra-line + .checkout-extra-line{
  border-top:1px solid var(--border);
  padding-top:10px;
}

.checkout-extra-line span{
  color:var(--text-primary);
}

.checkout-extra-line b{
  color:var(--accent-dark);
}

.checkout-extra-line em{
  color:var(--success-dark);
  font-size:10px;
  font-style:normal;
  font-weight:750;
}

.checkout-summary .checkout-discount-row strong{
  color:#b56f13;
}

.checkout-summary .checkout-paid-row strong{
  color:var(--success-dark);
}

.checkout-summary .checkout-balance-row{
  background:#fff4e5;
  border:1px solid rgba(217,146,32,.32);
}

.checkout-summary .checkout-balance-row span{
  color:var(--warning-dark);
  font-weight:800;
}

.checkout-summary .checkout-balance-row strong{
  color:#c25b16;
  font-size:20px;
}

@media (max-width:600px){
  .checkout-receipt-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .checkout-receipt-meta span:last-child:nth-child(odd){
    grid-column:1 / -1;
  }

  .checkout-summary > div{
    padding:11px;
  }

  .checkout-extra-line{
    align-items:flex-start;
  }
}

/* =====================================================
   TABLE WRAPPER
===================================================== */

.table-wrapper{
  width:100%;
  overflow-x:auto;
}

.table-wrapper table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.table-wrapper thead th{
  padding:13px;

  color:var(--text-muted);
  background:var(--surface-soft);

  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);

  font-size:10.5px;
  font-weight:700;
  letter-spacing:.35px;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}

.table-wrapper thead th:first-child{
  border-left:1px solid var(--border);
  border-radius:12px 0 0 12px;
}

.table-wrapper thead th:last-child{
  border-right:1px solid var(--border);
  border-radius:0 12px 12px 0;
}

.table-wrapper tbody td{
  padding:14px 13px;

  color:var(--text-secondary);
  border-bottom:1px solid var(--border);

  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}

.table-wrapper tbody tr{
  transition:background .18s ease;
}

.table-wrapper tbody tr:hover{
  background:#fcfcfc;
}

.table-wrapper tbody td:first-child,
.table-wrapper tbody td:nth-child(2){
  color:var(--text-primary);
  font-weight:650;
}

.table-wrapper tbody td[colspan]{
  height:100px;
  color:var(--text-muted);
  text-align:center;
}

.table-wrapper button{
  min-height:31px;
  padding:6px 10px;

  color:var(--accent-dark);
  background:var(--accent-light);

  border:0;
  border-radius:9px;

  font:inherit;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
}

.recent-sessions-scroll{
  max-height:430px;
  overflow:auto;
}

/* =====================================================
   SCROLLBARS
===================================================== */

.table-wrapper::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.recent-sessions-scroll::-webkit-scrollbar{
  width:6px;
  height:6px;
}

.table-wrapper::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.recent-sessions-scroll::-webkit-scrollbar-thumb{
  background:#c8c8cc;
  border-radius:999px;
}

.table-wrapper::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.recent-sessions-scroll::-webkit-scrollbar-track{
  background:transparent;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1250px){
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .live-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:980px){
  .live-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  #liveSearch{
    width:100%;
    max-width:none;
  }

  .live-filters{
    width:max-content;
    max-width:100%;
    overflow-x:auto;
  }

  .live-grid{
    grid-template-columns:1fr;
  }

  .session-details{
    grid-template-columns:1fr;
  }

  .session-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .stats-grid,
  body > .card,
  .main > .card{
    margin-left:20px;
    margin-right:20px;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .stats-grid:first-of-type{
    padding-top:22px;
  }

  .stats-grid .stat-card{
    min-height:112px;
  }

  .live-filters{
    width:100%;
  }

  .filter-btn{
    flex:1;
    min-width:65px;
  }

  .card{
    padding:17px;
    border-radius:20px;
  }

  .card-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .live-status-indicator{
    align-self:flex-start;
  }

  .session-info,
  .session-summary{
    grid-template-columns:1fr;
  }

  .session-actions{
    grid-template-columns:1fr;
  }

  .extension-preview,
  .discount-preview{
    grid-template-columns:1fr;
  }

  .modal-actions{
    grid-template-columns:1fr;
  }

  .modal-content{
    padding:19px;
    border-radius:20px;
  }
}

@media(max-width:430px){
  .stats-grid,
  body > .card,
  .main > .card{
    margin-left:14px;
    margin-right:14px;
  }

  .stats-grid .stat-card{
    padding:18px;
  }

  .filter-btn{
    padding:0 10px;
  }

  .live-table-card,
  .table-live-card,
  .live-grid > .table-card{
    padding:16px;
  }

  .table-session-info,
  .live-session-info{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .stat-card,
  .card,
  .filter-btn,
  .live-table-card,
  .table-live-card,
  .table-actions button,
  .live-card-actions button,
  .session-actions button,
  .modal-content{
    transition:none;
    animation:none;
  }

  .live-dot{
    animation:none;
  }
}

.modal:not(.show) {
    display: none !important;
  }

  .modal.show {
    display: flex;
  }

/* ===== LIVE TRIAL ADDITIONS ===== */
.filter-btn{display:inline-flex;align-items:center;gap:7px}.filter-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#ececef;color:#45454a;font-size:11px;font-weight:800}.filter-btn.active .filter-count{background:#fff;color:#8b651c}.view-items-btn{margin:14px 0 0;border:1px solid var(--border-strong);background:var(--surface-soft);border-radius:12px;padding:11px 14px;font-weight:750;cursor:pointer}.items-list{display:grid;gap:10px}.item-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:14px}.item-row.returned{opacity:.65;background:#f5f5f5}.item-meta{font-size:12px;color:var(--text-secondary)}.return-item-btn{border:1px solid #e3a0a0;background:#fff1f1;color:#b72f2f;border-radius:10px;padding:8px 10px;font-weight:750;cursor:pointer}.items-total-row,.credit-preview{margin-top:14px;padding:14px;border-radius:12px;background:var(--surface-soft);display:flex;justify-content:space-between;gap:12px}.discount-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:850}.discount-none{background:#eaf8f1;color:#18784c}.discount-partial{background:#fff6e6;color:#a8650b}.discount-full{background:#fff0f0;color:#b72f2f}.danger-btn{background:#c93535!important;color:#fff!important}.force-warning-check{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-weight:700}.credit-checkout-panel{margin:10px 0 16px}.credit-preview{display:block;line-height:1.6}

/* ================= OFFLINE CONNECTION ================= */
.cueva-connection-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid #ead7a1;
  border-radius: 14px;
  background: #fff8e6;
  color: #7a5510;
  font-size: 13px;
}
.cueva-connection-banner[hidden] { display: none !important; }
.cueva-connection-banner small { opacity: .82; }
.cueva-connection-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #d69c19;
  box-shadow: 0 0 0 4px rgba(214,156,25,.14);
}
.cueva-connection-banner.is-online {
  border-color: #bfe7ce;
  background: #effbf3;
  color: #196a37;
}
.cueva-connection-banner.is-online .cueva-connection-dot {
  background: #25a65a;
  box-shadow: 0 0 0 4px rgba(37,166,90,.14);
}
.cueva-connection-banner.is-offline {
  border-color: #efc5c5;
  background: #fff2f2;
  color: #9b2c2c;
}
.cueva-connection-banner.is-offline .cueva-connection-dot {
  background: #dc4c4c;
  box-shadow: 0 0 0 4px rgba(220,76,76,.14);
}
.cueva-connection-banner.is-readonly {
  border-color: #efcf86;
  background: #fff8df;
  color: #7a5300;
}
.cueva-connection-banner.is-emergency {
  border-color: #e48383;
  background: #fff0f0;
  color: #8b2020;
  box-shadow: 0 0 0 3px rgba(201,53,53,.08);
}
.cueva-connection-banner.is-syncing {
  border-color: #a9c9ef;
  background: #eef6ff;
  color: #174f8e;
}
.cueva-connection-banner.is-readonly .cueva-connection-dot {
  background: #d69c19;
}
.cueva-connection-banner.is-emergency .cueva-connection-dot {
  background: #c93535;
  animation: cuevaOfflinePulse 1.4s ease-in-out infinite;
}
.cueva-connection-banner.is-syncing .cueva-connection-dot {
  background: #2879cc;
}
.cueva-connection-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.cueva-connection-actions button {
  border: 1px solid currentColor;
  border-radius: 9px;
  background: rgba(255,255,255,.82);
  color: inherit;
  padding: 7px 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.cueva-connection-actions button:hover {
  background: #fff;
}
@keyframes cuevaOfflinePulse {
  50% { transform: scale(1.18); opacity: .72; }
}
@media(max-width:640px) {
  .cueva-connection-banner {
    align-items: flex-start;
  }
  .cueva-connection-actions {
    width: 100%;
    margin-left: 18px;
  }
}

/* The app shell injects page HTML inside a scrollable content area.
   Portalled dialogs must always stay above every other dialog and
   remain usable at the current viewport position. */
body > #liveMessageModal.show {
  z-index: 2147483646 !important;
}

@media (max-width: 760px) {
  .live-tables-grid,
  .live-grid,
  #liveTablesGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  .live-table-card,
  .table-live-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .table-actions,
  .live-actions,
  .live-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body > .modal.show,
  body > .history-modal.show {
    align-items: center !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  body > .modal.show > .modal-content,
  body > .history-modal.show > .history-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
}
/* Live cards are operational controls: make the whole card clearly usable. */
.live-table-card[data-action="viewTableBookings"] {
  cursor: pointer;
}

.live-table-card[data-action="viewTableBookings"]:focus-visible {
  outline: 3px solid #d9aa20;
  outline-offset: 3px;
}

.live-upcoming-count {
  display: block;
  margin-top: 5px;
  color: #856314;
  font-weight: 700;
}

.cueva-live-picker {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .72);
}

.cueva-live-picker__card {
  width: min(680px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.cueva-live-picker__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.cueva-live-picker__head button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  font-size: 24px;
  cursor: pointer;
}

.cueva-live-picker__list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.cueva-live-picker__booking {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  width: 100%;
  padding: 15px;
  border: 1px solid #ead59d;
  border-radius: 14px;
  background: #fffaf0;
  text-align: left;
  cursor: pointer;
}

.cueva-live-picker__booking small {
  grid-column: 1 / -1;
}

.cueva-live-picker__actions {
  display: flex;
  justify-content: flex-end;
}

.cueva-live-picker__actions button {
  padding: 11px 20px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
}

@media (max-width: 700px) {
  #liveTablesGrid,
  .live-tables-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .live-table-card {
    width: 100%;
    min-width: 0;
  }
}