/*
=============================================================
MAPLE LEAF FLEET — CHARITY AUCTION VISUAL THEME
Supplemental theme for auction PHP pages.
Loads AFTER styles.css and intentionally follows the Fleet
site's established visual system.
=============================================================
*/

:root{
  --fleet-gold:#d4af37;
  --fleet-gold-light:#f1d98a;
  --fleet-blue:#4aa3ff;
  --fleet-navy:#09111f;
  --fleet-navy-2:#111d33;
  --fleet-navy-3:#162845;
  --fleet-text:#f8fbff;
  --fleet-muted:#c7d2df;
  --fleet-panel:rgba(8,16,30,.78);
  --fleet-panel-2:rgba(16,28,50,.72);
  --fleet-line:rgba(212,175,55,.42);
}

/* Auction pages use the exact Fleet background language. */
html, body{
  min-height:100%;
}
body{
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(74,163,255,.08), transparent 28%),
    linear-gradient(180deg,#09111f 0%,#111d33 48%,#162845 100%) !important;
  color:#fff !important;
  font-family:'Rajdhani',sans-serif !important;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(to bottom,transparent,rgba(255,215,120,.035),transparent);
  pointer-events:none;
  z-index:0;
  animation:fleetAuctionSweep 8s linear infinite;
}
@keyframes fleetAuctionSweep{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}

/* Fleet header — same structure and proportions as the main site. */
header{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  padding:16px 24px !important;
  background:rgba(8,14,27,.86) !important;
  border-bottom:3px solid #d4af37 !important;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}
.header-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
.site-logo{
  height:84px !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
  object-fit:contain !important;
}
.brand-text{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.05 !important;
}
.fleet-name{
  font-family:'Cinzel',serif !important;
  font-size:24px !important;
  color:#f1d98a !important;
  letter-spacing:.4px !important;
  text-shadow:0 0 10px rgba(212,175,55,.28) !important;
}
.ra-name{
  font-family:'Rajdhani',sans-serif !important;
  font-size:16px !important;
  color:#f7fbff !important;
  letter-spacing:1.2px !important;
}
header nav{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}
header nav a{
  color:#f1d98a !important;
  text-decoration:none !important;
  font-family:'Cinzel',serif !important;
  font-size:16px !important;
  padding:4px 2px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
header nav a:hover,
header nav a.active{
  color:#fff !important;
  text-shadow:0 0 10px rgba(212,175,55,.5) !important;
}

/* Page frame */
.auction-wrap,
.donation-page,
.donation-form-wrap,
.intake-wrap{
  position:relative;
  z-index:1;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:32px 20px 60px !important;
}

/* Fleet-style hero */
.auction-hero,
.donation-hero,
.intake-hero{
  position:relative !important;
  width:100% !important;
  margin:0 0 24px !important;
  padding:30px !important;
  background:
    linear-gradient(180deg,rgba(8,16,30,.76),rgba(16,28,50,.72)) !important;
  border:0 !important;
  border-left:6px solid #d4af37 !important;
  border-radius:14px !important;
  backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.22) !important;
}
.auction-kicker,
.donation-kicker,
.kicker{
  display:inline-block;
  color:#4aa3ff !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:2px !important;
  text-transform:uppercase;
}
.auction-title,
.donation-title,
.title{
  font-family:'Cinzel',serif !important;
  font-size:34px !important;
  line-height:1.15 !important;
  color:#f1d98a !important;
  margin:12px 0 10px !important;
  text-shadow:0 0 12px rgba(212,175,55,.28) !important;
}
.auction-subtitle,
.donation-subtitle,
.subtitle{
  color:#f7fbff !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:18px !important;
  letter-spacing:1.2px !important;
}
.auction-hero p,
.donation-hero p,
.intro{
  color:#f8fbff !important;
  font-size:18px !important;
  line-height:1.78 !important;
}

/* Fleet cards/panels */
.auction-card,
.donation-panel,
.donation-form-panel,
.intake-card,
.panel{
  background:linear-gradient(180deg,rgba(8,16,30,.76),rgba(16,28,50,.72)) !important;
  border:0 !important;
  border-left:6px solid #d4af37 !important;
  border-radius:14px !important;
  padding:24px !important;
  backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.22) !important;
  color:#fff !important;
}
.auction-card h2,
.donation-panel h2,
.donation-form-panel h2,
.intake-card h2,
.panel h2{
  font-family:'Cinzel',serif !important;
  color:#f1d98a !important;
  font-size:22px !important;
  margin:0 0 14px !important;
  text-shadow:0 0 10px rgba(212,175,55,.18);
}
.auction-card p,
.auction-card li,
.donation-panel p,
.donation-panel li,
.donation-form-panel p,
.intake-card p,
.intake-card li{
  color:#f8fbff !important;
  font-size:18px !important;
  line-height:1.7 !important;
}
.auction-full{
  width:100% !important;
}

