/*
 * Grey Rewards POS — UK Theme Patch v2
 * UK flag colours: Navy #012169 · Red #C8102E · White #FFFFFF
 * Brand gold: #c9a84c
 * SAFE: only overrides visual styling, never breaks layout
 */

/* ── 1. CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --uk-navy:     #012169;
  --uk-red:      #C8102E;
  --uk-white:    #FFFFFF;
  --gr-gold:     #c9a84c;
  --gr-gold-2:   #e8c96a;
  --gr-charcoal: #1a1a2e;
  --gr-mint:     #2dd4aa;
  --gr-slate:    #4a5568;
  --gr-shadow:   0 2px 12px rgba(1,33,105,0.08);
}

/* ── 2. Body font ─────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── 3. Top Navbar — white + gold accent strip ───────────────────────────── */
.tt-top-fixed {
  background: #fff !important;
  box-shadow: 0 1px 8px rgba(1,33,105,0.10) !important;
  border-bottom: 3px solid var(--gr-gold) !important;
}

/* ── 4. Sidebar — UK Navy, gold accents, SAFE overrides ─────────────────── */
#sidebar {
  background: var(--uk-navy) !important;
}

/* Brand area in sidebar */
#sidebar .tt-brand {
  background: rgba(0,0,0,0.18) !important;
  border-bottom: 1px solid rgba(201,168,76,0.25) !important;
  position: relative;
}

/* Brand link text */
#sidebar .tt-brand-link {
  color: #fff !important;
}

/* Toggle chevron */
#sidebar .tt-brand .tt-toggle-sidebar span {
  color: rgba(255,255,255,0.7) !important;
}

/* All sidebar nav link text */
#sidebar .side-nav-link,
#sidebar .side-nav-link span,
#sidebar .tt-nav-link-text {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Sidebar icons */
#sidebar .tt-nav-link-icon,
#sidebar .tt-nav-link-icon svg,
#sidebar .tt-nav-link-icon i {
  color: rgba(255,255,255,0.6) !important;
  stroke: rgba(255,255,255,0.6) !important;
}

/* Sidebar nav item hover */
#sidebar .side-nav-link:hover,
#sidebar .side-nav-item:hover > .side-nav-link {
  background: rgba(201,168,76,0.12) !important;
  color: var(--gr-gold-2) !important;
  border-left: 3px solid var(--gr-gold) !important;
  padding-left: calc(0.875rem - 3px) !important;
  text-decoration: none !important;
}

#sidebar .side-nav-link:hover .tt-nav-link-text,
#sidebar .side-nav-item:hover > .side-nav-link .tt-nav-link-text {
  color: var(--gr-gold-2) !important;
}

/* Active nav item */
#sidebar .tt-menu-item-active > .side-nav-link,
#sidebar .side-nav-link.active {
  background: rgba(201,168,76,0.18) !important;
  border-left: 3px solid var(--gr-gold) !important;
  padding-left: calc(0.875rem - 3px) !important;
}

#sidebar .tt-menu-item-active > .side-nav-link .tt-nav-link-text,
#sidebar .side-nav-link.active .tt-nav-link-text {
  color: var(--gr-gold-2) !important;
  font-weight: 600 !important;
}

/* Sidebar section title (e.g. "MAIN MENU") */
#sidebar .side-nav-title,
#sidebar .tt-nav-title {
  color: var(--gr-gold) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  opacity: 0.85 !important;
}

/* Second level nav (sub-menu items like "Select Branch") */
#sidebar .side-nav-second-level a,
#sidebar .side-nav-third-level a {
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.82rem !important;
  padding: 0.35rem 0.875rem 0.35rem 2.25rem !important;
}

#sidebar .side-nav-second-level a:hover,
#sidebar .side-nav-third-level a:hover {
  color: var(--gr-gold-2) !important;
  background: rgba(201,168,76,0.08) !important;
}

#sidebar .side-nav-second-level li.active > a,
#sidebar .side-nav-second-level li.tt-menu-item-active > a {
  color: var(--gr-gold) !important;
  font-weight: 600 !important;
}

/* Sidebar collapse arrow */
#sidebar .tt-menu-toggle::after {
  color: rgba(255,255,255,0.5) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* Logout button */
.tt-user-side-nav .side-nav-link.btn {
  color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.25) !important;
  background: transparent !important;
}

.tt-user-side-nav .side-nav-link.btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* UK flag badge in sidebar brand area */
#sidebar .tt-brand::after {
  content: '🇬🇧';
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.8;
  line-height: 1;
}

/* ── 5. Primary / Success buttons ────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #c9a84c 0%, #e2c05c 100%) !important;
  border-color: #b8962e !important;
  color: #1a1a2e !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #b8962e 0%, #c9a84c 100%) !important;
  border-color: #a07828 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(201,168,76,0.4) !important;
}

.btn-success {
  background: linear-gradient(135deg, #2dd4aa 0%, #20b98f 100%) !important;
  border-color: #1fa888 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ── 6. Cards — premium UK feel, DO NOT change width/margin ─────────────── */
