/* admin — page styles extracted from inline <style> block.
   Rebranded from the original generic indigo/dark-navy admin-template look
   to ABVENTS's own warm/accent palette, so this reads as the same product
   as the client and vendor dashboards instead of an unrelated tool. */

/* admin.html never loaded main.css (only abvents.css/ab-utils.css), so every
   var(--accent-color)/var(--heading-color)/var(--surface-color) reference —
   both here and in the shared .stat-card/.status-badge/.profile-hero rules
   abvents.css itself uses — silently resolved to nothing. Defined here
   rather than pulling in the whole of main.css (which carries a lot of
   public-marketing-page CSS this admin-only page doesn't need and hasn't
   been vetted against). Values copied from main.css's :root so it's the
   exact same palette, not a reinterpretation of it.  */
:root {
  --background-color: #f8efeb;
  --default-color: #352a26;
  --heading-color: #291812;
  --accent-color: #e07844;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

body { background: var(--background-color); }
    .sidebar { width: 240px; min-height: 100vh; background: #2a1c14; color: #ccc; position: fixed; top: 0; left: 0; z-index: 1000; transition: transform 0.3s ease; }
    .sidebar .brand { padding: 1.5rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .sidebar .nav-link { color: rgba(255,255,255,0.7); padding: 0.75rem 1.25rem; border-radius: 0.375rem; margin: 0.1rem 0.5rem; min-height: 44px; display: flex; align-items: center; }
    .sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(224,120,68,0.22); color: #fff; }
    .sidebar .nav-link i { width: 1.4rem; }
    .sidebar .nav-divider { padding: 16px 1.25rem 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.35); }
    .sidebar .nav-divider:first-child { padding-top: 4px; }
    .main-content { margin-left: 240px; padding: 2rem; }
    .admin-topbar { display: none; }
    .sidebar-overlay-admin { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; }
    @media (max-width: 768px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .sidebar-overlay-admin.show { display: block; }
      .main-content { margin-left: 0; padding: 1rem; padding-top: 60px; }
      .admin-topbar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; z-index: 998; background: #2a1c14; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .admin-topbar .topbar-title { color: #fff; font-weight: 700; font-size: 16px; }
      .admin-topbar .btn-toggle { background: none; border: 1.5px solid rgba(255,255,255,0.3); color: #fff; border-radius: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; flex-shrink: 0; }
      .vendor-search-input { width: 100% !important; max-width: 100% !important; }
    }
    /* .stat-card/.stat-icon themselves are the shared component from
       abvents.css (same one client/vendor Overview use) — this used to be
       a totally different border-left card style unique to admin. */
    .stat-card { align-items: flex-start; }
    .badge-verified { background: #dcfce7; color: #16a34a; }
    .badge-pending  { background: #fef3c7; color: #d97706; }
    .table-actions { white-space: nowrap; }

    /* Bootstrap's default indigo/blue "primary" recolored to the platform's
       own accent — every existing button/badge across all 9 tabs picks this
       up automatically with no markup changes. Redefines the same local
       custom properties Bootstrap's compiled CSS scopes to each class (not
       just the base color) so :hover/:active/:focus states recolor too,
       not only the resting state. */
    .btn-primary {
      --bs-btn-bg: var(--accent-color); --bs-btn-border-color: var(--accent-color);
      --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color), #000 12%);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color), #000 12%);
      --bs-btn-active-bg: color-mix(in srgb, var(--accent-color), #000 18%);
      --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color), #000 18%);
      --bs-btn-disabled-bg: var(--accent-color); --bs-btn-disabled-border-color: var(--accent-color);
    }
    .btn-outline-primary {
      --bs-btn-color: var(--accent-color); --bs-btn-border-color: var(--accent-color);
      --bs-btn-hover-bg: var(--accent-color); --bs-btn-hover-border-color: var(--accent-color);
      --bs-btn-active-bg: var(--accent-color); --bs-btn-active-border-color: var(--accent-color);
      --bs-btn-disabled-color: var(--accent-color); --bs-btn-disabled-border-color: var(--accent-color);
    }
    .bg-primary { background-color: var(--accent-color) !important; }
    .text-primary { color: var(--accent-color) !important; }
    .badge.bg-primary { background-color: var(--accent-color) !important; }
    .nav-pills .nav-link.active { background-color: var(--accent-color); }
    .page-item.active .page-link { background-color: var(--accent-color); border-color: var(--accent-color); }
    .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); }
    .spinner-border.text-primary { color: var(--accent-color) !important; }