/* Grids */
.auction-grid,
.donation-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
  margin-top:22px !important;
}
.auction-lot-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
}
.auction-grid .auction-full,
.donation-grid .full,
.donation-panel.full{
  grid-column:1/-1 !important;
}

/* Inner cards retain the Fleet card language. */
.card,
.auction-lot,
.lot-card,
.donation-step{
  background:linear-gradient(180deg,rgba(8,16,30,.76),rgba(16,28,50,.72)) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-left:4px solid rgba(212,175,55,.72) !important;
  border-radius:12px !important;
  padding:20px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}
.card h3,
.auction-lot h3,
.lot-card h3{
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
}

/* Gold Fleet divider */
.auction-divider,
.divider{
  height:4px !important;
  width:100% !important;
  background:linear-gradient(90deg,#d4af37,#ffcc66,#4aa3ff) !important;
  margin:14px 0 26px !important;
  border-radius:999px !important;
  box-shadow:0 0 12px rgba(212,175,55,.18) !important;
}

/* Status pills */
.auction-status,
.donation-status,
.hero-status{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:20px 0 !important;
}
.auction-pill,
.donation-pill,
.pill{
  display:inline-flex !important;
  align-items:center !important;
  border:1px solid rgba(212,175,55,.45) !important;
  background:rgba(2,6,17,.55) !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  color:#f8fbff !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:15px !important;
}
.dot{
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:8px;
  border-radius:50%;
  background:#55df78;
  box-shadow:0 0 8px rgba(85,223,120,.65);
}

/* Countdown */
.auction-countdown,
.countdown,
.countdown-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:18px 0 26px !important;
}
.count-box,
.countdown-item,
.timer-box{
  background:rgba(8,16,30,.82) !important;
  border:1px solid rgba(212,175,55,.35) !important;
  border-radius:10px !important;
  padding:14px !important;
  text-align:center !important;
}
.count-num,
.count-box strong,
.countdown-item strong,
.timer-box strong{
  display:block !important;
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  font-size:28px !important;
}
.count-label,
.count-box span,
.countdown-item span,
.timer-box span{
  display:block !important;
  color:#c7d2df !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:13px !important;
  letter-spacing:1px !important;
  text-transform:uppercase;
}

