/* ================================================================
   SyncCAD App Theme — Matches synccad.com Design System
   Black · White · Blue (#0071e3)
   Font: Poppins (same as homepage)
   ================================================================ */

/* ── 1. DESIGN TOKENS (mirrors synccad.com :root) ─────────────── */
:root {
  --sc-black:    #000000;
  --sc-dark:     #1d1d1f;
  --sc-mid:      #6e6e73;
  --sc-soft:     #a1a1a6;
  --sc-white:    #ffffff;
  --sc-bg:       #f5f5f7;
  --sc-surface:  #ffffff;
  --sc-surface2: #fafafa;
  --sc-border:   rgba(0,0,0,0.08);
  --sc-border-s: rgba(0,0,0,0.13);
  --sc-accent:   #0071e3;
  --sc-accent-h: #0077ed;
  --sc-accent-bg:rgba(0,113,227,0.08);
  --sc-accent-bg2:rgba(0,113,227,0.14);
  --sc-red:      #ff3b30;
  --sc-green:    #34c759;
  --sc-orange:   #ff9500;
  --sc-font:     'Poppins', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sc-r:        12px;
  --sc-r-sm:     8px;
  --sc-r-lg:     18px;
  --sc-s1:       0 1px 3px rgba(0,0,0,0.05);
  --sc-s2:       0 2px 10px rgba(0,0,0,0.07);
  --sc-s3:       0 8px 30px rgba(0,0,0,0.10);
  --sc-ease:     cubic-bezier(0.4,0,0.2,1);
  --sc-dur:      0.18s;
  --topbar-h:    56px;
  --sidebar-w:   220px;
}

/* ── 2. FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html, body, * {
  font-family: var(--sc-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── 3. GLOBAL BASE ───────────────────────────────────────────── */
body.loggedin {
  background: var(--sc-bg) !important;
  color: var(--sc-dark) !important;
}

/* ── 4. TOPBAR ────────────────────────────────────────────────── */
.topbar,
.fix-header .topbar {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--sc-border) !important;
  box-shadow: none !important;
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  position: fixed !important;
  width: 100% !important;
  z-index: 100 !important;
  top: 0 !important;
}
.topbar .top-navbar,
.topbar .navbar {
  min-height: var(--topbar-h) !important;
  height: var(--topbar-h) !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Brand / Logo area */
.topbar .top-navbar .navbar-header {
  height: var(--topbar-h) !important;
  width: var(--sidebar-w) !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 20px !important;
  border-right: 1px solid var(--sc-border) !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}
.topbar .sc-brand,
.topbar .top-navbar .navbar-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important; margin: 0 !important;
  height: var(--topbar-h) !important;
  text-decoration: none !important;
}
/* Hide logo images — show text brand only */
.topbar .sc-logo-img,
.topbar .fn-logo-img { display: none !important; }

.topbar .sc-brand-text,
.topbar .top-navbar .navbar-header .navbar-brand b {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: var(--sc-dark) !important;
  line-height: 1 !important;
}

/* Topbar nav items */
.topbar .navbar-nav.mr-auto {
  display: flex !important;
  align-items: center !important;
}
.topbar .main-hamburger-menu { order: -1 !important; }
.topbar .top-search-bar {
  order: 1 !important;
  max-width: 260px !important;
}
.topbar .top-search-container {
  display: flex !important;
  align-items: center !important;
  background: var(--sc-bg) !important;
  border: 1px solid var(--sc-border-s) !important;
  border-radius: 100px !important;
  padding: 0 14px !important;
  height: 34px !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.topbar .top-search-container i {
  color: var(--sc-mid) !important;
  font-size: 13px !important;
}
.topbar .top-search-container input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--sc-dark) !important;
  width: 150px !important;
}
.topbar .top-search-container input::placeholder { color: var(--sc-mid) !important; }

/* Topbar action icons */
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
.topbar .top-navbar .navbar-nav .nav-item .nav-link {
  color: var(--sc-mid) !important;
  font-size: 17px !important;
  line-height: var(--topbar-h) !important;
  padding: 0 10px !important;
  background: none !important;
  transition: color var(--sc-dur) !important;
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--sc-accent) !important;
  background: none !important;
}
.topbar .top-navbar .navbar-nav > .nav-item > span {
  color: var(--sc-mid) !important;
  line-height: var(--topbar-h) !important;
}

