/* ═══════════════════════════════════════════════════════════════
   Ayitek Brand Design System — LotoPro
   Load AFTER Bootstrap so overrides take effect
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Core Brand */
  --ay-primary:        #1E4A7A;
  --ay-secondary:      #F5921E;
  --ay-accent:         #2E6FB0;
  --ay-dark:           #0D2540;

  /* Blue Scale */
  --ay-blue-50:        #E6F1FB;
  --ay-blue-100:       #B5D4F4;
  --ay-blue-200:       #85B7EB;
  --ay-blue-400:       #2E6FB0;
  --ay-blue-600:       #1E4A7A;
  --ay-blue-800:       #0D2B50;
  --ay-blue-900:       #0D2540;

  /* Orange Scale */
  --ay-orange-50:      #FEF0DC;
  --ay-orange-100:     #FAC775;
  --ay-orange-200:     #F5B55A;
  --ay-orange-400:     #F5921E;
  --ay-orange-600:     #D4760A;
  --ay-orange-700:     #C4690A;
  --ay-orange-900:     #7A3D00;

  /* Neutrals */
  --ay-neutral-50:     #F0F4F9;
  --ay-neutral-200:    #CBD5E1;
  --ay-neutral-500:    #6B7FA0;
  --ay-neutral-800:    #2C3E58;

  /* Semantic */
  --ay-success:        #1A6B3C;
  --ay-warning:        #B85C00;
  --ay-danger:         #8B1A1A;
  --ay-info:           #2E6FB0;

  /* ── Bootstrap utility overrides (bg-*, text-*) ── */
  --bs-primary:        #1E4A7A;
  --bs-primary-rgb:    30, 74, 122;
  --bs-info:           #2E6FB0;
  --bs-info-rgb:       46, 111, 176;
  --bs-success:        #1A6B3C;
  --bs-success-rgb:    26, 107, 60;
  --bs-danger:         #8B1A1A;
  --bs-danger-rgb:     139, 26, 26;
  --bs-warning:        #FEF0DC;
  --bs-warning-rgb:    254, 240, 220;
  --bs-dark:           #0D2540;
  --bs-dark-rgb:       13, 37, 64;
  --bs-body-color:     #2C3E58;
  --bs-link-color:     #1E4A7A;
  --bs-link-hover-color: #2E6FB0;
}

/* ── Bootstrap Button Overrides ────────────────────────────── */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-primary);
  --bs-btn-border-color: var(--ay-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ay-accent);
  --bs-btn-hover-border-color: var(--ay-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ay-accent);
  --bs-btn-active-border-color: var(--ay-accent);
  --bs-btn-disabled-bg: var(--ay-primary);
  --bs-btn-disabled-border-color: var(--ay-primary);
  --bs-btn-focus-shadow-rgb: 30, 74, 122;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-accent);
  --bs-btn-border-color: var(--ay-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ay-primary);
  --bs-btn-hover-border-color: var(--ay-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ay-primary);
  --bs-btn-active-border-color: var(--ay-primary);
  --bs-btn-disabled-bg: var(--ay-accent);
  --bs-btn-disabled-border-color: var(--ay-accent);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-success);
  --bs-btn-border-color: var(--ay-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #155830;
  --bs-btn-hover-border-color: #155830;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #155830;
  --bs-btn-active-border-color: #155830;
  --bs-btn-disabled-bg: var(--ay-success);
  --bs-btn-disabled-border-color: var(--ay-success);
  --bs-btn-focus-shadow-rgb: 26, 107, 60;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-danger);
  --bs-btn-border-color: var(--ay-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6e1414;
  --bs-btn-hover-border-color: #6e1414;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6e1414;
  --bs-btn-active-border-color: #6e1414;
  --bs-btn-disabled-bg: var(--ay-danger);
  --bs-btn-disabled-border-color: var(--ay-danger);
  --bs-btn-focus-shadow-rgb: 139, 26, 26;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-warning);
  --bs-btn-border-color: var(--ay-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #944a00;
  --bs-btn-hover-border-color: #944a00;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #944a00;
  --bs-btn-active-border-color: #944a00;
  --bs-btn-disabled-bg: var(--ay-warning);
  --bs-btn-disabled-border-color: var(--ay-warning);
  --bs-btn-focus-shadow-rgb: 184, 92, 0;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-info);
  --bs-btn-border-color: var(--ay-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ay-primary);
  --bs-btn-hover-border-color: var(--ay-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ay-primary);
  --bs-btn-active-border-color: var(--ay-primary);
  --bs-btn-disabled-bg: var(--ay-info);
  --bs-btn-disabled-border-color: var(--ay-info);
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ay-dark);
  --bs-btn-border-color: var(--ay-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ay-primary);
  --bs-btn-hover-border-color: var(--ay-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ay-primary);
  --bs-btn-active-border-color: var(--ay-primary);
  --bs-btn-disabled-bg: var(--ay-dark);
  --bs-btn-disabled-border-color: var(--ay-dark);
}

