/* ==========================================================================
   CAPA Glass Theme v1 — metallic / sleek / translucent skin
   --------------------------------------------------------------------------
   Loaded LAST on every page (after tokens.css, capa-theme.css and the
   page-specific stylesheet). Visual-only overrides: backgrounds, borders,
   shadows, blur, radii and typography. It must never change layout,
   positioning, display, opacity or transform of existing components —
   entrance animations (.chip, .service-card, .reveal…) rely on those.
   ========================================================================== */

/* === Glass tokens ======================================================= */
:root {
  /* Native controls (selects, date pickers, option lists, scrollbars)
     render in their dark UA variants to match the theme. */
  color-scheme: dark;
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-bg-purple: rgba(184, 136, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.55);
  --glass-shadow-hover: 0 26px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(184, 136, 255, 0.12);
  --glass-blur: blur(22px) saturate(160%);
  --glass-blur-light: blur(12px) saturate(140%);
  --metal-text: linear-gradient(180deg, #ffffff 0%, #e6e8ef 45%, #a9aeba 100%);
  --metal-purple-text: linear-gradient(180deg, #e8dcff 0%, var(--capa-purple) 55%, var(--capa-purple-700) 100%);
  --metal-edge: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.06) 30%,
    rgba(184, 136, 255, 0.18) 65%,
    rgba(255, 255, 255, 0.1)
  );
}

/* === Ambient stage ====================================================== */
/* Fixed, non-interactive glow field behind everything: gives the dark
   background depth so the translucent surfaces have something to refract. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55rem 40rem at 12% -8%, rgba(184, 136, 255, 0.16), transparent 60%),
    radial-gradient(45rem 35rem at 105% 15%, rgba(148, 88, 255, 0.12), transparent 65%),
    radial-gradient(40rem 32rem at 85% 105%, rgba(197, 243, 201, 0.06), transparent 60%),
    var(--capa-bg);
}

::selection {
  background: rgba(184, 136, 255, 0.35);
  color: var(--white);
}

/* Slim, unobtrusive scrollbars (WebKit + Firefox) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 136, 255, 0.35) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(184, 136, 255, 0.3);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* === Typography polish ================================================== */
h1, h2, h3,
.hero-title, .promo-text,
.services-hero-title, .about-hero-title,
.contact-hero-title, .login-hero-title,
.dashboard-title, .admin-title {
  letter-spacing: -0.02em;
}

/* Metallic display text: big titles get a machined-aluminium gradient. */
.hero-title,
.services-hero-title,
.about-hero-title,
.contact-hero-title,
.login-hero-title,
.promo-text,
.metallic-text {
  background: var(--metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--white); /* fallback if clip unsupported */
}

