/*
 * GreatCRM â€” Obsidian Design System
 * Built from scratch. Zero inheritance from midnight theme.
 * Palette: shadcn/ui zinc-dark + indigo accent
 * Inspired by: Linear, Vercel, shadcn/ui sidebar-01
 * Version: 1.0.0
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* — Backgrounds (dark warm) — */
  --gc-bg:           oklch(0.2679 0.0036 106.6427);
  --gc-surface:      oklch(0.2857 0.0037 106.6000);
  --gc-surface-2:    oklch(0.3085 0.0035 106.6039);
  --gc-surface-3:    oklch(0.2213 0.0038 106.7070);
  --gc-surface-4:    oklch(0.2130 0.0078 95.4245);

  /* — Borders — */
  --gc-border:       oklch(0.3618 0.0101 106.8928 / 0.45);
  --gc-border-med:   oklch(0.3618 0.0101 106.8928 / 0.75);
  --gc-border-strong:oklch(0.4336 0.0113 100.2195);

  /* — Foreground — */
  --gc-fg:           oklch(0.9818 0.0054 95.0986);
  --gc-fg-2:         oklch(0.9211 0.0040 106.4781);
  --gc-fg-3:         oklch(0.8074 0.0142 93.0137);
  --gc-fg-4:         oklch(0.7713 0.0169 99.0657);
  --gc-fg-5:         oklch(0.6059 0.0075 97.4233);

  /* — Accent (warm orange-brown) — */
  --gc-accent:       oklch(0.6724 0.1308 38.7559);
  --gc-accent-dim:   oklch(0.6724 0.1308 38.7559 / 0.14);
  --gc-accent-hover: oklch(0.6724 0.1308 38.7559 / 0.22);
  --gc-accent-text:  oklch(0.7600 0.1050 38.7559);

  /* — Status — */
  --gc-success:      #4ade80;
  --gc-success-dim:  rgba(74,222,128,0.10);
  --gc-warning:      #fb923c;
  --gc-warning-dim:  rgba(251,146,60,0.10);
  --gc-danger:       #f87171;
  --gc-danger-dim:   rgba(248,113,113,0.10);
  --gc-info:         #38bdf8;
  --gc-info-dim:     rgba(56,189,248,0.10);

  /* — Sidebar — */
  --gc-sidebar-w:    240px;
  --gc-sidebar-bg:   oklch(0.2357 0.0024 67.7077);

  /* — Topbar — */
  --gc-topbar-h:     60px;

  /* — Radius — */
  --gc-r-sm:   4px;
  --gc-r:      6px;
  --gc-r-md:   8px;
  --gc-r-lg:   12px;
  --gc-r-xl:   16px;
  --gc-r-full: 9999px;

  /* — Shadow — */
  --gc-shadow-sm:  0 1px 3px oklch(0 0 0 / 0.30);
  --gc-shadow:     0 2px 8px oklch(0 0 0 / 0.40);
  --gc-shadow-lg:  0 8px 32px oklch(0 0 0 / 0.50);

  /* — Transition — */
  --gc-t: 0.15s ease;
}

/* ============================================================
   1b. LIGHT THEME TOKENS
   ============================================================ */

html[data-gc-theme="light"] {
  /* — Backgrounds (warm cream) — */
  --gc-bg:            oklch(0.9818 0.0054 95.0986);
  --gc-surface:       oklch(0.9818 0.0054 95.0986);
  --gc-surface-2:     oklch(0.9663 0.0080 98.8792);
  --gc-surface-3:     oklch(0.9341 0.0153 90.2390);
  --gc-surface-4:     oklch(0.9245 0.0138 92.9892);

  /* — Borders — */
  --gc-border:        oklch(0.8847 0.0069 97.3627 / 0.55);
  --gc-border-med:    oklch(0.8847 0.0069 97.3627);
  --gc-border-strong: oklch(0.7621 0.0156 98.3528);

  /* — Foreground — */
  --gc-fg:            oklch(0.1908 0.0020 106.5859);
  --gc-fg-2:          oklch(0.2671 0.0196 98.9390);
  --gc-fg-3:          oklch(0.3438 0.0269 95.7226);
  --gc-fg-4:          oklch(0.4334 0.0177 98.6048);
  --gc-fg-5:          oklch(0.6059 0.0075 97.4233);

  /* — Sidebar — */
  --gc-sidebar-bg:    oklch(0.9663 0.0080 98.8792);

  /* — Accent (warm orange-brown, vivid for light bg) — */
  --gc-accent:        oklch(0.6171 0.1375 39.0427);
  --gc-accent-dim:    oklch(0.6171 0.1375 39.0427 / 0.10);
  --gc-accent-hover:  oklch(0.6171 0.1375 39.0427 / 0.16);
  --gc-accent-text:   oklch(0.5200 0.1380 39.0427);

  /* — Status (darker for AAA contrast) — */
  --gc-success:       #16a34a;
  --gc-success-dim:   rgba(22,163,74,0.09);
  --gc-warning:       #ea580c;
  --gc-warning-dim:   rgba(234,88,12,0.09);
  --gc-danger:        #dc2626;
  --gc-danger-dim:    rgba(220,38,38,0.09);
  --gc-info:          #0284c7;
  --gc-info-dim:      rgba(2,132,199,0.09);

  /* — Shadows (soft for light mode) — */
  --gc-shadow-sm:     0 1px 3px oklch(0 0 0 / 0.06);
  --gc-shadow:        0 2px 8px oklch(0 0 0 / 0.09);
  --gc-shadow-lg:     0 8px 32px oklch(0 0 0 / 0.13);
}

/* Smooth theme crossfade */
html {
  transition: background-color 0.2s ease, color 0.2s ease;
}


/* ============================================================
   2. GLOBAL RESET / BASE
   ============================================================ */

html,
html body,
html body.loggedin {
  background: var(--gc-bg) !important;
  color: var(--gc-fg) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Selection */
::selection {
  background: var(--gc-accent-dim);
  color: var(--gc-fg);
}

/* Scrollbar */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--gc-surface-4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: var(--gc-fg-5); }


/* ============================================================
   3. LAYOUT SHELL
   ============================================================ */

#main-wrapper {
  background: var(--gc-bg) !important;
}

/* â€” Topbar height overrides midnight's 70px â€” */
.topbar .top-navbar {
  min-height: var(--gc-topbar-h) !important;
  height: var(--gc-topbar-h) !important;
}

.fix-header .topbar {
  position: fixed !important;
  width: 100% !important;
  z-index: 100 !important;
  margin-left: 0 !important;
  top: 0 !important;
}

.fix-header .page-wrapper {
  padding-top: var(--gc-topbar-h) !important;
}

/* Sidebar padding-top matches topbar height */
.left-sidebar {
  padding-top: var(--gc-topbar-h) !important;
  width: var(--gc-sidebar-w) !important;
}

/* Page wrapper beside sidebar */
@media (min-width: 1024px) {
  .page-wrapper {
    margin-left: var(--gc-sidebar-w) !important;
  }
}

/* Page wrapper background */
.page-wrapper,
html body .page-wrapper {
  background: var(--gc-bg) !important;
}


/* ============================================================
   4. TOPBAR  (v2.7.0 â€” premium redesign, light/dark dual-mode)
   ============================================================ */

/* â”€â”€ Shell â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.topbar {
  background: var(--gc-surface) !important;
  border-bottom: 1px solid var(--gc-border-med) !important;
  box-shadow: 0 1px 0 var(--gc-border), 0 2px 8px rgba(0,0,0,0.04) !important;
}

.top-navbar.navbar {
  padding: 0 !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
}

/* â”€â”€ Logo / brand area â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.navbar-header {
  width: var(--gc-sidebar-w) !important;
  min-width: var(--gc-sidebar-w) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  border-right: 1px solid var(--gc-border-med) !important;
  background: var(--gc-sidebar-bg) !important;
  height: var(--gc-topbar-h) !important;
}

.navbar-header .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

/* Brand icon */
.fix-sidebar .navbar-header .logo-large {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}
.fix-sidebar .navbar-header .logo-small {
  display: none !important;
}
.fix-sidebar.mini-sidebar .navbar-header .logo-large {
  display: none !important;
}
.fix-sidebar.mini-sidebar .navbar-header .logo-small {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain !important;
}
.navbar-header .logo-large {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}
.navbar-header .logo-small { display: none !important; }

/* "gzern" wordmark via CSS */
.fix-sidebar .navbar-header .navbar-brand::after {
  content: 'gzern' !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.fix-sidebar.mini-sidebar .navbar-header .navbar-brand::after {
  display: none !important;
}
.navbar-header .logo-text { display: none !important; }

/* â”€â”€ Hamburger & layout â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
li.main-hamburger-menu:has(.nav-toggler) { display: none !important; }
@media (max-width: 767px) {
  li.main-hamburger-menu:has(.nav-toggler)    { display: flex !important; align-items: center !important; }
  li.main-hamburger-menu:has(.sidebartoggler) { display: none !important; }
}

.top-navbar .navbar-collapse {
  display: flex !important;
  align-items: center !important;
  padding: 0 6px 0 12px !important;
  height: var(--gc-topbar-h) !important;
  flex: 1 !important;
  gap: 0 !important;
}

.top-navbar .navbar-nav {
  height: var(--gc-topbar-h) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.top-navbar .nav-item {
  display: flex !important;
  align-items: center !important;
  height: var(--gc-topbar-h) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* â”€â”€ Hamburger toggle button â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sidebartoggler,
a.sidebartoggler {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gc-r-md) !important;
  color: var(--gc-fg-4) !important;
  font-size: 18px !important;
  padding: 0 !important;
  margin: 0 2px 0 2px !important;
  transition: color var(--gc-t), background var(--gc-t) !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}
.sidebartoggler:hover,
a.sidebartoggler:hover {
  color: var(--gc-fg) !important;
  background: var(--gc-surface-3) !important;
}

/* â”€â”€ Search bar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.top-search-bar { align-self: center !important; margin-left: 4px !important; }

.top-search-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-full) !important;
  padding: 0 10px 0 12px !important;
  height: 36px !important;
  width: 270px !important;
  cursor: pointer !important;
  transition: border-color var(--gc-t), background var(--gc-t), box-shadow var(--gc-t) !important;
  position: relative !important;
}
.top-search-container:hover {
  border-color: var(--gc-border-strong) !important;
  background: var(--gc-surface-3) !important;
}
.top-search-container i,
.top-search-container .top-search-icon {
  color: var(--gc-fg-4) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
.top-search-container input,
.top-search-container .form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--gc-fg-3) !important;
  font-size: 13px !important;
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
  pointer-events: none !important;
  font-family: inherit !important;
}
.top-search-container input::placeholder,
.top-search-container .form-control::placeholder {
  color: var(--gc-fg-5) !important;
}

/* Flex spacer â€” push right icons to edge */
.top-navbar .navbar-nav.mr-auto {
  flex: 1 !important;
}

/* â”€â”€ Right icon bar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#right-topnav-navbar {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  padding: 0 8px !important;
  height: var(--gc-topbar-h) !important;
}

/* Base icon button style â€” all right-bar icons */
#right-topnav-navbar .nav-item > .nav-link,
.navbar-top-right .nav-item > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gc-r-md) !important;
  color: var(--gc-fg-4) !important;
  font-size: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color var(--gc-t), background var(--gc-t), box-shadow var(--gc-t) !important;
  background: transparent !important;
  text-decoration: none !important;
}
#right-topnav-navbar .nav-item > .nav-link:hover,
.navbar-top-right .nav-item > .nav-link:hover {
  color: var(--gc-fg) !important;
  background: var(--gc-surface-3) !important;
}

/* Generic left-side nav links */
.top-navbar .nav-item > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gc-fg-4) !important;
  font-size: 18px !important;
  padding: 0 8px !important;
  transition: color var(--gc-t), background var(--gc-t) !important;
}
.top-navbar .nav-item > .nav-link:hover {
  color: var(--gc-fg) !important;
  background: var(--gc-surface-3) !important;
  border-radius: var(--gc-r-md) !important;
}

/* Timer nav-item */
.top-navbar li.nav-item.dropdown:has(.ti-timer) > .nav-link,
.top-navbar li.nav-item.dropdown:has([class*="ti-timer"]) > .nav-link {
  padding: 0 8px !important;
  width: auto !important;
}

/* Add-content button */
.mdi-plus-circle-multiple-outline { color: var(--gc-accent) !important; }
.top-navbar .text-danger { color: var(--gc-accent) !important; }

/* â”€â”€ Icon group dividers â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.gc-topbar-divider,
.topbar-divider {
  width: 1px !important;
  height: 22px !important;
  background: var(--gc-border-med) !important;
  margin: 0 5px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* â”€â”€ Notification dot â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.top-navbar .notify {
  position: relative !important;
}
.top-navbar .notify .heartbit {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--gc-danger) !important;
  border: 2px solid var(--gc-surface) !important;
  animation: gc-pulse 2s ease-in-out infinite !important;
  z-index: 1 !important;
}
.top-navbar .notify .point {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--gc-danger) !important;
  border: 2px solid var(--gc-surface) !important;
  opacity: 0 !important;
}
@keyframes gc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.65; }
}
.top-navbar .badge-pill,
.top-navbar .round {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
  border-radius: 50% !important;
  background: var(--gc-danger) !important;
  color: #fff !important;
  border: 2px solid var(--gc-surface) !important;
  padding: 0 !important;
}

/* â”€â”€ Theme toggle button â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.gc-theme-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gc-r-md) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color var(--gc-t), background var(--gc-t), box-shadow var(--gc-t) !important;
  color: var(--gc-fg-4) !important;
  outline: none !important;
}
.gc-theme-btn:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-accent) !important;
  box-shadow: 0 0 0 2px var(--gc-accent-dim) !important;
}
.gc-theme-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--gc-accent) !important;
  outline: none !important;
}

/* Sun/moon icon visibility based on current theme */
.gc-theme-icon { display: block !important; pointer-events: none !important; }
.gc-theme-icon--moon { display: block !important; }
.gc-theme-icon--sun  { display: none !important; }

html[data-gc-theme="light"] .gc-theme-icon--moon { display: none !important; }
html[data-gc-theme="light"] .gc-theme-icon--sun  { display: block !important; }

/* Sun icon gets amber tint in light mode */
html[data-gc-theme="light"] .gc-theme-btn { color: var(--gc-warning) !important; }
html[data-gc-theme="light"] .gc-theme-btn:hover {
  background: var(--gc-warning-dim) !important;
  box-shadow: 0 0 0 2px var(--gc-warning-dim) !important;
}

/* â”€â”€ User profile pill â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.top-navbar .u-pro .profile-pic {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px 0 8px !important;
  height: 36px !important;
  width: auto !important;
  border-radius: var(--gc-r-full) !important;
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background var(--gc-t), border-color var(--gc-t), box-shadow var(--gc-t) !important;
  margin-left: 4px !important;
}
.top-navbar .u-pro .profile-pic:hover {
  background: var(--gc-surface-4) !important;
  border-color: var(--gc-border-strong) !important;
  box-shadow: var(--gc-shadow-sm) !important;
}
.top-navbar .u-pro .profile-pic img,
.top-navbar .nav-item.user-profile img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid var(--gc-border-med) !important;
  flex-shrink: 0 !important;
}
#topnav_username {
  display: none !important;
}

/* ── SVG nav icons ──────────────────────────────────────────── */
.gc-nav-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
  pointer-events: none !important;
  color: inherit !important;
}
.gc-nav-add-icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--gc-accent) !important;
}

/* ── Colored topnav icon buttons ───────────────────────────── */
/* Each icon gets its own identity colour via currentColor on the SVG */
#topnav-quick-access-icon   { color: oklch(0.70 0.17 295) !important; } /* purple  – starred  */
#topnav-reminders-icon      { color: oklch(0.74 0.16  30) !important; } /* orange  – reminders */
#topnav-notifications-icon  { color: oklch(0.76 0.15  55) !important; } /* amber   – bell */
#topnav-record-time-icon    { color: oklch(0.70 0.17 160) !important; } /* teal    – stopwatch */
#topnav-calendar-icon       { color: oklch(0.68 0.17 145) !important; } /* green   – calendar */
#topnav-messages-icon       { color: oklch(0.66 0.18 230) !important; } /* sky     – messages */
#topnav-settings-icon       { color: oklch(0.66 0.10 255) !important; } /* slate   – settings */
/* hover: slight brightness lift */
#topnav-quick-access-icon:hover,
#topnav-reminders-icon:hover,
#topnav-notifications-icon:hover,
#topnav-record-time-icon:hover,
#topnav-calendar-icon:hover,
#topnav-messages-icon:hover,
#topnav-settings-icon:hover {
  filter: brightness(1.2) !important;
  color: inherit !important;
}

/* ── New premium user avatar button ────────────────────────── */
.top-navbar .u-pro .gc-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px 5px 5px !important;
  height: 42px !important;
  min-width: 80px !important;
  width: auto !important;
  border-radius: var(--gc-r-full) !important;
  background: transparent !important;
  border: 1.5px solid var(--gc-border-med) !important;
  color: var(--gc-fg-3) !important;
  transition: background var(--gc-t), border-color var(--gc-t), box-shadow var(--gc-t) !important;
  margin-left: 8px !important;
  white-space: nowrap !important;
}
.top-navbar .u-pro .gc-user-btn:hover {
  background: var(--gc-surface-3) !important;
  border-color: var(--gc-border-strong) !important;
  box-shadow: var(--gc-shadow-sm) !important;
}
.gc-avatar-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
}
.gc-avatar-wrap img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid var(--gc-border-med) !important;
}
.gc-online-dot {
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 9px !important;
  height: 9px !important;
  background: var(--gc-success) !important;
  border: 2px solid var(--gc-surface) !important;
  border-radius: 50% !important;
  display: block !important;
}
.gc-chevron-icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--gc-fg-4) !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  transition: transform 0.2s ease !important;
}
.u-pro.show .gc-chevron-icon {
  transform: rotate(180deg) !important;
}

/* â”€â”€ Topbar dropdown menus â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.top-navbar .dropdown-menu {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow-lg) !important;
  padding: 4px !important;
  margin-top: 6px !important;
}
.top-navbar .dropdown-menu .dropdown-item {
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  border-radius: var(--gc-r-sm) !important;
  transition: background var(--gc-t), color var(--gc-t) !important;
}
.top-navbar .dropdown-menu .dropdown-item:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}
.top-navbar .dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--gc-border) !important;
  margin: 4px 0 !important;
}
.top-navbar .dropdown-menu .message-center .message-item {
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 10px 12px !important;
}
.top-navbar .dropdown-menu .message-center .message-item:hover {
  background: var(--gc-surface-3) !important;
  border-radius: var(--gc-r-sm) !important;
}
.top-navbar .dropdown-menu .mail-contnet .mail-desc,
.top-navbar .dropdown-menu .message-center .message-item p {
  color: var(--gc-fg-4) !important;
  font-size: 12px !important;
}
.top-navbar .dropdown-menu .notify-footer a,
.top-navbar .dropdown-menu .notify-footer {
  color: var(--gc-accent-text) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 8px !important;
  border-top: 1px solid var(--gc-border) !important;
}


/* ============================================================
   5. SIDEBAR
   ============================================================ */

/* â€” Kill waves.js everywhere â€” */
.waves-ripple {
  display: none !important;
  opacity: 0 !important;
}
.waves-effect {
  /* waves adds overflow:hidden; keep that to not break layout but kill animation */
}

/* â€” Shell â€” */
.left-sidebar {
  background: var(--gc-sidebar-bg) !important;
  border-right: 1px solid var(--gc-border) !important;
  box-shadow: none !important;
}

.scroll-sidebar {
  background: transparent !important;
  padding: 4px 0 80px !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Root nav list */
#sidebarnav {
  list-style: none !important;
  padding: 0 8px !important;
  margin: 0 !important;
}

/* â€”â€”â€” Section group labels (shadcn-01 style: proper case, no caps) â€”â€”â€” */
#sidebarnav > li[data-modular-id="main_menu_team_home"]::before {
  content: 'Overview' !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-5) !important;
  padding: 16px 8px 5px !important;
  pointer-events: none !important;
}

#sidebarnav > li[data-modular-id="main_menu_team_clients"]::before  { content: 'Customers' !important; }
#sidebarnav > li[data-modular-id="main_menu_team_projects"]::before { content: 'Work' !important; }
#sidebarnav > li[data-modular-id="main_menu_team_leads"]::before    { content: 'Pipeline' !important; }
#sidebarnav > li[data-modular-id="main_menu_team_billing"]::before  { content: 'Finance' !important; }
#sidebarnav > li[data-modular-id="main_menu_team_support"]::before  { content: 'Support' !important; }
#sidebarnav > li[data-modular-id="main_menu_team_team"]::before     { content: 'People' !important; }
#sidebarnav > li[data-modular-id="main_menu_reports"]::before       { content: 'Insights' !important; }

/* All group labels share the same style */
#sidebarnav > li[data-modular-id="main_menu_team_clients"]::before,
#sidebarnav > li[data-modular-id="main_menu_team_projects"]::before,
#sidebarnav > li[data-modular-id="main_menu_team_leads"]::before,
#sidebarnav > li[data-modular-id="main_menu_team_billing"]::before,
#sidebarnav > li[data-modular-id="main_menu_team_support"]::before,
#sidebarnav > li[data-modular-id="main_menu_team_team"]::before,
#sidebarnav > li[data-modular-id="main_menu_reports"]::before {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-5) !important;
  padding: 20px 8px 5px !important;
  pointer-events: none !important;
}

/* â€” Nav item (parent row) â€” */
#sidebarnav > li.sidenav-menu-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebarnav > li.sidenav-menu-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: var(--gc-r) !important;
  color: #c4c4c8 !important;          /* zinc-300 â€” bright enough to read */
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.1s, color 0.1s !important;
  cursor: pointer !important;
}

/* Hover: barely perceptible â€” exactly shadcn */
#sidebarnav > li.sidenav-menu-item > a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #e4e4e7 !important;
}

/* Active parent â€” clear, unambiguous highlight */
#sidebarnav > li.sidenav-menu-item.active > a,
#sidebarnav > li.sidenav-menu-item > a.active {
  background: rgba(255,255,255,0.10) !important;
  color: #fafafa !important;
  font-weight: 500 !important;
}

/* â€” Icon â€” */
#sidebarnav > li.sidenav-menu-item > a > i {
  font-size: 14px !important;
  width: 16px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  color: #71717a !important;           /* zinc-500 â€” quiet */
  transition: color 0.1s !important;
  line-height: 1 !important;
}

