/* ================================================================
   HIT — Theme CSS
   Generated by WebMantra | Preset: saffron
   All values from CSS variables — change theme from admin panel.
   ================================================================ */

:root {
  /* Color Palette */
  --color-primary:        #ff6f00;
  --color-secondary:      #ffc107;
  --color-accent:         #4caf50;
  --color-bg:             #fffbf0;
  --color-surface:        #fff8e1;
  --color-text-primary:   #1a1200;
  --color-text-secondary: #795548;

  /* Typography */
  --font-heading:   'Poppins', system-ui, sans-serif;
  --font-body:      'Open Sans', system-ui, sans-serif;
  --font-size-base: 16px;

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

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

/* ── 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 = right) ──
   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). */

/* ── 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; }