/* ============================================================
   RSHosting Theme Overlay for FOSSBilling (Huraga / Bootstrap5)
   - Dark + Light mode
   - Overrides huraga-bundle + markdown-bundle
   ============================================================ */

/* ---------- 0) Base tokens (defaults) ---------- */
:root{
  --rs-radius: 18px;
  --rs-radius-sm: 12px;
  --rs-shadow: 0 18px 60px rgba(0,0,0,.35);
  --rs-shadow-soft: 0 12px 34px rgba(0,0,0,.22);

  --rs-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --rs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Accent (piros) */
  --rs-accent: #DC2626;   /* red-600 */
  --rs-accent-h: #EF4444; /* red-500 */
  --rs-ring: rgba(239,68,68,.28);

  /* Light tokens (fallback) */
  --rs-bg0: #f7f8fb;
  --rs-bg1: #eef2f7;
  --rs-surface: rgba(255,255,255,.85);
  --rs-surface-2: rgba(255,255,255,.72);
  --rs-border: rgba(15,23,42,.12);
  --rs-text: rgba(15,23,42,.92);
  --rs-muted: rgba(15,23,42,.72);

  --rs-link: rgba(220,38,38,.95);
  --rs-link-h: rgba(185,28,28,.95);
}

/* ---------- 1) Dark mode tokens ---------- */
html[data-bs-theme="dark"],
body.dark{
  --rs-bg0:#050A14;
  --rs-bg1:#071225;

  --rs-surface: rgba(12,18,32,.78);
  --rs-surface-2: rgba(12,18,32,.55);

  --rs-border: rgba(255,255,255,.10);
  --rs-text: rgba(255,255,255,.92);
  --rs-muted: rgba(255,255,255,.70);

  --rs-link: rgba(248,113,113,.95);
  --rs-link-h: rgba(252,165,165,.95);
}

/* ---------- 2) Light mode tokens ---------- */
html[data-bs-theme="light"],
body.light{
  --rs-bg0: #f7f8fb;
  --rs-bg1: #eef2f7;

  --rs-surface: rgba(255,255,255,.90);
  --rs-surface-2: rgba(255,255,255,.75);

  --rs-border: rgba(15,23,42,.12);
  --rs-text: rgba(15,23,42,.92);
  --rs-muted: rgba(15,23,42,.72);

  --rs-link: rgba(220,38,38,.95);
  --rs-link-h: rgba(185,28,28,.95);
}

/* ---------- 3) Global reset-ish ---------- */
html, body{
  font-family: var(--rs-font-sans);
}

a{ color: var(--rs-link); }
a:hover{ color: var(--rs-link-h); }

hr{
  border-color: var(--rs-border) !important;
  opacity: 1 !important;
}

/* ---------- 4) Page background (dark gets RS gradient) ---------- */
body{
  color: var(--rs-text);
  background: linear-gradient(180deg, var(--rs-bg1), var(--rs-bg0));
}

html[data-bs-theme="dark"] body,
body.dark{
  background:
    radial-gradient(900px 500px at 18% 22%, rgba(239,68,68,.18), transparent 60%),
    radial-gradient(900px 500px at 78% 30%, rgba(59,130,246,.12), transparent 55%),
    linear-gradient(180deg, var(--rs-bg1), var(--rs-bg0));
}

/* ---------- 5) Bootstrap variables override (best-effort) ---------- */
html[data-bs-theme="dark"],
body.dark{
  --bs-body-bg: transparent;
  --bs-body-color: var(--rs-text);
  --bs-border-color: var(--rs-border);
  --bs-link-color: var(--rs-link);
  --bs-link-hover-color: var(--rs-link-h);
}

html[data-bs-theme="light"],
body.light{
  --bs-body-bg: transparent;
  --bs-body-color: var(--rs-text);
  --bs-border-color: var(--rs-border);
  --bs-link-color: var(--rs-link);
  --bs-link-hover-color: var(--rs-link-h);
}

/* ---------- 6) Layout container width like landing ---------- */
.navbar .container,
.navbar .container-fluid,
main, #main, .content, .content-wrapper,
.wrapper, .container{
  max-width: 1200px !important;
}

