/*
|--------------------------------------------------------------------------
| Squid Tech FOSSBilling Theme
| Safe visual layer only. Does not change backend logic, routes, macros, or forms.
|--------------------------------------------------------------------------
*/
:root {
  --st-bg: #05070b;
  --st-bg-soft: #0b1018;
  --st-card: #161920;
  --st-card-glass: rgba(22,25,32,.88);
  --st-border: rgba(255,255,255,.12);
  --st-blue: #00e5ff;
  --st-blue-hover: #00b8cc;
  --st-purple: #7c3cff;
  --st-text: #f7fbff;
  --st-muted: #aeb8c8;
  --st-glow: 0 0 28px rgba(0,229,255,.28);
  --st-shadow: 0 28px 90px rgba(0,0,0,.38);
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 7% 0%, rgba(0,229,255,.18), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(124,60,255,.26), transparent 36%),
    linear-gradient(180deg, #0f1115 0%, #0b1018 50%, #05070b 100%) !important;
  color: var(--st-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,229,255,.055), transparent 18%, transparent 82%, rgba(124,60,255,.07)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 72px);
}

a {
  color: var(--st-blue);
  text-decoration: none;
}

a:hover {
  color: var(--st-blue-hover);
}

/* Header */
header,
.navbar {
  background: rgba(8, 11, 16, .96) !important;
  border-bottom: 1px solid rgba(0,229,255,.18) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.32) !important;
}

nav.navbar {
  min-height: 104px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.navbar .container,
.navbar .container-fluid {
  max-width: 1280px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.navbar-brand {
  min-width: 245px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* This targets the company logo from /public/branding/logo.svg */
.navbar-brand img,
.navbar-brand img.d-none.d-sm-block,
.st-brand-img,
.st-header-logo-fullcolor {
  height: 82px !important;
  max-height: 82px !important;
  width: auto !important;
  max-width: 245px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.navbar-nav {
  gap: 8px;
}

.navbar-nav .nav-link {
  color: #dfe6f2 !important;
  font-weight: 800 !important;
  font-size: .97rem !important;
  padding: .72rem 1rem !important;
  border-radius: 999px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--st-blue) !important;
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(0,229,255,.08)) !important;
  box-shadow: 0 0 26px rgba(0,229,255,.14) !important;
}

.form-select,
.js-locale-selector {
  background: rgba(10,14,22,.88) !important;
  color: var(--st-text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
}

/* Main content */
.container {
  max-width: 1240px !important;
}

.content-block {
  color: var(--st-text) !important;
}

.content-block > .row {
  --bs-gutter-x: 1.35rem;
  --bs-gutter-y: 1.35rem;
}

.card,
.box,
.block,
.panel,
.modal-content,
.table-responsive,
.list-group {
  color: var(--st-text) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.024)),
    rgba(17,23,34,.94) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 24px !important;
  box-shadow: var(--st-shadow) !important;
  overflow: hidden;
}

.card:hover {
  border-color: rgba(0,229,255,.32) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.42), 0 0 32px rgba(0,229,255,.10) !important;
}

.card-header,
.card-footer,
.panel-heading,
.panel-footer {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: var(--st-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-header {
  color: var(--st-text) !important;
  letter-spacing: -.04em !important;
}

p,
.text-muted,
small {
  color: var(--st-muted) !important;
}

/* Buttons */
.btn {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.btn-primary,
.btn-success,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--st-blue), var(--st-blue-hover)) !important;
  border-color: var(--st-blue) !important;
  color: #001014 !important;
  box-shadow: var(--st-glow) !important;
}

.btn-secondary,
.btn-dark,
.btn-light,
.btn-outline-primary,
.btn-default,
.badge.bg-secondary {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--st-text) !important;
}

/* Forms and tables */
.form-control,
.form-select,
input,
select,
textarea {
  background: rgba(8,12,19,.92) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: var(--st-text) !important;
  border-radius: 15px !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0,229,255,.65) !important;
  box-shadow: 0 0 26px rgba(0,229,255,.22) !important;
}

.table {
  color: var(--st-text) !important;
  border-color: rgba(255,255,255,.13) !important;
}