.card {
  border: 1px solid rgba(1,33,105,0.09) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 6px rgba(1,33,105,0.06) !important;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(1,33,105,0.08) !important;
}

/* ── 7. Tables — SAFE: no width, no overflow, no white-space changes ─────── */
/* Only colour/typography, never layout properties */
.table thead th,
.table thead > tr > th {
  background: #f0f3fa !important;
  color: var(--uk-navy) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid rgba(1,33,105,0.15) !important;
  /* NO white-space, NO padding override — let Bootstrap handle it */
}

.table tbody td,
.table tbody > tr > td {
  border-bottom: 1px solid rgba(1,33,105,0.05) !important;
  vertical-align: middle !important;
  /* NO padding override */
}

.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover {
  background-color: rgba(1,33,105,0.03) !important;
}

/* Reservation table — scrollable wrapper already exists via table-responsive-md */
/* Just ensure thead bg renders correctly inside it */
.table-responsive-md .table thead th,
.card-body.table-responsive-md .table thead th {
  background: #f0f3fa !important;
}

/* ── 8. Order status badges ──────────────────────────────────────────────── */
.badge {
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ── 9. Breadcrumbs ──────────────────────────────────────────────────────── */
.breadcrumb-item a {
  color: var(--uk-navy) !important;
  font-weight: 500 !important;
}

/* ── 10. Forms focus ─────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: rgba(1,33,105,0.4) !important;
  box-shadow: 0 0 0 3px rgba(1,33,105,0.08) !important;
}

/* ── 11. POS FOOD CARDS — Complete redesign ──────────────────────────────── */
/* 
   The existing render-products.blade.php uses:
   .tt-single-pos-item with flex-row (horizontal) layout
   We override to vertical card layout for food menu appearance
*/
.tt-single-pos-item {
  flex-direction: column !important;
  padding: 0 !important;
  border: 1px solid rgba(1,33,105,0.1) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  cursor: pointer !important;
  background: #fff !important;
  height: 100% !important;
}

.tt-single-pos-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(1,33,105,0.13) !important;
}