/* Profile pill */
.topbar .profile-pic,
.topbar .u-pro {
  border-left: 1px solid var(--sc-border) !important;
  padding-left: 12px !important;
  margin-left: 4px !important;
}
.topbar .profile-pic img,
.topbar .u-pro img {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--sc-border-s) !important;
}
.topbar .profile-pic span,
.topbar .u-pro span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-dark) !important;
}

/* Create (+) button */
.topbar .btn-circle,
.topbar .create-new-button .btn {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
  color: #fff !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important;
  transition: background var(--sc-dur) !important;
}
.topbar .btn-circle:hover,
.topbar .create-new-button .btn:hover {
  background: var(--sc-accent-h) !important;
}

/* ── 5. LEFT SIDEBAR ──────────────────────────────────────────── */
.left-sidebar,
.fix-sidebar .left-sidebar,
body.fix-sidebar .left-sidebar,
body.loggedin .left-sidebar {
  background: var(--sc-surface) !important;
  border-right: 1px solid var(--sc-border) !important;
  box-shadow: none !important;
  width: var(--sidebar-w) !important;
  padding-top: var(--topbar-h) !important;
}
.scroll-sidebar { background: var(--sc-surface) !important; }

/* Sidebar spacing */
body:not(.mini-sidebar) .left-sidebar,
body:not(.mini-sidebar) .scroll-sidebar { width: var(--sidebar-w) !important; }
body.mini-sidebar .left-sidebar { width: 60px !important; }
body.mini-sidebar .page-wrapper { margin-left: 60px !important; }
body.mini-sidebar .sidebar-nav .hide-menu,
body.mini-sidebar .sidebar-nav .has-arrow::after { display: none !important; }

/* ── 6. SIDEBAR NAV ───────────────────────────────────────────── */
.sidebar-nav { background: var(--sc-surface) !important; padding: 10px 0 !important; }

/* Nav item */
.sidebar-nav .sidenav-menu-item > a,
.sidebar-nav ul li a,
.sidebar-nav .sidenav-menu-item .sidenav-submenu a {
  font-family: var(--sc-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sc-mid) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  border-radius: var(--sc-r-sm) !important;
  margin: 1px 8px !important;
  transition: background var(--sc-dur), color var(--sc-dur) !important;
  text-decoration: none !important;
  background: none !important;
}
.sidebar-nav .sidenav-menu-item > a:hover,
.sidebar-nav ul li a:hover {
  background: var(--sc-bg) !important;
  color: var(--sc-dark) !important;
}

/* Active state */
.sidebar-nav .sidenav-menu-item.active > a,
.sidebar-nav .sidenav-menu-item .active,
.sidebar-nav li.active > a {
  background: var(--sc-accent-bg) !important;
  color: var(--sc-accent) !important;
  font-weight: 500 !important;
}
.sidebar-nav .sidenav-menu-item.active > a i,
.sidebar-nav li.active > a i { color: var(--sc-accent) !important; }

/* Icons */
.sidebar-nav i,
.sidebar-nav .ti-icon, .sidebar-nav [class^="ti-"],
.sidebar-nav [class*=" ti-"] {
  font-size: 16px !important;
  color: inherit !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Submenu */
.sidebar-nav .sidenav-submenu a {
  font-size: 12.5px !important;
  padding: 7px 14px 7px 46px !important;
  margin: 0 8px !important;
  color: var(--sc-mid) !important;
}
.sidebar-nav .sidenav-submenu a.active,
.sidebar-nav .sidenav-submenu a:hover {
  color: var(--sc-accent) !important;
  background: var(--sc-accent-bg) !important;
}

/* Arrow for collapsible */
.sidebar-nav .has-arrow::after {
  border-color: var(--sc-soft) !important;
  margin-left: auto !important;
}

/* ── 7. PAGE WRAPPER ──────────────────────────────────────────── */
.page-wrapper {
  margin-left: var(--sidebar-w) !important;
  margin-top: var(--topbar-h) !important;
  background: var(--sc-bg) !important;
  min-height: calc(100vh - var(--topbar-h)) !important;
}
.fix-header .page-wrapper { padding-top: var(--topbar-h) !important; }

/* ── 8. CARDS ─────────────────────────────────────────────────── */
.card,
.white-box,
.panel,
.card-body {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-r) !important;
  box-shadow: var(--sc-s1) !important;
}
.card-header,
.card .card-header {
  background: var(--sc-surface) !important;
  border-bottom: 1px solid var(--sc-border) !important;
  font-weight: 600 !important;
  color: var(--sc-dark) !important;
  font-size: 14px !important;
  border-radius: var(--sc-r) var(--sc-r) 0 0 !important;
}