/* Buttons — same Fleet gold treatment */
.auction-btn,
.btn,
button,
input[type="submit"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  background:linear-gradient(180deg,#dcb84d,#d4af37) !important;
  color:#0b0f1a !important;
  font-family:'Cinzel',serif !important;
  font-weight:bold !important;
  padding:12px 18px !important;
  border-radius:10px !important;
  border:0 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:0 0 12px rgba(212,175,55,.35) !important;
  transition:.18s ease-in-out !important;
}
.auction-btn:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover{
  background:linear-gradient(180deg,#ffe08a,#f5cd63) !important;
  color:#000 !important;
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 0 18px rgba(255,224,138,.45) !important;
}
.auction-btn.outline,
.btn.outline,
button.outline{
  background:transparent !important;
  color:#f1d98a !important;
  border:1px solid #d4af37 !important;
  box-shadow:none !important;
}
.auction-actions,
.hero-actions,
.donation-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:20px !important;
}

/* Forms */
.auction-form,
.donation-form-panel form{
  width:100%;
}
.auction-form-grid,
.donation-form-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
}
.auction-field,
.donation-form-field,
.field{
  margin:0 0 14px !important;
}
.auction-field label,
.donation-form-field label,
.field label,
label{
  display:block !important;
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  font-size:15px !important;
  margin-bottom:7px !important;
}
.auction-field input,
.auction-field select,
.auction-field textarea,
.donation-form-field input,
.donation-form-field select,
.donation-form-field textarea,
input,
select,
textarea{
  width:100% !important;
  box-sizing:border-box !important;
  background:rgba(4,10,20,.82) !important;
  color:#f8fbff !important;
  border:1px solid rgba(212,175,55,.38) !important;
  border-radius:9px !important;
  padding:11px 13px !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:17px !important;
}
textarea{
  min-height:130px;
  resize:vertical;
}
input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:#f1d98a !important;
  box-shadow:0 0 0 2px rgba(212,175,55,.12) !important;
}
.donation-form-grid .full{
  grid-column:1/-1 !important;
}

/* Tables */
.command-table-wrap{
  width:100%;
  overflow-x:auto;
}
.command-table{
  width:100% !important;
  border-collapse:collapse !important;
  color:#f8fbff !important;
}
.command-table th{
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  font-size:14px !important;
  text-align:left !important;
  padding:12px !important;
  border-bottom:2px solid rgba(212,175,55,.35) !important;
}
.command-table td{
  color:#f8fbff !important;
  padding:12px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  vertical-align:top;
}
.command-table tr:hover td{
  background:rgba(212,175,55,.035) !important;
}

/* Notices/messages */
.auction-notice,
.donation-note,
.intake-note,
.donation-callout{
  background:rgba(19,45,78,.38) !important;
  border:1px solid rgba(74,163,255,.42) !important;
  border-radius:9px !important;
  color:#edf5ff !important;
  padding:15px 17px !important;
  line-height:1.6 !important;
}
.auction-success,
.save-message.success{
  background:rgba(35,105,57,.25) !important;
  border:1px solid rgba(85,223,120,.45) !important;
  border-left:5px solid #55df78 !important;
  color:#d7ffe1 !important;
  border-radius:10px !important;
  padding:15px 18px !important;
}
.auction-error,
.save-message.error{
  background:rgba(105,25,25,.25) !important;
  border:1px solid rgba(255,105,105,.45) !important;
  border-left:5px solid #ff6969 !important;
  color:#ffdede !important;
  border-radius:10px !important;
  padding:15px 18px !important;
}

/* Utility text */
.auction-muted,
.muted,
.note{
  color:#c7d2df !important;
}
.mono{
  font-family:'Rajdhani',sans-serif !important;
  color:#f1d98a !important;
}

/* Footer */
footer,
.donation-footer{
  position:relative;
  z-index:1;
  text-align:center !important;
  border-top:1px solid rgba(212,175,55,.18) !important;
  padding:28px 15px !important;
  color:#9eacbd !important;
  line-height:1.7 !important;
}
.motto{
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  line-height:1.8 !important;
}

