/* tHerealSpot theme — CSS custom properties drive light/dark mode */
:root {
  --bs-primary: #dc2626;
  --bs-primary-rgb: 220, 38, 38;
  --mh-bg: #f4f6fb;
  --mh-surface: #ffffff;
  --mh-surface-2: #eef1f8;
  --mh-text: #1c2333;
  --mh-text-muted: #6b7590;
  --mh-border: #e2e7f0;
  --mh-primary: #dc2626;
  --mh-primary-soft: #fee2e2;
  --mh-success: #16a34a;
  --mh-warning: #d97706;
  --mh-danger: #dc2626;
  --mh-radius: 14px;
  --mh-radius-sm: 8px;
  --mh-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 8px 24px rgba(16, 24, 40, .05);
  --mh-sidebar-w: 250px;
  --mh-sidebar-w-collapsed: 68px;
}

html[data-theme="dark"] {
  --mh-bg: #0f1220;
  --mh-surface: #181c2e;
  --mh-surface-2: #212640;
  --mh-text: #e7eaf5;
  --mh-text-muted: #9aa3c0;
  --mh-border: #2a3050;
  --mh-primary: #f87171;
  --mh-primary-soft: #3a1a1a;
  --mh-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --bs-primary: #f87171;
  --bs-primary-rgb: 248, 113, 113;
}
html[data-theme="dark"] .btn-primary { --bs-btn-bg: #ef4444; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #f87171; --bs-btn-hover-border-color: #f87171; --bs-btn-active-bg: #f87171; --bs-btn-active-border-color: #f87171; --bs-btn-disabled-bg: #ef4444; --bs-btn-disabled-border-color: #ef4444; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #f87171; --bs-btn-border-color: #f87171; --bs-btn-hover-bg: #ef4444; --bs-btn-hover-border-color: #ef4444; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #ef4444; --bs-btn-active-border-color: #ef4444; --bs-btn-active-color: #fff; }
html[data-theme="dark"] .text-bg-primary { background-color: #ef4444 !important; color: #fff !important; }
html[data-theme="dark"] .link-primary { color: #f87171 !important; }
html[data-theme="dark"] .link-secondary { color: #60a5fa !important; }
html[data-theme="dark"] a { color: #f87171; }
html[data-theme="dark"] a.text-muted { color: var(--mh-text-muted) !important; }
html[data-theme="dark"] .btn-link { color: #f87171; }
html[data-theme="dark"] .btn-link:hover { color: #fca5a5; }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--mh-text-muted); }
html[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--mh-text); border-color: var(--mh-border); border-bottom-color: var(--mh-surface); background: var(--mh-surface); }
html[data-theme="dark"] .nav-pills .nav-link { color: var(--mh-text-muted); }
html[data-theme="dark"] .nav-pills .nav-link.active { background: var(--mh-primary); color: #fff; }
html[data-theme="dark"] .text-muted { color: var(--mh-text-muted) !important; }
html[data-theme="dark"] .form-label { color: var(--mh-text); }
html[data-theme="dark"] .form-text { color: var(--mh-text-muted); }
html[data-theme="dark"] .card-text, html[data-theme="dark"] .card-title { color: var(--mh-text); }
html[data-theme="dark"] .text-success { color: #4ade80 !important; }
html[data-theme="dark"] .text-danger { color: #f87171 !important; }
html[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
html[data-theme="dark"] .text-info { color: #60a5fa !important; }
html[data-theme="dark"] .text-primary { color: #f87171 !important; }
html[data-theme="dark"] .small, html[data-theme="dark"] small { color: var(--mh-text-muted); }
html[data-theme="dark"] .h5, html[data-theme="dark"] .h6, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--mh-text); }
html[data-theme="dark"] .dropdown-item { color: var(--mh-text); }
html[data-theme="dark"] .dropdown-item:hover { background: #3a1a1a; color: #f87171; }
html[data-theme="dark"] .list-group-item { background: var(--mh-surface); color: var(--mh-text); border-color: var(--mh-border); }
html[data-theme="dark"] .breadcrumb { --bs-breadcrumb-item-active-color: var(--mh-text); }
html[data-theme="dark"] .alert { color: var(--mh-text); }
html[data-theme="dark"] .badge.text-bg-secondary { color: #fff !important; }
html[data-theme="dark"] .btn-info { --bs-btn-bg: #1e3a8a; --bs-btn-border-color: #1e3a8a; --bs-btn-color: #fff; --bs-btn-hover-bg: #1e40af; --bs-btn-hover-color: #fff; }
html[data-theme="dark"] .alert-primary { --bs-alert-bg: #3a1a1a; --bs-alert-border-color: #5a2a2a; --bs-alert-color: #fca5a5; }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { border-color: #f87171; box-shadow: 0 0 0 .2rem rgba(248,113,113,.18); }
html[data-theme="dark"] .mh-search__item mark { background: rgba(248, 113, 113, .25); color: inherit; }
html[data-theme="dark"] .mh-kpi__icon { background: #3a1a1a; color: #f87171; }
html[data-theme="dark"] .btn-success { --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a; --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; --bs-btn-active-bg: #15803d; --bs-btn-active-border-color: #15803d; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: #9aa3c0; --bs-btn-border-color: #2a3050; --bs-btn-hover-bg: #3a1a1a; --bs-btn-hover-border-color: #f87171; --bs-btn-hover-color: #f87171; }
html[data-theme="dark"] .btn-danger { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
html[data-theme="dark"] .btn-warning { --bs-btn-color: #1c2333; }
html[data-theme="dark"] .table { --bs-table-color: var(--mh-text); --bs-table-border-color: var(--mh-border); --bs-table-bg: transparent; }
html[data-theme="dark"] .table > :not(caption) > * > * { color: var(--mh-text); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--mh-border); }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-select:disabled { background: var(--mh-surface-2); color: var(--mh-text-muted); opacity: .7; }
html[data-theme="dark"] .hr, html[data-theme="dark"] hr { border-color: var(--mh-border); }

body {
  background: var(--mh-bg);
  color: var(--mh-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ---- Page loader ---- */
.mh-loader {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--mh-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  transition: opacity .45s ease;
}
.mh-loader.done { opacity: 0; pointer-events: none; }
.mh-loader__logo { font-size: 2rem; font-weight: 800; color: var(--mh-primary); animation: mh-pulse 1.2s ease infinite; }
.mh-loader__bar { width: 180px; height: 4px; border-radius: 2px; background: var(--mh-surface-2); overflow: hidden; }
.mh-loader__bar span { display: block; height: 100%; width: 40%; background: var(--mh-primary); border-radius: 2px; animation: mh-slide 1s ease-in-out infinite; }

/* ---- Layout ---- */
.mh-shell { display: flex; min-height: 100vh; }
.mh-sidebar {
  width: var(--mh-sidebar-w); flex-shrink: 0;
  background: var(--mh-surface); border-right: 1px solid var(--mh-border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width .25s ease; z-index: 1040;
}
.mh-shell.collapsed .mh-sidebar { width: var(--mh-sidebar-w-collapsed); }
.mh-shell.collapsed .mh-sidebar .mh-nav-label,
.mh-shell.collapsed .mh-sidebar .mh-brand-text,
.mh-shell.collapsed .mh-sidebar .mh-nav-heading { display: none; }
.mh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mh-content { padding: 1.25rem; flex: 1; }

.mh-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem; font-weight: 800; font-size: 1.15rem; color: var(--mh-primary); text-decoration: none; }
.mh-nav-heading { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mh-text-muted); padding: .9rem 1rem .3rem; }
.mh-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1rem; margin: .1rem .5rem; border-radius: var(--mh-radius-sm);
  color: var(--mh-text); text-decoration: none; font-size: .92rem;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.mh-nav a:hover { background: var(--mh-primary-soft); color: var(--mh-primary); }
.mh-nav a.active { background: var(--mh-primary-soft); color: var(--mh-primary); font-weight: 600; }
.mh-nav a i { font-size: 1.05rem; width: 22px; text-align: center; }

/* ---- Topbar ---- */
.mh-topbar {
  display: flex; align-items: center; gap: .75rem;
  background: var(--mh-surface); border-bottom: 1px solid var(--mh-border);
  padding: .6rem 1.25rem; position: sticky; top: 0; z-index: 1030;
}
.mh-search { position: relative; flex: 1; max-width: 460px; }
.mh-search input {
  width: 100%; border: 1px solid var(--mh-border); border-radius: 999px;
  background: var(--mh-surface-2); color: var(--mh-text);
  padding: .45rem 1rem .45rem 2.4rem; outline: none; font-size: .92rem;
}
.mh-search input:focus { border-color: var(--mh-primary); }
.mh-search > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--mh-text-muted); }
.mh-search__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius); box-shadow: var(--mh-shadow);
  max-height: 420px; overflow-y: auto; display: none; z-index: 1100;
}
.mh-search__results.open { display: block; }
.mh-search__group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mh-text-muted); padding: .55rem .9rem .2rem; }
.mh-search__item { display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem; color: var(--mh-text); text-decoration: none; }
.mh-search__item:hover, .mh-search__item.active { background: var(--mh-primary-soft); }
.mh-search__item img, .mh-search__thumb { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; background: var(--mh-surface-2); display: flex; align-items: center; justify-content: center; color: var(--mh-text-muted); flex-shrink: 0; }
.mh-search__item mark { background: rgba(220, 38, 38, .22); color: inherit; border-radius: 2px; padding: 0; }

.mh-bell { position: relative; }
.mh-bell .badge { position: absolute; top: -4px; right: -6px; }
.mh-bell .badge.pulse { animation: mh-pulse .9s ease 3; }

/* ---- Cards, KPIs ---- */
.mh-card { background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.mh-card--hover:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(220, 38, 38, .15); }
.mh-kpi { padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.mh-kpi__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--mh-primary-soft); color: var(--mh-primary); flex-shrink: 0; }
.mh-kpi__value { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.mh-kpi__label { color: var(--mh-text-muted); font-size: .82rem; }

/* ---- Tables ---- */
.table { color: var(--mh-text); --bs-table-bg: transparent; --bs-table-color: var(--mh-text); border-color: var(--mh-border); }
.table thead th { color: var(--mh-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border-color: var(--mh-border); }
.table td { border-color: var(--mh-border); vertical-align: middle; }

/* ---- Movie/series poster grid ---- */
.mh-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.mh-poster-card { overflow: hidden; text-decoration: none; color: var(--mh-text); display: block; }
.mh-poster-card .poster { aspect-ratio: 2/3; width: 100%; object-fit: cover; background: var(--mh-surface-2); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--mh-text-muted); }

/* ---- Session cards ---- */
.mh-session { padding: 1rem; position: relative; border-left: 5px solid var(--mh-success); }
.mh-session[data-state="ending"] { border-left-color: var(--mh-warning); }
.mh-session[data-state="expired"] { border-left-color: var(--mh-danger); animation: mh-flash 1s linear infinite; }
.mh-session__timer { font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 800; }
.mh-ring { transform: rotate(-90deg); }
.mh-ring circle { fill: none; stroke-width: 6; }
.mh-ring .bg { stroke: var(--mh-surface-2); }
.mh-ring .fg { stroke: var(--mh-success); transition: stroke-dashoffset 1s linear, stroke .4s; }
.mh-session[data-state="ending"] .fg { stroke: var(--mh-warning); }
.mh-session[data-state="expired"] .fg { stroke: var(--mh-danger); }

/* ---- Toasts ---- */
.mh-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 3500; display: flex; flex-direction: column; gap: .6rem; max-width: 360px; }
.mh-toast {
  background: var(--mh-surface); color: var(--mh-text);
  border: 1px solid var(--mh-border); border-left: 5px solid var(--mh-primary);
  border-radius: var(--mh-radius-sm); box-shadow: var(--mh-shadow);
  padding: .7rem 2.2rem .8rem .9rem; position: relative; overflow: hidden;
  animation: mh-toast-in .3s ease;
}
.mh-toast--success { border-left-color: var(--mh-success); }
.mh-toast--error { border-left-color: var(--mh-danger); }
.mh-toast--warning { border-left-color: var(--mh-warning); }
.mh-toast--sticky { border-width: 2px; }
.mh-toast__close { position: absolute; top: .35rem; right: .5rem; border: 0; background: none; color: var(--mh-text-muted); font-size: 1rem; }
.mh-toast__bar { position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: .35; animation: mh-toast-bar linear forwards; }

/* ---- POS ---- */
.mh-pos-result { cursor: pointer; }
.mh-pos-result:hover { background: var(--mh-primary-soft); }
.mh-cart-badge { font-size: .65rem; text-transform: uppercase; }

/* ---- Buttons: ripple + spinner ---- */
.btn { position: relative; overflow: hidden; }
.btn-primary { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c; --bs-btn-disabled-bg: #dc2626; --bs-btn-disabled-border-color: #dc2626; }
.btn-outline-primary { --bs-btn-color: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-active-bg: #dc2626; --bs-btn-active-border-color: #dc2626; }
.text-bg-primary { background-color: #dc2626 !important; color: #fff !important; }
.link-primary { color: #dc2626 !important; }
.link-secondary { color: #1e3a8a !important; }
a { color: #dc2626; }
a.text-muted { color: var(--mh-text-muted) !important; }
.btn-link { color: #dc2626; }
.btn-link:hover { color: #b91c1c; }
.alert-primary { --bs-alert-bg: #fee2e2; --bs-alert-border-color: #fecaca; --bs-alert-color: #991b1b; }
.mh-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: mh-ripple .5s linear; pointer-events: none; }

/* ---- Forms in dark mode ---- */
.form-control, .form-select { background: var(--mh-surface); color: var(--mh-text); border-color: var(--mh-border); }
.form-control:focus, .form-select:focus { background: var(--mh-surface); color: var(--mh-text); border-color: var(--mh-primary); box-shadow: 0 0 0 .2rem rgba(220,38,38,.15); }
.modal-content { background: var(--mh-surface); color: var(--mh-text); border-radius: var(--mh-radius); }
.modal-backdrop.show { backdrop-filter: blur(3px); }
.dropdown-menu { background: var(--mh-surface); border-color: var(--mh-border); }
.dropdown-item { color: var(--mh-text); }
.dropdown-item:hover { background: var(--mh-surface-2); color: var(--mh-text); }
.pagination { --bs-pagination-bg: var(--mh-surface); --bs-pagination-color: var(--mh-text); --bs-pagination-border-color: var(--mh-border); --bs-pagination-hover-bg: var(--mh-surface-2); --bs-pagination-hover-color: var(--mh-text); --bs-pagination-disabled-bg: var(--mh-surface); --bs-pagination-disabled-border-color: var(--mh-border); }

/* ---- Shortcuts overlay ---- */
.mh-kbd { border: 1px solid var(--mh-border); border-bottom-width: 2px; border-radius: 5px; padding: .05rem .45rem; font-family: monospace; background: var(--mh-surface-2); }

/* ---- Skeletons ---- */
.mh-skeleton { position: relative; overflow: hidden; background: var(--mh-surface-2); border-radius: 6px; min-height: 1em; }
.mh-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: mh-shimmer 1.3s infinite;
}

/* ---- Print (receipt + reports) ---- */
@media print {
  .mh-sidebar, .mh-topbar, .mh-no-print, .mh-toasts { display: none !important; }
  .mh-content { padding: 0; }
  body { background: #fff; color: #000; }
  .mh-card { border: none; box-shadow: none; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .mh-sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .25s ease; }
  .mh-shell.sidebar-open .mh-sidebar { transform: translateX(0); }
  .mh-content { padding: .8rem; }
  .mh-search { max-width: none; }
}