/* ─────────────────────────────────────────────────────────────
   Sityx brand override for FOSSBilling (Huraga theme)
   Loads AFTER huraga.css — only redefines Bootstrap 5.3's CSS
   custom properties + a handful of components. No template
   logic is touched; this is styling only.
   Source of truth for these values: sityx.com's src/index.css
───────────────────────────────────────────────────────────── */

:root,
[data-bs-theme="dark"] {
  --sityx-bg:      #0d0f14;
  --sityx-bg2:     #13161e;
  --sityx-surface: #1e2330;
  --sityx-surface2:#252b3b;
  --sityx-border:  rgba(255,255,255,0.08);
  --sityx-cyan:    #00e5ff;
  --sityx-purple:  #7c4dff;
  --sityx-green:   #00ff9d;
  --sityx-text:    #e8eaf0;
  --sityx-muted:   #7a8099;

  /* Bootstrap variables the whole theme is built on */
  --bs-body-bg:              var(--sityx-bg);
  --bs-body-bg-rgb:           13, 15, 20;
  --bs-body-color:            var(--sityx-text);
  --bs-body-font-family:      'Cairo', system-ui, -apple-system, sans-serif;
  --bs-emphasis-color:        #ffffff;
  --bs-secondary-color:       var(--sityx-muted);
  --bs-secondary-bg:          var(--sityx-surface);
  --bs-tertiary-bg:           var(--sityx-bg2);
  --bs-tertiary-color:        var(--sityx-muted);
  --bs-border-color:          var(--sityx-border);
  --bs-border-color-translucent: var(--sityx-border);
  --bs-heading-color:         #ffffff;
  --bs-link-color:            var(--sityx-cyan);
  --bs-link-color-rgb:        0, 229, 255;
  --bs-link-hover-color:      var(--sityx-purple);
  --bs-link-hover-color-rgb:  124, 77, 255;

  --bs-primary:               var(--sityx-cyan);
  --bs-primary-rgb:           0, 229, 255;
  --bs-primary-text-emphasis: var(--sityx-cyan);
  --bs-primary-bg-subtle:     rgba(0, 229, 255, 0.12);
  --bs-primary-border-subtle: rgba(0, 229, 255, 0.3);
}

body {
  background: var(--sityx-bg) !important;
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

a { text-decoration: none; }

/* ── Logo ─────────────────────────────────────────────────── */
.sityx-logo,
.sityx-logo:hover {
  text-decoration: none;
}
.sityx-logo-text {
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--sityx-cyan) 60%, var(--sityx-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  border-bottom: 1px solid var(--sityx-border);
}
.navbar .nav-link {
  color: var(--sityx-muted) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--sityx-text) !important;
}

/* ── Cards / panels (order wizard, forms, invoices...) ───── */
.card, .list-group-item, .dropdown-menu, .modal-content {
  background-color: var(--sityx-surface);
  border-color: var(--sityx-border);
}
.card-header, .card-footer {
  background-color: rgba(255,255,255,0.02);
  border-color: var(--sityx-border);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--sityx-cyan), var(--sityx-purple));
  border: none;
  color: #000;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, var(--sityx-cyan), var(--sityx-purple));
  color: #000;
  opacity: 0.9;
  box-shadow: none;
}
.btn-outline-primary {
  color: var(--sityx-cyan);
  border-color: var(--sityx-cyan);
}
.btn-outline-primary:hover {
  background: var(--sityx-cyan);
  color: #000;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select, .ts-wrapper .ts-control {
  background-color: var(--sityx-bg2) !important;
  border-color: var(--sityx-border);
  color: var(--sityx-text) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sityx-cyan);
  box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.15);
}
.form-control::placeholder { color: var(--sityx-muted); opacity: 1; }

/* ── Alerts (the homepage "Welcome to Sityx!" box, etc.) ─── */
.alert-info {
  background-color: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.25);
  color: var(--sityx-text);
}
.alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4 { color: #fff; }

/* ── Pricing / order tables ──────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sityx-text);
  --bs-table-border-color: var(--sityx-border);
}
.invoice-gateway {
  border-color: var(--sityx-border) !important;
}
.invoice-gateway:hover {
  border-color: var(--sityx-cyan) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
#footer, #footer a {
  color: var(--sityx-muted) !important;
}

/* ── Scrollbar (cosmetic touch matching sityx.com) ───────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sityx-bg); }
::-webkit-scrollbar-thumb { background: var(--sityx-surface2); border-radius: 3px; }
::selection { background: rgba(0, 229, 255, 0.2); }