/* Outline variants */
.btn-outline-primary {
  --bs-btn-color: var(--ay-primary);
  --bs-btn-border-color: var(--ay-primary);
  --bs-btn-hover-bg: var(--ay-primary);
  --bs-btn-hover-border-color: var(--ay-primary);
  --bs-btn-active-bg: var(--ay-primary);
  --bs-btn-active-border-color: var(--ay-primary);
}
.btn-outline-success {
  --bs-btn-color: var(--ay-success);
  --bs-btn-border-color: var(--ay-success);
  --bs-btn-hover-bg: var(--ay-success);
  --bs-btn-hover-border-color: var(--ay-success);
  --bs-btn-active-bg: var(--ay-success);
  --bs-btn-active-border-color: var(--ay-success);
}
.btn-outline-danger {
  --bs-btn-color: var(--ay-danger);
  --bs-btn-border-color: var(--ay-danger);
  --bs-btn-hover-bg: var(--ay-danger);
  --bs-btn-hover-border-color: var(--ay-danger);
  --bs-btn-active-bg: var(--ay-danger);
  --bs-btn-active-border-color: var(--ay-danger);
}
.btn-outline-warning {
  --bs-btn-color: var(--ay-warning);
  --bs-btn-border-color: var(--ay-warning);
  --bs-btn-hover-bg: var(--ay-warning);
  --bs-btn-hover-border-color: var(--ay-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ay-warning);
  --bs-btn-active-border-color: var(--ay-warning);
  --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--ay-info);
  --bs-btn-border-color: var(--ay-info);
  --bs-btn-hover-bg: var(--ay-info);
  --bs-btn-hover-border-color: var(--ay-info);
  --bs-btn-active-bg: var(--ay-info);
  --bs-btn-active-border-color: var(--ay-info);
}
.btn-outline-secondary {
  --bs-btn-color: var(--ay-neutral-800);
  --bs-btn-border-color: var(--ay-neutral-200);
  --bs-btn-hover-bg: var(--ay-neutral-50);
  --bs-btn-hover-border-color: var(--ay-neutral-500);
  --bs-btn-hover-color: var(--ay-dark);
  --bs-btn-active-bg: var(--ay-neutral-200);
  --bs-btn-active-border-color: var(--ay-neutral-500);
  --bs-btn-active-color: var(--ay-dark);
}