#sidebarnav > li.sidenav-menu-item > a:hover > i {
  color: #a1a1aa !important;
}

#sidebarnav > li.sidenav-menu-item.active > a > i,
#sidebarnav > li.sidenav-menu-item > a.active > i {
  color: #d4d4d8 !important;   /* clearly brighter than resting zinc-500 */
}

/* â€” Label text â€” */
#sidebarnav > li.sidenav-menu-item > a > .hide-menu {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

/* â€” Chevron (has-arrow items only) â€” */
#sidebarnav > li.sidenav-menu-item > a.has-arrow::after {
  content: '' !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  /* chevron-right in zinc-600 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.15s !important;
}

/* Rotate chevron when submenu is open */
#sidebarnav > li.sidenav-menu-item.active > a.has-arrow::after {
  transform: rotate(90deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* â€” Submenus â€” clean indentation, NOTHING ELSE â€” */
#sidebarnav .collapse,
#sidebarnav .collapsing {
  padding-left: 0 !important;
  list-style: none !important;
  margin: 2px 0 4px !important;
}

#sidebarnav .collapse > li.sidenav-submenu,
#sidebarnav .collapsing > li.sidenav-submenu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* No ::before connectors â€” none at all */
#sidebarnav .collapse > li.sidenav-submenu::before,
#sidebarnav .collapsing > li.sidenav-submenu::before {
  display: none !important;
  content: none !important;
}

#sidebarnav .collapse > li.sidenav-submenu > a,
#sidebarnav .collapsing > li.sidenav-submenu > a {
  display: block !important;
  padding: 5px 8px 5px 24px !important;   /* indent = only difference from parent */
  border-radius: var(--gc-r) !important;
  color: #a1a1aa !important;              /* zinc-400 â€” slightly more muted than parent */
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.1s, color 0.1s !important;
  /* No ::before pseudo */
}
#sidebarnav .collapse > li.sidenav-submenu > a::before,
#sidebarnav .collapsing > li.sidenav-submenu > a::before {
  display: none !important;
  content: none !important;
}

#sidebarnav .collapse > li.sidenav-submenu > a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #e4e4e7 !important;
}

#sidebarnav .collapse > li.sidenav-submenu.active > a,
#sidebarnav .collapse > li.sidenav-submenu > a.active {
  background: rgba(255,255,255,0.10) !important;
  color: #fafafa !important;
  font-weight: 500 !important;
}


/* ============================================================
   6. MINI SIDEBAR
   ============================================================ */

/* -- Sidebar width in mini mode -- */
body.mini-sidebar .left-sidebar {
  width: 64px !important;
}

@media (min-width: 1024px) {
  body.mini-sidebar .page-wrapper {
    margin-left: 64px !important;
  }
}

/* -- Logo area: shrink to match sidebar width -- */
body.mini-sidebar .top-navbar .navbar-header,
body.mini-sidebar .navbar-header {
  width: 64px !important;
  min-width: 64px !important;
  padding: 0 !important;
  justify-content: center !important;
}

/* Hide logo text in mini mode, keep icon/image */
body.mini-sidebar .navbar-header .logo-text,
body.mini-sidebar .logo-large {
  display: none !important;
}
body.mini-sidebar .logo-small {
  display: inline-block !important;
}

/* -- Nav list: tighter padding in mini -- */
body.mini-sidebar #sidebarnav {
  padding: 0 6px !important;
}

/* -- Hide text + chevron -- */
body.mini-sidebar .hide-menu,
body.mini-sidebar #sidebarnav > li > a > .hide-menu {
  display: none !important;
}
body.mini-sidebar #sidebarnav > li > a.has-arrow::after {
  display: none !important;
}

/* -- Icon items: centered square -- */
body.mini-sidebar #sidebarnav > li > a {
  width: 100% !important;
  height: 38px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 1px 0 !important;
}

body.mini-sidebar #sidebarnav > li > a > i {
  font-size: 17px !important;
  width: auto !important;
  text-align: center !important;
}

/* -- Active in mini mode: prominent rounded square -- */
body.mini-sidebar #sidebarnav > li.sidenav-menu-item.active > a,
body.mini-sidebar #sidebarnav > li.sidenav-menu-item > a.active {
  background: rgba(255,255,255,0.11) !important;
}

body.mini-sidebar #sidebarnav > li.sidenav-menu-item.active > a > i,
body.mini-sidebar #sidebarnav > li.sidenav-menu-item > a.active > i {
  color: #e4e4e7 !important;   /* clearly white-ish so you know where you are */
}

/* -- Hover in mini mode -- */
body.mini-sidebar #sidebarnav > li.sidenav-menu-item > a:hover {
  background: rgba(255,255,255,0.05) !important;
}
body.mini-sidebar #sidebarnav > li.sidenav-menu-item > a:hover > i {
  color: #c4c4c8 !important;
}

/* -- Hide section labels in mini -- */
body.mini-sidebar #sidebarnav > li::before,
body.mini-sidebar #sidebarnav > li::after {
  display: none !important;
  content: none !important;
}

/* -- Hide submenus entirely in mini mode -- */
body.mini-sidebar #sidebarnav .collapse {
  display: none !important;
}

/* Midnight overrides that fight our sidebar */
.sidebar-nav,
.sidebar-nav ul,
.sidebar-nav li,
.sidebar-nav li a,
.sidebar-nav .nav-small-cap {
  background: transparent !important;
  border: none !important;
}

/* Stop midnight from adding hover border/accent to sidebar items */
.sidebar-nav > ul > li > a:hover,
.sidebar-nav > ul > li.active > a {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}


/* ============================================================
   7. PAGE CONTENT AREA
   ============================================================ */

.page-wrapper {
  padding: 0 !important;
}

/* Page title bar */
.page-titles {
  background: var(--gc-bg) !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.page-titles h3,
.page-titles .title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--gc-fg-5) !important;
  content: '/' !important;
}

.breadcrumb-item a {
  color: var(--gc-fg-4) !important;
  text-decoration: none !important;
  transition: color var(--gc-t) !important;
}

.breadcrumb-item a:hover {
  color: var(--gc-fg-2) !important;
}

.breadcrumb-item.active {
  color: var(--gc-fg-3) !important;
}

/* Content container */
.container-fluid {
  padding: 20px 24px !important;
}


/* ============================================================
   8. CARDS
   ============================================================ */

.card {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: none !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.card-subtitle {
  color: var(--gc-fg-4) !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

.card-body {
  padding: 18px !important;
  color: var(--gc-fg-2) !important;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--gc-border) !important;
  padding: 12px 18px !important;
}

/* Card hover lift effect */
.card-hover:hover,
a.card:hover {
  border-color: var(--gc-border-med) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--gc-shadow) !important;
}

/* Stat / metric cards */
.card-stat .card-body {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.card-stat .stat-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--gc-r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.card-stat .stat-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
}

.card-stat .stat-label {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  margin-top: 2px !important;
}


/* ============================================================
   9. FORMS
   ============================================================ */

/* Base input */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-fg) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  padding: 7px 11px !important;
  height: 36px !important;
  transition: border-color var(--gc-t), box-shadow var(--gc-t), background var(--gc-t) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

textarea,
textarea.form-control {
  height: auto !important;
  min-height: 90px !important;
  resize: vertical !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--gc-fg-5) !important;
  opacity: 1 !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background: var(--gc-surface-2) !important;
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 3px var(--gc-accent-dim) !important;
  outline: none !important;
  color: var(--gc-fg) !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-5) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Form label */
label,
.form-label,
.control-label {
  color: var(--gc-fg-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Form group */
.form-group {
  margin-bottom: 18px !important;
}

/* Input group */
.input-group-text {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-4) !important;
  font-size: 13px !important;
  padding: 0 11px !important;
  height: 36px !important;
  border-radius: var(--gc-r) !important;
}

.input-group .form-control:not(:first-child) {
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group .form-control:not(:last-child) {
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Checkbox / Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--gc-accent) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
}

/* Select */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
}

/* Form text / help */
.form-text,
.help-block,
small.form-text {
  color: var(--gc-fg-5) !important;
  font-size: 11.5px !important;
  margin-top: 4px !important;
}

/* Validation */
.has-error .form-control,
.form-control.is-invalid,
input.invalid {
  border-color: var(--gc-danger) !important;
  box-shadow: 0 0 0 3px var(--gc-danger-dim) !important;
}

.has-success .form-control,
.form-control.is-valid {
  border-color: var(--gc-success) !important;
}

.invalid-feedback,
.has-error .help-block {
  color: var(--gc-danger) !important;
  font-size: 11.5px !important;
}

/* Input size variants */
.form-control-sm,
.input-sm { height: 30px !important; font-size: 12px !important; padding: 4px 9px !important; }
.form-control-lg,
.input-lg { height: 42px !important; font-size: 15px !important; padding: 9px 13px !important; }


/* ============================================================
   10. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  height: 34px !important;
  border-radius: var(--gc-r) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background var(--gc-t), color var(--gc-t), border-color var(--gc-t), box-shadow var(--gc-t) !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  vertical-align: middle !important;
}

.btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--gc-accent-dim) !important;
}

/* Primary */
.btn-primary,
.btn-info {
  background: var(--gc-accent) !important;
  border-color: var(--gc-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-info:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
.btn-primary:active,
.btn-info:active {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

/* Default / secondary */
.btn-default,
.btn-secondary,
.btn-light {
  background: var(--gc-surface-3) !important;
  border-color: var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
  background: var(--gc-surface-4) !important;
  border-color: var(--gc-fg-5) !important;
  color: var(--gc-fg) !important;
}

/* Success */
.btn-success {
  background: #166534 !important;
  border-color: #166534 !important;
  color: var(--gc-success) !important;
}
.btn-success:hover {
  background: #15803d !important;
  border-color: #15803d !important;
  color: var(--gc-success) !important;
}

/* Danger */
.btn-danger {
  background: rgba(248,113,113,0.12) !important;
  border-color: rgba(248,113,113,0.25) !important;
  color: var(--gc-danger) !important;
}
.btn-danger:hover {
  background: rgba(248,113,113,0.22) !important;
  border-color: rgba(248,113,113,0.4) !important;
}

/* Warning */
.btn-warning {
  background: rgba(251,146,60,0.12) !important;
  border-color: rgba(251,146,60,0.25) !important;
  color: var(--gc-warning) !important;
}
.btn-warning:hover {
  background: rgba(251,146,60,0.22) !important;
  border-color: rgba(251,146,60,0.4) !important;
}

/* Outline variants */
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--gc-accent) !important;
  color: var(--gc-accent) !important;
}
.btn-outline-primary:hover {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

.btn-outline-secondary,
.btn-outline-default {
  background: transparent !important;
  border-color: var(--gc-border-med) !important;
  color: var(--gc-fg-3) !important;
}
.btn-outline-secondary:hover,
.btn-outline-default:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}

/* Ghost button */
.btn-ghost,
.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gc-fg-3) !important;
}
.btn-ghost:hover,
.btn-link:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
  text-decoration: none !important;
}

/* Size variants */
.btn-sm { height: 28px !important; padding: 0 10px !important; font-size: 12px !important; }
.btn-lg { height: 42px !important; padding: 0 20px !important; font-size: 15px !important; }
.btn-xs { height: 24px !important; padding: 0 8px !important; font-size: 11px !important; }

/* Round */
.btn-rounded,
.btn-circle { border-radius: var(--gc-r-full) !important; }

/* Icon button */
.btn-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.btn-icon.btn-sm { width: 28px !important; height: 28px !important; }
.btn-icon.btn-lg { width: 42px !important; height: 42px !important; }

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}


/* ============================================================
   11. TABLES
   ============================================================ */

.table,
table {
  color: var(--gc-fg-2) !important;
  border-color: var(--gc-border) !important;
  font-size: 13px !important;
  width: 100% !important;
}

.table th {
  color: var(--gc-fg-4) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gc-border-med) !important;
  border-top: none !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--gc-fg-2) !important;
}

.table tr:last-child td {
  border-bottom: none !important;
}

.table-hover tbody tr:hover td {
  background: rgba(255,255,255,0.025) !important;
  color: var(--gc-fg) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.015) !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--gc-border) !important;
}

thead.thead-light th {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-4) !important;
}

/* DataTables */
.dataTables_wrapper {
  color: var(--gc-fg-2) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-fg) !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  height: 30px !important;
}

.dataTables_wrapper .dataTables_filter input {
  padding: 4px 8px 4px 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 8px center !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--gc-fg-4) !important;
  font-size: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--gc-fg-3) !important;
  background: transparent !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 3px 9px !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background var(--gc-t), color var(--gc-t) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
  border-color: var(--gc-border-med) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
  border-color: rgba(129,140,248,0.3) !important;
  font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* DataTables column header sort */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: var(--gc-fg-5) !important;
  opacity: 1 !important;
}

table.dataTable thead .sorting_asc::after  { color: var(--gc-accent) !important; }
table.dataTable thead .sorting_desc::after { color: var(--gc-accent) !important; }


/* ============================================================
   12. BADGES
   ============================================================ */

.badge,
.label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: var(--gc-r-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.badge-primary,   .label-primary   { background: var(--gc-accent-dim)  !important; color: var(--gc-accent-text) !important; }
.badge-success,   .label-success   { background: var(--gc-success-dim)  !important; color: var(--gc-success)     !important; }
.badge-danger,    .label-danger    { background: var(--gc-danger-dim)   !important; color: var(--gc-danger)      !important; }
.badge-warning,   .label-warning   { background: var(--gc-warning-dim)  !important; color: var(--gc-warning)     !important; }
.badge-info                        { background: var(--gc-info-dim)     !important; color: var(--gc-info)        !important; }
.badge-secondary, .label-default   { background: rgba(255,255,255,0.07) !important; color: var(--gc-fg-3)        !important; }
.badge-dark                        { background: rgba(255,255,255,0.05) !important; color: var(--gc-fg-4)        !important; }


/* ============================================================
   13. DROPDOWNS
   ============================================================ */

.dropdown-menu {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow-lg) !important;
  padding: 4px !important;
  margin-top: 4px !important;
  min-width: 180px !important;
}

.dropdown-item {
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  border-radius: var(--gc-r-sm) !important;
  transition: background var(--gc-t), color var(--gc-t) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

.dropdown-item i,
.dropdown-item .icon {
  font-size: 13px !important;
  width: 16px !important;
  color: var(--gc-fg-4) !important;
  flex-shrink: 0 !important;
}

.dropdown-divider {
  border-top: 1px solid var(--gc-border) !important;
  margin: 4px 0 !important;
}

.dropdown-header {
  color: var(--gc-fg-5) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px 4px !important;
}


/* ============================================================
   14. MODALS
   ============================================================ */

.modal-backdrop {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-content {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-xl) !important;
  box-shadow: var(--gc-shadow-lg) !important;
  color: var(--gc-fg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
}

.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.modal-body {
  padding: 20px !important;
  color: var(--gc-fg-2) !important;
}

.modal-footer {
  border-top: 1px solid var(--gc-border) !important;
  padding: 14px 20px !important;
  gap: 8px !important;
}

.close,
.modal-header .close {
  color: var(--gc-fg-4) !important;
  opacity: 1 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color var(--gc-t) !important;
}

.close:hover,
.modal-header .close:hover {
  color: var(--gc-fg) !important;
  opacity: 1 !important;
}


/* ============================================================
   15. ALERTS
   ============================================================ */

.alert {
  padding: 12px 16px !important;
  border-radius: var(--gc-r-md) !important;
  font-size: 13px !important;
  border: 1px solid !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.alert-success {
  background: var(--gc-success-dim) !important;
  border-color: rgba(74,222,128,0.25) !important;
  color: var(--gc-success) !important;
}

.alert-danger,
.alert-error {
  background: var(--gc-danger-dim) !important;
  border-color: rgba(248,113,113,0.25) !important;
  color: var(--gc-danger) !important;
}

.alert-warning {
  background: var(--gc-warning-dim) !important;
  border-color: rgba(251,146,60,0.25) !important;
  color: var(--gc-warning) !important;
}

.alert-info {
  background: var(--gc-info-dim) !important;
  border-color: rgba(56,189,248,0.25) !important;
  color: var(--gc-info) !important;
}

.alert-dismissible .close {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.alert .alert-heading {
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}


/* ============================================================
   16. TABS & PILLS
   ============================================================ */

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid var(--gc-border) !important;
  gap: 0 !important;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link {
  color: var(--gc-fg-4) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  transition: color var(--gc-t), border-color var(--gc-t) !important;
  margin-bottom: -1px !important;
}

.nav-tabs .nav-item .nav-link:hover,
.nav-tabs .nav-link:hover {
  color: var(--gc-fg-2) !important;
  border-bottom-color: var(--gc-border-med) !important;
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--gc-fg) !important;
  background: transparent !important;
  border-bottom-color: var(--gc-accent) !important;
  font-weight: 600 !important;
}

.tab-content {
  padding-top: 16px !important;
}

/* Pills */
.nav-pills {
  gap: 4px !important;
}

.nav-pills .nav-link {
  color: var(--gc-fg-4) !important;
  background: transparent !important;
  border-radius: var(--gc-r) !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  transition: background var(--gc-t), color var(--gc-t) !important;
}

.nav-pills .nav-link:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-2) !important;
}

.nav-pills .nav-link.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}


/* ============================================================
   17. SELECT2
   ============================================================ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 3px var(--gc-accent-dim) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--gc-fg) !important;
  font-size: 13px !important;
  line-height: 34px !important;
  padding-left: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--gc-fg-4) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--gc-accent-dim) !important;
  border: 1px solid rgba(129,140,248,0.2) !important;
  color: var(--gc-accent-text) !important;
  border-radius: var(--gc-r-sm) !important;
  font-size: 11.5px !important;
  padding: 2px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--gc-accent-text) !important;
  font-size: 14px !important;
}

.select2-dropdown {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow-lg) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-sm) !important;
  color: var(--gc-fg) !important;
  font-size: 12.5px !important;
  padding: 6px 10px !important;
  margin: 4px !important;
  width: calc(100% - 8px) !important;
}

.select2-container--default .select2-results__option {
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  transition: background var(--gc-t) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

.select2-results__option--group {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gc-fg-5) !important;
  padding: 8px 12px 4px !important;
  pointer-events: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--gc-fg-5) !important;
}


/* ============================================================
   18. PAGINATION
   ============================================================ */

.pagination {
  gap: 3px !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-item .page-link {
  background: transparent !important;
  border: 1px solid var(--gc-border) !important;
  color: var(--gc-fg-3) !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  min-width: 32px !important;
  text-align: center !important;
  transition: background var(--gc-t), color var(--gc-t), border-color var(--gc-t) !important;
}

.page-item .page-link:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
  border-color: var(--gc-border-med) !important;
}

.page-item.active .page-link {
  background: var(--gc-accent-dim) !important;
  border-color: rgba(129,140,248,0.3) !important;
  color: var(--gc-accent-text) !important;
  font-weight: 600 !important;
}

.page-item.disabled .page-link {
  opacity: 0.35 !important;
  pointer-events: none !important;
}


/* ============================================================
   19. PROGRESS BARS
   ============================================================ */

.progress {
  background: var(--gc-surface-3) !important;
  border-radius: var(--gc-r-full) !important;
  height: 6px !important;
  overflow: hidden !important;
}

.progress-bar {
  background: var(--gc-accent) !important;
  border-radius: var(--gc-r-full) !important;
  transition: width 0.4s ease !important;
}

.progress-bar-success { background: var(--gc-success) !important; }
.progress-bar-danger  { background: var(--gc-danger)  !important; }
.progress-bar-warning { background: var(--gc-warning) !important; }
.progress-bar-info    { background: var(--gc-info)    !important; }


/* ============================================================
   20. LIST GROUPS
   ============================================================ */

.list-group-item {
  background: transparent !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  transition: background var(--gc-t) !important;
}

.list-group-item:hover,
.list-group-item.active {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gc-fg) !important;
  border-color: var(--gc-border) !important;
}

.list-group-item.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}


/* ============================================================
   21. TOOLTIPS & POPOVERS
   ============================================================ */

.tooltip-inner {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
  font-size: 11.5px !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 5px 9px !important;
  box-shadow: var(--gc-shadow) !important;
  border: 1px solid var(--gc-border-med) !important;
  max-width: 240px !important;
}

.tooltip.bs-tooltip-top .arrow::before     { border-top-color: var(--gc-surface-3) !important; }
.tooltip.bs-tooltip-bottom .arrow::before  { border-bottom-color: var(--gc-surface-3) !important; }
.tooltip.bs-tooltip-left .arrow::before    { border-left-color: var(--gc-surface-3) !important; }
.tooltip.bs-tooltip-right .arrow::before   { border-right-color: var(--gc-surface-3) !important; }

.popover {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow-lg) !important;
}

.popover-header {
  background: transparent !important;
  border-bottom: 1px solid var(--gc-border) !important;
  color: var(--gc-fg) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.popover-body {
  color: var(--gc-fg-2) !important;
  font-size: 12.5px !important;
}


/* ============================================================
   22. KANBAN BOARD
   ============================================================ */

/* Board container */
.kanban .page-wrapper {
  background: var(--gc-bg) !important;
}

/* Kanban columns wrapper */
.kanban .boards,
.boards {
  display: flex !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  overflow-x: auto !important;
  align-items: flex-start !important;
  min-height: calc(100vh - 140px) !important;
  background: var(--gc-bg) !important;
}

/* Individual column */
.kanban .boards .board,
.board {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  min-width: 280px !important;
  max-width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Column header */
.kanban .boards .board .board-header,
.board .board-header {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  background: var(--gc-surface) !important;
  border-radius: var(--gc-r-md) var(--gc-r-md) 0 0 !important;
}

.kanban .boards .board .board-header h4,
.board .board-header .board-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
}

/* Column body */
.kanban .boards .board .board-body,
.board .board-body {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 120px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 280px) !important;
}

/* Kanban card */
.kanban-card,
.board .card {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r) !important;
  padding: 12px !important;
  cursor: pointer !important;
  transition: border-color var(--gc-t), box-shadow var(--gc-t) !important;
  box-shadow: none !important;
}

.kanban-card:hover,
.board .card:hover {
  border-color: var(--gc-border-med) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.kanban-card .card-title,
.board .card .card-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 8px !important;
}

.kanban-card .card-footer,
.board .card .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--gc-border) !important;
  padding: 8px 0 0 !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Drag over */
.board .board-body.drag-over {
  background: var(--gc-accent-dim) !important;
  border-radius: var(--gc-r-sm) !important;
}


/* ============================================================
   23. PRELOADER
   ============================================================ */