main, #main, .content, .content-wrapper{
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ---------- 7) Navbar (glass, sticky, landing-like) ---------- */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav.navbar{
  background: rgba(8,13,25,.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rs-border) !important;
}

html[data-bs-theme="light"] nav.navbar,
body.light nav.navbar{
  background: rgba(255,255,255,.70) !important;
}

.navbar.py-4{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.navbar-brand{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  margin-right: 18px !important;
}

.navbar a{
  color: color-mix(in srgb, var(--rs-text) 88%, transparent) !important;
  transition: all .15s ease;
}

.navbar a:hover{
  color: var(--rs-text) !important;
}

/* Align collapse to full width (your exact class chain) */
.navbar .collapse.navbar-collapse{
  width: 100% !important;
  flex: 1 1 auto !important;
}

.navbar .navbar-nav.me-auto.mb-2.mb-lg-0.w-100.d-flex.justify-content-end{
  width: 100% !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  align-items: center !important;
}

.navbar .nav-link{
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

.navbar .nav-link:hover{
  background: color-mix(in srgb, var(--rs-text) 6%, transparent) !important;
}

.navbar .nav-link.active,
.navbar .nav-item.active .nav-link{
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.18) !important;
  color: var(--rs-text) !important;
}

/* ---------- 8) Profile dropdown button (pill/glass) ---------- */
.navbar .dropdown > .btn.dropdown-toggle,
.navbar button.btn.dropdown-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap: 10px !important;

  background: color-mix(in srgb, var(--rs-text) 5%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--rs-text) 12%, transparent) !important;
  color: var(--rs-text) !important;

  padding: 8px 12px !important;
  border-radius: 999px !important;

  box-shadow: var(--rs-shadow-soft) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.navbar .dropdown > .btn.dropdown-toggle:hover,
.navbar button.btn.dropdown-toggle:hover{
  background: color-mix(in srgb, var(--rs-text) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--rs-text) 18%, transparent) !important;
  transform: translateY(-1px);
}

.navbar .dropdown > .btn.dropdown-toggle:focus,
.navbar button.btn.dropdown-toggle:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--rs-ring), var(--rs-shadow-soft) !important;
}

.navbar .dropdown-toggle img.rounded-circle,
.navbar .dropdown-toggle img{
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-text) 10%, transparent);
}

.navbar .dropdown-menu{
  background: color-mix(in srgb, var(--rs-surface) 92%, black 8%) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--rs-shadow) !important;
  overflow: hidden;
}

.navbar .dropdown-menu .dropdown-item{
  color: var(--rs-text) !important;
  padding: 10px 14px !important;
}

.navbar .dropdown-menu .dropdown-item:hover{
  background: color-mix(in srgb, var(--rs-text) 6%, transparent) !important;
}

/* ---------- 9) Sidebar (glass) ---------- */
.sidebar, aside, .client-menu, .sidebar-nav, .nav-sidebar{
  background: rgba(8,13,25,.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--rs-border) !important;
}

html[data-bs-theme="light"] .sidebar,
html[data-bs-theme="light"] aside,
body.light .sidebar,
body.light aside{
  background: rgba(255,255,255,.70) !important;
}

.sidebar a, .client-menu a, .sidebar-nav a, .nav-sidebar a{
  color: color-mix(in srgb, var(--rs-text) 82%, transparent) !important;
}

.sidebar a:hover, .client-menu a:hover, .sidebar-nav a:hover, .nav-sidebar a:hover{
  color: var(--rs-text) !important;
}

.sidebar .active > a,
.nav-sidebar .active > a,
.client-menu .active > a,
.sidebar a.active{
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.18) !important;
  border-radius: 12px !important;
}

/* ---------- 10) Cards / panels (core surface) ---------- */
.card, .panel, .widget, .content-box, .box, .well, .modal-content{
  background: var(--rs-surface) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--rs-shadow-soft) !important;
  color: var(--rs-text) !important;
}

