/* Player UI v3 (Bootstrap RTL + Light/Dark)
   Responsive, clean, high-contrast.
*/

:root{
  --player-radius: 1rem;
  --player-shadow: 0 10px 24px rgba(2,6,23,.08);
  --player-shadow-dark: 0 14px 34px rgba(0,0,0,.38);
}

/* Theme tokens (override Bootstrap CSS variables) */
[data-bs-theme="light"]{
  --bs-body-bg: #f4f6fb;
  --bs-body-bg-rgb: 244,246,251;
  --bs-body-color: #0f172a;
  --bs-emphasis-color: #0f172a;
  --bs-secondary-color: rgba(15,23,42,.72);
  --bs-tertiary-bg: #ffffff;
  --bs-secondary-bg: #ffffff;
  --bs-border-color: rgba(15,23,42,.12);
  --bs-link-color: #1d4ed8;
  --bs-link-hover-color: #1e40af;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37,99,235;
}

[data-bs-theme="dark"]{
  /* Deep navy (less gray, more modern) */
  --bs-body-bg: #0b1220;
  --bs-body-bg-rgb: 11,18,32;
  --bs-body-color: #e5e7eb;
  --bs-emphasis-color: #f8fafc;
  --bs-secondary-color: rgba(226,232,240,.78);
  --bs-tertiary-bg: #0f172a;
  --bs-secondary-bg: #111c2f;
  --bs-border-color: rgba(226,232,240,.14);
  --bs-link-color: #93c5fd;
  --bs-link-hover-color: #bfdbfe;
  --bs-primary: #60a5fa;
  --bs-primary-rgb: 96,165,250;
}

html, body{ height: 100%; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Subtle background texture for light */
[data-bs-theme="light"] body{
  background-image:
    radial-gradient(900px 400px at 20% -10%, rgba(37,99,235,.10), rgba(37,99,235,0) 60%),
    radial-gradient(700px 360px at 90% 10%, rgba(14,165,233,.10), rgba(14,165,233,0) 55%);
}

.brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  background: currentColor;
  opacity: .75;
}

/* Surfaces */
.card{
  border-radius: var(--player-radius);
}

[data-bs-theme="light"] .card{
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--player-shadow);
}

[data-bs-theme="dark"] .card{
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--player-shadow-dark);
}

.navbar{
  backdrop-filter: saturate(140%) blur(8px);
}

[data-bs-theme="light"] .navbar.bg-body-tertiary{
  background: rgba(255,255,255,.82) !important;
}

[data-bs-theme="dark"] .navbar.bg-body-tertiary{
  background: rgba(15,23,42,.72) !important;
}

.btn{ border-radius: 999px; }
.form-control, .form-select{ border-radius: 999px; }
.table{ vertical-align: middle; }

/* Small helper for page headers */
.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.page-title{ font-weight: 850; margin: 0; letter-spacing: -0.2px; }
.muted{ opacity: .78; }

/* Avatars */
.avatar{
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(2,6,23,.18);
}

[data-bs-theme="dark"] .avatar{
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* Menu */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px){ .menu-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1200px){ .menu-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.menu-category{
  display:block;
  text-decoration:none;
  border-radius: var(--player-radius);
  overflow:hidden;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

[data-bs-theme="light"] .menu-category{ box-shadow: var(--player-shadow); }
[data-bs-theme="dark"] .menu-category{ box-shadow: var(--player-shadow-dark); }

.menu-category:hover{ transform: translateY(-2px); }

.menu-category .cover{
  width:100%;
  aspect-ratio: 16 / 10;
  position:relative;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(var(--bs-primary-rgb), .22), rgba(var(--bs-primary-rgb), 0) 60%),
    linear-gradient(135deg, rgba(var(--bs-primary-rgb), .12), rgba(0,0,0,0));
}

.menu-category .cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.menu-category .cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(2,6,23,.55), rgba(2,6,23,0) 60%);
  opacity: .35;
}

.menu-category .meta{
  padding: .75rem .85rem .85rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: .75rem;
}

.menu-category .meta .title{
  font-weight: 850;
  color: var(--bs-body-color);
  margin: 0;
  line-height: 1.2;
}

.menu-category .meta .hint{
  font-size: 12px;
  color: var(--bs-secondary-color);
}

.menu-item{
  border: 1px solid var(--bs-border-color);
  border-radius: var(--player-radius);
  background: var(--bs-tertiary-bg);
  padding: .8rem;
}

[data-bs-theme="light"] .menu-item{ box-shadow: var(--player-shadow); }
[data-bs-theme="dark"] .menu-item{ box-shadow: var(--player-shadow-dark); }

.menu-item .thumb{
  width: 76px;
  height: 76px;
  border-radius: .9rem;
  overflow:hidden;
  flex: 0 0 76px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

[data-bs-theme="dark"] .menu-item .thumb{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

.menu-item .thumb img{ width:100%; height:100%; object-fit:cover; }

.price-badge{
  font-weight: 850;
  letter-spacing: -0.2px;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), .12);
  color: rgb(var(--bs-primary-rgb));
}

/* Make table headers readable in both themes */
.table thead th{ font-size: 12px; color: var(--bs-secondary-color); font-weight: 750; }

/* Receipt / print helpers */
@media print{
  .no-print{ display:none !important; }
  .navbar{ display:none !important; }
  main.container{ padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
}