.promo-text .animated-word,
.purple-text {
  background: var(--metal-purple-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === Floating header: frosted bar ====================================== */
.floating-header {
  background: rgba(18, 15, 28, 0.62);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

.header-logo img {
  border-radius: var(--radius-md);
}

.menu-button {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text);
  box-shadow: var(--glass-highlight);
  transition: background var(--duration-fast) var(--easing-smooth),
    border-color var(--duration-fast) var(--easing-smooth);
}

.menu-button:hover,
.menu-button[aria-expanded="true"] {
  background: rgba(184, 136, 255, 0.18);
  border-color: rgba(184, 136, 255, 0.45);
}

.menu-icon span {
  background: var(--text);
}

.dropdown-menu {
  background: rgba(21, 18, 32, 0.78);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.dropdown-item {
  border-radius: var(--radius-md);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(184, 136, 255, 0.16);
}

.dropdown-divider {
  background: var(--glass-border);
}

/* === Buttons: polished pills =========================================== */
.hero-cta,
.submit-btn,
.join-them-btn,
.learn-more-btn {
  background: linear-gradient(180deg, var(--capa-purple) 0%, var(--capa-purple-700) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 28px -12px rgba(148, 88, 255, 0.65);
  color: #17111f;
  font-weight: 600;
}

.hero-cta:hover,
.submit-btn:hover,
.join-them-btn:hover,
.learn-more-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 16px 36px -12px rgba(148, 88, 255, 0.85);
  filter: brightness(1.06);
}

.hero-cta-secondary {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  box-shadow: var(--glass-highlight);
}

.hero-cta-secondary:hover {
  background: rgba(184, 136, 255, 0.16);
  border-color: rgba(184, 136, 255, 0.45);
  filter: none;
}

.btn {
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(180deg, var(--capa-purple) 0%, var(--capa-purple-700) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 20px -10px rgba(148, 88, 255, 0.6);
}

.btn-secondary {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  box-shadow: var(--glass-highlight);
}

.btn-secondary:hover {
  background: rgba(184, 136, 255, 0.16);
}

.btn-danger {
  background: linear-gradient(180deg, #ff7b93 0%, #e14b68 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 20px -10px rgba(225, 75, 104, 0.55);
}

.model-btn {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  box-shadow: var(--glass-highlight);
}

.model-btn:hover,
.model-btn.active {
  background: rgba(184, 136, 255, 0.2);
  border-color: rgba(184, 136, 255, 0.5);
}

/* === Glass surfaces ===================================================== */
/* Marketing cards */
.chip,
.story-section,
.feature-gif,
.service-card,
.faq-item,
.model-container,
.mission-right,
.trusted-by,
/* Auth + contact */
.login-box,
.contact-form,
.contact-info,
/* App dashboards */
.card,
.panel,
.admin-form,
/* Generic utility for new sections */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-xl);
}

.chip:hover,
.service-card:hover,
.feature-gif:hover,
.card:hover,
.panel:hover,
.glass-card:hover {
  border-color: rgba(184, 136, 255, 0.4);
  box-shadow: var(--glass-highlight), var(--glass-shadow-hover);
}

/* Service cards were white in the original theme — force dark-glass text */
.service-card,
.service-card h3,
.service-card p {
  color: var(--text);
}
.service-card h3 {
  color: var(--capa-purple-200);
}

.metric-pill {
  background: var(--glass-bg-purple);
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}

.metric-pill:hover {
  border-color: rgba(184, 136, 255, 0.45);
}

.faq-question {
  color: var(--text);
}

.faq-item {
  overflow: hidden;
}

/* === Dashboard components (styled inline in dashboard/admin HTML) ====== */
/* This file loads after those inline <style> blocks, so equal-specificity
   overrides here win the cascade. */
.main-dashboard-tabs {
  background: rgba(18, 15, 28, 0.62);
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
  border-bottom: 1px solid var(--glass-border);
}

.main-tab-btn,
.tab-btn {
  color: var(--muted);
}

.main-tab-btn:hover,
.tab-btn:hover {
  background: rgba(184, 136, 255, 0.1);
  color: var(--text);
}

.main-tab-btn.active,
.tab-btn.active {
  color: var(--capa-purple);
}

.toast {
  background: rgba(21, 18, 32, 0.92);
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.stat-card,
.metric-card,
.user-metric-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}

.metric-card h3,
.metric-card h4,
.user-metric-card h3 {
  color: rgba(233, 236, 242, 0.72);
}

/* Elements that had no visible box before this skin gave them a glass
   surface — they now need breathing room between border and content. */
.story-section,
.mission-right,
.model-container {
  padding: var(--spacing-xl);
}

.admin-form {
  padding: var(--spacing-lg);
}

/* Campaign performance table (dashboard) — was light-themed */
.dashboard-table th {
  background: rgba(184, 136, 255, 0.1);
  color: var(--capa-purple-200);
  border-bottom: 1px solid var(--glass-border-strong);
}

.dashboard-table td {
  color: var(--text-light);
  border-bottom: 1px solid var(--glass-border);
}

.chart-container h3 {
  color: var(--text);
}

#custom-date-picker {
  color: var(--text);
}

/* Admin modals (device assignment) — were white with dark text */
.modal-content {
  background: rgba(23, 19, 32, 0.97);
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.modal-header {
  border-bottom-color: var(--glass-border);
}

.modal-header h3 {
  color: var(--text);
}

.device-list-section h4 {
  color: var(--capa-purple-200);
}

.device-list {
  border-color: var(--glass-border-strong);
}

.device-item {
  background: rgba(255, 255, 255, 0.05);
}

.device-item.assigned {
  background: rgba(184, 136, 255, 0.16);
}

.device-info,
.device-info strong {
  color: var(--text);
}

.owner-user {
  background: rgba(184, 136, 255, 0.16);
  color: var(--capa-purple-200);
}

.data-table th {
  background: rgba(184, 136, 255, 0.1);
  color: var(--capa-purple-200);
  border-bottom: 1px solid var(--glass-border-strong);
}

.data-table td {
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-light);
}

.data-table tr:hover {
  background: rgba(184, 136, 255, 0.06);
}

/* === Forms: etched glass inputs ======================================== */
/* Element-level defaults catch class-less inputs (admin inline forms,
   restriction pickers). Class-based rules keep higher specificity. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"],
select,
textarea,
.form-input,
.form-select,
.form-group input,
.form-group select,
.form-group textarea,
.dropdown-search {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: border-color var(--duration-fast) var(--easing-smooth),
    box-shadow var(--duration-fast) var(--easing-smooth);
}

.form-input:focus,
.form-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.dropdown-search:focus {
  border-color: rgba(184, 136, 255, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(184, 136, 255, 0.18);
  outline: none;
}

.form-input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.dropdown-search::placeholder {
  color: rgba(233, 236, 242, 0.45);
}

.dropdown-box,
.dropdown-options {
  background: rgba(21, 18, 32, 0.85);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-strong);
}

/* === Tables (admin + dashboard) ======================================== */
.table-container {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
}

.admin-table th {
  background: rgba(184, 136, 255, 0.1);
  color: var(--capa-purple-200);
  border-bottom: 1px solid var(--glass-border-strong);
}

.admin-table td {
  border-bottom: 1px solid var(--glass-border);
}

.admin-table tr:hover td {
  background: rgba(184, 136, 255, 0.06);
}

/* === Maps & media ======================================================= */
.map-container,
.map-column,
#map {
  border-radius: var(--radius-xl);
}

.map-column,
.map-container {
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.leaflet-popup-content-wrapper {
  background: rgba(21, 18, 32, 0.88) !important;
  -webkit-backdrop-filter: var(--glass-blur-light);
  backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border-strong);
  color: var(--text) !important;
  border-radius: var(--radius-lg) !important;
}

.leaflet-popup-tip {
  background: rgba(21, 18, 32, 0.88) !important;
}

/* === Footer: brushed dark metal ======================================== */
.site-footer {
  background: linear-gradient(180deg, rgba(24, 20, 36, 0.9), rgba(15, 15, 19, 0.98));
  border-top: 1px solid var(--glass-border);
  color: var(--text-light);
}

.site-footer a {
  color: var(--capa-purple-200);
}

/* Promo band: was a flat bright-purple slab — restyle as a dark glass band
   with a purple aurora so the metallic headline text keeps its contrast. */
.promo-band {
  background:
    radial-gradient(50rem 20rem at 50% 120%, rgba(148, 88, 255, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(24, 20, 36, 0.85), rgba(15, 15, 19, 0.95));
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

/* === CTA bands (replaces inline solid-purple sections) ================= */
.cta-band {
  position: relative;
  background:
    radial-gradient(40rem 22rem at 20% 0%, rgba(184, 136, 255, 0.28), transparent 60%),
    linear-gradient(135deg, rgba(148, 88, 255, 0.35), rgba(122, 60, 220, 0.18));
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  color: var(--white);
}

.cta-band h2 {
  color: var(--white);
}

/* === Feature band (homepage / services selling sections) =============== */
.feature-band {
  padding: var(--spacing-3xl) var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
}

.feature-band-header {
  max-width: 720px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--glass-bg-purple);
  border: 1px solid rgba(184, 136, 255, 0.35);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-lg);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--capa-purple-200);
  margin-bottom: var(--spacing-lg);
}