/* CRITICAL: never set display on .preloader â€” jQuery fadeOut depends on it */
.preloader {
  background-color: var(--gc-bg) !important;
  top: var(--gc-topbar-h) !important;
  left: var(--gc-sidebar-w) !important;
}

body.mini-sidebar .preloader {
  left: 64px !important;
}

/* Center the spinner */
.loader {
  top: 45% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Spinner ring */
.loader .loader-ring {
  border-color: var(--gc-border-strong) !important;
  border-top-color: var(--gc-accent) !important;
}

/* Pulse animation fallback */
@keyframes gc-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   24. RIGHT SIDE PANEL
   ============================================================ */

.right-side-panel {
  background: var(--gc-surface-2) !important;
  border-left: 1px solid var(--gc-border) !important;
  box-shadow: none !important;
}

.fix-header .right-side-panel {
  top: var(--gc-topbar-h) !important;
  height: calc(100% - var(--gc-topbar-h)) !important;
}

.right-side-panel .rpanel-title {
  background: transparent !important;
  color: var(--gc-fg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}

.right-side-panel .slimScrollDiv,
.right-side-panel .r-panel-body {
  background: transparent !important;
  padding: 16px !important;
}


/* ============================================================
   25. SUMMERNOTE WYSIWYG
   ============================================================ */

.note-editor.note-frame {
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  overflow: hidden !important;
}

.note-toolbar {
  background: var(--gc-surface-3) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 6px 8px !important;
}

.note-toolbar .btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gc-fg-3) !important;
  height: 28px !important;
  padding: 0 7px !important;
}

.note-toolbar .btn:hover {
  background: var(--gc-surface-4) !important;
  color: var(--gc-fg) !important;
}

.note-toolbar .btn.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

.note-editable {
  background: var(--gc-surface-2) !important;
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  min-height: 150px !important;
  padding: 12px 16px !important;
}

.note-editable::before {
  color: var(--gc-fg-5) !important;
}

.note-status-bar {
  background: var(--gc-surface-3) !important;
  border-top: 1px solid var(--gc-border) !important;
}


/* ============================================================
   26. FULLCALENDAR
   ============================================================ */

.fc {
  color: var(--gc-fg-2) !important;
}

.fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.02em !important;
}

.fc-button,
.fc-button-primary {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 4px 10px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background var(--gc-t) !important;
}

.fc-button:hover,
.fc-button-primary:hover,
.fc-button:not(:disabled):active,
.fc-button-primary:not(:disabled):active {
  background: var(--gc-surface-4) !important;
  border-color: var(--gc-fg-5) !important;
  color: var(--gc-fg) !important;
}

.fc-button-primary:not(:disabled).fc-button-active {
  background: var(--gc-accent-dim) !important;
  border-color: rgba(129,140,248,0.3) !important;
  color: var(--gc-accent-text) !important;
}

.fc-daygrid-day,
.fc-col-header-cell {
  border-color: var(--gc-border) !important;
}

.fc-col-header-cell-cushion {
  color: var(--gc-fg-4) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 8px !important;
}

.fc-daygrid-day-number {
  color: var(--gc-fg-3) !important;
  font-size: 12px !important;
  padding: 6px !important;
}

.fc-day-today {
  background: var(--gc-accent-dim) !important;
}

.fc-day-today .fc-daygrid-day-number {
  color: var(--gc-accent-text) !important;
  font-weight: 700 !important;
}

.fc-event {
  border-radius: var(--gc-r-sm) !important;
  padding: 2px 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border: none !important;
}

.fc-scrollgrid {
  border-color: var(--gc-border) !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--gc-border) !important;
}


/* ============================================================
   27. WIDGETS & STATS â€” Dashboard KPI, charts, activity feed
   ============================================================ */

/* â”€â”€ Clickable stat card (KPI first-row) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.click-url.cursor-pointer .card {
  cursor: pointer;
  transition: background var(--gc-t-base), box-shadow var(--gc-t-base),
              transform var(--gc-t-base);
}
.click-url.cursor-pointer .card:hover {
  background: var(--gc-surface-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}

/* KPI big number */
.card .card-body .d-flex.no-block h2,
.card .card-body .d-flex.no-block .h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-bottom: 5px !important;
}
/* KPI sub-label */
.card .card-body .d-flex.no-block h6,
.card .card-body .d-flex.no-block .h6 {
  font-size: 10.5px !important;
  color: var(--gc-fg-5) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}
/* Right-side icon */
.card .card-body .display-6 i {
  opacity: 0.5;
}
/* Colour stripe at bottom of KPI cards */
.card > .progress {
  height: 3px !important;
  margin: 0 !important;
  border-radius: 0 0 var(--gc-r-md) var(--gc-r-md) !important;
  background: var(--gc-surface-3) !important;
}

/* â”€â”€ Summary numbers under charts â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
/* e.g. "Year / Income / Expenses" row beneath income chart    */
.card .row.text-center h2,
.card .row.text-center .h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 2px !important;
}
.card .row.text-center small {
  font-size: 10px !important;
  color: var(--gc-fg-5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
}
h2.font-light, h3.font-light { color: var(--gc-fg-2) !important; }

/* â”€â”€ Chartist.js dark theme â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.ct-label {
  fill:  var(--gc-fg-5) !important;
  color: var(--gc-fg-5) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.ct-grid {
  stroke: var(--gc-border) !important;
  stroke-dasharray: none !important;
}

/* â”€â”€ c3.js / donut charts dark theme â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.c3 text,
.c3 .c3-axis text          { fill: var(--gc-fg-5) !important; font-size: 11px !important; }
.c3 .c3-grid line,
.c3 .c3-xgrid,
.c3 .c3-ygrid              { stroke: var(--gc-border) !important; }
.c3-axis .domain           { stroke: var(--gc-border-med) !important; }
.c3 .c3-chart-arcs-title   { fill: var(--gc-fg-2) !important; font-size: 18px !important; font-weight: 700 !important; }
.c3 .c3-tooltip {
  background:    var(--gc-surface-2) !important;
  border:        1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  box-shadow:    0 4px 12px rgba(0,0,0,0.5) !important;
  color:         var(--gc-fg-2) !important;
}
.c3 .c3-tooltip td { border-left: none !important; font-size: 12px !important; color: var(--gc-fg-3) !important; }
.c3 .c3-tooltip th { background: transparent !important; color: var(--gc-fg-5) !important; font-size: 11px !important; }

/* â”€â”€ Legend label pills â€” shape only (colors from section 12) â”€â”€ */
.list-inline .label { gap: 5px !important; }
.list-inline .label .fa-circle { font-size: 7px !important; vertical-align: middle !important; }

/* â”€â”€ Projects message-center widget â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
/* Scoped to .dashboard-projects-admin to avoid touching topbar */
.dashboard-projects-admin.message-center a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 6px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  text-decoration: none !important;
  border-radius: var(--gc-r) !important;
  transition: background var(--gc-t-base), padding-left var(--gc-t-base);
}
.dashboard-projects-admin.message-center a:last-child { border-bottom: none !important; }
.dashboard-projects-admin.message-center a:hover {
  background:   var(--gc-surface-2) !important;
  padding-left: 10px !important;
}

/* Circle count badge */
.dashboard-projects-admin .btn-circle {
  width:      30px !important;
  height:     30px !important;
  min-width:  30px !important;
  line-height: 30px !important;
  font-size:  11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding:    0 !important;
  border:     none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.dashboard-projects-admin .btn.label-default { background: var(--gc-surface-3) !important; color: var(--gc-fg-4) !important; }
.dashboard-projects-admin .btn.btn-info      { background: var(--gc-info-dim)    !important; color: var(--gc-info)    !important; }
.dashboard-projects-admin .btn.btn-warning   { background: var(--gc-warning-dim) !important; color: var(--gc-warning) !important; }
.dashboard-projects-admin .btn.btn-success   { background: var(--gc-success-dim) !important; color: var(--gc-success) !important; }
.dashboard-projects-admin .btn.btn-danger    { background: var(--gc-danger-dim)  !important; color: var(--gc-danger)  !important; }

/* Mail content text */
.message-center .mail-contnet h5              { font-size: 13px !important; font-weight: 500 !important; color: var(--gc-fg-2) !important; margin: 0 0 2px !important; }
.message-center .mail-contnet .mail-desc       { font-size: 11px !important; color: var(--gc-fg-5) !important; }
.message-center .mail-contnet .mail-desc strong { color: var(--gc-fg-4) !important; font-weight: 600 !important; }

/* â”€â”€ Activity / profile timeline â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.profiletimeline {
  border-left-color: var(--gc-border-med) !important;
}
.profiletimeline .sl-left img {
  border-radius: 50% !important;
  border: 2px solid var(--gc-surface-3) !important;
}
.profiletimeline .sl-item  { margin-bottom: 18px !important; }
.profiletimeline .sl-date  { font-size: 11px !important; color: var(--gc-fg-5) !important; font-weight: 500 !important; }

/* x-meta: author name + relative date inline */
.profiletimeline .x-meta {
  font-size: 13px !important;
  color: var(--gc-fg-2) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 3px !important;
}
.profiletimeline .x-meta a        { color: var(--gc-fg-2) !important; text-decoration: none !important; font-weight: 600 !important; }
.profiletimeline .x-meta a:hover  { color: var(--gc-accent-text) !important; }

/* event description */
.profiletimeline .x-title         { font-size: 12.5px !important; color: var(--gc-fg-4) !important; line-height: 1.55 !important; }
.profiletimeline .x-title span    { color: var(--gc-fg-3) !important; }
.profiletimeline .x-title a       { color: var(--gc-accent-text) !important; text-decoration: none !important; }
.profiletimeline .x-title a:hover { text-decoration: underline !important; }

/* â”€â”€ Platform dynamic widget row â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
/* cards where .card and .card-body are on the same element     */
.card.card-body h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 4px !important;
}
.card.card-body .text-muted { font-size: 12px !important; color: var(--gc-fg-5) !important; }
.card.card-body .label.label-default {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 2px 6px !important;
}

/* ============================================================
   28. LIST PAGES â€” Toolbar, stats panel, filter sidebar, avatars
   ============================================================ */

/* â”€â”€ List-page action toolbar buttons â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.btn-page-actions {
  background: transparent !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-4) !important;
  font-size: 15px !important;
  padding: 6px 10px !important;
  line-height: 1 !important;
  border-radius: var(--gc-r) !important;
  margin-left: 4px !important;
  transition: background var(--gc-t-base), color var(--gc-t-base), border-color var(--gc-t-base) !important;
}
.btn-page-actions:hover,
.btn-page-actions:focus {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-2) !important;
  border-color: var(--gc-border-strong) !important;
  outline: none !important;
}
.btn-page-actions.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
  border-color: transparent !important;
}

/* â”€â”€ Inline search box â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.header-search {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  vertical-align: middle !important;
  max-width: 200px !important;
}
.header-search input {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-fg-2) !important;
  font-size: 12.5px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px 0 34px !important;
  transition: border-color var(--gc-t-base), background var(--gc-t-base) !important;
}
.header-search input:focus {
  background: var(--gc-surface-3) !important;
  border-color: var(--gc-border-strong) !important;
  outline: none !important;
}
.header-search input::placeholder { color: var(--gc-fg-5) !important; }
.header-search i {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 15px !important;
  color: var(--gc-fg-5) !important;
  pointer-events: none !important;
}

/* â”€â”€ Stats panel (quick-stats cards above table) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.stats-wrapper { margin-bottom: 0 !important; }

.card-group.table-stats-cards {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  background: transparent !important;
}
.card-group.table-stats-cards .card {
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: var(--gc-r-md) !important;
}
.card-group.table-stats-cards h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 4px !important;
  line-height: 1 !important;
}
.card-group.table-stats-cards h6.card-subtitle {
  font-size: 10.5px !important;
  color: var(--gc-fg-5) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}
.card-group.table-stats-cards small { font-size: 11px !important; color: var(--gc-fg-5) !important; }
.card-group.table-stats-cards .progress {
  height: 3px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  background: var(--gc-surface-3) !important;
  border-radius: 0 0 var(--gc-r-md) var(--gc-r-md) !important;
}

/* â”€â”€ Filtered results warning â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.filtered-results-warning {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
}
.filtered-results-warning a { color: var(--gc-accent-text) !important; }

/* â”€â”€ Table-row avatars â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.avatar-xsmall,
img.avatar-xsmall {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 1.5px solid var(--gc-surface-4) !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
.avatar-small,
img.avatar-small {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid var(--gc-surface-4) !important;
}

/* â”€â”€ Outline label variants (tag chips on rows) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="label-outline-"] {
  background: transparent !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  border-radius: var(--gc-r-full) !important;
  padding: 2px 8px !important;
}
.label-outline-default { border: 1px solid var(--gc-border-strong)     !important; color: var(--gc-fg-4)      !important; }
.label-outline-success  { border: 1px solid rgba(74,222,128,0.35)       !important; color: var(--gc-success)   !important; }
.label-outline-info     { border: 1px solid rgba(56,189,248,0.35)       !important; color: var(--gc-info)      !important; }
.label-outline-warning  { border: 1px solid rgba(251,146,60,0.35)       !important; color: var(--gc-warning)   !important; }
.label-outline-danger   { border: 1px solid rgba(248,113,113,0.35)      !important; color: var(--gc-danger)    !important; }
.label-outline-primary  { border: 1px solid rgba(129,140,248,0.35)      !important; color: var(--gc-accent-text) !important; }
.label-outline-purple   { border: 1px solid rgba(167,139,250,0.35)      !important; color: #c4b5fd             !important; }
.label-outline-gray     { border: 1px solid var(--gc-border-strong)     !important; color: var(--gc-fg-5)      !important; }

/* â”€â”€ Progress bars in table rows â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.table .progress {
  height: 8px !important;
  border-radius: var(--gc-r-full) !important;
  background: var(--gc-surface-3) !important;
  min-width: 80px !important;
  overflow: hidden !important;
}
.table .progress .progress-bar { border-radius: var(--gc-r-full) !important; }

/* â”€â”€ Table sort icons â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sorting-icons {
  font-size: 9px !important;
  padding-left: 4px !important;
  color: var(--gc-fg-5) !important;
  vertical-align: middle !important;
}
/* Active sort column link */
.js-list-sorting { color: var(--gc-fg-4) !important; text-decoration: none !important; }
.js-list-sorting:hover { color: var(--gc-fg-2) !important; }

/* â”€â”€ Pinned row indicator â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
tr.pinned { background: rgba(129,140,248,0.04) !important; }
tr.pinned > td:first-child { border-left: 2px solid rgba(129,140,248,0.5) !important; }

/* â”€â”€ Right sidebar (filter & export panels) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.right-sidebar {
  background: var(--gc-surface-2) !important;
  border-left: 1px solid var(--gc-border-med) !important;
  box-shadow: -10px 0 32px rgba(0,0,0,0.5) !important;
}
.right-sidebar .rpanel-title {
  background: transparent !important;
  color: var(--gc-fg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: none !important;
}
.right-sidebar .rpanel-title > i {
  font-size: 16px !important;
  color: var(--gc-fg-4) !important;
}
.right-sidebar .rpanel-title span {
  margin-left: auto !important;
  float: none !important;
}
.right-sidebar .rpanel-title span i.ti-close {
  font-size: 13px !important;
  color: var(--gc-fg-5) !important;
  cursor: pointer !important;
  transition: color var(--gc-t-base) !important;
}

/* ============================================================
   29. INDIVIDUAL RECORD / DETAIL PAGES
   (client detail, project detail, invoice/bill view, contact detail)
   ============================================================ */

/* â”€â”€ Profile left panel â”€â”€ */
.profile_header {
  background: var(--gc-surface-2) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  min-height: 80px !important;
}
.profile_header img {
  max-height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
  border-radius: var(--gc-r) !important;
}
/* text fallback (no logo) */
.profile_header.logo-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}

/* â”€â”€ Field label / value rows â”€â”€ */
.card-body small.text-muted {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gc-fg-4) !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.card-body h6.m-b-15,
.card-body h6.m-b-0 {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-2) !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

/* â”€â”€ Profile-tab navigation â”€â”€ */
.profile-tab.nav-tabs {
  border-bottom: 1px solid var(--gc-border) !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  background: transparent !important;
}
.profile-tab.nav-tabs .nav-item {
  margin-bottom: 0 !important;
}
.profile-tab .tabs-menu-item,
.profile-tab .nav-link {
  color: var(--gc-fg-4) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  transition: color var(--gc-t-base), border-color var(--gc-t-base) !important;
  margin-bottom: -1px !important;
  white-space: nowrap !important;
}
.profile-tab .tabs-menu-item:hover,
.profile-tab .nav-link:hover {
  color: var(--gc-fg-2) !important;
  border-bottom-color: var(--gc-border-med) !important;
  text-decoration: none !important;
}
.profile-tab .tabs-menu-item.active,
.profile-tab .nav-link.active {
  color: var(--gc-fg) !important;
  background: transparent !important;
  border-bottom-color: var(--gc-accent) !important;
  font-weight: 600 !important;
}

/* â”€â”€ Tab body â”€â”€ */
.tab-body,
.tab-body-embedded {
  padding-top: 16px !important;
}

/* â”€â”€ Detail page summary stats (left panel finance rows) â”€â”€ */
.card-body .no-border.m-b-0 td {
  color: var(--gc-fg-3) !important;
  font-size: 13px !important;
  border-color: var(--gc-border) !important;
  padding: 6px 0 !important;
  vertical-align: middle !important;
}
.card-body .no-border.m-b-0 td.font-medium {
  color: var(--gc-fg) !important;
  font-weight: 600 !important;
  text-align: right !important;
}

/* â”€â”€ Project detail cover / progress chart â”€â”€ */
#project_progress_container,
#project_cover_image_container {
  background: var(--gc-surface-2) !important;
  border-radius: var(--gc-r-md) !important;
}
#project_progress_chart {
  color: var(--gc-fg) !important;
}
#project_progress_chart .c3-arc path {
  opacity: 1 !important;
}

/* â”€â”€ Invoice / Bill view â”€â”€ */
#invoice-container .page-titles {
  background: transparent !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
}
#invoice-container .page-titles h3,
#invoice-container .page-titles h4 {
  color: var(--gc-fg) !important;
  margin: 0 !important;
}
#invoice-container .page-titles h4.muted {
  color: var(--gc-fg-4) !important;
}

/* Invoice wrapper card */
#bill-form-container .card.invoice-wrapper,
.invoice-wrapper.box-shadow {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-lg) !important;
  box-shadow: var(--gc-shadow) !important;
  padding: 32px !important;
}

/* Invoice header â€” bill type + status */
.billing-mode-only-item h3 {
  color: var(--gc-fg) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.billing-mode-only-item h5 {
  color: var(--gc-fg-3) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
/* Status heading (DRAFT / SENT / PAID / OVERDUE) */
.billing-mode-only-item h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1 !important;
}
/* Use existing Bootstrap text-* colors, just ensure they read well */
.text-success { color: var(--gc-success) !important; }
.text-danger  { color: var(--gc-danger)  !important; }
.text-warning { color: var(--gc-warning) !important; }
.text-info    { color: var(--gc-info)    !important; }
.text-muted   { color: var(--gc-fg-4)    !important; }
.text-themecolor { color: var(--gc-accent-text) !important; }

/* Company / client address block */
.billing-mode-only-item address h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 6px !important;
}
.billing-mode-only-item address h4 {
  color: var(--gc-fg-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.billing-mode-only-item address p.text-muted {
  color: var(--gc-fg-4) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Invoice divider */
.invoice-wrapper hr,
#bill-form-container hr {
  border-color: var(--gc-border) !important;
  margin: 20px 0 !important;
}

/* Invoice dates table (issue / due) */
#billing-dates-table td,
.invoice-dates-table td {
  color: var(--gc-fg-3) !important;
  font-size: 13px !important;
  padding: 4px 0 !important;
  border: none !important;
}
#billing-dates-table td strong,
.invoice-dates-table td strong {
  color: var(--gc-fg) !important;
}

/* Line items table */
#bill-items-table,
#bill-items-table-container table {
  border-color: var(--gc-border) !important;
  width: 100% !important;
}
#bill-items-table thead tr th,
#bill-items-table-container thead tr th {
  background: var(--gc-surface-2) !important;
  color: var(--gc-fg-4) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 12px !important;
  border-color: var(--gc-border) !important;
}
#bill-items-table tbody tr td,
#bill-items-table-container tbody tr td {
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  border-color: var(--gc-border) !important;
  vertical-align: top !important;
}
#bill-items-table tbody tr:hover td,
#bill-items-table-container tbody tr:hover td {
  background: var(--gc-surface-2) !important;
}
/* Long description */
.x-long-description {
  color: var(--gc-fg-4) !important;
  font-size: 12px !important;
}

/* Totals table */
.invoice-total-table {
  min-width: 300px !important;
}
.invoice-total-table td {
  color: var(--gc-fg-3) !important;
  font-size: 13.5px !important;
  padding: 5px 8px !important;
  border: none !important;
}
.invoice-total-table tbody tr:last-child td {
  color: var(--gc-fg) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-top: 1px solid var(--gc-border-med) !important;
  padding-top: 10px !important;
}
/* Grand total row */
#billing-table-section-grand-total td {
  color: var(--gc-fg) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-top: 1px solid var(--gc-border-strong) !important;
  padding-top: 12px !important;
}

/* Invoice action buttons bar */
#invoice-container .page-titles .btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
}

/* Invoice "Bill to" heading */
.billing-mode-only-item .pull-right h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Invoice attached-project title */
a#InvoiceTitleAttached h3.text-themecolor {
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* Label tags used inside detail pages */
.label.label-rounded.label-default.tag {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-full) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  display: inline-block !important;
  margin: 2px 2px 2px 0 !important;
}

/* Embedded bill (public/client view) */
.embedded-bill {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-lg) !important;
  padding: 24px !important;
}
}
.right-sidebar .rpanel-title span i.ti-close:hover { color: var(--gc-fg) !important; }

.right-sidebar .r-panel-body {
  background: transparent !important;
  padding: 16px 16px 40px !important;
}
.right-sidebar .filter-block {
  padding: 6px 0 12px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
.right-sidebar .filter-block:last-of-type { border-bottom: none !important; }
.right-sidebar .filter-block .title {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--gc-fg-5) !important;
  margin-bottom: 8px !important;
}
.right-sidebar .buttons-block {
  padding: 20px 0 !important;
  text-align: center !important;
}

/* Flat stat card */
.info-box,
.small-box {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  overflow: hidden !important;
}

.info-box-icon {
  width: 56px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
}

.info-box-content {
  padding: 12px 16px !important;
  color: var(--gc-fg-2) !important;
}

