/* theme-oxanium-violet.css — shared purple theme for Fleet Builder + Inventory Manager */

/* 1) Load Oxanium font */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700;800&display=swap');

/* 2) Base palette */
:root{
  --violet-1:#f3e8ff;
  --violet-2:#e9d5ff;
  --violet-3:#d8b4fe;
  --violet-4:#c084fc;
  --violet-5:#a855f7;
  --violet-6:#9333ea;
  --violet-7:#7e22ce;
  --violet-8:#6b21a8;
  --violet-9:#581c87;

  /* Remap any "sky" accents some pages use to purple family */
  --sky-1: var(--violet-3);
  --sky-2: var(--violet-4);
  --sky-3: var(--violet-5);
}

/* 3) Typography base */
body, #bfv-app{
  font-family: "Oxanium", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  color: var(--violet-2);
}

/* 4) Title gradient → purple */
#bfv-app h1, h1.title{
  background: linear-gradient(90deg, var(--violet-2), var(--violet-4), var(--violet-6));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* 5) Inputs: purple focus ring */
#bfv-app .search:focus,
#bfv-app .text:focus,
.control input[type="text"]:focus,
.control select:focus{
  outline: none;
  border-color: var(--violet-4);
  box-shadow: 0 0 0 2px rgba(168,85,247,.28);
}

/* 6) Pills → violet */
#bfv-app .pill,
.pill{
  border: 1px solid rgba(216,180,254,.35);
  color: #f3e8ff;
  background: rgba(124,58,237,.15);
}
#bfv-app .pill[aria-pressed="true"],
.pill[aria-pressed="true"]{
  background: rgba(88,28,135,.45);
  border-color: rgba(168,85,247,.55);
  color:#faf5ff;
}

/* 7) Glassy purple buttons */
#bfv-app .btn, .btn{
  --glass-start: rgba(168,85,247,.28);
  --glass-end:   rgba(88,28,135,.22);
  cursor:pointer;
  border:1px solid rgba(216,180,254,.45);
  background: linear-gradient(180deg, var(--glass-start), var(--glass-end));
  color: var(--violet-2);
  padding:8px 12px;
  border-radius:12px;
  font-weight:700; letter-spacing:.03em;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; line-height:1.2;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-decoration: none;
}
#bfv-app .btn:hover, .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
#bfv-app .btn:active, .btn:active{ transform: translateY(0); filter: brightness(.98); }

/* Variants (still purple family) */
#bfv-app .btn.ghost, .btn.ghost{
  --glass-start: rgba(168,85,247,.08);
  --glass-end:   rgba(88,28,135,.06);
  border-color: rgba(216,180,254,.30);
  background: linear-gradient(180deg, var(--glass-start), var(--glass-end));
}
#bfv-app .btn.ok, .btn.ok{
  --glass-start: rgba(192,132,252,.33);
  --glass-end:   rgba(126,34,206,.26);
  border-color: rgba(216,180,254,.55);
}
#bfv-app .btn.danger, .btn.danger{
  --glass-start: rgba(124,58,237,.33);
  --glass-end:   rgba(76,29,149,.28);
  border-color: rgba(167,139,250,.55);
}

/* 8) Lists + names lean lavender */
#bfv-app .name, .name{ color:#e9d5ff; }

/* 9) Inventory-panel leaning violet */
.inv-box h3 { color:#d8b4fe; }
.inv-row .badge {
  border: 1px solid #4c2b6a;
  background: #1a0f2b;
  color: #f3e8ff;
}

/* 10) Panels and headings (inventory + generic panels) */
.panel { border: 1px solid rgba(216,180,254,.18); }
.panel h2 {
  color: var(--violet-3);
  border-bottom: 1px solid rgba(216,180,254,.20);
  background: linear-gradient(90deg, rgba(168,85,247,.08), rgba(216,180,254,.08));
}

/* 11) Tables + sum cards */
.sumcard{ border: 1px solid rgba(216,180,254,.16); }
th, td{ border-bottom: 1px dashed rgba(216,180,254,.14); }

/* 12) Footer links */
.site-footer a{
  color: var(--violet-4);
  border-bottom-color: rgba(216,180,254,.5);
}

/* 13) Fleet Builder section-specific tints (optional; harmless if selectors absent) */
#bfv-app section[data-section="catalog"] { color: var(--violet-2); }
#bfv-app section[data-section="catalog"] h2 { color: var(--violet-4); }
#bfv-app section[data-section="drones"] { color: var(--violet-3); }
#bfv-app section[data-section="drones"] h2 { color: var(--violet-5); }
#bfv-app section[data-section="fleet"] { color: var(--violet-2); }
#bfv-app section[data-section="fleet"] h2 { color: var(--violet-6); }
#bfv-app #total { color: var(--violet-3); }
#bfv-app section[data-section="inventory"] { color: var(--violet-2); }
#bfv-app section[data-section="inventory"] h2 { color: var(--violet-5); }
#bfv-app #inv-have-list .name { color: var(--violet-3); }
#bfv-app #inv-miss-list .name { color: var(--violet-4); }