/* ================================================================
   MoviesMythri — Theme CSS
   Generated by WebMantra | Preset: dark-pro
   All values from CSS variables — change theme from admin panel.
   ================================================================ */

:root {
  /* Color Palette */
  --color-primary:        #f4c430;
  --color-secondary:      #7a1f2b;
  --color-accent:         #ffde7a;
  --color-bg:             #0a0810;
  --color-surface:        #16121d;
  --color-text-primary:   #f2ecf5;
  --color-text-secondary: #a79db0;

  /* Typography */
  --font-heading:   'Barlow Condensed', system-ui, sans-serif;
  --font-body:      'Barlow', system-ui, sans-serif;
  --font-size-base: 16px;

  /* Layout */
  --layout-width:   1200px;
  --border-radius:  12px;

  /* Card */
  --card-shadow: 0 4px 16px rgba(0,0,0,.10);
  --card-border: 1px solid rgba(0,0,0,.10);
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  line-height: 1.25;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-secondary); }

/* ── Keyboard focus ────────────────────────────────────────────────
   :focus-visible only shows the ring for keyboard/assistive-tech navigation,
   not on mouse clicks, so it never adds visual noise to normal browsing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Layout Container ──────────────────────────────────────────── */
.container { max-width: var(--layout-width); margin: 0 auto; padding: 0 1rem; }

/* ── Content + sidebar placement (wizard sidebarPosition = left) ──
   Pages put main content first, sidebar second in the markup. When the wizard
   chooses a left sidebar we reverse the flex row on large screens; mobile keeps
   content-first (sidebar stacks below). */
@media (min-width: 992px) {
  .content-with-sidebar { flex-direction: row-reverse; }
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  padding: .6rem 1.4rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: var(--font-body);
  transition: opacity .2s;
}
.btn-primary:hover { opacity: .85; }

.btn-secondary {
  background-color: var(--color-secondary);
  color: #ffffff;
  border: none;
  padding: .6rem 1.4rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: opacity .2s;
}
.btn-secondary:hover { opacity: .85; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  overflow: hidden;
}

.card-body { padding: 1.25rem; }
.card-title { font-family: var(--font-heading); font-weight: 600; margin-bottom: .5rem; }

/* ── Dark Mode ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #0f0f0f;
    --color-surface:        #1a1a1a;
    --color-text-primary:   #f0f0f0;
    --color-text-secondary: #a0a0a0;
  }
}
[data-theme="dark"] {
  --color-bg:             #0f0f0f;
  --color-surface:        #1a1a1a;
  --color-text-primary:   #f0f0f0;
  --color-text-secondary: #a0a0a0;
}

/* ── Utility ───────────────────────────────────────────────────── */
.text-primary   { color: var(--color-primary)   !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent    { color: var(--color-accent)    !important; }
.bg-primary     { background-color: var(--color-primary)   !important; }
.bg-surface     { background-color: var(--color-surface)   !important; }

/* ── Admin tables (consistent across the whole admin panel) ──────────
   • headers CENTERED; text cells LEFT-aligned
   • cells holding only a checkbox / button / badge stay CENTERED
   • a thin vertical separator between every column
   • percentage-friendly widths with wrap so the layout never "breaks";
     min-width lets very wide tables scroll sideways on small screens
   Scoped to .main-content so only admin pages are affected.        */
.main-content table.table{
  width:100%;
  min-width:560px;            /* below this the .table-responsive/card scrolls */
  margin-bottom:1rem;
  background:#fff;
  border-collapse:separate;
  border-spacing:0;
}
.main-content table.table thead th{
  text-align:center !important;
  vertical-align:middle;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#5b6472;
  background:#f6f8fb;
  padding:.65rem .6rem;
  border-bottom:2px solid #e4e8ef;
}
.main-content table.table tbody td{
  text-align:left !important;
  vertical-align:middle;
  font-size:.875rem;
  color:#2b3340;
  padding:.6rem .7rem;
  border-top:1px solid #eef1f5;
  overflow-wrap:anywhere;     /* long words/URLs wrap instead of overflowing */
}
/* cells that hold only a control, badge or buttons stay centered (not "text") */
.main-content table.table td:has(> .form-check-input),
.main-content table.table td:has(> .btn),
.main-content table.table td:has(> form),
.main-content table.table td:has(> .badge),
.main-content table.table td:has(> .status-badge),
.main-content table.table td:has(> .d-flex){
  text-align:center !important;
}
/* vertical separator line between columns */
.main-content table.table th:not(:last-child),
.main-content table.table td:not(:last-child){
  border-right:1px solid #eef1f5;
}
/* subtle zebra striping + clear row hover */
.main-content table.table tbody tr:nth-child(even) > td{ background:#fbfcfe; }
.main-content table.table tbody tr:hover > td{ background:#eef4fc; }
/* keep action buttons, badges and small forms on one line */
.main-content table.table td .btn,
.main-content table.table td .badge,
.main-content table.table td .status-badge,
.main-content table.table td form{ white-space:nowrap; }
/* a table placed directly inside a card (no .table-responsive wrapper) scrolls too */
.main-content .card:has(> table.table){ overflow-x:auto; }

/* ── MoviesMythri: keep the admin panel light and readable ─────────────────
   The storefront theme is dark (dark surface / light text). Admin screens are light,
   so admin pages (they contain .main-content) get light tokens, and the sidebar uses the
   brand's dark background with gold accents instead of white-on-gold. */
body:has(> .main-content), body:has(.sidebar) {
  --color-surface: #ffffff;
  --color-bg: #f0f2f5;
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-border: #e5e7eb;
  color: #1f2937;
}
body:has(.sidebar) .sidebar { background: #16121d !important; }
body:has(.sidebar) .sidebar-nav a.active, body:has(.sidebar) .sidebar-nav a.nav-hit { color: #f4c430 !important; box-shadow: inset 3px 0 0 #f4c430; }
body:has(.sidebar) .main-content h1, body:has(.sidebar) .main-content h2, body:has(.sidebar) .main-content h3,
body:has(.sidebar) .main-content h4, body:has(.sidebar) .main-content h5, body:has(.sidebar) .main-content h6 { color: #1f2937; }
body:has(.sidebar) .main-content .form-label, body:has(.sidebar) .main-content label { color: #374151; }