/* ── 9. BUTTONS ───────────────────────────────────────────────── */
.btn-primary,
.btn-info,
.btn-themecolor,
.btn-theme,
button[type="submit"].btn {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: 100px !important;
  padding: 7px 20px !important;
  transition: background var(--sc-dur) !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-info:hover,
.btn-themecolor:hover, .btn-theme:hover {
  background: var(--sc-accent-h) !important;
  border-color: var(--sc-accent-h) !important;
}

.btn-secondary, .btn-default, .btn-light, .btn-outline-secondary {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border-s) !important;
  color: var(--sc-dark) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: 100px !important;
  padding: 7px 20px !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
  background: var(--sc-bg) !important;
  border-color: var(--sc-border-s) !important;
}

.btn-danger { background: var(--sc-red) !important; border-color: var(--sc-red) !important; color: #fff !important; border-radius: 100px !important; }
.btn-success { background: var(--sc-green) !important; border-color: var(--sc-green) !important; color: #fff !important; border-radius: 100px !important; }
.btn-warning { background: var(--sc-orange) !important; border-color: var(--sc-orange) !important; color: #fff !important; border-radius: 100px !important; }

/* Small buttons */
.btn-sm { padding: 4px 14px !important; font-size: 12px !important; }
.btn-xs { padding: 2px 10px !important; font-size: 11px !important; }

/* ── 10. FORMS ────────────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
select, textarea {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border-s) !important;
  border-radius: var(--sc-r-sm) !important;
  color: var(--sc-dark) !important;
  font-size: 13.5px !important;
  font-family: var(--sc-font) !important;
  padding: 8px 12px !important;
  transition: border-color var(--sc-dur), box-shadow var(--sc-dur) !important;
  box-shadow: none !important;
  height: auto !important;
}
.form-control:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, select:focus, textarea:focus {
  border-color: var(--sc-accent) !important;
  box-shadow: 0 0 0 3px var(--sc-accent-bg) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--sc-soft) !important; }

label, .control-label, .col-form-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--sc-dark) !important;
  letter-spacing: 0.01em !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border-s) !important;
  border-radius: var(--sc-r-sm) !important;
  height: auto !important;
  min-height: 38px !important;
  display: flex !important; align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sc-dark) !important;
  font-size: 13.5px !important;
  line-height: normal !important;
  padding-left: 12px !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--sc-accent) !important;
  box-shadow: 0 0 0 3px var(--sc-accent-bg) !important;
}
.select2-dropdown {
  border: 1px solid var(--sc-border-s) !important;
  border-radius: var(--sc-r-sm) !important;
  box-shadow: var(--sc-s2) !important;
  background: var(--sc-surface) !important;
}
.select2-container--default .select2-results__option {
  font-size: 13px !important;
  color: var(--sc-dark) !important;
  padding: 8px 12px !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--sc-accent) !important;
  color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--sc-border-s) !important;
  border-radius: var(--sc-r-sm) !important;
  font-size: 13px !important;
}

/* ── 11. TABLES ───────────────────────────────────────────────── */
.table, table {
  background: transparent !important;
  font-size: 13px !important;
  color: var(--sc-dark) !important;
}
.table thead th, table thead th {
  background: var(--sc-bg) !important;
  color: var(--sc-mid) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 10px 14px !important;
  border-top: none !important;
}
.table tbody tr, table tbody tr {
  border-bottom: 1px solid var(--sc-border) !important;
  transition: background var(--sc-dur) !important;
}
.table tbody tr:hover, table tbody tr:hover {
  background: var(--sc-accent-bg) !important;
}
.table tbody td, table tbody td {
  padding: 11px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  color: var(--sc-dark) !important;
}

/* ── 12. BADGES & PILLS ───────────────────────────────────────── */
.badge, .label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
  letter-spacing: 0.02em !important;
}
.badge-primary, .label-primary, .badge-info, .label-info {
  background: var(--sc-accent-bg) !important;
  color: var(--sc-accent) !important;
}
.badge-success, .label-success {
  background: rgba(52,199,89,0.12) !important;
  color: #248a3d !important;
}
.badge-danger, .label-danger {
  background: rgba(255,59,48,0.12) !important;
  color: var(--sc-red) !important;
}
.badge-warning, .label-warning {
  background: rgba(255,149,0,0.12) !important;
  color: #b25a00 !important;
}
.badge-secondary, .label-default, .badge-default {
  background: var(--sc-bg) !important;
  color: var(--sc-mid) !important;
}

/* ── 13. MODALS ───────────────────────────────────────────────── */
.modal-content {
  background: var(--sc-surface) !important;
  border: none !important;
  border-radius: var(--sc-r-lg) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
.modal-header {
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 18px 24px !important;
  background: transparent !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sc-dark) !important;
}
.modal-body { padding: 20px 24px !important; }
.modal-footer {
  border-top: 1px solid var(--sc-border) !important;
  padding: 14px 24px !important;
  background: transparent !important;
}
.close, .btn-close {
  color: var(--sc-mid) !important;
  opacity: 0.7 !important;
  font-size: 18px !important;
}
.close:hover { opacity: 1 !important; color: var(--sc-dark) !important; }

/* Modal backdrop */
.modal-backdrop { backdrop-filter: blur(4px) !important; }

/* ── 14. DROPDOWNS ────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-r) !important;
  box-shadow: var(--sc-s3) !important;
  padding: 6px !important;
}
.dropdown-item {
  font-size: 13px !important;
  color: var(--sc-dark) !important;
  border-radius: var(--sc-r-sm) !important;
  padding: 7px 12px !important;
  transition: background var(--sc-dur) !important;
}
.dropdown-item:hover {
  background: var(--sc-bg) !important;
  color: var(--sc-dark) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--sc-accent) !important;
  color: #fff !important;
}
.dropdown-divider {
  border-color: var(--sc-border) !important;
  margin: 4px 0 !important;
}
.dropdown-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sc-soft) !important;
  padding: 6px 12px 4px !important;
}

/* ── 15. ALERTS ───────────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: var(--sc-r-sm) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
.alert-info, .alert-primary {
  background: var(--sc-accent-bg) !important;
  color: var(--sc-accent) !important;
}
.alert-success { background: rgba(52,199,89,0.10) !important; color: #248a3d !important; }
.alert-danger, .alert-error { background: rgba(255,59,48,0.10) !important; color: var(--sc-red) !important; }
.alert-warning { background: rgba(255,149,0,0.10) !important; color: #b25a00 !important; }

/* ── 16. TABS ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--sc-border) !important;
  background: transparent !important;
  gap: 4px !important;
}
.nav-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-mid) !important;
  border: none !important;
  border-radius: var(--sc-r-sm) var(--sc-r-sm) 0 0 !important;
  padding: 8px 16px !important;
  background: transparent !important;
  transition: color var(--sc-dur), background var(--sc-dur) !important;
}
.nav-tabs .nav-link:hover { color: var(--sc-dark) !important; background: var(--sc-bg) !important; }
.nav-tabs .nav-link.active {
  color: var(--sc-accent) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--sc-accent) !important;
  font-weight: 600 !important;
}

/* ── 17. PAGINATION ───────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  color: var(--sc-dark) !important;
  border: 1px solid var(--sc-border) !important;
  background: var(--sc-surface) !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  transition: all var(--sc-dur) !important;
}
.pagination > li > a:hover { background: var(--sc-bg) !important; color: var(--sc-accent) !important; border-color: var(--sc-border-s) !important; }
.pagination > .active > a { background: var(--sc-accent) !important; border-color: var(--sc-accent) !important; color: #fff !important; }

/* ── 18. PAGE HEADER / BREADCRUMB ─────────────────────────────── */
.page-titles, .page-header-section {
  background: transparent !important;
  padding: 16px 20px 8px !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
.page-titles h3, .page-header-section h3,
.page-titles h4, .page-header-section h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--sc-dark) !important;
  margin: 0 !important;
}
.breadcrumb {
  background: transparent !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  font-size: 11.5px !important;
}
.breadcrumb-item { color: var(--sc-mid) !important; }
.breadcrumb-item.active { color: var(--sc-dark) !important; }
.breadcrumb-item a { color: var(--sc-accent) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sc-soft) !important; }