.table th,
.table td {
  border-color: rgba(255,255,255,.13) !important;
}

/* Footer */
footer,
#footer {
  margin-top: 54px !important;
  padding: 28px 32px !important;
  background:
    radial-gradient(circle at top left, rgba(0,229,255,.08), transparent 36%),
    rgba(6,8,12,.94) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 80px rgba(0,0,0,.32) !important;
  color: var(--st-muted) !important;
}

footer a,
#footer a {
  color: var(--st-blue) !important;
  font-weight: 900 !important;
}

/* Optional visual replacement for powered-by link text */
footer a[href*="fossbilling"],
#footer a[href*="fossbilling"] {
  font-size: 0 !important;
  line-height: 0 !important;
}

footer a[href*="fossbilling"]::after,
#footer a[href*="fossbilling"]::after {
  content: "Squid Tech";
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--st-blue) !important;
  font-weight: 900 !important;
}

a[href="#top"].btn {
  min-height: 50px !important;
  padding-inline: 18px !important;
}

/* Mobile */
@media (max-width: 767.98px) {
  nav.navbar {
    min-height: 78px;
  }

  .navbar-brand {
    min-width: 170px !important;
  }

  .navbar-brand img,
  .navbar-brand img.d-none.d-sm-block,
  .st-brand-img,
  .st-header-logo-fullcolor {
    height: 58px !important;
    max-height: 58px !important;
    max-width: 170px !important;
  }

  .navbar-collapse {
    margin-top: 12px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(8,11,16,.98) !important;
  }
}
/* Squid Tech FossBilling sidebar/menu text visibility patch
   Purpose: make the left dashboard sidebar text readable.
*/

.offcanvas-md,
.offcanvas-md *,
.offcanvas-body,
.offcanvas-body *,
.nav.flex-column,
.nav.flex-column *,
.offcanvas-item,
.offcanvas-item *,
.sidebar,
.sidebar *,
[class*="sidebar"],
[class*="sidebar"] * {
  color: #f7fbff !important;
}

.offcanvas-md .nav-link,
.offcanvas-body .nav-link,
.nav.flex-column .nav-link,
.offcanvas-item .nav-link,
[class*="sidebar"] .nav-link {
  color: #f7fbff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.offcanvas-md .nav-link svg,
.offcanvas-body .nav-link svg,
.nav.flex-column .nav-link svg,
.offcanvas-item .nav-link svg,
[class*="sidebar"] svg {
  color: #00e5ff !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

.offcanvas-md .nav-link:hover,
.offcanvas-body .nav-link:hover,
.nav.flex-column .nav-link:hover,
.offcanvas-item .nav-link:hover,
[class*="sidebar"] .nav-link:hover {
  color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.10) !important;
}

.offcanvas-md .nav-link.active,
.offcanvas-body .nav-link.active,
.nav.flex-column .nav-link.active,
.offcanvas-item.active .nav-link,
[class*="sidebar"] .nav-link.active {
  color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.14) !important;
  box-shadow: inset 3px 0 0 #00e5ff !important;
}

.offcanvas-md h5,
.offcanvas-md h6,
.offcanvas-md span,
.offcanvas-body h5,
.offcanvas-body h6,
.offcanvas-body span,
.nav.flex-column h5,
.nav.flex-column h6,
.nav.flex-column span,
[class*="sidebar"] h5,
[class*="sidebar"] h6,
[class*="sidebar"] span {
  color: #f7fbff !important;
  opacity: 1 !important;
}

.offcanvas-md .text-secondary,
.offcanvas-md .text-muted,
.offcanvas-body .text-secondary,
.offcanvas-body .text-muted,
.nav.flex-column .text-secondary,
.nav.flex-column .text-muted,
[class*="sidebar"] .text-secondary,
[class*="sidebar"] .text-muted {
  color: #aeb8c8 !important;
  opacity: 1 !important;
}

/* Sidebar panel background refinement */
.offcanvas-md .offcanvas-body,
.offcanvas-body,
[class*="sidebar"] {
  background: linear-gradient(180deg, rgba(13, 19, 29, 0.92), rgba(7, 10, 16, 0.94)) !important;
}