/* Responsive */
@media(max-width:900px){
  header{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  header nav{
    justify-content:flex-start !important;
  }
  .auction-grid,
  .auction-lot-grid,
  .donation-grid,
  .auction-form-grid,
  .donation-form-grid{
    grid-template-columns:1fr !important;
  }
  .auction-grid .auction-full,
  .donation-grid .full,
  .donation-panel.full,
  .donation-form-grid .full{
    grid-column:auto !important;
  }
}
@media(max-width:768px){
  .site-logo{
    height:72px !important;
  }
  .auction-wrap,
  .donation-page,
  .donation-form-wrap,
  .intake-wrap{
    padding:22px 14px 45px !important;
  }
  .auction-hero,
  .donation-hero,
  .intake-hero,
  .auction-card,
  .donation-panel,
  .donation-form-panel,
  .intake-card{
    padding:20px !important;
  }
  .auction-title,
  .donation-title,
  .title{
    font-size:30px !important;
  }
  .auction-countdown,
  .countdown,
  .countdown-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:520px){
  header nav{
    gap:8px !important;
  }
  header nav a{
    font-size:13px !important;
  }
  .auction-countdown,
  .countdown,
  .countdown-grid{
    grid-template-columns:1fr 1fr !important;
  }
}


.auction-status-separator{opacity:.55;margin:0 6px;}


/* Fleet Command access link — added without altering existing auction styling */
.fleet-command-link{
  margin:22px auto 8px;
  text-align:center;
}
.fleet-command-link a{
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  font-size:14px !important;
  text-decoration:none !important;
  opacity:.78;
  transition:opacity .2s ease,text-shadow .2s ease;
}
.fleet-command-link a:hover{
  opacity:1;
  text-shadow:0 0 10px rgba(212,175,55,.45);
}


/* =========================================================
   EXACT FLEET COMMAND CENTRE DASHBOARD FIX
   Matches the actual dashboard markup:
   .command-grid / .command-stat / .command-workflow
   ========================================================= */

.command-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:22px 0 !important;
  width:100% !important;
}

.command-stat{
  min-width:0 !important;
  min-height:96px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding:18px 16px !important;
  background:linear-gradient(180deg,rgba(8,16,30,.76),rgba(16,28,50,.72)) !important;
  border-left:6px solid #d4af37 !important;
  border-radius:14px !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.22) !important;
}

.command-stat .num{
  display:block !important;
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  font-size:28px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  margin-bottom:7px !important;
}

.command-stat .label{
  display:block !important;
  color:#f8fbff !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:16px !important;
  line-height:1.25 !important;
}

.command-workflow{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  margin:18px 0 22px !important;
}

.command-workflow > div{
  display:flex !important;
  flex-direction:column !important;
  min-height:145px !important;
  box-sizing:border-box !important;
  padding:18px !important;
  background:linear-gradient(180deg,rgba(8,16,30,.76),rgba(16,28,50,.72)) !important;
  border:1px solid rgba(212,175,55,.25) !important;
  border-left:4px solid rgba(212,175,55,.75) !important;
  border-radius:11px !important;
}

.command-workflow strong{
  display:block !important;
  color:#f1d98a !important;
  font-family:'Cinzel',serif !important;
  font-size:15px !important;
  letter-spacing:.5px !important;
  margin-bottom:10px !important;
}

.command-workflow span{
  display:block !important;
  flex:1 !important;
  color:#f8fbff !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:16px !important;
  line-height:1.45 !important;
}

.command-workflow .small-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:14px !important;
  padding:9px 12px !important;
  border:1px solid #d4af37 !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#dcb84d,#d4af37) !important;
  color:#0b0f1a !important;
  font-family:'Cinzel',serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  text-decoration:none !important;
}

.command-workflow .small-btn:hover{
  background:linear-gradient(180deg,#ffe08a,#f5cd63) !important;
  color:#000 !important;
}

.auction-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:20px !important;
  margin-top:20px !important;
}

.auction-card.auction-full{
  grid-column:auto !important;
}

.auction-card .command-table{
  margin-top:8px !important;
}

.auction-card .command-table th{
  padding:12px 12px !important;
}

.auction-card .command-table td{
  padding:12px !important;
}

.auction-card .command-table tbody tr:last-child td{
  border-bottom:0 !important;
}

.auction-card > .auction-btn.outline{
  margin-top:8px !important;
}

@media(max-width:1000px){
  .command-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .command-workflow{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:560px){
  .command-grid,
  .command-workflow{
    grid-template-columns:1fr !important;
  }
}