.feature-band-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: var(--spacing-md);
}

.feature-band-header p {
  color: var(--text-light);
  font-size: 1.05rem;
  line-height: 1.6;
}

.feature-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.glass-feature-card {
  position: relative;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.glass-feature-card h3 {
  font-size: 1.15rem;
  color: var(--white);
  margin: 0;
}

.glass-feature-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.feature-stat {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--metal-purple-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-icon-tile {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-purple);
  border: 1px solid rgba(184, 136, 255, 0.35);
  box-shadow: var(--glass-highlight);
  color: var(--capa-purple-200);
  margin-bottom: var(--spacing-xs);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border-radius: var(--radius-full);
  padding: 0.2em 0.8em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.badge-premium {
  background: linear-gradient(135deg, rgba(255, 214, 130, 0.25), rgba(255, 178, 80, 0.12));
  border: 1px solid rgba(255, 205, 130, 0.5);
  color: #ffd68a;
}

.badge-new {
  background: linear-gradient(135deg, rgba(197, 243, 201, 0.22), rgba(197, 243, 201, 0.08));
  border: 1px solid rgba(197, 243, 201, 0.45);
  color: var(--accent-green);
}

/* === Section de-whitening ============================================== */
/* Several sections still carried the original light theme's solid slabs.
   Let the ambient dark stage show through instead. */
.services-grid,
.faq-section {
  background: transparent;
}

.faq-question,
.faq-question span {
  color: var(--text);
}

.faq-answer-content,
.faq-answer-content p {
  color: var(--text-light);
}

.faq-icon {
  color: var(--capa-purple-200);
}

.faq-item {
  padding: 0 var(--spacing-lg);
}

/* 3D model stage: dark metal plinth instead of a white void */
.model-viewer {
  background:
    radial-gradient(30rem 18rem at 50% 30%, rgba(184, 136, 255, 0.12), transparent 70%),
    var(--capa-surface-alt);
  border: 1px solid var(--glass-border-strong);
}

/* Map placeholders: dark until Leaflet tiles paint over them */
.map-column,
.map-container,
#map {
  background: var(--capa-surface-alt);
}

/* Client logo wall: keep near-white so third-party logos stay legible,
   but frame it like a frosted panel instead of a flat slab */
.client-logos-grid {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow);
}

