/* ═══════════════════════════════════════════
   OpsPilot — Section Backgrounds & Themes
   Classi riutilizzabili per alternanza colori
   ═══════════════════════════════════════════ */

/* ─── Section Spacing ─── */
section {
  padding: 100px 0;
}

@media (max-width: 768px) {
  section { padding: 72px 0; }
}

/* ─── Background Classes ─── */
.bg-white  { background-color: #ffffff; }
.bg-alt    { background-color: #f8fafc; }
.bg-mist   { background-color: #eef2ff; }
.bg-navy   { background-color: #172a3a; }
.bg-deep   { background-color: #1e3a5f; }

/* ─── Accent Border Tops (per card / panel) ─── */
.accent-indigo {
  border-top: 4px solid #2563EB;
}

.accent-cyan {
  border-top: 4px solid #22D3EE;
}

.accent-navy {
  border-top: 4px solid #172a3a;
}

.accent-sky {
  border-top: 4px solid #38bdf8;
}

/* ─── Color Text Utilities ─── */
.color-indigo { color: #2563EB !important; }
.color-cyan   { color: #0891b2 !important; }
.color-navy   { color: #172a3a !important; }
.color-sky    { color: #0284c7 !important; }

/* ─── Card/Panel on colored backgrounds ─── */

/* Su bg-alt e bg-mist: card bianche */
.bg-alt .card, .bg-alt .panel,
.bg-mist .card, .bg-mist .panel {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.08);
  box-shadow: 0 4px 20px rgba(23, 42, 58, 0.06) !important;
}

/* Su bg-white: card con sfondo leggero */
.bg-white .card, .bg-white .panel {
  background: #f8fafc !important;
  border-color: rgba(37, 99, 235, 0.08);
  box-shadow: 0 4px 20px rgba(23, 42, 58, 0.05) !important;
}

/* ─── Dark Section Theming ─── */
.bg-navy,
.bg-deep {
  --line: rgba(255, 255, 255, 0.1);
  --muted: rgba(255, 255, 255, 0.65);
  --text: #ffffff;
  color: #ffffff;
}

.bg-navy h1, .bg-navy h2, .bg-navy h3,
.bg-deep h1, .bg-deep h2, .bg-deep h3 {
  color: #ffffff;
}

.bg-navy .section-title, .bg-deep .section-title { color: #ffffff; }
.bg-navy .section-sub, .bg-deep .section-sub { color: rgba(255, 255, 255, 0.7); }

.bg-navy .card, .bg-navy .panel,
.bg-deep .card, .bg-deep .panel {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bg-navy .card:hover, .bg-navy .panel:hover,
.bg-deep .card:hover, .bg-deep .panel:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.bg-navy .btn,
.bg-deep .btn {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

.bg-navy .btn:hover,
.bg-deep .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ─── Alt Section Subtle Separator ─── */
.bg-alt {
  border-top: 1px solid rgba(23, 42, 58, 0.06);
  border-bottom: 1px solid rgba(23, 42, 58, 0.06);
}

.bg-mist {
  border-top: 1px solid rgba(37, 99, 235, 0.06);
  border-bottom: 1px solid rgba(37, 99, 235, 0.06);
}

/* ─── Mobile: spazio tra title e cards ─── */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 40px;
  }
}