.card-body, .panel-body{
  color: var(--rs-text) !important;
}

/* ---------- 11) Buttons (Bootstrap + generic) ---------- */
.btn, a.btn, button.btn, input.btn{
  border-radius: 14px !important;
  font-weight: 600;
}

.btn-primary, .btn.btn-primary{
  background: var(--rs-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-primary:hover, .btn.btn-primary:hover{
  background: var(--rs-accent-h) !important;
}

.btn-danger, .btn.btn-danger{
  background: var(--rs-accent) !important;
  border-color: transparent !important;
}

.btn-danger:hover, .btn.btn-danger:hover{
  background: var(--rs-accent-h) !important;
}

/* “soft” secondary */
.btn-secondary, .btn.btn-secondary,
.btn-outline-secondary, .btn.btn-outline-secondary{
  background: color-mix(in srgb, var(--rs-text) 6%, transparent) !important;
  border: 1px solid var(--rs-border) !important;
  color: var(--rs-text) !important;
}

.btn-secondary:hover, .btn.btn-secondary:hover,
.btn-outline-secondary:hover, .btn.btn-outline-secondary:hover{
  background: color-mix(in srgb, var(--rs-text) 10%, transparent) !important;
}

/* info button often used for “ticket” */
.btn-info, .btn.btn-info{
  background: rgba(56,189,248,.18) !important;
  border: 1px solid rgba(56,189,248,.25) !important;
  color: var(--rs-text) !important;
}
.btn-info:hover, .btn.btn-info:hover{
  background: rgba(56,189,248,.26) !important;
}

/* ---------- 12) Forms ---------- */
input, select, textarea, .form-control{
  background: color-mix(in srgb, var(--rs-text) 4%, transparent) !important;
  border: 1px solid var(--rs-border) !important;
  color: var(--rs-text) !important;
  border-radius: 14px !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus{
  outline: none !important;
  border-color: rgba(239,68,68,.55) !important;
  box-shadow: 0 0 0 4px var(--rs-ring) !important;
}

/* ---------- 13) Tables (Bootstrap .table white bg killer) ---------- */
table.table, .table{
  background: transparent !important;
  color: var(--rs-text) !important;
}

.table > :not(caption) > * > *{
  background: transparent !important;
  color: var(--rs-text) !important;
  border-color: var(--rs-border) !important;
}

.table thead th, .table thead td{
  background: color-mix(in srgb, var(--rs-text) 4%, transparent) !important;
  color: var(--rs-text) !important;
}

.table-hover > tbody > tr:hover > *{
  background: color-mix(in srgb, var(--rs-text) 5%, transparent) !important;
  color: var(--rs-text) !important;
}

.table-bordered > :not(caption) > *{
  border-color: var(--rs-border) !important;
}

.table-sm > :not(caption) > * > *{
  padding: .55rem .75rem !important;
}

/* ---------- 14) Badges / pills ---------- */
.badge, .label, .chip{
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.18) !important;
  color: var(--rs-text) !important;
  border-radius: 999px !important;
}

.badge-success, .badge.bg-success, .label-success{
  background: rgba(34,197,94,.14) !important;
  border: 1px solid rgba(34,197,94,.22) !important;
}

.badge-warning, .badge.bg-warning, .label-warning{
  background: rgba(245,158,11,.14) !important;
  border: 1px solid rgba(245,158,11,.22) !important;
}

.badge-danger, .badge.bg-danger, .label-danger{
  background: rgba(239,68,68,.16) !important;
  border: 1px solid rgba(239,68,68,.24) !important;
}

/* ---------- 15) Alerts (fixes your “Welcome to FOSSBilling” blue block) ---------- */
.alert{
  background: var(--rs-surface) !important;
  border: 1px solid var(--rs-border) !important;
  color: var(--rs-text) !important;
  border-radius: 16px !important;
  box-shadow: var(--rs-shadow-soft) !important;
}

.alert-info{
  /* Bootstrap uses CSS vars inside the bundle; override them too */
  --bs-alert-bg: rgba(59,130,246,.10) !important;
  --bs-alert-border-color: rgba(59,130,246,.18) !important;
  --bs-alert-color: var(--rs-text) !important;

  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.18) !important;
}

.alert-success{
  --bs-alert-bg: rgba(34,197,94,.10) !important;
  --bs-alert-border-color: rgba(34,197,94,.18) !important;
  --bs-alert-color: var(--rs-text) !important;
}

.alert-warning{
  --bs-alert-bg: rgba(245,158,11,.10) !important;
  --bs-alert-border-color: rgba(245,158,11,.18) !important;
  --bs-alert-color: var(--rs-text) !important;
}

.alert-danger{
  --bs-alert-bg: rgba(239,68,68,.10) !important;
  --bs-alert-border-color: rgba(239,68,68,.18) !important;
  --bs-alert-color: var(--rs-text) !important;
}

/* ---------- 16) Modal ---------- */
.modal-content{
  background: var(--rs-surface) !important;
}
.modal-header, .modal-footer{
  border-color: var(--rs-border) !important;
}

/* ---------- 17) Markdown bundle override (kills white GitHub background) ---------- */
.markdown-body{
  background-color: transparent !important; /* markdown-bundle sets #fff */
  color: var(--rs-text) !important;
  font-family: var(--rs-font-sans) !important;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6{
  color: var(--rs-text) !important;
  border-bottom-color: var(--rs-border) !important;
}

.markdown-body p, .markdown-body li, .markdown-body blockquote{
  color: color-mix(in srgb, var(--rs-text) 90%, transparent) !important;
}

.markdown-body blockquote{
  border-left-color: rgba(59,130,246,.25) !important;
  background: color-mix(in srgb, var(--rs-text) 4%, transparent) !important;
  border-radius: 12px;
  padding: 10px 14px;
}

.markdown-body a{
  color: #9cc3ff !important;
}
html[data-bs-theme="light"] .markdown-body a,
body.light .markdown-body a{
  color: rgba(220,38,38,.95) !important;
}

.markdown-body code{
  background: color-mix(in srgb, var(--rs-text) 6%, transparent) !important;
  color: var(--rs-text) !important;
  border-radius: 10px !important;
  padding: .12em .35em !important;
  font-family: var(--rs-font-mono) !important;
}

.markdown-body pre,
.markdown-body .highlight pre{
  background: rgba(0,0,0,.22) !important;
  color: var(--rs-text) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: var(--rs-shadow-soft) !important;
  font-family: var(--rs-font-mono) !important;
}

/* tables inside markdown */
.markdown-body table{
  background: transparent !important;
  color: var(--rs-text) !important;
}
.markdown-body table th,
.markdown-body table td{
  border-color: var(--rs-border) !important;
}

/* images look nicer on dark */
.markdown-body img{
  border-radius: 14px;
}

/* ---------- 18) Small finishing touches ---------- */
footer, .footer{
  color: var(--rs-muted) !important;
}
.small, small{
  color: var(--rs-muted) !important;
}

/* remove any forced white background utilities */
.bg-white, .bg-light{
  background: var(--rs-surface) !important;
  color: var(--rs-text) !important;
}

/* prevent svg sprite rendering as giant icons */
svg#icons, svg.svg-sprite, .d-none svg {
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  overflow: hidden !important;
}

/* theme toggler icons size */
.navbar .js-theme-toggler svg.icon,
.navbar .js-theme-toggler svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}

/* --- Theme toggler visibility (client) --- */
html[data-bs-theme="dark"] .hide-theme-dark { display: none !important; }
html[data-bs-theme="dark"] .hide-theme-light { display: inline-flex !important; }

html[data-bs-theme="light"] .hide-theme-light { display: none !important; }
html[data-bs-theme="light"] .hide-theme-dark { display: inline-flex !important; }

/* --- Space under sticky header --- */
main, #main, .content, .content-wrapper, section[role="main"]{
  padding-top: 22px !important;
}

.logo-dark { display:none; }

[data-bs-theme="dark"] .logo-light { display:none; }
[data-bs-theme="dark"] .logo-dark { display:inline-block; }