/* Image takes full width top */
.tt-single-pos-item .img-left {
  width: 100% !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f0f3fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-single-pos-item .img-left img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Content below image */
.tt-single-pos-item .d-flex.flex-column {
  padding: 8px 10px 10px !important;
  flex: 1 !important;
  width: 100% !important;
}

/* Hide barcode on small POS cards */
.tt-single-pos-item .text-muted:first-child {
  font-size: 0.65rem !important;
  opacity: 0.6 !important;
  margin-bottom: 2px !important;
}

/* Product name */
.tt-single-pos-item h3 {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--uk-navy) !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

/* Price */
.tt-single-pos-item .heading-font {
  font-size: 0.875rem !important;
  margin-bottom: 6px !important;
}

.tt-single-pos-item .heading-font .text-primary {
  color: var(--gr-gold) !important;
  font-weight: 700 !important;
}

/* Add button — full width, gold */
.tt-single-pos-item .btn.btn-primary.btn-sm {
  width: 100% !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  padding: 5px 8px !important;
  margin-top: auto !important;
  background: linear-gradient(135deg, #c9a84c, #e2c05c) !important;
  border-color: #b8962e !important;
  color: #1a1a2e !important;
  font-weight: 600 !important;
}

/* POS product grid wrapper */
.tt-pos-products {
  max-height: calc(100vh - 340px) !important;
  overflow-y: auto !important;
  padding-right: 4px;
}

/* posProduct wrapper col */
.posProducts .col-auto.posProduct {
  width: 100% !important;
  display: flex !important;
  padding: 4px !important;
}

.posProducts .col-auto.posProduct .tt-single-pos-item {
  width: 100% !important;
}

/* ── 12. POS Billing / Subtotal section — fix layout ────────────────────── */
.tt-pos-calculation {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tt-pos-cal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 0.875rem !important;
}

.tt-pos-cal p,
.tt-pos-cal label {
  margin: 0 !important;
  white-space: nowrap !important;
  color: var(--gr-slate) !important;
  font-weight: 500 !important;
  min-width: 90px !important;
}

.tt-pos-cal strong {
  color: var(--uk-navy) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Shipping + discount inputs stay compact */
.tt-pos-cal .form-control-sm {
  max-width: 100px !important;
  text-align: right !important;
}

/* Discount row: input + select type side by side */
.tt-pos-cal .input-group {
  flex-wrap: nowrap !important;
  max-width: 160px !important;
}

.tt-pos-cal .input-group .form-control-sm {
  max-width: 80px !important;
}

.tt-pos-cal .input-group .form-select-sm {
  max-width: 80px !important;
  font-size: 0.75rem !important;
}

/* Order Total row */
.tt-pos-cal.mt-2 {
  border-top: 2px solid rgba(1,33,105,0.1) !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
}

.tt-pos-cal.mt-2 strong {
  font-size: 1rem !important;
  color: var(--uk-navy) !important;
}

/* Payment method row */
.tt-pos-payment {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tt-pos-payment .tt-single-pos-payment {
  flex: 1 !important;
  min-width: 60px !important;
}

.tt-pos-payment .tt-payment {
  background: #f0f3fa !important;
  color: var(--uk-navy) !important;
  border: 1px solid rgba(1,33,105,0.15) !important;
  font-size: 0.78rem !important;
  padding: 5px 4px !important;
  border-radius: 6px !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  cursor: pointer !important;
}

.tt-custom-radio:checked + .tt-payment {
  background: rgba(201,168,76,0.15) !important;
  color: #b8962e !important;
  border-color: var(--gr-gold) !important;
  font-weight: 700 !important;
}

/* Complete Order button */
.complete-order-btn {
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.03em !important;
}

/* POS right panel */
.tt-pos-right {
  border: 1px solid rgba(1,33,105,0.1) !important;
  border-radius: 10px !important;
}

/* ── 13. POS top controls (Select Table, waiter etc) ─────────────────────── */
.posDeliveryType,
.posBranchEmployees,
.posCustomers {
  font-size: 0.8rem !important;
  border-color: rgba(1,33,105,0.15) !important;
  color: var(--uk-navy) !important;
}

.posSelectTable {
  font-size: 0.8rem !important;
  background: #f0f3fa !important;
  border-color: rgba(1,33,105,0.15) !important;
  color: var(--uk-navy) !important;
}

/* ── 14. Billing header row — wrap gracefully on smaller screens ──────────── */
.tt-pos-right > form > .row:first-child {
  gap: 4px !important;
}

/* ── 15. Reservation table — ensure responsiveness ───────────────────────── */
/* 
   The table already has .table-responsive-md on the card-body wrapper.
   Our CSS must NOT add overflow or min-width overrides.
   Just visual polish.
*/
.reservationmanager .table,
[data-page="reservations"] .table {
  font-size: 0.8rem !important;
}

/* ── 16. Dashboard Recent Reservations table ─────────────────────────────── */
.recent-reservations-table th,
.card-body .tt-footable thead th {
  font-size: 0.7rem !important;
  padding: 8px 6px !important;
}

.card-body .tt-footable tbody td {
  font-size: 0.8rem !important;
  padding: 8px 6px !important;
}

/* ── 17. Pagination ──────────────────────────────────────────────────────── */
.page-item.active .page-link {
  background: var(--uk-navy) !important;
  border-color: var(--uk-navy) !important;
}

.page-link:hover {
  background: rgba(1,33,105,0.08) !important;
  color: var(--uk-navy) !important;
}

/* ── 18. Select2 dropdowns — consistent with UK theme ───────────────────── */
.select2-container--default .select2-selection--single {
  border-color: rgba(1,33,105,0.2) !important;
  border-radius: 6px !important;
}

.select2-container--default .select2-results__option--highlighted {
  background: var(--uk-navy) !important;
}

/* ── 19. Subscription pricing cards ─────────────────────────────────────── */
.pricing-card.starter {
  border: 2px solid rgba(1,33,105,0.15) !important;
}

.pricing-card.professional {
  border: 2px solid var(--gr-gold) !important;
  box-shadow: 0 8px 28px rgba(201,168,76,0.2) !important;
}

.pricing-card.enterprise {
  background: var(--uk-navy) !important;
  border: 2px solid rgba(201,168,76,0.35) !important;
  color: #fff !important;
}

/* ── 20. Page headers ────────────────────────────────────────────────────── */
.tt-page-title h1,
.tt-page-title h4 {
  color: var(--uk-navy) !important;
  font-weight: 700 !important;
}

/* ── 21. "Receive Bill" button icon — change dollar to currency-neutral ──── */
.btn-success .feather-dollar-sign::before {
  display: none !important;
}

/* ── HEADER BG FIX: override Bootstrap bg-secondary-subtle on header ──────── */
header.tt-top-fixed,
.tt-top-fixed.bg-secondary-subtle {
  background-color: #fff !important;
  background: #fff !important;
}

/* ── SIDEBAR BG FIX: override Bootstrap bg-secondary-subtle on sidebar ────── */
#sidebar.bg-secondary-subtle,
.tt-sidebar.bg-secondary-subtle {
  background-color: var(--uk-navy) !important;
  background: var(--uk-navy) !important;
}

/* ── TABLE thead BG FIX: override Bootstrap bg-secondary-subtle on thead ─── */
.table thead tr.bg-secondary-subtle,
thead tr.bg-secondary-subtle,
.tt-footable thead tr.bg-secondary-subtle {
  background-color: #f0f3fa !important;
  background: #f0f3fa !important;
}

.table thead tr.bg-secondary-subtle th,
thead tr.bg-secondary-subtle th {
  background-color: transparent !important;
  color: #012169 !important;
}