.info-box-text {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.info-box-number {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.03em !important;
}

/* Counter widget */
.counter-widget {
  text-align: center !important;
  padding: 20px 16px !important;
}

.counter-widget .counter {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.counter-widget .counter-label {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 4px !important;
}

/* Timeline */
.timeline-list li {
  border-left: 1px solid var(--gc-border) !important;
  padding-left: 16px !important;
  padding-bottom: 16px !important;
  position: relative !important;
  color: var(--gc-fg-2) !important;
  font-size: 12.5px !important;
}

.timeline-list li::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--gc-surface-4) !important;
  position: absolute !important;
  left: -4px !important;
  top: 5px !important;
}

.timeline-list li.active::before {
  background: var(--gc-accent) !important;
}


/* ============================================================
   28. PANELS & WELLS (Bootstrap 3 compat)
   ============================================================ */

.panel {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: none !important;
}

.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 12px 16px !important;
  color: var(--gc-fg) !important;
  font-weight: 600 !important;
}

.panel-body {
  padding: 16px !important;
  color: var(--gc-fg-2) !important;
}

.panel-footer {
  background: transparent !important;
  border-top: 1px solid var(--gc-border) !important;
  padding: 10px 16px !important;
}

.well {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 16px !important;
  box-shadow: none !important;
  color: var(--gc-fg-2) !important;
}


/* ============================================================
   29. TYPEAHEAD / AUTOCOMPLETE
   ============================================================ */

.tt-menu,
.typeahead-menu,
.ui-autocomplete {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow-lg) !important;
  padding: 4px !important;
}

.tt-suggestion,
.ui-menu-item {
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  border-radius: var(--gc-r-sm) !important;
  cursor: pointer !important;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor,
.ui-menu-item:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}


/* ============================================================
   30. DATE PICKER
   ============================================================ */

.datepicker,
.daterangepicker,
.bootstrap-datetimepicker-widget {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow-lg) !important;
  color: var(--gc-fg) !important;
}

.datepicker table tr td,
.datepicker table tr th {
  color: var(--gc-fg-2) !important;
  border-radius: var(--gc-r-sm) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background: var(--gc-accent) !important;
  color: #fff !important;
}

.datepicker table tr td:hover,
.datepicker table tr th:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}

.datepicker table tr td.today {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
  color: var(--gc-fg) !important;
}

.daterangepicker .calendar-table {
  background: transparent !important;
  border: none !important;
}

.daterangepicker .ranges li {
  color: var(--gc-fg-2) !important;
  border-radius: var(--gc-r-sm) !important;
  font-size: 12.5px !important;
  padding: 6px 12px !important;
}

.daterangepicker .ranges li:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}

.daterangepicker .ranges li.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

.daterangepicker td.in-range {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-fg) !important;
}

.daterangepicker td.active {
  background: var(--gc-accent) !important;
  color: #fff !important;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid var(--gc-border) !important;
}


/* ============================================================
   31. CHAT / MESSAGES
   ============================================================ */

.chat-list,
.chat-main-box {
  background: var(--gc-surface) !important;
}

.chat-left-aside {
  border-right: 1px solid var(--gc-border) !important;
  background: var(--gc-surface) !important;
}

.chat-item {
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 10px 14px !important;
  transition: background var(--gc-t) !important;
}

.chat-item:hover,
.chat-item.active {
  background: var(--gc-surface-3) !important;
}

.chat-item .name {
  color: var(--gc-fg) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.chat-item .small {
  color: var(--gc-fg-4) !important;
  font-size: 11.5px !important;
}

.chat-bubble {
  background: var(--gc-surface-3) !important;
  border-radius: var(--gc-r-lg) !important;
  padding: 10px 14px !important;
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  max-width: 75% !important;
}

.chat-bubble.mine {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-fg) !important;
}


/* ============================================================
   32. GENERAL OVERRIDES (kitchen sink)
   ============================================================ */

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--gc-fg) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

p, li, span, div {
  color: inherit;
}

a {
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--gc-accent) !important;
  text-decoration: none !important;
}

/* Code / pre */
code, kbd, pre {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-sm) !important;
  color: var(--gc-info) !important;
  font-size: 12px !important;
}

pre {
  padding: 12px 16px !important;
}

/* Horizontal rule */
hr {
  border-color: var(--gc-border) !important;
  margin: 16px 0 !important;
  opacity: 1 !important;
}

/* Text colors utility */
.text-muted,
.text-secondary { color: var(--gc-fg-4) !important; }
.text-primary   { color: var(--gc-accent-text) !important; }
.text-success   { color: var(--gc-success) !important; }
.text-danger    { color: var(--gc-danger) !important; }
.text-warning   { color: var(--gc-warning) !important; }
.text-info      { color: var(--gc-info) !important; }
.text-dark      { color: var(--gc-fg-4) !important; }
.text-white     { color: var(--gc-fg) !important; }

/* Background utilities */
.bg-primary { background: var(--gc-accent-dim) !important; color: var(--gc-accent-text) !important; }
.bg-success { background: var(--gc-success-dim) !important; color: var(--gc-success) !important; }
.bg-danger  { background: var(--gc-danger-dim) !important; color: var(--gc-danger) !important; }
.bg-warning { background: var(--gc-warning-dim) !important; color: var(--gc-warning) !important; }
.bg-info    { background: var(--gc-info-dim) !important; color: var(--gc-info) !important; }
.bg-dark    { background: var(--gc-surface-3) !important; color: var(--gc-fg-2) !important; }
.bg-white   { background: var(--gc-surface) !important; color: var(--gc-fg) !important; }

/* Shadow utilities */
.shadow     { box-shadow: var(--gc-shadow) !important; }
.shadow-sm  { box-shadow: var(--gc-shadow-sm) !important; }
.shadow-lg  { box-shadow: var(--gc-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* Border utilities */
.border     { border: 1px solid var(--gc-border) !important; }
.border-top    { border-top: 1px solid var(--gc-border) !important; }
.border-bottom { border-bottom: 1px solid var(--gc-border) !important; }
.border-left   { border-left: 1px solid var(--gc-border) !important; }
.border-right  { border-right: 1px solid var(--gc-border) !important; }
.border-0   { border: none !important; }

/* Rounded utilities */
.rounded    { border-radius: var(--gc-r) !important; }
.rounded-sm { border-radius: var(--gc-r-sm) !important; }
.rounded-lg { border-radius: var(--gc-r-lg) !important; }
.rounded-circle { border-radius: 50% !important; }

/* Print: preserve readability */
@media print {
  body, html, .page-wrapper { background: #fff !important; color: #000 !important; }
  .left-sidebar, .topbar { display: none !important; }
  .page-wrapper { margin-left: 0 !important; padding-top: 0 !important; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; }
  a { color: #000 !important; }
}

/* ============================================================
   30. TASKS â€” KANBAN BOARD (CORRECTED SELECTORS) + TASK MODAL
   ============================================================ */

/* â”€â”€ Board column (actual template: .board-body is the outer column) â”€â”€ */
.board-body {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  min-width: 280px !important;
  max-width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Accent left border by board color */
.board-body.border-primary { border-left: 3px solid var(--gc-accent)   !important; }
.board-body.border-success  { border-left: 3px solid var(--gc-success)  !important; }
.board-body.border-danger   { border-left: 3px solid var(--gc-danger)   !important; }
.board-body.border-warning  { border-left: 3px solid var(--gc-warning)  !important; }
.board-body.border-info     { border-left: 3px solid var(--gc-info)     !important; }
.board-body.border-default  { border-left: 3px solid var(--gc-border-strong) !important; }

/* Column heading bar */
.board-heading {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border-radius: var(--gc-r-md) var(--gc-r-md) 0 0 !important;
}
.board-heading .pull-left {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--gc-fg-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.board-heading .x-action-icons i,
.board-heading .x-action-icons span > i {
  color: var(--gc-fg-5) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: color var(--gc-t-base) !important;
}
.board-heading .x-action-icons i:hover {
  color: var(--gc-accent-text) !important;
}

/* Card list container (inside the board) */
.kanban-content {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 60px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 300px) !important;
}

/* â”€â”€ Kanban card â”€â”€ */
.kanban-card {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r) !important;
  cursor: pointer !important;
  transition: border-color var(--gc-t-base), box-shadow var(--gc-t-base), transform var(--gc-t-base) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.kanban-card:hover {
  border-color: var(--gc-border-med) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}
/* Pinned card */
.kanban-card.pinned,
.kanban-card.is_pinned {
  border-left: 3px solid var(--gc-accent) !important;
}

/* Card cover image */
.kanban-card-cover-image {
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 !important;
  display: none !important;
}
.kanban-card-cover-image:not(.hidden):not([class="kanban-card-cover-image "]) {
  display: block !important;
  height: 120px !important;
}

/* Card inner container (note: "comntainer" is a typo in the template) */
.kanban-card-content-comntainer {
  padding: 12px !important;
}

/* Card title */
.kanban-card .x-title.wordwrap {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--gc-fg) !important;
  line-height: 1.45 !important;
  margin-bottom: 8px !important;
  word-break: break-word !important;
  position: relative !important;
  padding-right: 20px !important;
}

/* 3-dot menu trigger on card */
.kanban-card .x-action-button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  color: var(--gc-fg-5) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity var(--gc-t-base) !important;
}
.kanban-card:hover .x-action-button {
  opacity: 1 !important;
}

/* Card meta lines (project, client, dates, checklist counts) */
.kanban-card-content-comntainer > span {
  display: block !important;
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}
.kanban-card-content-comntainer > span > strong {
  color: var(--gc-fg-3) !important;
  font-weight: 600 !important;
}

/* â”€â”€ Card footer â”€â”€ */
.kanban-card .x-footer.row {
  border-top: 1px solid var(--gc-border) !important;
  padding-top: 8px !important;
  margin-top: 10px !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Footer action icons */
.x-icons .x-icon {
  color: var(--gc-fg-4) !important;
  font-size: 14px !important;
  margin-right: 5px !important;
  cursor: pointer !important;
  transition: color var(--gc-t-base) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.x-icons .x-icon:hover  { color: var(--gc-fg-2) !important; }
.x-icons .x-icon.text-warning { color: var(--gc-warning) !important; }
.x-icons .x-icon.text-danger  { color: var(--gc-danger)  !important; }
.x-icons .x-icon.text-info    { color: var(--gc-info)    !important; }
.x-icons .opacity-4 { opacity: 0.4 !important; }

/* Unread notification dot */
.x-notification {
  width: 7px !important;
  height: 7px !important;
  background: var(--gc-accent) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin-top: -3px !important;
  margin-left: -3px !important;
}

/* Assigned user avatars in footer */
.x-assigned {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.x-assigned img.avatar-xsmall {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 2px solid var(--gc-surface-2) !important;
  object-fit: cover !important;
  margin-left: -6px !important;
}
.x-assigned img.avatar-xsmall:first-child { margin-left: 0 !important; }

/* Load more button */
.kanban-load-more,
[id^="kanban-load-more-"] {
  width: calc(100% - 20px) !important;
  margin: 0 10px 8px !important;
  background: transparent !important;
  border: 1px dashed var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-fg-4) !important;
  font-size: 12px !important;
  padding: 6px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color var(--gc-t-base), color var(--gc-t-base) !important;
}
[id^="kanban-load-more-"]:hover {
  border-color: var(--gc-accent) !important;
  color: var(--gc-accent-text) !important;
}

/* Filtered results warning */
.filtered-results-warning {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  padding: 6px 24px !important;
}
.filtered-results-warning a {
  color: var(--gc-accent-text) !important;
}

/* Drag-over highlight */
.kanban-content.drag-over,
.kanban-content.sortable-drag {
  background: var(--gc-accent-dim) !important;
  border-radius: var(--gc-r-sm) !important;
  outline: 1px dashed var(--gc-accent) !important;
}

/* â”€â”€ label-light-* variants (tags on kanban cards, invoice labels) â”€â”€ */
.label-light-primary { background: var(--gc-accent-dim)   !important; color: var(--gc-accent-text) !important; }
.label-light-success { background: var(--gc-success-dim)  !important; color: var(--gc-success)     !important; }
.label-light-danger  { background: var(--gc-danger-dim)   !important; color: var(--gc-danger)      !important; }
.label-light-warning { background: var(--gc-warning-dim)  !important; color: var(--gc-warning)     !important; }
.label-light-info    { background: var(--gc-info-dim)     !important; color: var(--gc-info)        !important; }
.label-light-inverse { background: rgba(255,255,255,0.07) !important; color: var(--gc-fg-3)        !important; }
.label-lighter-info  { background: var(--gc-info-dim)     !important; color: var(--gc-info)        !important; }
.label-light-default { background: rgba(255,255,255,0.05) !important; color: var(--gc-fg-4)        !important; }

/* â”€â”€ Task card MODAL â”€â”€ */
#cardModal.card-modal .modal-dialog {
  max-width: 960px !important;
  width: 95vw !important;
  margin: 24px auto !important;
}
#cardModal .modal-content {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.75) !important;
  overflow: hidden !important;
}
#cardModal .modal-body.row {
  padding: 0 !important;
  min-height: 420px !important;
}

/* Cover image header */
.card-cover-image-wrapper:not(.hidden) {
  width: 100% !important;
}
.card-cover-image-container {
  width: 100% !important;
  height: 160px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  border-radius: var(--gc-r-lg) var(--gc-r-lg) 0 0 !important;
  overflow: hidden !important;
}
.cover-image-remove-button {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
}

/* Modal tabs bar */
#cardModalTabMenu {
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 0 16px !important;
  background: var(--gc-surface) !important;
}
#cardModalTabMenu .nav-tabs {
  border-bottom: none !important;
}

/* Left panel */
.card-left-panel {
  padding: 20px 24px !important;
  border-right: 1px solid var(--gc-border) !important;
}

/* Right panel */
.card-right-panel {
  padding: 16px 18px !important;
  background: var(--gc-surface-2) !important;
  border-radius: 0 0 var(--gc-r-lg) 0 !important;
}

/* Modal close button */
#card-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  z-index: 20 !important;
  color: var(--gc-fg-4) !important;
  opacity: 1 !important;
  font-size: 14px !important;
  text-shadow: none !important;
}
#card-modal-close:hover { color: var(--gc-fg) !important; }

/* Right panel: section block */
.card-right-panel .x-section {
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
.card-right-panel .x-section:last-child {
  border-bottom: none !important;
}
/* Section label */
.card-right-panel .x-section > .x-title > h6,
.card-right-panel .x-title h6 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--gc-fg-5) !important;
  margin-bottom: 8px !important;
}
/* Section rows: icon + label + editable value */
.card-right-panel .x-element {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
.card-right-panel .x-element > i {
  color: var(--gc-fg-5) !important;
  font-size: 14px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}
.card-right-panel .x-element > span { color: var(--gc-fg-4) !important; }
.card-right-panel .x-element .x-highlight {
  color: var(--gc-fg-2) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: color var(--gc-t-base) !important;
}
.card-right-panel .x-element .x-highlight:hover {
  color: var(--gc-accent-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
/* Assign new user button */
.x-assigned-user.x-assign-new {
  color: var(--gc-fg-5) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: color var(--gc-t-base) !important;
}
.x-assigned-user.x-assign-new:hover { color: var(--gc-accent-text) !important; }

/* Left panel: task title */
.card-left-panel #card-task-title,
#card-task-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  padding: 4px 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
  border-radius: var(--gc-r-sm) !important;
  transition: background var(--gc-t-base), padding var(--gc-t-base) !important;
}
#card-task-title:focus {
  background: var(--gc-surface-3) !important;
  padding: 4px 8px !important;
}

/* Left panel: description */
.card-left-panel #card-task-description,
#card-task-description {
  font-size: 13.5px !important;
  color: var(--gc-fg-3) !important;
  line-height: 1.7 !important;
}

/* Left panel: comments section */
.card-comments {
  margin-top: 20px !important;
}
.card-comments .x-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gc-fg-4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}
.card-comments .x-heading > i { font-size: 14px !important; }

/* Checklist items */
.card-left-panel .checklist-item,
.checklist-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--gc-border) !important;
  font-size: 13px !important;
  color: var(--gc-fg-2) !important;
}
.checklist-item.completed {
  color: var(--gc-fg-5) !important;
  text-decoration: line-through !important;
}

/* â”€â”€ Leads kanban (shares same board/card template) â”€â”€ */
#leads-view-wrapper .board-body,
#leads-view-wrapper .kanban-content {
  /* inherits from .board-body and .kanban-content above */
}


/* ============================================================
   31. SETTINGS PAGE â€” secondary sidebar + form layout
   ============================================================ */

/* Settings page uses the main left-sidebar but for secondary nav */
.settings-menu {
  background: var(--gc-sidebar-bg) !important;
  border-right: 1px solid var(--gc-border) !important;
}

/* Settings sidebar nav items â€” parent (accordion toggle) */
.settings-menu #sidebarnav > li > a {
  color: var(--gc-fg-3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  transition: color var(--gc-t-base) !important;
}
.settings-menu #sidebarnav > li > a:hover {
  color: var(--gc-fg-2) !important;
  text-decoration: none !important;
}
/* Accordion arrow */
.settings-menu #sidebarnav > li > a.has-arrow::after {
  color: var(--gc-fg-5) !important;
  font-size: 10px !important;
}

/* Settings submenu */
.settings-menu #sidebarnav ul {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.settings-menu #sidebarnav ul li {
  list-style: none !important;
  padding: 0 !important;
}
.settings-menu #sidebarnav ul li::before {
  display: none !important;
}
.settings-menu #sidebarnav ul li a::before {
  display: none !important;
}

/* Settings menu links */
a.settings-menu-link {
  display: block !important;
  padding: 7px 20px 7px 28px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gc-fg-4) !important;
  background: transparent !important;
  border-left: 2px solid transparent !important;
  transition: color var(--gc-t-base), background var(--gc-t-base), border-color var(--gc-t-base) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
a.settings-menu-link:hover {
  color: var(--gc-fg-2) !important;
  background: rgba(255,255,255,0.04) !important;
  text-decoration: none !important;
}
/* Active settings link (set by JS: .js-submenu-ajax.active) */
a.settings-menu-link.active {
  color: var(--gc-fg) !important;
  background: var(--gc-accent-dim) !important;
  border-left-color: var(--gc-accent) !important;
  font-weight: 500 !important;
}

/* Settings content wrapper */
#settings-wrapper .card {
  background: var(--gc-surface) !important;
}
#settings-wrapper .card .card-body {
  padding: 24px !important;
}

/* Settings form: section headings */
.settings-page-section-title,
#embed-content-container h4,
#embed-content-container h5 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}

/* Settings form: sub-section headings */
#embed-content-container h6 {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-3) !important;
  margin-bottom: 8px !important;
}

/* Settings form: label */
#embed-content-container .form-group > label,
#embed-content-container .col-form-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-2) !important;
  margin-bottom: 5px !important;
}

/* Settings form: help icon */
.text-themecontrast {
  color: var(--gc-fg-4) !important;
}
.text-themecontrast:hover {
  color: var(--gc-fg-2) !important;
}

/* Settings form: horizontal rule divider */
#embed-content-container hr {
  border-color: var(--gc-border) !important;
  margin: 20px 0 !important;
}

/* Settings form: radio / checkbox labels */
.settings-page .radio label,
.settings-page .checkbox label,
#embed-content-container .radio label,
#embed-content-container .checkbox label {
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
}

/* Settings form: note / description text below inputs */
#embed-content-container .form-text,
#embed-content-container small.form-text {
  font-size: 11.5px !important;
  color: var(--gc-fg-5) !important;
  margin-top: 4px !important;
}

/* Settings save button area */
.settings-save-button-container,
#embed-content-container .btn-save-settings {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--gc-border) !important;
}


/* ============================================================
   32. GLOBAL POLISH â€” misc fixes across all pages
   ============================================================ */

/* â”€â”€ Avatar sizes â”€â”€ */
img.img-circle {
  border-radius: 50% !important;
  object-fit: cover !important;
}
img.avatar-xsmall { width: 26px  !important; height: 26px  !important; }
img.avatar-small  { width: 32px  !important; height: 32px  !important; }
img.avatar-medium { width: 40px  !important; height: 40px  !important; }

/* â”€â”€ Breadcrumb â”€â”€ */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  font-size: 12px !important;
}
.breadcrumb-item {
  color: var(--gc-fg-4) !important;
}
.breadcrumb-item a {
  color: var(--gc-fg-4) !important;
  text-decoration: none !important;
  transition: color var(--gc-t-base) !important;
}
.breadcrumb-item a:hover { color: var(--gc-fg-2) !important; }
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--gc-fg-5) !important;
}
.breadcrumb-item.active,
.breadcrumb-item.active-bread-crumb {
  color: var(--gc-fg-3) !important;
}

/* â”€â”€ Page titles bar â”€â”€ */
.page-titles {
  background: transparent !important;
  padding: 16px 24px 12px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
.page-titles h3,
.page-titles h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  margin: 0 0 2px !important;
  letter-spacing: -0.01em !important;
}
.page-titles h4 { font-size: 15px !important; font-weight: 600 !important; }

/* â”€â”€ Confirm / danger action modals â”€â”€ */
.swal2-popup {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important;
}
.swal2-title { color: var(--gc-fg) !important; font-size: 18px !important; }
.swal2-content, .swal2-html-container { color: var(--gc-fg-3) !important; font-size: 14px !important; }
.swal2-icon.swal2-warning { border-color: var(--gc-warning) !important; color: var(--gc-warning) !important; }
.swal2-icon.swal2-error   { border-color: var(--gc-danger)  !important; color: var(--gc-danger)  !important; }
.swal2-icon.swal2-success { border-color: var(--gc-success) !important; color: var(--gc-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(74,222,128,0.3) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background: var(--gc-success) !important; }
.swal2-confirm {
  background: var(--gc-accent) !important;
  border-radius: var(--gc-r) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-cancel {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-3) !important;
  border-radius: var(--gc-r) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* â”€â”€ Toast / Toastr notifications â”€â”€ */
#toast-container .toast {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  color: var(--gc-fg-2) !important;
  opacity: 1 !important;
}
#toast-container .toast-success { border-left: 3px solid var(--gc-success) !important; }
#toast-container .toast-error   { border-left: 3px solid var(--gc-danger)  !important; }
#toast-container .toast-warning { border-left: 3px solid var(--gc-warning) !important; }
#toast-container .toast-info    { border-left: 3px solid var(--gc-info)    !important; }
#toast-container .toast-message { font-size: 13px !important; }
#toast-container .toast-title   { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.toast-close-button { color: var(--gc-fg-4) !important; }

/* â”€â”€ Contact/user profile card (shown in modal, uses .m-t--50 pattern) â”€â”€ */
.card.m-t--50 {
  margin-top: -50px !important;
  border-radius: var(--gc-r-lg) !important;
  background: var(--gc-surface) !important;
  border-color: var(--gc-border) !important;
}
.card.m-t--50 .card-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
}
.card.m-t--50 .card-subtitle {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
  margin-bottom: 8px !important;
}