/* Semantic Ayitek button utility classes */
.btn-ay-primary   { background-color: var(--ay-primary);      border-color: var(--ay-primary);      color: #fff; }
.btn-ay-primary:hover   { background-color: var(--ay-accent);  border-color: var(--ay-accent);  color: #fff; }
.btn-ay-secondary { background-color: var(--ay-secondary);    border-color: var(--ay-secondary);    color: #fff; }
.btn-ay-secondary:hover { background-color: var(--ay-orange-600); border-color: var(--ay-orange-600); color: #fff; }
.btn-ay-accent    { background-color: var(--ay-accent);       border-color: var(--ay-accent);       color: #fff; }
.btn-ay-accent:hover    { background-color: var(--ay-primary); border-color: var(--ay-primary); color: #fff; }
.btn-ay-danger    { background-color: var(--ay-danger);       border-color: var(--ay-danger);       color: #fff; }
.btn-ay-danger:hover    { background-color: #6e1414;           border-color: #6e1414;           color: #fff; }
.btn-ay-dark      { background-color: var(--ay-dark);         border-color: var(--ay-dark);         color: #fff; }
.btn-ay-dark:hover      { background-color: var(--ay-primary); border-color: var(--ay-primary); color: #fff; }
.btn-ay-neutral   { background-color: var(--ay-neutral-800);  border-color: var(--ay-neutral-800);  color: #fff; }
.btn-ay-neutral:hover   { background-color: var(--ay-primary); border-color: var(--ay-primary); color: #fff; }

/* ── Bootstrap Table Overrides ─────────────────────────────── */
.table-dark {
  --bs-table-bg:           var(--ay-primary);
  --bs-table-border-color: var(--ay-accent);
  --bs-table-striped-bg:   var(--ay-accent);
  --bs-table-hover-bg:     var(--ay-accent);
}

.table-hover {
  --bs-table-hover-bg: var(--ay-blue-50);
}

/* ── Bootstrap Pagination ─────────────────────────────────── */
.page-link { color: var(--ay-primary); }
.page-link:hover { color: var(--ay-accent); border-color: var(--ay-blue-200); }
.page-item.active .page-link {
  background-color: var(--ay-primary);
  border-color: var(--ay-primary);
  color: #fff;
}

/* ── Bootstrap Form Controls ──────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--ay-accent);
  box-shadow: 0 0 0 0.25rem rgba(30, 74, 122, 0.15);
}

/* ── Bootstrap Nav Tabs ────────────────────────────────────── */
.nav-tabs .nav-link          { color: var(--ay-neutral-500); }
.nav-tabs .nav-link:hover    { color: var(--ay-accent); border-color: var(--ay-blue-200) var(--ay-blue-200) transparent; }
.nav-tabs .nav-link.active   { color: var(--ay-primary); border-bottom-color: #fff; }
.nav-tabs .nav-link.active:hover { border-color: var(--ay-neutral-200) var(--ay-neutral-200) #fff; }

/* ── Bootstrap badge bg-warning fix (light orange for status badges) ── */
.badge.bg-warning      { color: var(--ay-dark) !important; }
.text-warning          { color: var(--ay-warning) !important; }

/* bg-purple safety override → Ayitek Blue */
.bg-purple             { background-color: var(--ay-primary) !important; }

/* ── Ayitek Status Badge Pill Classes ──────────────────────── */
.badge-ay-open    { background: #E6F1FB; color: #1E4A7A; border: 0; }
.badge-ay-active  { background: #E6F1FB; color: #1E4A7A; border: 0; }
.badge-ay-locked  { background: #FEF0DC; color: #B85C00; border: 0; }
.badge-ay-warning { background: #FEF0DC; color: #B85C00; border: 0; }
.badge-ay-success { background: #E1F5EE; color: #1A6B3C; border: 0; }
.badge-ay-paid    { background: #E1F5EE; color: #1A6B3C; border: 0; }
.badge-ay-win     { background: #E1F5EE; color: #1A6B3C; border: 0; }
.badge-ay-danger  { background: #FCEBEB; color: #8B1A1A; border: 0; }
.badge-ay-deleted { background: #FCEBEB; color: #8B1A1A; border: 0; }
.badge-ay-pending { background: #E6F1FB; color: #2E6FB0; border: 0; }
.badge-ay-info    { background: #E6F1FB; color: #2E6FB0; border: 0; }
.badge-ay-neutral { background: #F0F4F9; color: #2C3E58; border: 0; }
.badge-ay-live    { background: var(--ay-success); color: #fff; border: 0; }

/* ── Sidebar — Admin & Agent Layouts (#sidebar) ───────────── */
#sidebar { background: var(--ay-dark) !important; }

.sidebar-header { border-bottom-color: rgba(255,255,255,.08) !important; }

.app-name { color: var(--ay-secondary) !important; font-weight: 700; }

.username { color: var(--ay-blue-200) !important; }

.nav-group-label {
  color: var(--ay-blue-200) !important;
  font-size: .65rem !important;
  text-transform: uppercase;
  letter-spacing: .08em !important;
}

#sidebar .nav-link {
  color: var(--ay-neutral-200) !important;
  transition: background .15s, color .15s;
}
#sidebar .nav-link:hover {
  background: rgba(46, 111, 176, 0.15) !important;
  color: #fff !important;
}
#sidebar .nav-link.active {
  background: var(--ay-secondary) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* Logout button inside sidebar */
#sidebar .nav-link.btn.btn-link {
  color: var(--ay-neutral-200) !important;
}

/* Sidebar quick-search input */
#sidebar .form-control,
#sidebar .form-control-sm {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--ay-blue-400) !important;
  color: #fff !important;
}
#sidebar .form-control::placeholder { color: rgba(255,255,255,0.35) !important; }
#sidebar .form-control:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: var(--ay-secondary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Top Bar ─────────────────────────────────────────────── */
.top-bar {
  background: #fff;
  border-bottom: 1px solid var(--ay-neutral-200);
}

/* Server time badge: replace purple with Ayitek Blue */
.server-time,
#serverTime,
.badge.bg-purple {
  background: var(--ay-primary) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .75rem;
  font-weight: 600;
}

/* Sidebar footer server-clock (agent layout) */
.server-time-badge {
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .75rem;
  color: var(--ay-blue-200);
  font-variant-numeric: tabular-nums;
}

/* Sign-out button in sidebar footer */
.sidebar-footer .btn-outline-light {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}
.sidebar-footer .btn-outline-light:hover {
  background: var(--ay-secondary);
  border-color: var(--ay-secondary);
  color: #fff;
}

/* ── Page Header / Titles ───────────────────────────────── */
h1, h2 { color: var(--ay-dark); font-weight: 600; }

main > div > h5.mb-0,
.d-flex > h5.mb-0,
.p-3 > h5 {
  color: var(--ay-dark);
  font-weight: 600;
}

/* Card headers */
.card-header {
  background: var(--ay-neutral-50) !important;
  border-bottom: 1px solid var(--ay-neutral-200) !important;
  color: var(--ay-dark);
}

/* ── KPI Cards (Admin Dashboard) ────────────────────────── */
.kpi-card {
  background: var(--ay-blue-50) !important;
  border: none !important;
  border-left: 4px solid var(--ay-primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.kpi-value { color: var(--ay-primary) !important; }
.kpi-label { color: var(--ay-neutral-500) !important; }
.kpi-icon  { flex-shrink: 0; }

/* ── Draw Status (Dashboard) ────────────────────────────── */
.draw-status-card {
  border-color: var(--ay-neutral-200) !important;
  border-radius: 6px;
}

/* ── Bet Panels — Game Type Headers ─────────────────────── */
/* NOTE: colorClass is applied directly on .bet-panel-header element */
.bet-panel-header.panel-bolet { background: var(--ay-primary)    !important; color: #fff !important; }
.bet-panel-header.panel-p2    { background: var(--ay-accent)     !important; color: #fff !important; }
.bet-panel-header.panel-pale  { background: var(--ay-dark)       !important; color: #fff !important; }
.bet-panel-header.panel-p3    { background: var(--ay-secondary)  !important; color: #fff !important; }
.bet-panel-header.panel-p4    { background: var(--ay-orange-700) !important; color: #fff !important; }

/* Panel top border accent */
.bet-panel:has(.panel-bolet) { border-top: 3px solid var(--ay-primary);    overflow: hidden; }
.bet-panel:has(.panel-p2)    { border-top: 3px solid var(--ay-accent);     overflow: hidden; }
.bet-panel:has(.panel-pale)  { border-top: 3px solid var(--ay-dark);       overflow: hidden; }
.bet-panel:has(.panel-p3)    { border-top: 3px solid var(--ay-secondary);  overflow: hidden; }
.bet-panel:has(.panel-p4)    { border-top: 3px solid var(--ay-orange-700); overflow: hidden; }

/* ── Draw Pills (Ticket Entry) ──────────────────────────── */
.draw-pill            { background: var(--ay-primary) !important; color: #fff !important; }
.draw-dropdown-item:hover   { background: var(--ay-blue-50) !important; }
.draw-dropdown-item.selected { color: var(--ay-primary) !important; font-weight: 600; }

/* ── Grand Total & Net Amount ───────────────────────────── */
#grandTotal {
  color: var(--ay-success) !important;
  border-color: var(--ay-blue-200) !important;
  background: var(--ay-blue-50) !important;
}
#netAmount { color: var(--ay-primary) !important; font-weight: 700; }

/* ── Winning Numbers Cards ──────────────────────────────── */

/* Admin layout: state class ON .draw-card (whole card colored) */
.draw-card.state-florida,
.draw-card.state-georgia,
.draw-card.state-newjersey,
.draw-card.state-newyork,
.draw-card.state-pennsylvania,
.draw-card.state-default {
  background: #fff !important;
  color: var(--ay-dark) !important;
  border-top: 4px solid var(--ay-secondary) !important;
  padding: 0 !important;
  overflow: hidden;
}

/* State-specific border-top color */
.draw-card.state-georgia    { border-top-color: var(--ay-primary)   !important; }
.draw-card.state-newjersey  { border-top-color: var(--ay-accent)    !important; }
.draw-card.state-newyork    { border-top-color: var(--ay-dark)      !important; }

/* State-specific card header backgrounds (admin layout) */
.draw-card.state-florida    > .draw-card-header { background: var(--ay-orange-50)  !important; }
.draw-card.state-georgia    > .draw-card-header { background: var(--ay-blue-50)    !important; }
.draw-card.state-newjersey  > .draw-card-header { background: var(--ay-neutral-50) !important; }
.draw-card.state-newyork    > .draw-card-header { background: var(--ay-blue-100)   !important; }
.draw-card.state-pennsylvania > .draw-card-header { background: var(--ay-neutral-200) !important; }
.draw-card.state-default    > .draw-card-header { background: var(--ay-neutral-50) !important; }

/* Draw card header padding/border when state is on parent */
.draw-card.state-florida > .draw-card-header,
.draw-card.state-georgia > .draw-card-header,
.draw-card.state-newjersey > .draw-card-header,
.draw-card.state-newyork > .draw-card-header,
.draw-card.state-pennsylvania > .draw-card-header,
.draw-card.state-default > .draw-card-header {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--ay-neutral-200);
  color: var(--ay-dark) !important;
  opacity: 1 !important;
}

/* Inner content padding for admin draw-card */
.draw-card.state-florida    > .draw-card-sub,
.draw-card.state-georgia    > .draw-card-sub,
.draw-card.state-newjersey  > .draw-card-sub,
.draw-card.state-newyork    > .draw-card-sub,
.draw-card.state-pennsylvania > .draw-card-sub,
.draw-card.state-default    > .draw-card-sub {
  padding: .3rem 1rem !important;
  color: var(--ay-neutral-500) !important;
  font-size: .8rem;
  opacity: 1 !important;
}

.draw-card.state-florida    > .draw-numbers,
.draw-card.state-georgia    > .draw-numbers,
.draw-card.state-newjersey  > .draw-numbers,
.draw-card.state-newyork    > .draw-numbers,
.draw-card.state-pennsylvania > .draw-numbers,
.draw-card.state-default    > .draw-numbers {
  padding: .5rem 1rem;
  margin-top: 0 !important;
}

.draw-card.state-florida    > .mt-3,
.draw-card.state-georgia    > .mt-3,
.draw-card.state-newjersey  > .mt-3,
.draw-card.state-newyork    > .mt-3,
.draw-card.state-pennsylvania > .mt-3,
.draw-card.state-default    > .mt-3 {
  padding: 0 1rem .75rem;
  margin-top: .5rem !important;
}

/* Draw number rows in admin cards */
.draw-card[class*="state-"] .draw-number-row {
  border-bottom-color: var(--ay-neutral-200) !important;
  color: var(--ay-dark) !important;
}
.draw-card[class*="state-"] .draw-label {
  color: var(--ay-neutral-500) !important;
  opacity: 1 !important;
}

/* Number badges in winning numbers */
.draw-card[class*="state-"] .num-badge,
.num-badge-sm {
  background: var(--ay-dark) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem;
}

/* POS layout: state class ON .draw-card-header */
.draw-card-header.state-florida  { background: var(--ay-orange-50)  !important; color: var(--ay-dark) !important; border-bottom: 1px solid var(--ay-orange-100); }
.draw-card-header.state-georgia  { background: var(--ay-blue-50)    !important; color: var(--ay-dark) !important; border-bottom: 1px solid var(--ay-blue-100); }
.draw-card-header.state-nj       { background: var(--ay-neutral-50) !important; color: var(--ay-dark) !important; border-bottom: 1px solid var(--ay-neutral-200); }
.draw-card-header.state-ny       { background: var(--ay-blue-100)   !important; color: var(--ay-dark) !important; border-bottom: 1px solid var(--ay-blue-200); }
.draw-card-header.state-pa       { background: var(--ay-neutral-200)!important; color: var(--ay-dark) !important; border-bottom: 1px solid var(--ay-neutral-200); }
.draw-card-header.state-default  { background: var(--ay-neutral-50) !important; color: var(--ay-dark) !important; }

/* POS winning numbers card border-top */
.draw-card {
  border-top: 4px solid var(--ay-secondary);
}

/* POS num-badge (winning numbers display) */
.num-badge {
  background: var(--ay-dark) !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.num-badge.num-empty {
  background: #f1f3f5 !important;
  color: var(--ay-neutral-500) !important;
}

/* ── Login Page ──────────────────────────────────────────── */
.login-body {
  background: radial-gradient(ellipse at 25% 60%, var(--ay-primary) 0%, var(--ay-dark) 100%) !important;
}
.login-header { background: var(--ay-dark) !important; }
.login-card   { border-radius: 12px; overflow: hidden; }

/* ── Monetary values ────────────────────────────────────── */
.text-success { color: var(--ay-success) !important; }
.text-danger  { color: var(--ay-danger)  !important; }
.text-primary { color: var(--ay-primary) !important; }
.text-info    { color: var(--ay-info)    !important; }

/* ── POS Shortcut Bar ────────────────────────────────────── */
.shortcut-badge {
  display: inline-block;
  padding: .15rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ay-neutral-800);
  background: var(--ay-neutral-50);
  border: 1px solid var(--ay-neutral-200);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  user-select: none;
}

/* ── Saved Banner (Ticket Entry) ─────────────────────────── */
#savedBanner .text-success,
.saved-banner .text-success { color: var(--ay-success) !important; }

/* ── Payout Page ─────────────────────────────────────────── */
.modal-header.bg-success { background: var(--ay-success) !important; }
.modal-header.bg-danger  { background: var(--ay-danger)  !important; }
.modal-header.bg-warning { background: var(--ay-orange-50) !important; color: var(--ay-dark) !important; }
.modal-header.bg-warning .modal-title { color: var(--ay-dark); }

/* ── Spinner (loading) ───────────────────────────────────── */
.spinner-border { color: var(--ay-primary); }

/* ── Breadcrumb / page-header helper ─────────────────────── */
.page-sub-header {
  background: var(--ay-blue-50);
  border-left: 4px solid var(--ay-primary);
  padding: .4rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0 4px 4px 0;
  font-size: .85rem;
  color: var(--ay-primary);
}

/* ── Responsive: sticky top-bar z-index safety ───────────── */
.top-bar { z-index: 200 !important; }

/* ── POS Search focus (agent sidebar) ───────────────────── */
.pos-search .form-control:focus {
  border-color: var(--ay-secondary) !important;
  box-shadow: none !important;
}


/* ── Draw Countdown Bar ──────────────────────────────────── */
.countdown-bar {
  background: var(--ay-neutral-100, #f3f4f6);
  border-bottom: 1px solid var(--ay-neutral-200, #e5e7eb);
  min-height: 2rem;
}

.countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.countdown-pill .pill-name {
  opacity: .85;
  font-weight: 500;
}

.countdown-pill .pill-time {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
}

.pill-open {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}

.pill-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.pill-urgent {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
  animation: pill-pulse 1s ease-in-out infinite;
}

.pill-locked {
  background: var(--ay-neutral-200, #e5e7eb);
  color: var(--ay-neutral-600, #4b5563);
  border-color: var(--ay-neutral-300, #d1d5db);
  opacity: .7;
}

@keyframes pill-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

/* ── Mobile: smooth iOS scroll on sidebar nav ────────────────── */
.sidebar-nav {
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile: touch target sizes (Apple HIG — min 44px) ──────── */
@media (max-width: 767.98px) {

  .nav-link,
  #sidebar .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .btn:not(.btn-xs):not(.btn-close) {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .btn-sm:not(.btn-close) {
    min-height: 36px;
  }

  /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
  .form-control,
  .form-select {
    font-size: 16px;
    min-height: 44px;
  }

  /* Restore sm variant to smaller but still tappable */
  .form-control-sm,
  .form-select-sm {
    font-size: 14px;
    min-height: 36px;
  }

  /* Logout and nav-link items in offcanvas / sidebar */
  .sidebar-footer .btn {
    min-height: 44px;
  }
}

/* ── Draw Lifecycle Action Buttons ───────────────────────────── */
.btn-lock,
.btn-enter-results,
.btn-reopen,
.btn-disabled {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         10px 14px;
  border-radius:   var(--border-radius-md);
  font-size:       13px;
  font-weight:     500;
  cursor:          pointer;
  line-height:     1.2;
  transition:      background 0.15s, opacity 0.15s;
  white-space:     nowrap;
}

.btn-lock {
  background: var(--ay-secondary);
  color:      white;
  border:     none;
  width:      100%;
}
.btn-lock:hover { opacity: 0.88; }

.btn-enter-results {
  background: var(--ay-primary);
  color:      white;
  border:     none;
}
.btn-enter-results:hover { opacity: 0.88; color: white; }

.btn-reopen {
  background: transparent;
  color:      var(--ay-secondary);
  border:     1px solid var(--ay-secondary);
}
.btn-reopen:hover { background: rgba(0,0,0,0.04); }

.btn-disabled {
  background: var(--color-background-secondary);
  color:      var(--color-text-secondary);
  border:     none;
  cursor:     not-allowed;
  opacity:    0.75;
  width:      100%;
}