/* LeadOasis SaaS UI system */
:root {
  --primary-rgb: 65, 155, 68;
  --bs-primary: #419b44;
  --bs-primary-rgb: 65, 155, 68;
  --ls-bg: #f4f7fb;
  --ls-surface: #ffffff;
  --ls-surface-soft: #f8fafc;
  --ls-border: #e2e8f0;
  --ls-text: #0f172a;
  --ls-text-muted: #64748b;
  --ls-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --ls-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
  --ls-radius: 14px;
}

[data-theme-mode="dark"] {
  --ls-bg: #0b1220;
  --ls-surface: #111a2d;
  --ls-surface-soft: #0f172a;
  --ls-border: rgba(148, 163, 184, 0.22);
  --ls-text: #e2e8f0;
  --ls-text-muted: #94a3b8;
  --ls-shadow: 0 16px 36px rgba(2, 6, 23, 0.55);
  --ls-shadow-soft: 0 10px 24px rgba(2, 6, 23, 0.4);
}

html,
body {
  background: radial-gradient(circle at top right, rgba(65, 155, 68, 0.08), transparent 38%), var(--ls-bg) !important;
  color: var(--ls-text) !important;
}

body {
  letter-spacing: 0.01em;
}

.text-muted,
.form-text {
  color: var(--ls-text-muted) !important;
}

/* Header + sidebar shell */
.app-header {
  background: color-mix(in srgb, var(--ls-surface) 88%, transparent) !important;
  border-bottom: 1px solid var(--ls-border) !important;
  backdrop-filter: blur(8px);
}

.app-sidebar {
  border-right: 1px solid var(--ls-border);
  background: var(--ls-surface) !important;
}

.app-sidebar .main-sidebar-header {
  background: var(--ls-surface) !important;
  border-bottom: 1px solid var(--ls-border);
}

.app-sidebar .main-sidebar-header .header-logo,
.app-sidebar .main-sidebar-header .header-logo img,
.app-header .horizontal-logo .header-logo img {
  background: transparent !important;
}

.app-sidebar .main-sidebar-header .header-logo img,
.app-header .horizontal-logo .header-logo img {
  height: auto !important;
  line-height: normal !important;
  width: 160px !important;
  max-width: 100% !important;
}

.main-menu-container .side-menu__item {
  border-radius: 10px;
  margin: 2px 10px;
  color: var(--ls-text-muted);
}

.main-menu-container .side-menu__item.active,
.main-menu-container .side-menu__item:hover {
  color: var(--ls-text) !important;
  background: color-mix(in srgb, rgb(var(--primary-rgb)) 12%, transparent);
}

/* Keep sidebar text/icons readable even if menu style state changes */
.app-sidebar .side-menu__label,
.app-sidebar .side-menu__icon,
.app-sidebar .side-menu__item {
  color: var(--ls-text) !important;
  fill: var(--ls-text) !important;
}

.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .side-menu__item:hover .side-menu__label,
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__icon {
  color: var(--ls-text) !important;
  fill: var(--ls-text) !important;
}

/* Main content rhythm */
.main-content.app-content {
  padding-top: 1.15rem;
  padding-bottom: 1.5rem;
}

.page-header-breadcrumb {
  padding: 0.85rem 1rem;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  background: color-mix(in srgb, var(--ls-surface) 90%, transparent);
  box-shadow: var(--ls-shadow-soft);
}

.page-title {
  color: var(--ls-text) !important;
  font-size: 1.15rem !important;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ls-text-muted);
}

.breadcrumb-item a {
  color: var(--ls-text-muted);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--ls-text);
}

/* Cards, tables, forms */
.custom-card,
.card {
  background: var(--ls-surface) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius) !important;
  box-shadow: var(--ls-shadow-soft) !important;
}

.card-header {
  border-bottom: 1px solid var(--ls-border) !important;
  background: color-mix(in srgb, var(--ls-surface-soft) 72%, transparent) !important;
}

.card-title {
  color: var(--ls-text);
  letter-spacing: 0.01em;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ls-border);
  color: var(--ls-text);
}

.table > :not(caption) > * > * {
  padding: 0.9rem 0.85rem;
}

.table > thead > tr > th {
  color: var(--ls-text-muted);
  font-weight: 600;
  background: color-mix(in srgb, var(--ls-surface-soft) 80%, transparent);
  border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover > * {
  background: color-mix(in srgb, rgb(var(--primary-rgb)) 7%, transparent);
}

.form-control,
.form-select,
.input-group-text {
  border-color: var(--ls-border) !important;
  background: var(--ls-surface) !important;
  color: var(--ls-text) !important;
  border-radius: 10px !important;
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--ls-text-muted) 92%, transparent);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--primary-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15) !important;
}

/* Narrow field when paired with an action button in a flex row (e.g. Twilio area code). */
.form-control.area-code-input {
  width: 7rem;
  max-width: 100%;
  flex: 0 1 auto;
}

/* Buttons + badges */
.btn {
  border-radius: 10px !important;
  font-weight: 500;
}

.btn-primary {
  box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.24);
}

.btn-light {
  background: var(--ls-surface-soft) !important;
  border-color: var(--ls-border) !important;
  color: var(--ls-text) !important;
}

.btn-outline-secondary,
.btn-outline-primary {
  border-color: var(--ls-border);
}

.badge {
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Modals */
.modal-content {
  border-radius: 16px !important;
  border: 1px solid var(--ls-border) !important;
  background: var(--ls-surface) !important;
  box-shadow: var(--ls-shadow) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--ls-border) !important;
}

/* Alerts */
.alert {
  border-radius: 12px !important;
  border-width: 1px !important;
}

/* Authentication pages */
.authentication.authentication-basic {
  min-height: 100vh;
  background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--primary-rgb)) 14%, transparent), transparent 25%);
}

.authentication .auth-page-logo-wrap .desktop-logo,
.authentication .auth-page-logo-wrap .desktop-dark {
  height: auto !important;
  line-height: normal !important;
  width: 220px !important;
  max-width: 100% !important;
}

.authentication .card.custom-card {
  box-shadow: var(--ls-shadow) !important;
}

/* Footer */
.footer {
  border-top: 1px solid var(--ls-border);
  background: color-mix(in srgb, var(--ls-surface) 94%, transparent) !important;
}

/* Keep switcher hidden for cleaner SaaS feel */
#switcher-canvas {
  display: none !important;
}

/* Flex alignment for switches: avoids float + margin-top offset vs. label */
.form-check.form-switch.form-switch-aligned {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
  min-height: 0;
}

.form-check.form-switch.form-switch-aligned .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0;
}

.form-check.form-switch.form-switch-aligned .form-check-label {
  padding-top: 0;
  line-height: 1.35;
}

/* My data — "My leads" card: search + source + refresh stay one row (Bootstrap form controls are width:100% by default) */
.my-leads-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 17rem;
  justify-content: flex-end;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.my-leads-toolbar .my-leads-search {
  width: auto !important;
  min-width: 9rem;
  max-width: 22rem;
  flex: 1 1 11rem;
}

.my-leads-toolbar .my-leads-source-filter {
  width: auto !important;
  min-width: 8.5rem;
  max-width: 12rem;
  flex: 0 0 auto;
}

.my-leads-toolbar > .btn {
  flex: 0 0 auto;
}