/* â”€â”€ Reports top nav with dropdown tabs â”€â”€ */
.reports-top-nav.nav-tabs {
  flex-wrap: wrap !important;
  gap: 0 !important;
}
.reports-top-nav .nav-link.dropdown-toggle {
  padding: 10px 16px !important;
  color: var(--gc-fg-4) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color var(--gc-t-base), border-color var(--gc-t-base) !important;
}
.reports-top-nav .nav-link.dropdown-toggle:hover {
  color: var(--gc-fg-2) !important;
  border-bottom-color: var(--gc-border-med) !important;
}
.reports-top-nav .nav-link.dropdown-toggle.active {
  color: var(--gc-fg) !important;
  border-bottom-color: var(--gc-accent) !important;
}

/* â”€â”€ Misc: scrollbar theming â”€â”€ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gc-surface-4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gc-fg-5); }

/* â”€â”€ Misc: selection color â”€â”€ */
::selection {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-fg) !important;
}

/* â”€â”€ Focus ring â”€â”€ */
*:focus-visible {
  outline: 2px solid var(--gc-accent) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   33. TICKET DETAIL PAGE
   ============================================================ */

/* â”€â”€ Ticket layout â”€â”€ */
#ticket {
  padding-top: 10px !important;
}

/* â”€â”€ Ticket left panel (details sidebar) â”€â”€ */
.ticket-panel {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  overflow: hidden !important;
}

/* Panel title bar */
.ticket-panel .x-top-header {
  background: var(--gc-surface-2) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gc-fg-4) !important;
}

/* Each detail row */
.ticket-panel .x-body {
  padding: 4px 0 !important;
}
.ticket-panel .x-list {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  gap: 12px !important;
}
.ticket-panel .x-list:last-child {
  border-bottom: none !important;
}
.ticket-panel .x-list .x-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-4) !important;
  min-width: 80px !important;
  flex-shrink: 0 !important;
}
.ticket-panel .x-list .x-details {
  font-size: 12.5px !important;
  color: var(--gc-fg-2) !important;
  text-align: right !important;
  word-break: break-word !important;
}
.ticket-panel .x-list .x-details a {
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}
.ticket-panel .x-list .x-details a:hover {
  text-decoration: underline !important;
}

/* â”€â”€ Main ticket body card â”€â”€ */
.x-message {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
}

/* Ticket author info block */
.x-message .x-body .d-flex h5 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin: 0 !important;
}
.x-message .x-body small.text-muted {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
}
/* Ticket message text */
.x-message .x-body > div:not(.d-flex) {
  font-size: 13.5px !important;
  color: var(--gc-fg-2) !important;
  line-height: 1.75 !important;
}

/* Ticket attachments */
.x-attachements {
  border-top: 1px solid var(--gc-border) !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
}

/* â”€â”€ Reply threads â”€â”€ */
.comment-widgets {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
}
/* Internal note style */
.comment-widgets.ticket_reply_type_note {
  background: rgba(251,146,60,0.05) !important;
  border-left: 3px solid var(--gc-warning) !important;
}

/* Reply author name */
.comment-widgets .comment-text h5 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 2px !important;
}
.comment-widgets .comment-text .text-muted small {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
}
/* Reply body text */
.comment-widgets .comment-text #ticket_reply_text_{ font-size: 13.5px !important; }
[id^="ticket_reply_text_"] {
  font-size: 13.5px !important;
  color: var(--gc-fg-2) !important;
  line-height: 1.7 !important;
  margin-top: 8px !important;
}
/* Edit/delete small links */
.comment-widgets .comment-text .text-right small a {
  color: var(--gc-fg-4) !important;
  transition: color var(--gc-t-base) !important;
}
.comment-widgets .comment-text .text-right small a:hover {
  color: var(--gc-accent-text) !important;
}

/* Reply avatar */
.comment-widgets .round img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Note label on reply */
.ticket_reply_note_icon {
  background: var(--gc-warning-dim) !important;
  color: var(--gc-warning) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: var(--gc-r-sm) !important;
  margin-bottom: 6px !important;
}

/* Reply compose box (reuse card-post / summernote already styled) */
#ticket-reply-editor-wrapper,
.ticket-reply-form {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 16px !important;
  margin-top: 12px !important;
}

/* ============================================================
   34. MESSAGES / CHAT PAGE
   ============================================================ */

/* â”€â”€ Overall chat layout â”€â”€ */
.chat-main-box {
  display: flex !important;
  height: calc(100vh - var(--gc-topbar-h) - 80px) !important;
  background: var(--gc-bg) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  overflow: hidden !important;
}

/* â”€â”€ Left panel: user list â”€â”€ */
.chat-left-aside {
  width: 260px !important;
  min-width: 260px !important;
  background: var(--gc-surface) !important;
  border-right: 1px solid var(--gc-border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}
.chat-left-inner {
  flex: 1 !important;
  overflow-y: auto !important;
}
.chatonline.style-none {
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}
/* Each user item */
.chatonline li {
  border-bottom: 1px solid var(--gc-border) !important;
}
.chatonline li:last-child { border-bottom: none !important; }

.messages-menu-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  color: var(--gc-fg-3) !important;
  text-decoration: none !important;
  transition: background var(--gc-t-base) !important;
}
.messages-menu-link:hover {
  background: var(--gc-surface-2) !important;
  color: var(--gc-fg-2) !important;
  text-decoration: none !important;
}
.messages-menu-link.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-fg) !important;
}
.messages-menu-link img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
/* Name + status */
.messages-menu-link > span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1.3 !important;
}
.messages-menu-link small.messages_user_status {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
  display: block !important;
}
.messages-menu-link small.text-info { color: var(--gc-info) !important; }

/* Unread count badge */
.messages_counter {
  background: var(--gc-danger) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: var(--gc-r-full) !important;
  padding: 1px 5px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

/* â”€â”€ Right panel: chat feed â”€â”€ */
.chat-right-aside {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--gc-bg) !important;
  overflow: hidden !important;
}
.chat-rbox {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Chat messages list */
.chat-list {
  list-style: none !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* Each message bubble */
.chat-list li {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
}
.chat-list li .chat-img img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.chat-list li .chat-content {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 9px 13px !important;
  max-width: 70% !important;
  font-size: 13.5px !important;
  color: var(--gc-fg-2) !important;
  line-height: 1.55 !important;
}
/* My messages (right-aligned) */
.chat-list li.reverse {
  flex-direction: row-reverse !important;
}
.chat-list li.reverse .chat-content {
  background: var(--gc-accent-dim) !important;
  border-color: rgba(129,140,248,0.2) !important;
  color: var(--gc-fg) !important;
}
/* Timestamp */
.chat-list li .chat-time {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
  margin-top: 3px !important;
  display: block !important;
}

/* â”€â”€ Compose bar â”€â”€ */
.card-post {
  border-top: 1px solid var(--gc-border) !important;
  background: var(--gc-surface) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
}
#messaging_text_editor {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  color: var(--gc-fg-2) !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  resize: none !important;
  min-height: 42px !important;
  max-height: 120px !important;
  width: 100% !important;
  transition: border-color var(--gc-t-base) !important;
}
#messaging_text_editor:focus {
  border-color: var(--gc-accent) !important;
  outline: none !important;
  background: var(--gc-surface-3) !important;
}
/* Send + attachment circle buttons */
.messaging_submit_button,
.messaging_file_upload_button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity var(--gc-t-base) !important;
}
.messaging_submit_button {
  background: var(--gc-accent) !important;
  color: #fff !important;
}
.messaging_submit_button:hover { opacity: 0.85 !important; }
.messaging_file_upload_button {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-3) !important;
  border: 1px solid var(--gc-border-med) !important;
}
.messaging_file_upload_button:hover {
  background: var(--gc-surface-4) !important;
}

/* Open/close panel toggle */
.open-panel {
  padding: 8px !important;
  color: var(--gc-fg-5) !important;
  cursor: pointer !important;
  text-align: center !important;
  border-bottom: 1px solid var(--gc-border) !important;
  transition: color var(--gc-t-base) !important;
}
.open-panel:hover { color: var(--gc-fg-2) !important; }

/* ============================================================
   35. TIMESHEETS, EXPENSES, CONTRACTS â€” LIST & DETAIL
   (mostly table-based, inherits from sections 9â€“12, 28)
   ============================================================ */

/* Timesheet timer input (duration fields) */
.timesheet-duration-input,
input[name="timesheet_time"],
input[name="timesheet_time_hours"],
input[name="timesheet_time_minutes"] {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.05em !important;
}

/* Expense category pill */
.expense-category-label {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-3) !important;
  border-radius: var(--gc-r-full) !important;
  font-size: 11px !important;
  padding: 2px 9px !important;
}

/* Contract status badges â€” already covered by .badge-* in section 12 */

/* Contract view: signature area */
.contract-signature-wrapper {
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 20px !important;
  background: var(--gc-surface) !important;
  text-align: center !important;
  min-height: 100px !important;
  margin-top: 12px !important;
}
.contract-signature-wrapper canvas {
  border-bottom: 1px solid var(--gc-border-strong) !important;
  width: 100% !important;
}

/* â”€â”€ Dropzone (file upload areas) â”€â”€ */
.dropzone {
  background: var(--gc-surface-2) !important;
  border: 2px dashed var(--gc-border-strong) !important;
  border-radius: var(--gc-r-md) !important;
  color: var(--gc-fg-4) !important;
  padding: 24px !important;
  text-align: center !important;
  transition: border-color var(--gc-t-base) !important;
}
.dropzone:hover,
.dropzone.dz-drag-hover {
  border-color: var(--gc-accent) !important;
  background: var(--gc-accent-dim) !important;
}
.dropzone .dz-message {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
}
.dropzone .dz-message i {
  font-size: 28px !important;
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--gc-fg-5) !important;
}
.dropzone .dz-preview .dz-image {
  border-radius: var(--gc-r-sm) !important;
}
.dropzone .dz-preview .dz-filename span,
.dropzone .dz-preview .dz-size span {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-3) !important;
  border-radius: var(--gc-r-sm) !important;
}

/* â”€â”€ Generic attachment item (files, ticket attachments) â”€â”€ */
.attachment-item,
.x-attachment-item {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r) !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: var(--gc-fg-3) !important;
  text-decoration: none !important;
  transition: border-color var(--gc-t-base) !important;
  margin: 4px !important;
}
.attachment-item:hover,
.x-attachment-item:hover {
  border-color: var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
}

/* â”€â”€ Inline edit fields (x-editable style) â”€â”€ */
.x-editable {
  cursor: pointer !important;
  border-bottom: 1px dashed var(--gc-border-strong) !important;
  padding-bottom: 1px !important;
  color: var(--gc-fg-2) !important;
  transition: border-color var(--gc-t-base), color var(--gc-t-base) !important;
}
.x-editable:hover {
  border-bottom-color: var(--gc-accent) !important;
  color: var(--gc-accent-text) !important;
}

/* ============================================================
   36. TIMELINE PAGE
   ============================================================ */

/* â”€â”€ Outer container â”€â”€ */
.profiletimeline {
  position: relative !important;
  padding-left: 0 !important;
}

/* â”€â”€ Each timeline item â”€â”€ */
.sl-item.timeline {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 0 24px 0 !important;
  position: relative !important;
}

/* Vertical connector line */
.sl-item.timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 18px !important;
  top: 42px !important;
  bottom: 0 !important;
  width: 1px !important;
  background: var(--gc-border) !important;
}
.sl-item.timeline:last-child::before { display: none !important; }

/* â”€â”€ Avatar column â”€â”€ */
.sl-left {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  position: relative !important;
  z-index: 1 !important;
}
.sl-left img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--gc-surface-3) !important;
}

/* â”€â”€ Content column â”€â”€ */
.sl-right {
  flex: 1 !important;
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 12px 16px !important;
  min-width: 0 !important;
}

/* Author + date row */
.sl-right .x-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-2) !important;
}
.sl-right .x-meta a {
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.sl-right .x-meta a:hover { text-decoration: underline !important; }

.sl-right .sl-date {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
  margin-left: auto !important;
}

/* Event description */
.sl-right .x-title {
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
  line-height: 1.5 !important;
}
.sl-right .x-title span { color: var(--gc-fg-3) !important; }
.sl-right .x-title a {
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}
.sl-right .x-title a:hover { text-decoration: underline !important; }

/* Attached content block (file / note excerpt) */
.sl-right .x-content {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: var(--gc-surface-2) !important;
  border-left: 3px solid var(--gc-border-strong) !important;
  border-radius: 0 var(--gc-r-sm) var(--gc-r-sm) 0 !important;
  font-size: 12.5px !important;
  color: var(--gc-fg-3) !important;
  line-height: 1.55 !important;
}

/* â”€â”€ Load-more button â”€â”€ */
.loadmore-button-container {
  text-align: center !important;
  padding: 10px 0 20px !important;
}
.btn-rounded-x {
  border-radius: var(--gc-r-full) !important;
  padding: 6px 22px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-3) !important;
  transition: all var(--gc-t-base) !important;
}
.btn-rounded-x:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-2) !important;
  border-color: var(--gc-fg-5) !important;
}

/* ============================================================
   37. REPORTS PAGE
   ============================================================ */

/* â”€â”€ Filter bar above reports table â”€â”€ */
.reports-list-page-filter-container {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.reports-list-page-filter-container .form-group {
  margin-bottom: 0 !important;
}

/* â”€â”€ Reports table container â”€â”€ */
.report-results-table-container {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  overflow: hidden !important;
}
#report-results-table {
  margin-bottom: 0 !important;
}
#report-results-table thead th {
  background: var(--gc-surface-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--gc-fg-4) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--gc-border-med) !important;
  white-space: nowrap !important;
}
#report-results-table thead th a {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* Sortable column icons */
.sorting-icons {
  opacity: 0.4 !important;
  font-size: 10px !important;
}
#report-results-table thead th:hover .sorting-icons { opacity: 0.8 !important; }

/* Table body rows */
#report-results-table tbody tr td {
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: var(--gc-fg-2) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  vertical-align: middle !important;
}
#report-results-table tbody tr:last-child td { border-bottom: none !important; }
#report-results-table tbody tr:hover td { background: var(--gc-surface-2) !important; }

/* â”€â”€ Totals footer row â”€â”€ */
.report-results-table-totals td {
  background: var(--gc-surface-3) !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  font-size: 12.5px !important;
  border-top: 1px solid var(--gc-border-med) !important;
  padding: 9px 12px !important;
}

/* â”€â”€ Reports chart containers â”€â”€ */
.report-chart-container,
.reports-chart-wrapper {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.report-chart-container h5,
.reports-chart-wrapper h5 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-3) !important;
  margin-bottom: 14px !important;
}

/* â”€â”€ Reports topnav dropdown â”€â”€ */
#fx-topnav-dropdown {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow) !important;
  padding: 4px 0 !important;
  min-width: 180px !important;
}
#fx-topnav-dropdown .dropdown-item {
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
  padding: 8px 16px !important;
  transition: background var(--gc-t-base), color var(--gc-t-base) !important;
}
#fx-topnav-dropdown .dropdown-item:hover,
#fx-topnav-dropdown .dropdown-item:focus {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}
#fx-topnav-dropdown .dropdown-item.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}

/* â”€â”€ Income / expense summary card â”€â”€ */
.income-summary-card {
  text-align: center !important;
  padding: 20px !important;
}
.income-summary-card .amount {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--gc-fg) !important;
}
.income-summary-card .label-text {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   38. KNOWLEDGEBASE
   ============================================================ */

/* â”€â”€ Article content â”€â”€ */
.kb-article .card {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
}
.kb-article .card-body {
  padding: 24px !important;
}

/* Article title with underline */
.card-title-underlined {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}

/* Article body text */
.kb-article .card-text {
  font-size: 14px !important;
  color: var(--gc-fg-2) !important;
  line-height: 1.8 !important;
}
.kb-article .card-text h1,
.kb-article .card-text h2,
.kb-article .card-text h3,
.kb-article .card-text h4 {
  color: var(--gc-fg) !important;
  margin-top: 20px !important;
}
.kb-article .card-text a {
  color: var(--gc-accent-text) !important;
}
.kb-article .card-text blockquote {
  border-left: 3px solid var(--gc-accent) !important;
  padding-left: 14px !important;
  color: var(--gc-fg-3) !important;
  margin: 12px 0 !important;
}
.kb-article .card-text code {
  background: var(--gc-surface-3) !important;
  color: var(--gc-accent-text) !important;
  padding: 2px 6px !important;
  border-radius: var(--gc-r-sm) !important;
  font-size: 87% !important;
}
.kb-article .card-text pre {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 14px !important;
  overflow-x: auto !important;
}
.kb-article .card-text pre code {
  background: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--gc-fg-2) !important;
}

/* â”€â”€ Video embed â”€â”€ */
.kb-video {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  border-radius: var(--gc-r-md) !important;
  background: #000 !important;
  margin-bottom: 12px !important;
}
.kb-video iframe,
.kb-video embed,
.kb-video object,
.kb-video video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: var(--gc-r-md) !important;
}
/* Video article title */
.kb-video ~ h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-top: 14px !important;
}

/* â”€â”€ KB category side panel â”€â”€ */
.kb-sidepanel {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  overflow: hidden !important;
}
.kb-sidepanel h6 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gc-fg-4) !important;
  padding: 12px 16px 8px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
.kb-sidepanel .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
  transition: background var(--gc-t-base) !important;
}
.kb-sidepanel .list-group-item:hover { background: var(--gc-surface-2) !important; }
.kb-sidepanel .list-group-item.active {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
  font-weight: 500 !important;
}

/* ============================================================
   39. WORKFLOWS
   ============================================================ */

/* â”€â”€ JSON code blocks â”€â”€ */
.card-body pre {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 14px !important;
  overflow-x: auto !important;
  font-size: 12.5px !important;
  color: var(--gc-fg-3) !important;
  line-height: 1.6 !important;
  max-height: 300px !important;
}

/* â”€â”€ Workflow detail stat rows â”€â”€ */
.card-body > div[class*="text-muted"] {
  font-size: 12.5px !important;
  color: var(--gc-fg-4) !important;
}
.card-body > div strong {
  color: var(--gc-fg-3) !important;
  font-weight: 600 !important;
}

/* â”€â”€ Workflow run status badges â”€â”€ */
.workflowrun-status-completed { color: var(--gc-success) !important; font-weight: 600 !important; }
.workflowrun-status-failed    { color: var(--gc-danger)  !important; font-weight: 600 !important; }
.workflowrun-status-running   { color: var(--gc-warning) !important; font-weight: 600 !important; }

/* â”€â”€ Workflow border-bottom hr dividers â”€â”€ */
.card-body hr {
  border-color: var(--gc-border) !important;
  margin: 14px 0 !important;
}

/* â”€â”€ Workflow table: trigger-type / event monospace chips â”€â”€ */
#report-results-table td code,
.table td code {
  background: var(--gc-surface-3) !important;
  color: var(--gc-info) !important;
  padding: 2px 7px !important;
  border-radius: var(--gc-r-sm) !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

/* ============================================================
   40. FINAL SWEEP â€” remaining utility overrides
   ============================================================ */

/* â”€â”€ Toastr notifications â”€â”€ */
#toast-container > div {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  box-shadow: var(--gc-shadow) !important;
  opacity: 1 !important;
}
#toast-container > .toast-success { border-left: 3px solid var(--gc-success) !important; }
#toast-container > .toast-error   { border-left: 3px solid var(--gc-danger)  !important; }
#toast-container > .toast-warning { border-left: 3px solid var(--gc-warning) !important; }
#toast-container > .toast-info    { border-left: 3px solid var(--gc-info)    !important; }
#toast-container > div .toast-title {
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 2px !important;
}
#toast-container > div .toast-message { color: var(--gc-fg-3) !important; }
#toast-container > div .toast-close-button {
  color: var(--gc-fg-4) !important;
  opacity: 1 !important;
  font-size: 18px !important;
}

/* â”€â”€ SweetAlert2 confirm dialogs â”€â”€ */
.swal2-popup {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  color: var(--gc-fg-2) !important;
}
.swal2-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
}
.swal2-html-container {
  font-size: 13.5px !important;
  color: var(--gc-fg-3) !important;
}
.swal2-confirm {
  background: var(--gc-accent) !important;
  border: none !important;
  border-radius: var(--gc-r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.swal2-cancel {
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
  border-radius: var(--gc-r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.swal2-cancel:hover { background: var(--gc-surface-4) !important; }
.swal2-icon { border-color: var(--gc-border-strong) !important; }
.swal2-icon.swal2-warning { color: var(--gc-warning) !important; border-color: var(--gc-warning) !important; }
.swal2-icon.swal2-error   { color: var(--gc-danger)  !important; border-color: var(--gc-danger)  !important; }
.swal2-icon.swal2-success { color: var(--gc-success) !important; border-color: var(--gc-success) !important; }
.swal2-icon.swal2-info    { color: var(--gc-info)    !important; border-color: var(--gc-info)    !important; }
.swal2-icon.swal2-question { color: var(--gc-fg-3)   !important; border-color: var(--gc-border-strong) !important; }

/* â”€â”€ Daterangepicker â”€â”€ */
.daterangepicker {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow) !important;
  color: var(--gc-fg-2) !important;
}
.daterangepicker .drp-calendar .month {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--gc-accent) !important;
  color: #fff !important;
  border-radius: var(--gc-r-sm) !important;
}
.daterangepicker td.in-range {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-fg-2) !important;
}
.daterangepicker td.available:hover {
  background: var(--gc-surface-3) !important;
  border-radius: var(--gc-r-sm) !important;
}
.daterangepicker td.off { color: var(--gc-fg-5) !important; }
.daterangepicker th { color: var(--gc-fg-4) !important; font-size: 11px !important; }
.daterangepicker .prev span,
.daterangepicker .next span { border-color: transparent var(--gc-fg-4) !important; }
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--gc-border) !important;
  padding: 8px 12px !important;
}
.daterangepicker .btn-default {
  background: var(--gc-surface-3) !important;
  border-color: var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
}
.daterangepicker .btn-primary {
  background: var(--gc-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.daterangepicker .calendar-table {
  background: transparent !important;
  border: none !important;
}

/* â”€â”€ Bootstrap tooltips â”€â”€ */
.tooltip .tooltip-inner {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-2) !important;
  font-size: 12px !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 5px 10px !important;
  border: 1px solid var(--gc-border-med) !important;
}
.tooltip .arrow::before { border-top-color: var(--gc-surface-3) !important; }

/* â”€â”€ Bootstrap popovers â”€â”€ */
.popover {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-md) !important;
  box-shadow: var(--gc-shadow) !important;
}
.popover-header {
  background: var(--gc-surface-3) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  color: var(--gc-fg) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--gc-r-md) var(--gc-r-md) 0 0 !important;
}
.popover-body {
  color: var(--gc-fg-3) !important;
  font-size: 12.5px !important;
}
.bs-popover-top > .arrow::after { border-top-color: var(--gc-surface-2) !important; }
.bs-popover-bottom > .arrow::after { border-bottom-color: var(--gc-surface-2) !important; }