/* ── 19. STATS / COUNTER CARDS ────────────────────────────────── */
.stats-card, .counter-card, .info-box {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-r) !important;
  box-shadow: var(--sc-s1) !important;
}

/* ── 20. TEXT UTILITIES ────────────────────────────────────────── */
html body .text-themecolor, html body .text-info { color: var(--sc-accent) !important; }
html body .text-success { color: #248a3d !important; }
html body .text-warning { color: #b25a00 !important; }
html body .text-danger { color: var(--sc-red) !important; }
html body .text-muted { color: var(--sc-mid) !important; }
html body .text-dark { color: var(--sc-dark) !important; }
html body .text-primary { color: var(--sc-accent) !important; }

/* ── 21. LINKS ─────────────────────────────────────────────────── */
a { color: var(--sc-accent) !important; transition: opacity var(--sc-dur) !important; }
a:hover { opacity: 0.8 !important; }
a.text-dark { color: var(--sc-dark) !important; }
a.text-muted { color: var(--sc-mid) !important; }

/* ── 22. TOOLTIPS ─────────────────────────────────────────────── */
.tooltip-inner {
  background: var(--sc-dark) !important;
  border-radius: var(--sc-r-sm) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
}

/* ── 23. SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

/* ── 24. KANBAN BOARDS ─────────────────────────────────────────── */
.kanban-col, .board-col, .kanban-column {
  background: var(--sc-bg) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-r) !important;
}
.kanban-card, .board-card {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-r-sm) !important;
  box-shadow: var(--sc-s1) !important;
}
.kanban-col-title, .board-col-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--sc-mid) !important;
}

