/* Soft Solutions Client — branded client portal layer */
:root {
  --ss-navy: #071a33;
  --ss-navy-2: #0b2548;
  --ss-blue: #1687ff;
  --ss-cyan: #26c6ff;
  --ss-border: rgba(130, 177, 225, .16);
  --ss-card: #0b203b;
  --ss-card-2: #0e2949;
  --ss-text: #edf6ff;
  --ss-muted: #9eb3c9;
}

html[data-bs-theme="dark"] {
  --bs-body-bg: #06172d;
  --bs-body-color: var(--ss-text);
  --bs-secondary-color: var(--ss-muted);
  --bs-secondary-bg: #0b203b;
  --bs-tertiary-bg: #0e2949;
  --bs-border-color: var(--ss-border);
  --bs-primary: var(--ss-blue);
  --bs-primary-rgb: 22, 135, 255;
  --bs-link-color: #61b5ff;
  --bs-link-hover-color: #8dcbff;
  --bs-heading-color: #ffffff;
  --bs-card-bg: var(--ss-card);
  --bs-body-bg-rgb: 6, 23, 45;
}

html[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 85% 0%, rgba(22,135,255,.11), transparent 28rem),
    linear-gradient(180deg, #06172d 0%, #071b34 100%);
  color: var(--ss-text);
}

/* Main page shell */
.container > header .navbar,
.navbar {
  background: rgba(6, 23, 45, .92) !important;
  border-bottom: 1px solid var(--ss-border);
  backdrop-filter: blur(14px);
}

.container > header .navbar {
  border-radius: 0 0 16px 16px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.navbar-brand {
  min-height: 48px;
  font-weight: 700;
}

.navbar-brand img {
  max-height: 48px;
  filter: drop-shadow(0 4px 14px rgba(22,135,255,.18));
}

.navbar .nav-link {
  color: #c9daeb !important;
  border-radius: 9px;
  transition: .18s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
  background: rgba(22,135,255,.12);
}

/* Client sidebar / menu */
#sidebarMenu {
  background: transparent;
}

#sidebarMenu .offcanvas-body {
  padding: .75rem;
}

#sidebarMenu .nav {
  gap: .35rem;
}

#sidebarMenu .offcanvas-item {
  border: 0 !important;
  border-radius: 10px;
  overflow: hidden;
}

#sidebarMenu .offcanvas-item > a {
  color: #b8cbe0 !important;
  padding: .72rem .85rem;
}

#sidebarMenu .offcanvas-item:hover,
#sidebarMenu .offcanvas-item.active {
  background: rgba(22,135,255,.12);
}

#sidebarMenu .offcanvas-item.active > a {
  color: #fff !important;
  font-weight: 600;
}

#sidebarMenu .offcanvas-item.active .icon {
  color: var(--ss-cyan);
}

/* Cards */
.card {
  background: linear-gradient(145deg, rgba(11,32,59,.98), rgba(8,27,49,.98));
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
  overflow: hidden;
}

.card-header {
  background: rgba(14,41,73,.78) !important;
  border-bottom: 1px solid var(--ss-border);
  color: #fff;
}

.card-footer {
  background: rgba(7,26,51,.55);
  border-top: 1px solid var(--ss-border);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ss-text);
  --bs-table-border-color: var(--ss-border);
}

.table > :not(caption) > * > * {
  background: transparent;
  border-color: var(--ss-border);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(22,135,255,.06);
  color: #fff;
}

/* Forms */
.form-control,
.form-select,
.ts-control,
.ts-wrapper.form-select {
  background-color: #081c34 !important;
  color: #edf6ff !important;
  border-color: var(--ss-border) !important;
}

.form-control:focus,
.form-select:focus,
.ts-control:focus {
  border-color: rgba(38,198,255,.65) !important;
  box-shadow: 0 0 0 .2rem rgba(22,135,255,.13) !important;
}

.form-control::placeholder {
  color: #6f88a3;
}

.dropdown-menu {
  background: #0b203b;
  border: 1px solid var(--ss-border);
  box-shadow: 0 18px 45px rgba(0,0,0,.32);
}

.dropdown-item {
  color: #c9daeb;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff;
  background: rgba(22,135,255,.12);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--ss-blue);
  --bs-btn-border-color: var(--ss-blue);
  --bs-btn-hover-bg: #0875e5;
  --bs-btn-hover-border-color: #0875e5;
  box-shadow: 0 6px 18px rgba(22,135,255,.2);
}

.btn-outline-primary {
  --bs-btn-color: #69baff;
  --bs-btn-border-color: rgba(22,135,255,.55);
  --bs-btn-hover-bg: var(--ss-blue);
  --bs-btn-hover-border-color: var(--ss-blue);
}

.btn {
  border-radius: 9px;
}

/* Dashboard */
.dashboard h1,
.dashboard h2,
.dashboard h3,
.dashboard h4 {
  color: #fff;
}

.dashboard .card-title,
.dashboard .card-header h6 {
  color: #fff;
}

/* Breadcrumbs */
.breadcrumb {
  background: rgba(11,32,59,.65);
  border: 1px solid var(--ss-border);
  border-radius: 10px;
  padding: .65rem .85rem;
}

/* Alerts */
.alert {
  border-radius: 11px;
}

/* Login / signup / password reset */
.page-login,
.page-signup,
.page-password-reset {
  background:
    radial-gradient(circle at 50% 0%, rgba(22,135,255,.16), transparent 30rem),
    #06172d;
}

.page-login .card,
.page-signup .card,
.page-password-reset .card {
  border-color: rgba(38,198,255,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.page-login .card-header,
.page-signup .card-header,
.page-password-reset .card-header {
  background: linear-gradient(135deg, #0b2548, #0b315a) !important;
}

/* Invoice and payment emphasis */
.invoice-gateway {
  background: rgba(11,32,59,.65);
  border-radius: 12px;
}

.invoice-gateway:hover {
  box-shadow: 0 0 0 1px rgba(38,198,255,.2), 0 10px 30px rgba(0,0,0,.15);
}

/* Status badges */
.badge {
  border-radius: 999px;
}

/* Footer */
footer {
  color: #7f96ae;
  border-top: 1px solid var(--ss-border);
}

footer a {
  color: #8fcaff;
}

/* Mobile */
@media (max-width: 767.98px) {
  .container {
    width: 100%;
  }

  .container > header .navbar {
    border-radius: 0;
  }

  #sidebarMenu {
    background: #06172d;
  }

  .card {
    border-radius: 11px;
  }
}