/* â”€â”€ Error log / system pages â”€â”€ */
.errorlogs-container pre,
.system-info pre {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 14px !important;
  color: var(--gc-fg-3) !important;
  font-size: 12px !important;
  overflow: auto !important;
  max-height: 500px !important;
}

/* â”€â”€ Media: responsive tweaks â”€â”€ */
@media (max-width: 767px) {
  body.loggedin.responsive-shell #list-page-actions .header-search {
    flex-basis: 100% !important;
  }
  body.loggedin.responsive-shell .reports-responsive-workspace .reports-top-nav-shell {
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding: 0 10px !important;
  }
  body.loggedin.responsive-shell .finance-ops-workspace .finance-ops-jump-links .btn {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  body.loggedin.responsive-shell .finance-ops-workspace .table-responsive > .table,
  body.loggedin.responsive-shell .finance-ops-workspace .table-responsive table {
    min-width: 640px !important;
  }
  .chat-main-box {
    flex-direction: column !important;
    height: auto !important;
  }
  .chat-left-aside {
    width: 100% !important;
    min-width: unset !important;
    border-right: none !important;
    border-bottom: 1px solid var(--gc-border) !important;
    max-height: 220px !important;
  }
  .ticket-panel { margin-bottom: 16px !important; }
  .sl-item.timeline { flex-direction: column !important; }
  .sl-item.timeline::before { display: none !important; }
  .report-results-table-container { font-size: 12px !important; }
  #report-results-table thead th,
  #report-results-table tbody tr td { padding: 7px 8px !important; }
}

/* ============================================================
   41. AUTHENTICATION â€” login Â· signup Â· forgot password
   ============================================================ */

/* Logged-out body background */
body:not(.loggedin) {
  background: var(--gc-bg) !important;
}

/* â”€â”€ Logo area â”€â”€ */
.login-logo {
  text-align: center !important;
}
.login-logo img {
  max-height: 48px !important;
  width: auto !important;
}

/* â”€â”€ Login/signup box â”€â”€ */
.login-box {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  padding: 32px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Title inside login box */
.login-box .box-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}
.login-box .title small {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
}

/* Form labels + inputs */
.login-box label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-3) !important;
  margin-bottom: 5px !important;
}
.login-box .form-control {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg) !important;
  border-radius: var(--gc-r) !important;
  height: 40px !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  transition: border-color var(--gc-t-base) !important;
}
.login-box .form-control:focus {
  border-color: var(--gc-accent) !important;
  background: var(--gc-surface-3) !important;
  box-shadow: none !important;
  outline: none !important;
}
.login-box .form-control::placeholder { color: var(--gc-fg-5) !important; }

/* Submit button */
.login-box .btn-info,
.login-box .btn-block[type="submit"],
.login-box #loginSubmitButton,
.login-box #signUpSubmitButton {
  background: var(--gc-accent) !important;
  border: none !important;
  border-radius: var(--gc-r) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 42px !important;
  width: 100% !important;
  transition: opacity var(--gc-t-base) !important;
}
.login-box .btn-info:hover,
.login-box #loginSubmitButton:hover { opacity: 0.85 !important; }

/* Forgot password link */
.login-box .text-dark {
  color: var(--gc-fg-4) !important;
}
.login-box .text-dark:hover { color: var(--gc-accent-text) !important; }

/* Sign-up link */
.login-box .text-info { color: var(--gc-accent-text) !important; }

/* Remember me checkbox */
.login-box .custom-control-description {
  font-size: 12.5px !important;
  color: var(--gc-fg-4) !important;
}

/* â”€â”€ Decorative background images â”€â”€ */
.login-background {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: hidden !important;
}
.login-background .x-left,
.login-background .x-right {
  position: absolute !important;
  bottom: 0 !important;
  opacity: 0.04 !important;
}
.login-background .x-left { left: 0 !important; }
.login-background .x-right { right: 0 !important; }
.login-background img { max-width: 420px !important; filter: grayscale(1) !important; }

/* â”€â”€ Forgot password page â”€â”€ */
.login-forms-forgot .login-box {
  text-align: center !important;
}

/* ============================================================
   42. DOCUMENTS â€” proposals & contracts editor / viewer
   ============================================================ */

/* â”€â”€ Main document wrapper â”€â”€ */
.docs-main-wrapper {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-lg) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.docs-main-wrapper.box-shadow {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}

/* â”€â”€ Hero header â”€â”€ */
.hero-header-wrapper {
  position: relative !important;
  min-height: 160px !important;
  background: var(--gc-surface-3) !important;
  overflow: hidden !important;
}
.header-cover {
  min-height: 160px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  padding: 28px 28px 20px !important;
}

/* Status ribbon badge */
.document-status-ribbon {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  padding: 4px 14px !important;
  border-radius: var(--gc-r-sm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
  z-index: 10 !important;
}
.document-status-ribbon.bg-draft    { background: var(--gc-surface-4) !important; color: var(--gc-fg-3) !important; }
.document-status-ribbon.bg-info     { background: var(--gc-info)    !important; }
.document-status-ribbon.bg-success  { background: var(--gc-success) !important; }
.document-status-ribbon.bg-danger   { background: var(--gc-danger)  !important; }
.document-status-ribbon.bg-primary  { background: var(--gc-accent)  !important; }
.document-status-ribbon.bg-warning  { background: var(--gc-warning) !important; }

/* â”€â”€ Document "to/by" company/client section â”€â”€ */
.doc-to-by-container {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
.doc-to-by {
  padding: 4px 0 !important;
}
.doc-to-by h3 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--gc-fg-4) !important;
  margin-bottom: 8px !important;
}
.doc-to-by h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 4px !important;
}
.doc-to-by .x-title,
.doc-to-by .resizetext {
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
  line-height: 1.7 !important;
}

/* â”€â”€ Document body â”€â”€ */
.doc-body {
  padding: 24px !important;
}
.doc-body .tinymce-document-textarea {
  min-height: 400px !important;
  font-size: 14px !important;
}

/* â”€â”€ Signature panel â”€â”€ */
.doc-signed-panel {
  padding: 20px 24px !important;
  border-top: 1px solid var(--gc-border) !important;
}
.doc-signed-panel ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
}
.doc-signed-panel ul li { color: var(--gc-fg-3) !important; font-size: 13px !important; }
.doc-signed-panel ul h5 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gc-fg-4) !important;
  margin-bottom: 4px !important;
}
.doc-signed-panel ul li img {
  max-width: 180px !important;
  height: auto !important;
  border-bottom: 1px solid var(--gc-border-strong) !important;
  padding-bottom: 4px !important;
  filter: invert(1) opacity(0.7) !important;
}

/* â”€â”€ Documents side panel (editing) â”€â”€ */
.documents-side-panel-hero,
.right-sidebar[id^="documents-side-panel"] {
  background: var(--gc-surface-2) !important;
  border-left: 1px solid var(--gc-border-med) !important;
}

/* â”€â”€ Document detail row (dates etc.) â”€â”€ */
.doc-details-row {
  display: flex !important;
  gap: 24px !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  font-size: 12.5px !important;
  color: var(--gc-fg-3) !important;
}
.doc-details-row .doc-detail-label {
  font-weight: 600 !important;
  color: var(--gc-fg-4) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.07em !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.doc-details-row .doc-detail-value {
  font-size: 13px !important;
  color: var(--gc-fg-2) !important;
}

/* ============================================================
   43. PUBLIC PAY PAGE â€” invoice payment gateway selection
   ============================================================ */

/* â”€â”€ Pay container â”€â”€ */
.invoice-pay {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 20px !important;
  margin-top: 12px !important;
}

/* Title */
.invoice-pay .x-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
  margin-bottom: 12px !important;
}

/* Gateway radio options */
.invoice-pay .x-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.invoice-pay .x-checkbox {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r) !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  transition: border-color var(--gc-t-base), background var(--gc-t-base) !important;
}
.invoice-pay .x-checkbox:has(input:checked) {
  border-color: var(--gc-accent) !important;
  background: var(--gc-accent-dim) !important;
}
.invoice-pay .x-checkbox:hover {
  border-color: var(--gc-border-med) !important;
  background: var(--gc-surface-3) !important;
}
.invoice-pay .x-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-2) !important;
}
/* Radio input styling */
.invoice-pay .x-checkbox input[type="radio"] {
  accent-color: var(--gc-accent) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* Pay button */
.x-button .btn-danger,
#invoice-stripe-payment-button,
.gateway-pay-button {
  background: var(--gc-accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--gc-r) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 28px !important;
  width: 100% !important;
  margin-top: 14px !important;
  transition: opacity var(--gc-t-base) !important;
}
.x-button .btn-danger:hover,
#invoice-stripe-payment-button:hover { opacity: 0.85 !important; }

/* â”€â”€ Please wait / redirect pages â”€â”€ */
.please-wait-container,
#pleasewait {
  text-align: center !important;
  padding: 60px 20px !important;
}
.please-wait-container h4,
#pleasewait h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-top: 16px !important;
}
.please-wait-container p,
#pleasewait p {
  font-size: 13.5px !important;
  color: var(--gc-fg-4) !important;
}

/* ============================================================
   44. GLOBAL SEARCH MODAL
   ============================================================ */

/* ── Search modal dialog ── */
#searchModal .modal-dialog {
  max-width: 660px !important;
  margin: 56px auto !important;
}
#searchModal .modal-content {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.3) !important;
}
#searchModal .modal-header {
  background: var(--gc-surface-2) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  padding: 10px 14px !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* ── Strip Bootstrap row/col interference inside search modal ── */
#searchModal .form-group     { margin-bottom: 0 !important; width: 100% !important; }
#searchModal .form-group.row { display: flex !important; margin-left: 0 !important; margin-right: 0 !important; }
#searchModal .col-12         { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; }

/* ── Search input bar (visible pill container) ── */
.x-search-field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.x-search-field-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--gc-surface-3) !important;
  border: 1.5px solid var(--gc-border-med) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  height: 46px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.x-search-field-container:focus-within {
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--gc-accent) 18%, transparent) !important;
}
.x-search-field-container i {
  font-size: 17px !important;
  color: var(--gc-fg-4) !important;
  flex-shrink: 0 !important;
}
#global-search-field {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--gc-fg) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  height: 100% !important;
  flex: 1 !important;
  min-width: 0 !important;
  box-shadow: none !important;
}
#global-search-field:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
#global-search-field::placeholder { color: var(--gc-fg-5) !important; }

#searchModal .modal-body {
  padding: 0 !important;
  max-height: calc(100vh - 180px) !important;
  overflow-y: auto !important;
}

/* â”€â”€ Category filter chips â”€â”€ */
.search-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  background: var(--gc-surface) !important;
}
.search-category-button {
  padding: 4px 12px !important;
  border-radius: var(--gc-r-full) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-4) !important;
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border) !important;
  cursor: pointer !important;
  transition: all var(--gc-t-base) !important;
}
.search-category-button:hover {
  background: var(--gc-surface-4) !important;
  color: var(--gc-fg-2) !important;
}
.search-category-button.active,
.search-category-button.current {
  background: var(--gc-accent-dim) !important;
  border-color: rgba(129,140,248,0.3) !important;
  color: var(--gc-accent-text) !important;
}

/* â”€â”€ Search results container â”€â”€ */
.search-results-container {
  padding: 8px 0 !important;
}

/* Category group heading */
.x-each-category .x-heading {
  padding: 6px 16px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.x-each-category .x-heading .x-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--gc-fg-4) !important;
}
.x-each-category .x-heading .x-count a {
  font-size: 11.5px !important;
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}
.x-each-category .x-heading .x-count a:hover { text-decoration: underline !important; }

/* Individual result items */
.search-results-container ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.search-results-container ul li {
  border-bottom: 1px solid var(--gc-border) !important;
}
.search-results-container ul li:last-child { border-bottom: none !important; }
.search-results-container ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  color: var(--gc-fg-2) !important;
  text-decoration: none !important;
  transition: background var(--gc-t-base) !important;
  font-size: 13.5px !important;
}
.search-results-container ul li a:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}
.search-results-container ul li .x-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--gc-r-sm) !important;
  background: var(--gc-surface-3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
}

/* â”€â”€ Empty / start state â”€â”€ */
.search-modal-message {
  padding: 40px 20px !important;
  text-align: center !important;
}
.x-holder-start img {
  opacity: 0.15 !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 14px !important;
  filter: grayscale(1) !important;
}
.x-holder-start h5 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
  margin-bottom: 6px !important;
}
.x-holder-start h6 {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
  font-weight: 400 !important;
}

/* â”€â”€ Search 404 / no results â”€â”€ */
.search-modal-message-404 {
  padding: 40px 20px !important;
  text-align: center !important;
}
.search-modal-message-404 h5 {
  font-size: 15px !important;
  color: var(--gc-fg-3) !important;
  margin-top: 10px !important;
}

/* ============================================================
   45. ADMIN SaaS PLATFORM DASHBOARD
   ============================================================ */

/* â”€â”€ Platform KPI widgets (big number cards) â”€â”€ */
.platform-row .card-body,
#platform-widgets-row .card-body {
  padding: 18px !important;
}
.platform-row h2,
#platform-widgets-row h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--gc-fg) !important;
  margin-bottom: 4px !important;
}
.platform-row .card-title,
#platform-widgets-row .card-title {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
}
.platform-row .text-muted,
#platform-widgets-row .text-muted {
  font-size: 12px !important;
  color: var(--gc-fg-5) !important;
}

/* Key icon */
.platform-row .display-6,
#platform-widgets-row .display-6 {
  font-size: 28px !important;
  opacity: 0.5 !important;
}

/* â”€â”€ Platform manager widget table â”€â”€ */
.platform-manager-table {
  font-size: 13px !important;
}
.platform-manager-table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--gc-fg-4) !important;
}
/* Widget settings toggle checkbox */
.platform-manager-table input[type="checkbox"] {
  accent-color: var(--gc-accent) !important;
}

/* â”€â”€ Admin second row: income vs expense chart â”€â”€ */
#dashboard-admin-invoice-vs-expenses .card,
#dashboard-admin-invoice-vs-expenses .card-body {
  background: var(--gc-surface) !important;
}
#dashboard-admin-invoice-vs-expenses .card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
}
/* Legend labels */
#dashboard-admin-invoice-vs-expenses .label-success {
  background: var(--gc-success-dim) !important;
  color: var(--gc-success) !important;
}
#dashboard-admin-invoice-vs-expenses .label-info {
  background: var(--gc-info-dim) !important;
  color: var(--gc-info) !important;
}

/* â”€â”€ Admin third row: recent comments / events â”€â”€ */
.dashboard-admin-recent-events .comment-row {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--gc-border) !important;
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
}
.dashboard-admin-recent-events .comment-row:last-child { border-bottom: none !important; }
.dashboard-admin-recent-events .comment-row a {
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}

/* â”€â”€ Platform row: tenant info (multitenancy admin) â”€â”€ */
.platform-tenant-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  transition: background var(--gc-t-base) !important;
}
.platform-tenant-row:hover { background: var(--gc-surface-2) !important; }
.platform-tenant-row .tenant-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
}
.platform-tenant-row .tenant-domain {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
}
.platform-tenant-row .tenant-status {
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: var(--gc-r-full) !important;
}
.platform-tenant-row .tenant-status.active { background: var(--gc-success-dim); color: var(--gc-success) !important; }
.platform-tenant-row .tenant-status.suspended { background: var(--gc-danger-dim); color: var(--gc-danger) !important; }

/* â”€â”€ Custom checkbox / toggle for module settings â”€â”€ */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--gc-accent) !important;
  border-color: var(--gc-accent) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--gc-accent-dim) !important;
}
.custom-control-label::before {
  background-color: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
}

/* ============================================================
   46. NOTIFICATIONS & REMINDERS SIDE PANELS
   ============================================================ */

/* â”€â”€ Panel sub-navigation tabs â”€â”€ */
.rpanel-title .x-top-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  border-top: 1px solid var(--gc-border) !important;
  margin-top: 4px !important;
}
.right-sidepanel-menu {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-4) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: var(--gc-r-sm) !important;
  transition: color var(--gc-t-base), background var(--gc-t-base) !important;
  cursor: pointer !important;
}
.right-sidepanel-menu:hover {
  color: var(--gc-fg-2) !important;
  background: var(--gc-surface-3) !important;
  text-decoration: none !important;
}
.right-sidepanel-menu.active {
  color: var(--gc-accent-text) !important;
  background: var(--gc-accent-dim) !important;
}
.rpanel-title .x-spacer {
  color: var(--gc-border-strong) !important;
  font-size: 12px !important;
}

/* â”€â”€ Mark all read link â”€â”€ */
.sidepanel-notifications-mark-all-read {
  padding: 4px 14px 8px !important;
  text-align: right !important;
}
.sidepanel-notifications-mark-all-read a {
  font-size: 11.5px !important;
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}
.sidepanel-notifications-mark-all-read a:hover { text-decoration: underline !important; }

/* â”€â”€ Each notification event item â”€â”€ */
.sidepanel-notifications-events > .sl-item,
#sidepanel-notifications-events .sl-item {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
#sidepanel-notifications-events .sl-item .sl-left img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}
#sidepanel-notifications-events .sl-item .x-meta {
  font-size: 12px !important;
  color: var(--gc-fg-3) !important;
}
#sidepanel-notifications-events .sl-item .x-title {
  font-size: 12.5px !important;
  color: var(--gc-fg-2) !important;
  line-height: 1.45 !important;
}
#sidepanel-notifications-events .sl-item .x-description {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}
#sidepanel-notifications-events .sl-item .x-reference a {
  font-size: 11.5px !important;
  color: var(--gc-accent-text) !important;
  text-decoration: none !important;
}
#sidepanel-notifications-events .sl-item .sl-date {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
}

/* Unread indicator dot */
.sl-item.unread .sl-left::after {
  content: '' !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gc-accent) !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}
.sl-item.unread .sl-left { position: relative !important; }

/* â”€â”€ Reminders panel items â”€â”€ */
.message-center.topnav-reminders-container {
  padding: 0 !important;
}
.message-center .message-item,
.topnav-reminders-container .message-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  transition: background var(--gc-t-base) !important;
}
.message-center .message-item:hover,
.topnav-reminders-container .message-item:hover {
  background: var(--gc-surface-2) !important;
}
.message-center .message-item .mail-contnet {
  flex: 1 !important;
}
.message-center .message-item .mail-contnet h5 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
  margin-bottom: 2px !important;
}
.message-center .message-item .mail-contnet .mail-desc {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
}
.message-center .message-item .mail-contnet .time {
  font-size: 11px !important;
  color: var(--gc-fg-5) !important;
}

/* â”€â”€ Load more in panels â”€â”€ */
#events-panel-loadmore-button-container {
  padding: 10px 14px !important;
  text-align: center !important;
}
.btn-rounded {
  border-radius: var(--gc-r-full) !important;
  padding: 5px 18px !important;
  font-size: 12px !important;
  background: var(--gc-surface-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-3) !important;
}
.btn-rounded:hover {
  background: var(--gc-surface-4) !important;
  color: var(--gc-fg-2) !important;
}

/* â”€â”€ Topnav notification icon badge â”€â”€ */
.notify {
  position: absolute !important;
  top: 4px !important;
  right: 2px !important;
}
.notify .heartbeat {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--gc-danger) !important;
  display: block !important;
}

/* ============================================================
   47. WEBFORM â€” public-facing lead capture form
   ============================================================ */

/* â”€â”€ Webform page body â”€â”€ */
.webform {
  background: var(--gc-bg) !important;
  min-height: 100vh !important;
}

/* â”€â”€ Logo â”€â”€ */
.webform-logo {
  text-align: center !important;
  padding: 24px !important;
}
.webform-logo img {
  max-height: 48px !important;
  width: auto !important;
}

/* â”€â”€ Form wrapper â”€â”€ */
#webform {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  padding: 28px !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Form fields */
.webform-fields-wrapper .form-group label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gc-fg-3) !important;
}
.webform-fields-wrapper .form-group label.required::after {
  content: ' *' !important;
  color: var(--gc-danger) !important;
}
.webform-fields-wrapper .form-control {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg) !important;
  border-radius: var(--gc-r) !important;
}
.webform-fields-wrapper .form-control:focus {
  border-color: var(--gc-accent) !important;
  background: var(--gc-surface-3) !important;
  box-shadow: none !important;
}
.webform-fields-wrapper h3,
.webform-fields-wrapper h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 4px !important;
}
.webform-fields-wrapper p {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
  line-height: 1.6 !important;
}

/* Error list */
.webform-errors-wrapper .alert-danger {
  background: var(--gc-danger-dim) !important;
  border: 1px solid rgba(248,113,113,0.2) !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-danger) !important;
}
.webform-errors-wrapper .alert-danger h5 { color: var(--gc-danger) !important; }

/* Submit button */
#webform #submitButton {
  background: var(--gc-accent) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--gc-r) !important;
  padding: 10px 24px !important;
  transition: opacity var(--gc-t-base) !important;
}
#webform #submitButton:hover { opacity: 0.85 !important; }

/* Success message */
#webform-submit-success {
  text-align: center !important;
  padding: 20px 0 !important;
}
#webform-submit-success h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gc-success) !important;
}
#webform-submit-success p { color: var(--gc-fg-3) !important; }

/* ============================================================
   48. ERROR PAGES & PAGE-LEVEL NOTIFICATIONS
   ============================================================ */

/* â”€â”€ 404 / 403 / 500 error page â”€â”€ */
.permision-denied {
  text-align: center !important;
  padding: 60px 20px !important;
}
.permision-denied img {
  max-width: 280px !important;
  opacity: 0.6 !important;
  filter: grayscale(1) !important;
  margin-bottom: 24px !important;
}
.permision-denied .x-message h2,
.permision-denied h2,
.permision-denied h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-3) !important;
  font-weight: 300 !important;
}
.permision-denied .btn { margin-top: 12px !important; }

