/* ========================================
   Auction Atlas - Dark Design System
   ======================================== */

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Syne:wght@700;800&display=swap');

 /* ========================================
    CSS Custom Properties
    ======================================== */
 :root {
   /* === BACKGROUNDS === */
   --bg-base:       #080c18;
   --bg-surface:    #0f1623;
   --bg-elevated:   #171f30;
   --bg-border:     #232d42;
   --bg-overlay:    rgba(8, 12, 24, 0.85);

   /* === TEXT — 4 levels of hierarchy === */
   --text-primary:   #eef2ff;
   --text-secondary: #94a3c4;
   --text-muted:     #546180;
   --text-disabled: #2e3a52;

   /* === ACCENT — Electric Blue === */
   --accent:         #3b82f6;
   --accent-hover:   #60a5fa;
   --accent-subtle:  #1a2d4f;
   --accent-border:  rgba(59, 130, 246, 0.3);

   /* === SEMANTIC COLORS === */
   --success:        #10b981;
   --success-subtle: #061a11;
   --success-border: rgba(16, 185, 129, 0.25);

   --warning:        #f59e0b;
   --warning-subtle: #1f1500;
   --warning-border: rgba(245, 158, 11, 0.25);

   --danger:         #ef4444;
   --danger-subtle: #1c0505;
   --danger-border:  rgba(239, 68, 68, 0.25);

    /* === GRADE COLORS === */
    --grade-a-plus:  #10b981;
    --grade-a:       #34d399;
    --grade-b-plus:  #60a5fa;
    --grade-b:       #93c5fd;
    --grade-c:       #fbbf24;
    --grade-d:       #f87171;
    
/* === SELLING SECTION — Amber/Gold Accent === */
    --sell-accent:        #f59e0b;
    --sell-accent-hover:  #fbbf24;
    --sell-accent-subtle: rgba(245, 158, 11, 0.1);
    --sell-accent-border: rgba(245, 158, 11, 0.25);
    --sell-text:          #1f1500;

    /* === CHECKER SECTION — Indigo Accent === */
    --check-accent: #6366f1;
    --check-subtle: rgba(99,102,241,0.1);
    --check-border: rgba(99,102,241,0.25);

    /* Source Colors */
   --source-highstreet: #10b981;
   --source-gobid: #f59e0b;
   --source-claremart: #ec4899;
   --source-bidders: #8b5cf6;
   --source-aucor: #3b82f6;
   --source-saauction: #f97316;
   --source-nuco: #06b6d4;
   --source-default: #64748b;

   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

/* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
  }

  /* ===== SAIA Registered Badge ===== */
  .badge-saia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #052e1c;
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 20px;
    padding: 3px 9px;
    flex-shrink: 0;
  }

  .badge-saia svg {
    width: 9px;
    height: 9px;
    stroke: #10b981;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: block;
  }

  .badge-saia span {
    font-size: 0.62rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* ===== SAIA Badge Large (for profile headers) ===== */
  .badge-saia-lg {
    padding: 4px 12px;
  }

  .badge-saia-lg span {
    font-size: 0.7rem;
  }

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-base);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: 
    radial-gradient(ellipse at 20% 0%, rgba(30, 58, 138, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(6, 78, 59, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(30, 58, 138, 0.08) 0%, transparent 60%),
    var(--bg-base);
  background-attachment: fixed;
  color: var(--text-secondary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Force dark background — beats any Tailwind gray backgrounds */
body.bg-gray-500,
body.bg-gray-400,
body.bg-gray-600,
body[class*="bg-gray"],
body[class*="bg-slate"] {
  background: 
    radial-gradient(ellipse at 20% 0%, rgba(30, 58, 138, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(6, 78, 59, 0.10) 0%, transparent 50%),
    var(--bg-base) !important;
}

/* Sections between cards should show body gradient through */
main,
.page-content,
.content-wrapper,
.main-content {
  background: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  color: var(--text-primary);
}

p, li, td, th, span, label {
  color: var(--text-secondary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

::selection {
  background: var(--accent-subtle);
  color: var(--accent-hover);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
 }

/* ========================================
   Lucide Icons
   ======================================== */
[data-lucide], .lucide {
    fill: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* SVG icons created by Lucide - use color for stroke inheritance */
svg.lucide {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Icons inherit color from parent wrapper */
.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Default fallback if no color is set on parent */
.card svg.lucide,
.stat-card svg.lucide,
.glass-card svg.lucide {
    color: #8b9cbf;
}

/* ============================================
   LUCIDE ICON UNIVERSAL FIX
   Sets color on containers so currentColor
   resolves to something visible
   ============================================ */

svg.lucide {
    color: #ffffff;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
}

 /* ============================================
    ICON WRAPPER CLASSES
    Named classes for icon containers
    ============================================ */
 .icon-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     padding: 8px;
     flex-shrink: 0;
 }
 .icon-accent { background: var(--accent-subtle); }
 .icon-accent [data-lucide] { stroke: var(--accent) !important; }
 .icon-success { background: var(--success-subtle); }
 .icon-success [data-lucide] { stroke: var(--success) !important; }
 .icon-warning { background: var(--warning-subtle); }
 .icon-warning [data-lucide] { stroke: var(--warning) !important; }
 .icon-danger { background: var(--danger-subtle); }
 .icon-danger [data-lucide] { stroke: var(--danger) !important; }
 .icon-purple { background: rgba(139, 92, 246, 0.12); }
 .icon-purple [data-lucide] { stroke: #a78bfa !important; }
 .icon-teal { background: rgba(20, 184, 166, 0.12); }
 .icon-teal [data-lucide] { stroke: #2dd4bf !important; }

 /* ============================================
    BUYER ICON WRAPPER
    ============================================ */
 .buyer-icon-wrap {
     width: 64px;
     height: 64px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     flex-shrink: 0;
 }
 .buyer-icon-wrap svg.lucide {
     width: 30px !important;
     height: 30px !important;
 }
 .buyer-icon-wrap.icon-accent  { background: #1a2d4f; }
 .buyer-icon-wrap.icon-success { background: #061a11; }
 .buyer-icon-wrap.icon-warning { background: #1f1500; }
 .buyer-icon-wrap.icon-danger  { background: #1c0505; }
 .buyer-icon-wrap.icon-purple  { background: rgba(139,92,246,0.12); }
 .buyer-icon-wrap.icon-teal    { background: rgba(20,184,166,0.12); }

 .buyer-icon-wrap.icon-accent  svg.lucide { stroke: #60a5fa !important; }
 .buyer-icon-wrap.icon-success svg.lucide { stroke: #10b981 !important; }
 .buyer-icon-wrap.icon-warning svg.lucide { stroke: #f59e0b !important; }
 .buyer-icon-wrap.icon-danger  svg.lucide { stroke: #ef4444 !important; }
 .buyer-icon-wrap.icon-purple  svg.lucide { stroke: #a78bfa !important; }
 .buyer-icon-wrap.icon-teal    svg.lucide { stroke: #2dd4bf !important; }

 /* ============================================
    CATEGORY ICON WRAPPER
    ============================================ */
 .cat-icon-wrap {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 14px;
 }
 .cat-icon-wrap svg.lucide {
     width: 24px !important;
     height: 24px !important;
 }
 .cat-icon-wrap.icon-accent  { background: #1a2d4f; }
 .cat-icon-wrap.icon-success { background: #061a11; }
 .cat-icon-wrap.icon-warning { background: #1f1500; }
 .cat-icon-wrap.icon-danger  { background: #1c0505; }
 .cat-icon-wrap.icon-purple  { background: rgba(139,92,246,0.12); }
 .cat-icon-wrap.icon-teal    { background: rgba(20,184,166,0.12); }

 .cat-icon-wrap.icon-accent  svg.lucide { stroke: #60a5fa !important; }
 .cat-icon-wrap.icon-success svg.lucide { stroke: #10b981 !important; }
 .cat-icon-wrap.icon-warning svg.lucide { stroke: #f59e0b !important; }
 .cat-icon-wrap.icon-danger  svg.lucide { stroke: #ef4444 !important; }
 .cat-icon-wrap.icon-purple  svg.lucide { stroke: #a78bfa !important; }
 .cat-icon-wrap.icon-teal    svg.lucide { stroke: #2dd4bf !important; }

 /* ============================================
    TOOL ICON WRAPPER
    ============================================ */
 .tool-icon-wrap {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }
 .tool-icon-wrap svg.lucide { width: 20px !important; height: 20px !important; }
 .tool-icon-wrap.icon-accent  { background: #1a2d4f; }
 .tool-icon-wrap.icon-success { background: #061a11; }
 .tool-icon-wrap.icon-warning { background: #1f1500; }
 .tool-icon-wrap.icon-purple  { background: rgba(139,92,246,0.12); }
 .tool-icon-wrap.icon-accent  svg.lucide { stroke: #60a5fa !important; }
 .tool-icon-wrap.icon-success svg.lucide { stroke: #10b981 !important; }
 .tool-icon-wrap.icon-warning svg.lucide { stroke: #f59e0b !important; }
 .tool-icon-wrap.icon-purple  svg.lucide { stroke: #a78bfa !important; }

 /* ============================================
    TRUST BAND ICON WRAPPER
    ============================================ */
 .trust-item {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text-secondary);
     font-size: 0.82rem;
 }
 .trust-icon-wrap {
     width: 28px;
     height: 28px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }
 .trust-icon-wrap svg.lucide {
     stroke: #10b981 !important;
     width: 14px !important;
     height: 14px !important;
 }
 .trust-item:nth-child(1) .trust-icon-wrap svg.lucide { stroke: #10b981 !important; }
 .trust-item:nth-child(2) .trust-icon-wrap svg.lucide { stroke: #60a5fa !important; }
 .trust-item:nth-child(3) .trust-icon-wrap svg.lucide { stroke: #10b981 !important; }
 .trust-item:nth-child(4) .trust-icon-wrap svg.lucide { stroke: #f59e0b !important; }
 .trust-item:nth-child(5) .trust-icon-wrap svg.lucide { stroke: #60a5fa !important; }

 /* ============================================
    LEAFLET MAP CONTAINER
    ============================================ */
 #homepage-map {
     height: 380px !important;
     width: 100%;
     background: #0f1623;
     border-radius: 0 0 14px 14px;
 }

 /* Nav icons */
 nav [data-lucide] {
     stroke: var(--text-secondary) !important;
     width: 16px;
     height: 16px;
 }

 /* Button icons */
 .btn-primary [data-lucide] { stroke: #ffffff !important; }
 .btn-ghost [data-lucide] { stroke: var(--text-secondary) !important; }

 /* Trust band icons */
 .trust-band {
     background-color: var(--bg-surface);
     border-top: 1px solid var(--bg-border);
     border-bottom: 1px solid var(--bg-border);
 }
 .trust-item {
     color: var(--text-secondary);
     font-size: 0.82rem;
 }
 .trust-icon {
     width: 28px;
     height: 28px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }
 .trust-icon [data-lucide] {
     width: 14px !important;
     height: 14px !important;
 }

 /* ========================================
    Navigation
    ======================================== */
.site-nav {
  background: rgba(10, 14, 26, 0.95);
  border-bottom: 1px solid var(--bg-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.nav-link:hover,
  .nav-link.active {
    color: var(--text-primary);
    background: var(--bg-elevated);
  }
  
  /* Sell nav item — amber to differentiate from buyer nav */
  nav a[href*="/sell"],
  nav a[href*="sell.php"] {
    color: var(--sell-accent) !important;
  }
  nav a[href*="/sell"]:hover,
  nav a[href*="sell.php"]:hover {
    background: var(--sell-accent-subtle) !important;
    color: var(--sell-accent-hover) !important;
  }

.nav-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-logo span { color: var(--accent); }

/* ========================================
   Cards
   ======================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}

.card:hover {
  border-color: var(--accent-subtle);
  transform: translateY(-2px);
}

.card-sm {
  padding: 16px;
  border-radius: var(--radius-md);
}

/* Glass card - dark theme */
.glass-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s, transform 0.2s;
}

.glass-card:hover {
  border-color: var(--accent-subtle);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.glass-card-static {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.glass-card-dark {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ========================================
   Badges / Grade Pills
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-success  { background: var(--success-subtle); color: var(--success); }
.badge-warning  { background: var(--warning-subtle); color: var(--warning); }
.badge-danger   { background: var(--danger-subtle);  color: var(--danger);  }
.badge-accent   { background: var(--accent-subtle);  color: var(--accent);  }

.grade-pill {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-md);
}

.grade-a-plus { color: var(--grade-a-plus); background: var(--success-subtle); }
.grade-a      { color: var(--grade-a);      background: var(--success-subtle); }
.grade-b-plus { color: var(--grade-b-plus); background: var(--accent-subtle);  }
.grade-b      { color: var(--grade-b);      background: var(--accent-subtle);  }
.grade-c      { color: var(--grade-c);      background: var(--warning-subtle); }
.grade-d      { color: var(--grade-d);      background: var(--danger-subtle);  }

/* Legacy grade badge */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  border: 2px solid;
}

/* Tag pills */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ========================================
   Trust Score Ring
   ======================================== */
.score-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.score-ring svg { transform: rotate(-90deg); }

.score-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.score-ring-label span {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--bg-border);
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--accent-subtle);
}

.btn-danger {
  background: var(--danger-subtle);
  color: var(--danger);
  border: 1px solid transparent;
}

.btn-danger:hover {
  border-color: var(--danger);
}

/* ========================================
   Form Elements
   ======================================== */
 input[type="text"],
 input[type="number"],
 input[type="email"],
 input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="url"],
 select,
 textarea,
 .form-input,
 .form-select {
   background-color: var(--bg-elevated) !important;
   border: 1px solid var(--bg-border) !important;
   border-radius: 8px !important;
   color: var(--text-primary) !important;
   padding: 11px 14px !important;
   font-size: 0.9rem !important;
   font-family: 'Inter', sans-serif !important;
   outline: none !important;
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s !important;
   -webkit-appearance: none;
   appearance: none;
 }

 input::placeholder {
   color: var(--text-muted) !important;
   opacity: 1;
 }

 input:focus,
 select:focus,
 textarea:focus,
 .form-input:focus,
 .form-select:focus {
   border-color: var(--accent) !important;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
 }

 select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
   background-repeat: no-repeat !important;
   background-position: right 12px center !important;
   padding-right: 36px !important;
   cursor: pointer;
 }

 select option {
   background-color: var(--bg-elevated);
   color: var(--text-primary);
 }

 label {
   display: block;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.07em;
   margin-bottom: 6px;
 }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-elevated);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--bg-surface);
  box-shadow: var(--shadow-md);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--bg-surface);
  box-shadow: var(--shadow-md);
}

/* ========================================
   Tables
   ======================================== */
.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--bg-border);
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg-border);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-elevated); }

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

.table-responsive table {
  min-width: 600px;
}

/* ========================================
   Stat Cards
   ======================================== */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.stat-card .stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 6px;
}

.stat-card .stat-delta {
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 8px;
}

.stat-card .stat-delta.up   { color: var(--success); }
.stat-card .stat-delta.down { color: var(--danger);  }

/* ========================================
   Progress / Trust Score Bar
   ======================================== */
.progress-bar-track {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.6s ease;
}

.progress-bar-fill.success { background: var(--success); }
.progress-bar-fill.warning { background: var(--warning); }
.progress-bar-fill.danger  { background: var(--danger);  }

.risk-bar-fill {
  transition: width 1s ease-out;
}

/* ========================================
   Accordion
   ======================================== */
.accordion-item {
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 8px;
}

.accordion-trigger {
  width: 100%;
  background: var(--bg-surface);
  border: none;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 16px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}

.accordion-trigger:hover { background: var(--bg-elevated); }
.accordion-trigger[aria-expanded="true"] { color: var(--accent); }

.accordion-body {
  background: var(--bg-base);
  padding: 16px 20px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.7;
  border-top: 1px solid var(--bg-border);
}

.accordion-arrow {
  transition: transform 0.2s ease;
}

/* ========================================
   Checklist Items
   ======================================== */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bg-border);
}

.check-item:last-child { border-bottom: none; }

.check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg-border);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon.checked {
  background: var(--success);
  border-color: var(--success);
}

/* ========================================
   Page Hero / Header Strip
   ======================================== */
.page-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--bg-border);
  margin-bottom: 40px;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.page-hero p {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 560px;
  margin-top: 10px;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, var(--bg-base) 0%, var(--accent-subtle) 50%, var(--success-subtle) 100%);
}

/* Hero text */
.hero h1 {
  color: var(--text-primary) !important;
  text-shadow: none;
}
.hero p, .hero-sub, .subtitle {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}
.hero-eyebrow {
  background-color: var(--accent-subtle) !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent-hover) !important;
}

/* ========================================
   Auction Logo Display
   ======================================== */
.auction-logo,
.profile-logo {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 12px;
}

.auction-logo img,
.profile-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  padding: 8px;
  transition: transform 0.3s ease;
}

.auction-logo {
  aspect-ratio: 3 / 1;
}

.auction-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s;
}

.auction-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-subtle);
}

.auction-card:hover .auction-logo img {
  transform: scale(1.05);
}

.profile-logo {
  height: 120px;
}

.profile-logo img {
  padding: 12px;
}

/* ========================================
   Dropdown
   ======================================== */
.dropdown-panel {
  z-index: 50;
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
}

.dropdown-trigger i[data-lucide="chevron-down"] {
  transition: transform 0.2s ease;
}

.group:hover .dropdown-trigger i[data-lucide="chevron-down"] {
  transform: rotate(180deg);
}

/* ========================================
   FullCalendar Dark Overrides
   ======================================== */
.fc {
  --fc-border-color: var(--bg-border);
  --fc-button-bg-color: var(--bg-elevated);
  --fc-button-border-color: var(--bg-border);
  --fc-button-hover-bg-color: var(--accent-subtle);
  --fc-button-hover-border-color: var(--accent);
  --fc-button-active-bg-color: var(--accent);
  --fc-button-active-border-color: var(--accent);
  --fc-button-text-color: var(--text-primary);
  --fc-today-bg-color: var(--accent-subtle);
  --fc-page-bg-color: var(--bg-surface);
  --fc-neutral-bg-color: var(--bg-elevated);
  --fc-list-event-hover-bg-color: var(--bg-elevated);
  --fc-event-bg-color: var(--accent);
  --fc-event-border-color: var(--accent);
  --fc-event-text-color: #fff;
  --fc-now-indicator-color: var(--warning);
}

.fc-toolbar-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.1rem !important;
  color: var(--text-primary) !important;
}

.fc-col-header-cell-cushion,
.fc-daygrid-day-number,
.fc-list-event-title a {
  color: var(--text-secondary) !important;
  text-decoration: none;
}

.fc-day-today .fc-daygrid-day-number {
  color: var(--accent) !important;
  font-weight: 600;
}

.fc-list-day-cushion {
  background: var(--bg-elevated) !important;
}

.fc .fc-toolbar { display: none; }

.fc .fc-scrollgrid { border-color: var(--bg-border); }

.fc .fc-col-header-cell {
  background: var(--bg-base);
  border-color: var(--bg-border);
  padding: 0.75rem 0;
}

.fc .fc-daygrid-day {
  border-color: var(--bg-border);
  transition: background var(--transition-fast);
}

.fc .fc-daygrid-day:hover {
  background: var(--bg-elevated);
}

/* Heatmap Day Styling */
.fc .fc-daygrid-day.heatmap-low {
  background: rgba(59, 130, 246, 0.08) !important;
}

.fc .fc-daygrid-day.heatmap-medium {
  background: rgba(59, 130, 246, 0.18) !important;
}

.fc .fc-daygrid-day.heatmap-high {
  background: rgba(59, 130, 246, 0.3) !important;
}

.fc .fc-daygrid-day.heatmap-very-high {
  background: rgba(59, 130, 246, 0.45) !important;
}

/* Events */
.fc-event {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: 1px 0;
  box-shadow: var(--shadow-sm);
}

.fc-event:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.fc-event .fc-event-title {
  font-weight: 600;
  color: #fff;
}

.fc-event .fc-event-time {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem;
}

/* Event Source Colors */
.fc-event.event-highstreet { background: var(--source-highstreet); }
.fc-event.event-gobid { background: var(--source-gobid); }
.fc-event.event-claremart { background: var(--source-claremart); }
.fc-event.event-bidders { background: var(--source-bidders); }
.fc-event.event-aucor { background: var(--source-aucor); }
.fc-event.event-saauction { background: var(--source-saauction); }
.fc-event.event-nuco { background: var(--source-nuco); }

.fc .fc-daygrid-more-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
}

.fc .fc-list-event-title a {
  color: var(--text-primary) !important;
}

.fc .fc-list-event-time {
  color: var(--text-muted);
}

/* ========================================
   Footer
   ======================================== */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--bg-border);
  color: var(--text-muted);
  margin-top: 64px;
}

.site-footer h3,
.site-footer h4 {
  color: var(--text-primary);
  font-family: 'Syne', sans-serif;
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer a:hover {
  color: var(--text-primary);
}

.site-footer p {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ========================================
   Animations
   ======================================== */
.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   Leaflet Map Overrides
   ======================================== */
.leaflet-container {
  border-radius: var(--radius-lg);
  z-index: 1;
  background: var(--bg-base) !important;
}

/* ========================================
   Chart Container
   ======================================== */
 .chart-container {
   position: relative;
   width: 100%;
   max-width: 100%;
   height: 280px;
 }

 .chart-container.max-w-xs {
   height: 240px;
 }

 .chart-container.max-w-lg {
   height: 380px;
 }

 .chart-container canvas {
   max-width: 100%;
   height: auto !important;
 }

/* ========================================
   Utility: Text colors for Tailwind override
   ======================================== */
.text-primary-color { color: var(--accent); }
.text-success-color { color: var(--success); }
.text-warning-color { color: var(--warning); }
.text-danger-color { color: var(--danger); }

/* ========================================
    Footer
    ======================================== */
 footer, .site-footer {
     background-color: var(--bg-surface) !important;
     border-top: 1px solid var(--bg-border) !important;
     color: var(--text-muted) !important;
 }
 footer h4, footer h3 {
     color: var(--text-muted) !important;
     font-size: 0.72rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }
 footer a {
     color: var(--text-secondary) !important;
     font-size: 0.82rem;
 }
 footer a:hover {
     color: var(--text-primary) !important;
 }
 footer p, footer span {
     color: var(--text-muted) !important;
     font-size: 0.78rem;
 }

 /* ========================================
    Responsive
    ======================================== */
 @media (max-width: 640px) {
  .glass-card:hover,
  .card:hover,
  .auction-card:hover {
    transform: none;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  header, footer, .no-print, .site-nav, .site-footer {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .glass-card, .card, .auction-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}