/* === Mobile layout hygiene ============================================= */
/* The one deliberate layout exception in this file: pre-existing mobile
   overflow bugs. Off-screen entrance transforms (index chips) and unwrapped
   wide tables (admin) made pages horizontally pannable. Wide tables scroll
   inside their own container; the page itself never pans sideways —
   the same pattern dashboard.html already uses inline. */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .data-table,
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === Mobile inputs ====================================================== */
/* capa-theme.css forces white inputs with !important on small screens; keep
   the etched dark-glass inputs consistent on mobile (contrast is preserved:
   light text on near-black wells with a bright focus ring). */
@media (max-width: 768px) {
  .form-group input,
  .form-input,
  .form-select,
  .form-group select,
  .form-group textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    background: rgba(0, 0, 0, 0.35) !important;
    color: var(--text) !important;
    border: 1px solid var(--glass-border-strong) !important;
  }

  .form-group input:focus,
  .form-input:focus,
  .form-select:focus,
  input:focus,
  select:focus,
  textarea:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--text) !important;
    border-color: rgba(184, 136, 255, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(184, 136, 255, 0.2) !important;
  }
}

/* === Fallback for browsers without backdrop-filter ===================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-header {
    background: rgba(18, 15, 28, 0.96);
  }
  .dropdown-menu,
  .dropdown-box,
  .dropdown-options,
  .leaflet-popup-content-wrapper {
    background: #171320 !important;
  }
  .chip,
  .story-section,
  .feature-gif,
  .service-card,
  .faq-item,
  .model-container,
  .mission-right,
  .trusted-by,
  .login-box,
  .contact-form,
  .contact-info,
  .card,
  .panel,
  .admin-form,
  .glass-card {
    background: var(--capa-surface);
  }
}