/* â”€â”€ In-page notification (generic) â”€â”€ */
.page-notification {
  text-align: center !important;
  padding: 40px 20px !important;
}
.page-notification h2 {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: var(--gc-fg-3) !important;
}
.page-notification img {
  max-width: 200px !important;
  opacity: 0.5 !important;
  filter: grayscale(1) !important;
  margin-bottom: 16px !important;
}

/* â”€â”€ Install wizard pages â”€â”€ */
.install-wrapper {
  max-width: 680px !important;
  margin: 40px auto !important;
}
.install-wrapper .card {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
}
.install-wrapper .card-header {
  background: var(--gc-surface-2) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  border-radius: var(--gc-r-lg) var(--gc-r-lg) 0 0 !important;
}
.install-wrapper .list-group-item {
  background: transparent !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-2) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
}
.install-wrapper .list-group-item i {
  color: var(--gc-success) !important;
  margin-right: 8px !important;
}
.install-wrapper .list-group-item .text-danger { color: var(--gc-danger) !important; }

/* ============================================================
   49. ACCOUNT PORTAL â€” tenant subscription management
   ============================================================ */

/* â”€â”€ Account page wrapper (tab-body container) â”€â”€ */
.account-wrapper {
  padding: 8px 0 !important;
}

/* â”€â”€ Current plan summary row â”€â”€ */
.x-current-plan {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  margin-bottom: 16px !important;
}
.x-current-plan h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 2px !important;
}
.x-current-plan > div[class*="col"] {
  color: var(--gc-fg-4) !important;
  font-size: 13px !important;
}

/* â”€â”€ Feature matrix table â”€â”€ */
.x-current-features .table td {
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-3) !important;
  vertical-align: middle !important;
}
.x-current-features .table td:last-child {
  color: var(--gc-fg) !important;
  font-weight: 500 !important;
}

/* â”€â”€ Notices panel â”€â”€ */
.subscription-notice {
  padding: 20px !important;
  border-radius: var(--gc-r-lg) !important;
  background: var(--gc-warning-dim) !important;
  border: 1px solid rgba(251,146,60,0.2) !important;
  color: var(--gc-fg-2) !important;
}

/* â”€â”€ Package pricing cards grid â”€â”€ */
#packages-container { row-gap: 20px !important; }

.package-pricing-box {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color var(--gc-t-base), box-shadow var(--gc-t-base) !important;
}
.package-pricing-box:hover {
  border-color: var(--gc-accent) !important;
  box-shadow: 0 4px 20px rgba(129,140,248,0.12) !important;
}

/* Pricing header */
.package-pricing-box .pricing-header {
  background: var(--gc-surface-2) !important;
  padding: 20px 20px 16px !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
.package-pricing-box .pricing-header .x-heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 10px !important;
}
.package-pricing-box .pricing-header .x-price-month {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--gc-accent-text) !important;
  line-height: 1.2 !important;
}
.package-pricing-box .pricing-header .x-price-month span {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gc-fg-4) !important;
}
.package-pricing-box .pricing-header .x-price-cycle {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
  margin-top: 4px !important;
}
.package-pricing-box .pricing-header .x-price-cycle span {
  font-size: 12px !important;
}

/* Feature rows */
.package-pricing-box .price-table-content {
  padding: 14px 20px !important;
  flex: 1 !important;
}
.package-pricing-box .price-row {
  font-size: 12.5px !important;
  color: var(--gc-fg-3) !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.package-pricing-box .price-row:last-child { border-bottom: none !important; }
.package-pricing-box .price-row strong {
  color: var(--gc-fg) !important;
  font-weight: 600 !important;
}
.package-pricing-box .price-row .sl-icon-check { color: var(--gc-success) !important; }
.package-pricing-box .price-row .sl-icon-close { color: var(--gc-danger) !important; }

/* Footer button area */
.package-pricing-box .price-footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--gc-border) !important;
  text-align: center !important;
}

/* â”€â”€ Payment form (pay/buttons/*.blade.php) â”€â”€ */
#stripe-card-element,
.StripeElement {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r) !important;
  padding: 10px 12px !important;
  color: var(--gc-fg) !important;
  transition: border-color var(--gc-t-base) !important;
}
.StripeElement--focus { border-color: var(--gc-accent) !important; }
.StripeElement--invalid { border-color: var(--gc-danger) !important; }

/* â”€â”€ Thank you / success page â”€â”€ */
.thankyou-wrapper,
.payment-success-wrapper {
  text-align: center !important;
  padding: 40px 20px !important;
}
.thankyou-wrapper h2,
.payment-success-wrapper h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gc-success) !important;
}
.thankyou-wrapper p,
.payment-success-wrapper p {
  color: var(--gc-fg-3) !important;
  font-size: 14px !important;
}

/* ============================================================
   50. LANDLORD ADMIN â€” SaaS management panel
   ============================================================ */

/* Landlord pages share the same wrapper/card structure as admin.
   Below targets landlord-specific unique patterns only. */

/* â”€â”€ Customer detail (profile hero) â”€â”€ */
.landlord-customer-profile {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--gc-border) !important;
  margin-bottom: 20px !important;
}
.landlord-customer-profile img.avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--gc-border-med) !important;
}
.landlord-customer-profile .x-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
}
.landlord-customer-profile .x-email {
  font-size: 13px !important;
  color: var(--gc-fg-4) !important;
}

/* â”€â”€ Offline payment instructions box â”€â”€ */
#offline-payment-instructions {
  background: var(--gc-info-dim) !important;
  border: 1px solid rgba(56,189,248,0.2) !important;
  border-radius: var(--gc-r) !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: var(--gc-fg-3) !important;
  line-height: 1.6 !important;
}

/* â”€â”€ Subscription status badge overrides â”€â”€ */
.label-success  { background: var(--gc-success-dim) !important; color: var(--gc-success) !important; border: 1px solid rgba(74,222,128,0.2) !important; }
.label-danger   { background: var(--gc-danger-dim) !important;  color: var(--gc-danger) !important;  border: 1px solid rgba(248,113,113,0.2) !important; }
.label-warning  { background: var(--gc-warning-dim) !important; color: var(--gc-warning) !important; border: 1px solid rgba(251,146,60,0.2) !important; }
.label-info     { background: var(--gc-info-dim) !important;    color: var(--gc-info) !important;    border: 1px solid rgba(56,189,248,0.2) !important; }
.label-light-inverse {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-3) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-sm) !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

/* â”€â”€ Landlord blog / email compose pages â”€â”€ */
.compose-wrapper .form-group { margin-bottom: 18px !important; }
.compose-wrapper h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
  margin-bottom: 12px !important;
}

/* â”€â”€ Blogs table article snippet â”€â”€ */
.blog-excerpt {
  font-size: 12.5px !important;
  color: var(--gc-fg-4) !important;
  line-height: 1.5 !important;
  max-width: 320px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* â”€â”€ Landlord misc stats card (profile page summary row) â”€â”€ */
.landlord-stats-row .stat-item {
  text-align: center !important;
  padding: 12px 0 !important;
}
.landlord-stats-row .stat-item .x-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
}
.landlord-stats-row .stat-item .x-label {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* â”€â”€ Landlord settings section heading â”€â”€ */
.landlord-section-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gc-fg-5) !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  margin-bottom: 16px !important;
}

/* â”€â”€ Tenant row card (platform manager view) â”€â”€ */
.platform-tenant-row .x-domain { color: var(--gc-accent-text) !important; font-weight: 500 !important; }
.platform-tenant-row .x-status-active  { color: var(--gc-success) !important; }
.platform-tenant-row .x-status-suspended { color: var(--gc-danger) !important; }
.platform-tenant-row .x-status-pending { color: var(--gc-warning) !important; }

/* ============================================================
   51. INSTALL WIZARD
   ============================================================ */

/* â”€â”€ Welcome / finish step â”€â”€ */
.setup-welcome {
  max-width: 540px !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
}
.setup-welcome .x-image {
  text-align: center !important;
  margin-bottom: 20px !important;
}
.setup-welcome .x-image img {
  max-width: 160px !important;
  opacity: 0.75 !important;
  filter: grayscale(0.3) !important;
}
.setup-welcome .x-title h2,
.setup-welcome h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}
.setup-welcome .x-subtitle {
  font-size: 13.5px !important;
  color: var(--gc-fg-4) !important;
  line-height: 1.65 !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}
.setup-welcome .x-button,
.setup-inner-steps .x-button {
  margin-top: 20px !important;
}
.setup-welcome .cronjob input[disabled],
.cronjob input[disabled] {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg-3) !important;
  font-size: 12px !important;
  font-family: monospace !important;
}

/* â”€â”€ Requirements / inner steps â”€â”€ */
.setup-inner-steps {
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
}
.setup-inner-steps h5.text-info {
  color: var(--gc-info) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 10px !important;
}
.setup-requirements .table td {
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-3) !important;
  vertical-align: middle !important;
}
.setup-requirements .x-td-checks {
  width: 44px !important;
  text-align: center !important;
}
.x-checks {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}
.x-check-passed {
  background: var(--gc-success-dim) !important;
  color: var(--gc-success) !important;
}
.x-check-failed {
  background: var(--gc-danger-dim) !important;
  color: var(--gc-danger) !important;
}

/* btn-block fill-width variant */
.btn-block { width: 100% !important; }
.btn-extra-padding { padding: 10px 28px !important; }

/* ============================================================
   52. IMPORT / EXPORT WIZARD
   ============================================================ */

.importing-modal { padding: 10px 0 !important; }

/* Step 1 splash */
.x-splash-images {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}
.x-splash-images .x-icons img {
  width: 52px !important;
  height: 52px !important;
  opacity: 0.8 !important;
}

/* File preview */
.import-payload-preview {
  text-align: center !important;
  padding: 14px 0 !important;
}
.import-payload-preview img {
  width: 48px !important;
  height: 48px !important;
}
.import-payload-preview-text {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
}
.import-payload-preview-text .x-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
}
.import-payload-preview-text .x-meta {
  font-size: 12px !important;
  color: var(--gc-fg-4) !important;
}

/* Import dropzone override */
.file-upload-box {
  border: 2px dashed var(--gc-border-strong) !important;
  border-radius: var(--gc-r-md) !important;
  background: var(--gc-surface-2) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  transition: border-color var(--gc-t-base) !important;
  cursor: pointer !important;
}
.file-upload-box:hover,
.file-upload-box.dz-drag-hover {
  border-color: var(--gc-accent) !important;
  background: var(--gc-accent-dim) !important;
}
.file-upload-box .dz-message h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-3) !important;
  margin-bottom: 4px !important;
}
.file-upload-box .dz-message h6 {
  font-size: 12px !important;
  color: var(--gc-fg-5) !important;
}

/* Import column-mapping table */
.import-mapping-table th,
.import-mapping-table td {
  font-size: 13px !important;
  padding: 7px 10px !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-3) !important;
  vertical-align: middle !important;
}
.import-mapping-table select.form-control {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  color: var(--gc-fg) !important;
  font-size: 12.5px !important;
}

/* ============================================================
   53. SUBSCRIPTION DETAIL PAGE
   ============================================================ */

/* â”€â”€ Sidebar summary card â”€â”€ */
.subscription-summary { margin-bottom: 20px !important; }

.subscription-header {
  background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(129,140,248,0.04)) !important;
  border: 1px solid rgba(129,140,248,0.2) !important;
  border-radius: var(--gc-r-lg) var(--gc-r-lg) 0 0 !important;
  padding: 18px 20px !important;
}
.subscription-header .x-plan {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
  margin-bottom: 4px !important;
}
.subscription-header .x-cycle {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gc-accent-text) !important;
}

.subscription-body.card {
  border-radius: 0 0 var(--gc-r-lg) var(--gc-r-lg) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-top: none !important;
  overflow: hidden !important;
}

/* Each row inside body */
.x-each-item {
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.x-each-item:last-child { border-bottom: none !important; }
.x-each-item small.text-muted {
  font-size: 11.5px !important;
  color: var(--gc-fg-5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.x-each-item .x-content h6 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
  margin: 0 !important;
}

/* â”€â”€ Alert panel (action required) â”€â”€ */
.subscription-alert {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: var(--gc-danger-dim) !important;
  border: 1px solid rgba(248,113,113,0.2) !important;
  border-radius: var(--gc-r-md) !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}
.subscription-alert .x-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gc-fg-2) !important;
}
.subscription-alert .x-button { flex-shrink: 0 !important; }

/* â”€â”€ Payment history section â”€â”€ */
.subscription-payments {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  overflow: hidden !important;
}
.subscription-payments .x-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gc-fg-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  background: var(--gc-surface-2) !important;
}
.subscription-details { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   54. STARRED PANEL ITEMS & AVATAR GROUP
   ============================================================ */

/* â”€â”€ bg-contrast â€” slightly lighter card surface used in sidepanels â”€â”€ */
.bg-contrast {
  background: var(--gc-surface-2) !important;
}

/* â”€â”€ Starred feed item â”€â”€ */
.starred-feed-item {
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-r-md) !important;
  transition: border-color var(--gc-t-base) !important;
}
.starred-feed-item:hover { border-color: var(--gc-border-med) !important; }

/* â”€â”€ Avatar group (stacked round avatars) â”€â”€ */
.avatar-group {
  display: flex !important;
  align-items: center !important;
}
.avatar-group .avatar,
.avatar-group img.avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid var(--gc-surface) !important;
  margin-left: -6px !important;
  object-fit: cover !important;
  position: relative !important;
}
.avatar-group .avatar:first-child,
.avatar-group img.avatar:first-child { margin-left: 0 !important; }
.avatar-group .avatar.bg-light {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-4) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* avatar size variants */
.avatar-xs { width: 24px !important; height: 24px !important; }
.avatar-sm { width: 32px !important; height: 32px !important; }
.avatar-md { width: 40px !important; height: 40px !important; }
.avatar-lg { width: 56px !important; height: 56px !important; }

/* ============================================================
   55. UTILITY CLASSES â€” font sizes, weights, misc
   ============================================================ */

/* Font size utilities (f-N pattern used throughout) */
.f-10 { font-size: 10px !important; }
.f-11 { font-size: 11px !important; }
.f-12 { font-size: 12px !important; }
.f-13 { font-size: 13px !important; }
.f-14 { font-size: 14px !important; }
.f-16 { font-size: 16px !important; }
.f-18 { font-size: 18px !important; }
.f-20 { font-size: 20px !important; }
.f-22 { font-size: 22px !important; }
.f-24 { font-size: 24px !important; }
.f-28 { font-size: 28px !important; }
.f-32 { font-size: 32px !important; }

/* font-weight utilities */
.font-weight-200 { font-weight: 200 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-medium { font-weight: 500 !important; }

/* border-radius utilities */
.border-radius-5 { border-radius: 5px !important; }
.border-radius-8 { border-radius: 8px !important; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }

/* min height utility */
.min-h-300 { min-height: 300px !important; }

/* btn-outline-secondary dark theme override */
.btn-outline-secondary {
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg-3) !important;
}
.btn-outline-secondary:hover {
  background: var(--gc-surface-3) !important;
  border-color: var(--gc-border-med) !important;
  color: var(--gc-fg-2) !important;
}

/* â”€â”€ Finance operations KPI card metric text â”€â”€ */
.text-muted.text-uppercase.f-12 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  color: var(--gc-fg-5) !important;
}

/* â”€â”€ Vendor bills / AP table section anchors â”€â”€ */
[id="vendors"] h3,
[id="ap"] h3,
[id="banking"] h3,
[id="retainers"] h3,
[id="profitability"] h3,
[id="credits"] h3,
[id="schedules"] h3,
[id="changes"] h3,
[id="collections"] h3,
[id="docuseal"] h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gc-fg) !important;
}

/* â”€â”€ Finance section nav buttons bar â”€â”€ */
.gap-2 { gap: 0.5rem !important; }

/* â”€â”€ DocuSeal webhook input â”€â”€ */
#docuseal .form-control[readonly] {
  background: var(--gc-surface-2) !important;
  font-family: monospace !important;
  font-size: 12px !important;
  color: var(--gc-fg-3) !important;
}

/* ============================================================
   56. FINAL SWEEP â€” stray selectors & micro-fixes
   ============================================================ */

/* vertical-align utility */
.vertical-align-middle { vertical-align: middle !important; }
.display-inline-block   { display: inline-block !important; }
.text-align-center      { text-align: center !important; }
.text-ucw               { text-transform: capitalize !important; }

/* position utility */
.position-relative { position: relative !important; }

/* Bootstrap text-reset */
.text-reset { color: inherit !important; }
.text-decoration-none { text-decoration: none !important; }

/* .no-border table â€” remove all borders */
.table.no-border td,
.table.no-border th { border: none !important; }

/* card-embed-fix â€” remove card box-shadow when embedded */
.card-embed-fix > .card {
  box-shadow: none !important;
  border: none !important;
}

/* .w-30 utility (percentage width) */
.w-30 { width: 30% !important; }

/* line divider (horizontal rule style) */
.line {
  border: none !important;
  border-top: 1px solid var(--gc-border) !important;
  margin: 14px 0 !important;
}

/* p-t-9 / p-b-9 (Bootstrap doesn't have these by default) */
.p-t-9 { padding-top: 9px !important; }
.p-b-9 { padding-bottom: 9px !important; }
.p-l-30 { padding-left: 30px !important; }

/* font-16 */
.font-16 { font-size: 16px !important; }

/* font-18 */
.font-18 { font-size: 18px !important; }

/* checkbox / filled-in Materialize-style */
.filled-in + label::before {
  border-color: var(--gc-border-strong) !important;
}
.filled-in:checked + label::before {
  background: var(--gc-accent) !important;
  border-color: var(--gc-accent) !important;
}

/* chk-col-light-blue (grow-specific checkbox color) */
.chk-col-light-blue:checked + label::before {
  background: var(--gc-info) !important;
  border-color: var(--gc-info) !important;
}

/* Ensure all buttons inherit Inter font */
button, .btn { font-family: 'Inter', sans-serif !important; }

/* Suppress midnight theme's own scrollbar coloring */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gc-surface) !important; }
::-webkit-scrollbar-thumb { background: var(--gc-surface-4) !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gc-fg-5) !important; }


/* ============================================================
   LIGHT THEME PROPAGATION
   Explicit overrides for components that use hardcoded values
   or need special treatment in light mode.
   ============================================================ */

/* ── Base overrides ─────────────────────────────────── */
html[data-gc-theme="light"],
html[data-gc-theme="light"] body,
html[data-gc-theme="light"] body.loggedin {
  background: var(--gc-bg) !important;
  color: var(--gc-fg) !important;
}

html[data-gc-theme="light"] ::selection {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-fg) !important;
}

/* ── Scrollbar ──────────────────────────────────────── */
html[data-gc-theme="light"] ::-webkit-scrollbar-track {
  background: var(--gc-surface-2) !important;
}
html[data-gc-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--gc-surface-4) !important;
}
html[data-gc-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gc-fg-5) !important;
}

/* ── Cards & panels ─────────────────────────────────── */
html[data-gc-theme="light"] .card,
html[data-gc-theme="light"] .gc-card {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
  box-shadow: var(--gc-shadow-sm) !important;
}
html[data-gc-theme="light"] .card-header,
html[data-gc-theme="light"] .gc-card-header {
  background: var(--gc-surface-2) !important;
  border-bottom-color: var(--gc-border) !important;
}

/* ── Tables ─────────────────────────────────────────── */
html[data-gc-theme="light"] table thead th,
html[data-gc-theme="light"] .table thead th {
  background: var(--gc-surface-2) !important;
  color: var(--gc-fg-3) !important;
  border-color: var(--gc-border-med) !important;
}
html[data-gc-theme="light"] table tbody td,
html[data-gc-theme="light"] .table tbody td {
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-2) !important;
}
html[data-gc-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--gc-surface-2) !important;
}
html[data-gc-theme="light"] .table-hover tbody tr:hover {
  background-color: var(--gc-accent-dim) !important;
}
html[data-gc-theme="light"] .dataTables_wrapper .dataTables_info,
html[data-gc-theme="light"] .dataTables_wrapper .dataTables_length label,
html[data-gc-theme="light"] .dataTables_wrapper .dataTables_filter label {
  color: var(--gc-fg-3) !important;
}

/* ── Forms ──────────────────────────────────────────── */
html[data-gc-theme="light"] .form-control,
html[data-gc-theme="light"] input:not([type="radio"]):not([type="checkbox"]),
html[data-gc-theme="light"] textarea,
html[data-gc-theme="light"] select {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg) !important;
}
html[data-gc-theme="light"] .form-control:focus {
  background: var(--gc-surface) !important;
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 3px var(--gc-accent-dim) !important;
}
html[data-gc-theme="light"] .form-control::placeholder {
  color: var(--gc-fg-5) !important;
}
html[data-gc-theme="light"] .input-group-text {
  background: var(--gc-surface-2) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg-3) !important;
}

/* ── Modals ─────────────────────────────────────────── */
html[data-gc-theme="light"] .modal-content {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
  box-shadow: var(--gc-shadow-lg) !important;
}
html[data-gc-theme="light"] .modal-header {
  background: var(--gc-surface-2) !important;
  border-bottom-color: var(--gc-border) !important;
}
html[data-gc-theme="light"] .modal-footer {
  background: var(--gc-surface-2) !important;
  border-top-color: var(--gc-border) !important;
}
html[data-gc-theme="light"] .modal-title {
  color: var(--gc-fg) !important;
}

/* ── Dropdowns ──────────────────────────────────────── */
html[data-gc-theme="light"] .dropdown-menu {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
  box-shadow: var(--gc-shadow) !important;
}
html[data-gc-theme="light"] .dropdown-item {
  color: var(--gc-fg-2) !important;
}
html[data-gc-theme="light"] .dropdown-item:hover,
html[data-gc-theme="light"] .dropdown-item:focus {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}
html[data-gc-theme="light"] .dropdown-divider {
  border-top-color: var(--gc-border) !important;
}

