:root {
  --ss-primary: #4f46e5;
  --ss-primary-dark: #4338ca;
  --ss-accent: #0ea5e9;
  --ss-dark: #0f172a;
}

body { font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color: #1e293b; }

/* Public navbar */
.ss-navbar { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(6px); }
.ss-navbar .navbar-brand { font-weight: 800; letter-spacing: .5px; }
.ss-brand-dot { color: var(--ss-accent); }

/* Hero */
.ss-hero {
  background: linear-gradient(135deg, var(--ss-dark) 0%, #1e293b 55%, var(--ss-primary-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ss-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(14,165,233,.35), transparent 45%);
}
.ss-hero .container { position: relative; z-index: 2; }

/* Software cards */
.ss-card { border: 0; border-radius: 1rem; overflow: hidden; transition: transform .2s, box-shadow .2s; box-shadow: 0 6px 24px rgba(15,23,42,.08); }
.ss-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15,23,42,.16); }
.ss-card .ss-thumb { aspect-ratio: 16/9; object-fit: cover; width: 100%; background:#e2e8f0; }
.ss-badge-featured { background: var(--ss-accent); }

/* Detail banner */
.ss-detail-banner { aspect-ratio: 16/6; object-fit: cover; width: 100%; border-radius: 1rem; background:#e2e8f0; }

/* Module list */
.ss-module { border-left: 4px solid var(--ss-primary); background:#f8fafc; border-radius:.5rem; }
.ss-module .ss-module-icon { color: var(--ss-primary); }

/* Logo chip — keeps any uploaded logo visible on dark headers */
.ss-logo-chip { background:#fff; border-radius:8px; padding:4px 8px; display:inline-flex; align-items:center; line-height:0; }
.ss-logo-chip img { width:auto; display:block; }

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

/* Soft (tinted) variant — used by the top-navbar module switcher */
.btn-ss-soft { background: #eef2ff; color: var(--ss-primary); border-color: #c7d2fe; }
.btn-ss-soft:hover { background: #e0e7ff; color: var(--ss-primary-dark); }
.dropdown-item.active, .dropdown-item:active { background: var(--ss-primary); color:#fff; }
.dropdown-item.active .text-ss { color:#fff !important; }

.text-ss { color: var(--ss-primary) !important; }
.bg-ss { background: var(--ss-primary) !important; }

/* Admin sidebar */
.ss-sidebar { background: var(--ss-dark); min-height: 100vh; flex: 0 0 250px; width: 250px; }
/* Keep the main column from forcing the row wider (lets wide content scroll
   inside it instead of squeezing the sidebar). */
.ss-sidebar + div { min-width: 0; }
.ss-sidebar .nav-link { color: #cbd5e1; border-radius: .5rem; margin: 2px 8px; padding:.6rem .9rem; }
.ss-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.ss-sidebar .nav-link.active { background: var(--ss-primary); color:#fff; }
.ss-sidebar .nav-link i { width: 20px; }
.ss-admin-brand { color:#fff; font-weight: 800; }

footer.ss-footer { background: var(--ss-dark); color:#cbd5e1; }
footer.ss-footer a { color:#cbd5e1; text-decoration:none; }
footer.ss-footer a:hover { color:#fff; }