/* ── 25. SETTINGS PAGE ─────────────────────────────────────────── */
.settings-menu-link.active,
.settings-menu-link:hover {
  color: var(--sc-accent) !important;
  background: var(--sc-accent-bg) !important;
  border-radius: var(--sc-r-sm) !important;
}
.leftmenu-settings {
  background: var(--sc-surface) !important;
  border-right: 1px solid var(--sc-border) !important;
}

/* ── 26. PRELOADER ─────────────────────────────────────────────── */
.preloader { background: var(--sc-surface) !important; }
.loader-loading {
  border-color: var(--sc-border-s) !important;
  border-top-color: var(--sc-accent) !important;
}

/* ── 27. SIDE PANELS / DRAWERS ─────────────────────────────────── */
.right-sidebar, .x-side-panel, [class*="side-panel"] {
  background: var(--sc-surface) !important;
  border-left: 1px solid var(--sc-border) !important;
  box-shadow: var(--sc-s3) !important;
}

/* ── 28. CHECKBOXES ────────────────────────────────────────────── */
.checkbox input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
}

/* ── 29. PROGRESS BARS ─────────────────────────────────────────── */
.progress { background: var(--sc-bg) !important; border-radius: 100px !important; height: 6px !important; }
.progress-bar, .progress-bar-primary, .progress-bar-info {
  background: var(--sc-accent) !important;
  border-radius: 100px !important;
}
.progress-bar-success { background: var(--sc-green) !important; }
.progress-bar-danger { background: var(--sc-red) !important; }
.progress-bar-warning { background: var(--sc-orange) !important; }

/* ── 30. PAGE ENTER ANIMATION ──────────────────────────────────── */
@keyframes sc-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.page-wrapper > .container-fluid,
.page-content { animation: sc-in 0.22s var(--sc-ease) both; }

/* ── 31. LAYOUT OFFSETS ────────────────────────────────────────── */
.fix-header .topbar { margin-left: 0 !important; }
.fix-header .page-wrapper { margin-left: var(--sidebar-w) !important; }
.container-fluid { padding: 0 20px !important; }

/* ── 32. HIDE GROWCRM BRANDING ─────────────────────────────────── */
a.help-documentation, .btn.help-documentation,
.copyright, .growcrm-copyright, .crm-footer,
a[href*='growcrm.io'], a[href*='nextloop'] { display: none !important; }
.form-group.row:empty { display: none !important; }

/* ── 33. NOTIFICATIONS / REMINDERS PANEL ──────────────────────── */
.notifications-panel, .reminders-panel,
.right-side-bar, .right-panel {
  background: var(--sc-surface) !important;
  border-left: 1px solid var(--sc-border) !important;
}
.notification-item, .reminder-item {
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 12px 16px !important;
  transition: background var(--sc-dur) !important;
}
.notification-item:hover { background: var(--sc-bg) !important; }

/* ── 34. STATUS DOTS / INDICATORS ──────────────────────────────── */
.status-dot, .user-status,
span[class*="badge-"][class*="status"] {
  border-radius: 100px !important;
}

/* ── 35. INVOICE / ESTIMATE SPECIFIC ───────────────────────────── */
.invoice-header, .estimate-header {
  background: var(--sc-dark) !important;
  color: var(--sc-white) !important;
  border-radius: var(--sc-r) var(--sc-r) 0 0 !important;
  padding: 24px !important;
}
.bill-total-row { font-weight: 600 !important; color: var(--sc-dark) !important; }
.bill-final-total { font-size: 18px !important; font-weight: 700 !important; color: var(--sc-accent) !important; }