/* ── Sidebar (light mode) — comprehensive text fix ─────── */
html[data-gc-theme="light"] .left-sidebar,
html[data-gc-theme="light"] #sidebar {
  background: var(--gc-sidebar-bg) !important;
  border-right: 1px solid var(--gc-border-med) !important;
}
html[data-gc-theme="light"] .scroll-sidebar {
  background: var(--gc-sidebar-bg) !important;
}
/* All nav link text — beats midnight !important overrides */
html[data-gc-theme="light"] .sidebar-nav ul li a,
html[data-gc-theme="light"] .sidebar-nav ul li a span,
html[data-gc-theme="light"] .sidebar-nav ul li > a,
html[data-gc-theme="light"] .sidebar-nav > ul > li > a {
  color: var(--gc-fg-3) !important;
}
html[data-gc-theme="light"] .sidebar-nav ul li a:hover,
html[data-gc-theme="light"] .sidebar-nav ul li.active > a,
html[data-gc-theme="light"] .sidebar-nav > ul > li > a:hover,
html[data-gc-theme="light"] .sidebar-nav > ul > li.active > a {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}
/* Sub-menu items */
html[data-gc-theme="light"] .sidebar-nav ul ul li a,
html[data-gc-theme="light"] .sidebar-nav .nav-second-level li a,
html[data-gc-theme="light"] .sidebar-nav .nav-third-level li a {
  color: var(--gc-fg-4) !important;
}
html[data-gc-theme="light"] .sidebar-nav ul ul li a:hover,
html[data-gc-theme="light"] .sidebar-nav .nav-second-level li.active a {
  color: var(--gc-accent-text) !important;
  background: var(--gc-accent-dim) !important;
}
/* Sidebar icons */
html[data-gc-theme="light"] .sidebar-nav ul li a i,
html[data-gc-theme="light"] .sidebar-nav ul li a svg {
  color: var(--gc-fg-4) !important;
}
html[data-gc-theme="light"] .sidebar-nav ul li.active > a i,
html[data-gc-theme="light"] .sidebar-nav ul li > a:hover i {
  color: var(--gc-accent) !important;
}
/* Section caps */
html[data-gc-theme="light"] .nav-small-cap,
html[data-gc-theme="light"] .sidebar-nav ul .nav-small-cap {
  color: var(--gc-fg-5) !important;
}
/* Sub-menu backgrounds */
html[data-gc-theme="light"] .sidebar-nav ul.nav-second-level,
html[data-gc-theme="light"] .sidebar-nav ul.nav-third-level {
  background: var(--gc-sidebar-bg) !important;
}
html[data-gc-theme="light"] .user-profile {
  background: var(--gc-sidebar-bg) !important;
  border-bottom: 1px solid var(--gc-border) !important;
}
html[data-gc-theme="light"] .user-profile .u-name,
html[data-gc-theme="light"] .user-profile .user-info h4,
html[data-gc-theme="light"] .user-profile .profile-text a {
  color: var(--gc-fg-2) !important;
}

/* ── Topbar notification dots (use surface in light) ── */
html[data-gc-theme="light"] .top-navbar .notify .heartbit,
html[data-gc-theme="light"] .top-navbar .notify .point,
html[data-gc-theme="light"] .top-navbar .badge-pill,
html[data-gc-theme="light"] .top-navbar .round {
  border-color: var(--gc-surface) !important;
}

/* ── Badges & labels ────────────────────────────────── */
html[data-gc-theme="light"] .badge-success { background: var(--gc-success) !important; color: #fff !important; }
html[data-gc-theme="light"] .badge-danger  { background: var(--gc-danger)  !important; color: #fff !important; }
html[data-gc-theme="light"] .badge-warning { background: var(--gc-warning) !important; color: #fff !important; }
html[data-gc-theme="light"] .badge-info    { background: var(--gc-info)    !important; color: #fff !important; }

/* ── Alerts ─────────────────────────────────────────── */
html[data-gc-theme="light"] .alert-success {
  background: var(--gc-success-dim) !important;
  border-color: var(--gc-success) !important;
  color: var(--gc-success) !important;
}
html[data-gc-theme="light"] .alert-danger {
  background: var(--gc-danger-dim) !important;
  border-color: var(--gc-danger) !important;
  color: var(--gc-danger) !important;
}
html[data-gc-theme="light"] .alert-warning {
  background: var(--gc-warning-dim) !important;
  border-color: var(--gc-warning) !important;
  color: var(--gc-warning) !important;
}
html[data-gc-theme="light"] .alert-info {
  background: var(--gc-info-dim) !important;
  border-color: var(--gc-info) !important;
  color: var(--gc-info) !important;
}

/* ── Toastr notifications ───────────────────────────── */
html[data-gc-theme="light"] #toast-container > div {
  box-shadow: var(--gc-shadow) !important;
  opacity: 0.97 !important;
}
html[data-gc-theme="light"] .toast-success {
  background-color: var(--gc-success) !important;
  color: #fff !important;
}
html[data-gc-theme="light"] .toast-error {
  background-color: var(--gc-danger) !important;
  color: #fff !important;
}

/* ── SweetAlert2 ────────────────────────────────────── */
html[data-gc-theme="light"] .swal2-popup {
  background: var(--gc-surface) !important;
  color: var(--gc-fg) !important;
  box-shadow: var(--gc-shadow-lg) !important;
}
html[data-gc-theme="light"] .swal2-title {
  color: var(--gc-fg) !important;
}
html[data-gc-theme="light"] .swal2-html-container {
  color: var(--gc-fg-3) !important;
}

/* ── Code / pre blocks ──────────────────────────────── */
html[data-gc-theme="light"] pre,
html[data-gc-theme="light"] code {
  background: var(--gc-surface-2) !important;
  color: var(--gc-fg-2) !important;
  border-color: var(--gc-border-med) !important;
}

/* ── Page headings & text ───────────────────────────── */
html[data-gc-theme="light"] h1, html[data-gc-theme="light"] h2,
html[data-gc-theme="light"] h3, html[data-gc-theme="light"] h4,
html[data-gc-theme="light"] h5, html[data-gc-theme="light"] h6 {
  color: var(--gc-fg) !important;
}
html[data-gc-theme="light"] p,
html[data-gc-theme="light"] span,
html[data-gc-theme="light"] label {
  color: var(--gc-fg-2);
}
html[data-gc-theme="light"] .text-muted {
  color: var(--gc-fg-4) !important;
}

/* ── Pagination ─────────────────────────────────────── */
html[data-gc-theme="light"] .page-link {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg-3) !important;
}
html[data-gc-theme="light"] .page-item.active .page-link {
  background: var(--gc-accent) !important;
  border-color: var(--gc-accent) !important;
  color: #fff !important;
}

/* ── Breadcrumbs ────────────────────────────────────── */
html[data-gc-theme="light"] .breadcrumb {
  background: transparent !important;
}
html[data-gc-theme="light"] .breadcrumb-item a {
  color: var(--gc-accent-text) !important;
}
html[data-gc-theme="light"] .breadcrumb-item.active {
  color: var(--gc-fg-4) !important;
}

/* ── Progress bars ──────────────────────────────────── */
html[data-gc-theme="light"] .progress {
  background: var(--gc-surface-3) !important;
}

/* ── List groups ────────────────────────────────────── */
html[data-gc-theme="light"] .list-group-item {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-fg-2) !important;
}
html[data-gc-theme="light"] .list-group-item:hover {
  background: var(--gc-surface-2) !important;
}

/* ── Nav tabs ───────────────────────────────────────── */
html[data-gc-theme="light"] .nav-tabs {
  border-bottom-color: var(--gc-border-med) !important;
}
html[data-gc-theme="light"] .nav-tabs .nav-link {
  color: var(--gc-fg-3) !important;
}
html[data-gc-theme="light"] .nav-tabs .nav-link.active {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) var(--gc-border-med) var(--gc-surface) !important;
  color: var(--gc-fg) !important;
}

/* ── Side panel / drawer ────────────────────────────── */
html[data-gc-theme="light"] #rightbar,
html[data-gc-theme="light"] .sidepanel-container,
html[data-gc-theme="light"] .side-panel-outer {
  background: var(--gc-surface) !important;
  border-left: 1px solid var(--gc-border-med) !important;
}

/* ── Preloader ──────────────────────────────────────── */
html[data-gc-theme="light"] .preloader {
  background: var(--gc-bg) !important;
}
html[data-gc-theme="light"] .preloader .cssload-speeding-wheel {
  border-color: var(--gc-surface-4) transparent transparent transparent !important;
}

/* ── Kanban ─────────────────────────────────────────── */
html[data-gc-theme="light"] .kanban-col-title {
  background: var(--gc-surface-2) !important;
  border-color: var(--gc-border-med) !important;
}
html[data-gc-theme="light"] .gc-kanban-card {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
}

/* ── Timeline ───────────────────────────────────────── */
html[data-gc-theme="light"] .cd-timeline-block .cd-timeline-content {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
}
html[data-gc-theme="light"] .cd-timeline-block .cd-timeline-content::before {
  border-color: transparent var(--gc-border-med) transparent transparent !important;
}

/* ── Select2 ────────────────────────────────────────── */
html[data-gc-theme="light"] .select2-container--default .select2-selection--single,
html[data-gc-theme="light"] .select2-container--default .select2-selection--multiple {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg) !important;
}
html[data-gc-theme="light"] .select2-container--default .select2-results__option {
  color: var(--gc-fg-2) !important;
}
html[data-gc-theme="light"] .select2-container--default .select2-results__option--highlighted {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}
html[data-gc-theme="light"] .select2-dropdown {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
  box-shadow: var(--gc-shadow) !important;
}
html[data-gc-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--gc-surface-2) !important;
  border-color: var(--gc-border-med) !important;
  color: var(--gc-fg) !important;
}

/* ── Flatpickr / date pickers ───────────────────────── */
html[data-gc-theme="light"] .flatpickr-calendar {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-med) !important;
  box-shadow: var(--gc-shadow-lg) !important;
}
html[data-gc-theme="light"] .flatpickr-day:hover {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
}
html[data-gc-theme="light"] .flatpickr-day.selected {
  background: var(--gc-accent) !important;
  color: #fff !important;
}

/* ── Tooltip ────────────────────────────────────────── */
html[data-gc-theme="light"] .tooltip-inner {
  background: var(--gc-fg) !important;
  color: var(--gc-bg) !important;
}

/* ── Summernote / rich text editor ──────────────────── */
html[data-gc-theme="light"] .note-editor.note-frame {
  border-color: var(--gc-border-strong) !important;
}
html[data-gc-theme="light"] .note-toolbar {
  background: var(--gc-surface-2) !important;
  border-bottom-color: var(--gc-border) !important;
}
html[data-gc-theme="light"] .note-editable {
  background: var(--gc-surface) !important;
  color: var(--gc-fg) !important;
}

/* ── Buttons ────────────────────────────────────────── */
html[data-gc-theme="light"] .btn-light,
html[data-gc-theme="light"] .btn-default {
  background: var(--gc-surface-3) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg-2) !important;
}
html[data-gc-theme="light"] .btn-light:hover,
html[data-gc-theme="light"] .btn-default:hover {
  background: var(--gc-surface-4) !important;
}
html[data-gc-theme="light"] .btn-outline-secondary {
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg-3) !important;
}

/* ── Page wrapper ───────────────────────────────────── */
html[data-gc-theme="light"] #main-wrapper,
html[data-gc-theme="light"] .page-wrapper {
  background: var(--gc-bg) !important;
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT TOUR — Driver.js theme overrides + tour trigger button
   ════════════════════════════════════════════════════════════════ */

/* ── Tour trigger "?" button ──────────────────────────────────── */
.gc-tour-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--gc-border-med) !important;
  background: transparent !important;
  color: var(--gc-fg-4) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background var(--gc-t), border-color var(--gc-t), color var(--gc-t), transform 0.15s ease !important;
  margin: 0 2px !important;
}
.gc-tour-btn:hover {
  background: var(--gc-accent-dim) !important;
  border-color: var(--gc-accent) !important;
  color: var(--gc-accent) !important;
  transform: scale(1.08) !important;
}
html[data-gc-theme="light"] .gc-tour-btn {
  color: var(--gc-fg-3) !important;
}
html[data-gc-theme="light"] .gc-tour-btn:hover {
  background: var(--gc-accent-dim) !important;
  color: var(--gc-accent-text) !important;
  border-color: var(--gc-accent) !important;
}

/* ── Driver.js overlay ────────────────────────────────────────── */
.driver-overlay {
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
}

/* ── Driver.js popover container ─────────────────────────────── */
.gc-tour-popover.driver-popover {
  background: var(--gc-surface-2) !important;
  border: 1px solid var(--gc-border-med) !important;
  border-radius: var(--gc-r-lg) !important;
  box-shadow: var(--gc-shadow-lg), 0 0 0 1px var(--gc-border) !important;
  padding: 22px 24px 18px !important;
  color: var(--gc-fg-2) !important;
  max-width: 340px !important;
  font-family: inherit !important;
}

/* Title */
.gc-tour-popover.driver-popover .driver-popover-title {
  color: var(--gc-fg) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

/* Description */
.gc-tour-popover.driver-popover .driver-popover-description {
  color: var(--gc-fg-3) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
}
.gc-tour-popover.driver-popover .driver-popover-description b,
.gc-tour-popover.driver-popover .driver-popover-description strong {
  color: var(--gc-fg-2) !important;
  font-weight: 600 !important;
}

/* Progress bar */
.gc-tour-popover.driver-popover .driver-popover-progress-text {
  color: var(--gc-fg-5) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* Footer / button row */
.gc-tour-popover.driver-popover .driver-popover-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-top: 1px solid var(--gc-border) !important;
  padding-top: 14px !important;
  margin-top: 0 !important;
}

/* Nav buttons */
.gc-tour-popover.driver-popover .driver-popover-prev-btn,
.gc-tour-popover.driver-popover .driver-popover-next-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  border-radius: var(--gc-r-md) !important;
  border: 1px solid var(--gc-border-med) !important;
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background var(--gc-t), border-color var(--gc-t), color var(--gc-t) !important;
  text-decoration: none !important;
}
.gc-tour-popover.driver-popover .driver-popover-prev-btn:hover,
.gc-tour-popover.driver-popover .driver-popover-next-btn:hover {
  background: var(--gc-surface-4) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg) !important;
}
/* Next/Done button — accent */
.gc-tour-popover.driver-popover .driver-popover-next-btn {
  background: var(--gc-accent) !important;
  border-color: var(--gc-accent) !important;
  color: #fff !important;
}
.gc-tour-popover.driver-popover .driver-popover-next-btn:hover {
  background: var(--gc-accent-hover, #6366f1) !important;
  border-color: var(--gc-accent-hover, #6366f1) !important;
  color: #fff !important;
}

/* Close (×) button */
.gc-tour-popover.driver-popover .driver-popover-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1px solid var(--gc-border-med) !important;
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg-4) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background var(--gc-t), color var(--gc-t) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gc-tour-popover.driver-popover .driver-popover-close-btn:hover {
  background: var(--gc-danger-dim) !important;
  color: var(--gc-danger) !important;
  border-color: var(--gc-danger) !important;
}

/* Arrow / caret */
.gc-tour-popover.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow::before  { border-right-color: var(--gc-surface-2) !important; }
.gc-tour-popover.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow::before { border-left-color: var(--gc-surface-2) !important; }
.gc-tour-popover.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow::before   { border-bottom-color: var(--gc-surface-2) !important; }
.gc-tour-popover.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow::before { border-top-color: var(--gc-surface-2) !important; }

/* Highlighted element ring */
.driver-active .driver-highlighted-element,
.driver-active [data-active-driver="true"] {
  outline: 2px solid var(--gc-accent) !important;
  outline-offset: 3px !important;
  border-radius: var(--gc-r-sm) !important;
}

/* ── Light mode overrides for tour ───────────────────────────── */
html[data-gc-theme="light"] .gc-tour-popover.driver-popover {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
}
html[data-gc-theme="light"] .gc-tour-popover.driver-popover .driver-popover-title {
  color: var(--gc-fg) !important;
}
html[data-gc-theme="light"] .gc-tour-popover.driver-popover .driver-popover-description {
  color: var(--gc-fg-3) !important;
}
html[data-gc-theme="light"] .gc-tour-popover.driver-popover .driver-popover-footer {
  border-top-color: rgba(0,0,0,0.08) !important;
}
html[data-gc-theme="light"] .gc-tour-popover.driver-popover .driver-popover-prev-btn,
html[data-gc-theme="light"] .gc-tour-popover.driver-popover .driver-popover-close-btn {
  background: var(--gc-surface-2) !important;
  border-color: var(--gc-border-strong) !important;
  color: var(--gc-fg-2) !important;
}
html[data-gc-theme="light"] .gc-tour-popover.driver-popover .driver-popover-prev-btn:hover {
  background: var(--gc-surface-3) !important;
  color: var(--gc-fg) !important;
}

/* ── Mobile-responsive tour ──────────────────────────────────── */
@media (max-width: 600px) {
  .gc-tour-popover.driver-popover {
    max-width: calc(100vw - 24px) !important;
    padding: 18px 16px 14px !important;
  }
  .gc-tour-popover.driver-popover .driver-popover-title {
    font-size: 14px !important;
  }
  .gc-tour-popover.driver-popover .driver-popover-description {
    font-size: 12.5px !important;
  }
}


/* ============================================================
   MOBILE RESPONSIVENESS — v2.8.0
   ============================================================ */

/* ── 1. Sidebar slide-in overlay (mobile) ─────────────────── */
@media (max-width: 767px) {

  /* Sidebar: hidden off-screen by default */
  .left-sidebar {
    position: fixed !important;
    left: calc(-1 * var(--gc-sidebar-w) - 20px) !important;
    top: 0 !important;
    height: 100dvh !important;
    z-index: 1200 !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
  }

  /* Sidebar: slide in & show backdrop shadow when body.show-sidebar */
  body.show-sidebar .left-sidebar {
    left: 0 !important;
    box-shadow: 8px 0 0 100vw oklch(0 0 0 / 0.45), var(--gc-shadow-lg) !important;
  }

  /* Page wrapper: full width — no sidebar indent */
  .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Topbar: full width on mobile */
  .fix-header .topbar {
    width: 100% !important;
  }

  /* Prevent body scroll when sidebar overlay is open */
  body.show-sidebar {
    overflow: hidden !important;
  }

  /* ── 2. Topnav layout on mobile ──────────────────────────── */

  /* Shrink the navbar-header logo area on mobile */
  .navbar-header {
    padding: 0 12px !important;
    min-width: 0 !important;
    width: auto !important;
    border-right: none !important;
  }
  .fix-sidebar .navbar-header .navbar-brand::after {
    display: none !important;
  }
  .fix-sidebar .navbar-header .logo-large {
    width: 30px !important;
    height: 30px !important;
  }

  /* Hide search bar on mobile — opens via modal anyway */
  .top-search-bar {
    display: none !important;
  }

  /* Collapse left navbar section */
  .top-navbar .navbar-collapse {
    padding: 0 2px !important;
    gap: 0 !important;
  }

  /* Reduce right icon bar padding */
  #right-topnav-navbar {
    gap: 0 !important;
    padding: 0 4px !important;
  }

  /* Hide less-critical right-bar icons on mobile */
  li#topnav-quick-access-li,
  li[id="topnav-quick-access-li"],
  li:has(#topnav-quick-access-icon),
  li:has(#topnav-calendar-icon),
  li:has(#topnav-settings-icon),
  li:has(#topnav-reminders-icon) {
    display: none !important;
  }

  /* Shrink remaining icon buttons */
  #right-topnav-navbar .nav-item > .nav-link,
  .navbar-top-right .nav-item > .nav-link {
    width: 34px !important;
    height: 34px !important;
    margin: 0 1px !important;
  }

  /* User btn: compact on mobile */
  .top-navbar .u-pro .gc-user-btn {
    padding: 4px 8px 4px 4px !important;
    gap: 6px !important;
    min-width: unset !important;
    margin-left: 4px !important;
  }
  .gc-chevron-icon {
    display: none !important;
  }

  /* ── 3. Page content layout ──────────────────────────────── */

  /* Page wrapper padding */
  .container-fluid,
  .page-wrapper .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Stat / summary cards row — allow wrap */
  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  .row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
  }

  /* Cards: prevent text overflow */
  .card,
  .white-box,
  .card-body {
    min-width: 0 !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Stat cards: stack properly */
  .stat-card,
  .task-status-card,
  [class*="stat-"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Page header: stack title + actions */
  .page-titles {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }

  /* ── 4. Tables: horizontal scroll ───────────────────────── */

  .table-responsive,
  .gc-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Give all tables a min-width so they scroll properly */
  .table-responsive > table,
  .table-responsive > .table,
  .gc-table-wrap > table {
    min-width: 560px !important;
  }

  /* List page table */
  .list-table,
  #ajax-list-filter-table-container table {
    min-width: 560px !important;
  }

  /* Wrap list page table in a scroll container */
  #ajax-list-filter-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 5. List page toolbar: stack search + actions ────────── */

  .list-page-actions,
  #list-page-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #list-page-actions .header-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Action buttons: compact */
  .btn-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* ── 6. Modals: full-width on mobile ─────────────────────── */

  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* ── 7. Dropdowns: constrain within viewport ─────────────── */

  .dropdown-menu {
    max-width: calc(100vw - 16px) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* ── 8. Forms: full-width inputs on mobile ───────────────── */

  .form-group .form-control,
  .form-row .form-control {
    width: 100% !important;
  }

  /* ── 9. Dashboard widgets: stack to single column ────────── */

  .dashboard-widget,
  .widget-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Tablet (768px – 1023px): partial fixes ─────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Sidebar still fixed but narrower gutter */
  .left-sidebar {
    width: var(--gc-sidebar-w) !important;
  }

  .page-wrapper {
    margin-left: var(--gc-sidebar-w) !important;
  }

  /* Search bar: narrower on tablet */
  .top-search-container {
    width: 180px !important;
  }

  /* Hide a few icons on tablet too */
  li:has(#topnav-calendar-icon),
  li:has(#topnav-quick-access-icon) {
    display: none !important;
  }
}

/* ── Very small phones (< 400px) ────────────────────────────── */
@media (max-width: 399px) {

  /* Even more compact topnav */
  #right-topnav-navbar .nav-item > .nav-link {
    width: 30px !important;
    height: 30px !important;
  }

  .top-navbar .u-pro .gc-user-btn {
    border: none !important;
    background: transparent !important;
    padding: 2px !important;
  }

  /* Table minimum narrower for very small screens */
  .table-responsive > table,
  .gc-table-wrap > table {
    min-width: 400px !important;
  }
}

/* ── Search modal: full-screen on mobile ── */
@media (max-width: 767px) {
  #searchModal .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 100vh !important;
  }
  #searchModal .modal-content {
    border-radius: 0 !important;
    border: none !important;
    min-height: 100vh !important;
  }
  #searchModal .modal-body {
    max-height: calc(100vh - 80px) !important;
  }
}