/*
 * 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 — */
  --gc-bg:           #09090b;   /* zinc-950 — page canvas */
  --gc-surface:      #111113;   /* zinc-925 — card surface */
  --gc-surface-2:    #18181b;   /* zinc-900 — raised surface */
  --gc-surface-3:    #27272a;   /* zinc-800 — input / hover bg */
  --gc-surface-4:    #3f3f46;   /* zinc-700 — strong border */

  /* — Borders — */
  --gc-border:       rgba(255,255,255,0.06);
  --gc-border-med:   rgba(255,255,255,0.09);
  --gc-border-strong:#3f3f46;

  /* — Foreground — */
  --gc-fg:           #fafafa;   /* zinc-50 — primary text */
  --gc-fg-2:         #e4e4e7;   /* zinc-200 */
  --gc-fg-3:         #a1a1aa;   /* zinc-400 — muted */
  --gc-fg-4:         #71717a;   /* zinc-500 — subtle */
  --gc-fg-5:         #52525b;   /* zinc-600 — very subtle */

  /* — Accent — */
  --gc-accent:       #818cf8;   /* indigo-400 */
  --gc-accent-dim:   rgba(129,140,248,0.12);
  --gc-accent-hover: rgba(129,140,248,0.18);
  --gc-accent-text:  #a5b4fc;   /* indigo-300 */

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

  /* — Sidebar — */
  --gc-sidebar-w:    240px;
  --gc-sidebar-bg:   #0c0c0e;

  /* — 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 2px rgba(0,0,0,0.5);
  --gc-shadow:     0 2px 8px rgba(0,0,0,0.6);
  --gc-shadow-lg:  0 8px 32px rgba(0,0,0,0.7);

  /* — Transition — */
  --gc-t: 0.15s 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
   ============================================================ */

.topbar {
  background: var(--gc-sidebar-bg) !important;
  border-bottom: 1px solid var(--gc-border) !important;
  box-shadow: none !important;
}

/* Navbar */
.top-navbar.navbar {
  padding: 0 !important;
  background: transparent !important;
}

/* Logo / brand area */
.navbar-header {
  width: var(--gc-sidebar-w) !important;
  min-width: var(--gc-sidebar-w) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  border-right: 1px solid var(--gc-border) !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;
}

.navbar-header .logo-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gc-fg) !important;
  letter-spacing: -0.01em;
}

/* Fix double hamburger: hide mobile-only toggle on desktop, show on mobile */
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;
  }
}

/* Topbar nav list */
.top-navbar .navbar-nav {
  height: var(--gc-topbar-h) !important;
  align-items: center !important;
}

/* All topbar nav items */
.top-navbar .nav-item {
  display: flex !important;
  align-items: center !important;
  height: var(--gc-topbar-h) !important;
}

/* Topbar icon buttons */
.top-navbar .nav-item > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-fg-3) !important;
  font-size: 16px !important;
  padding: 0 !important;
  transition: color var(--gc-t), background var(--gc-t) !important;
  background: transparent !important;
}

.top-navbar .nav-item > .nav-link:hover {
  color: var(--gc-fg) !important;
  background: var(--gc-surface-3) !important;
}

/* Hamburger sidebar toggle */
.sidebartoggler {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--gc-r) !important;
  color: var(--gc-fg-3) !important;
  font-size: 16px !important;
  margin: 0 4px 0 8px !important;
}

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

/* Search bar in topbar */
.top-navbar .app-search {
  margin: 0 0 0 8px !important;
}

.top-navbar .app-search .form-control,
.top-navbar .app-search 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;
  height: 34px !important;
  font-size: 13px !important;
  padding: 0 32px 0 12px !important;
  width: 220px !important;
  transition: border-color var(--gc-t), box-shadow var(--gc-t) !important;
}

.top-navbar .app-search .form-control:focus,
.top-navbar .app-search input:focus {
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 3px var(--gc-accent-dim) !important;
  outline: none !important;
  background: var(--gc-surface-2) !important;
  width: 280px !important;
}

.top-navbar .app-search .form-control::placeholder {
  color: var(--gc-fg-5) !important;
}

/* Search icon */
.top-navbar .app-search .srh-btn,
.top-navbar .app-search .search-icon {
  color: var(--gc-fg-5) !important;
  font-size: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 10px !important;
}

/* Notification bell with pulse indicator */
.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-sidebar-bg) !important;
  animation: gc-pulse 2s ease-in-out infinite !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-sidebar-bg) !important;
  opacity: 0 !important;
}

@keyframes gc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}

/* Badge in topbar icon */
.top-navbar .badge-pill,
.top-navbar .round {
  position: absolute !important;
  top: 1px !important;
  right: 1px !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-sidebar-bg) !important;
  padding: 0 !important;
}

/* Topbar user avatar */
.top-navbar .nav-item.user-profile img,
.top-navbar .profile-pic {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--gc-surface-4) !important;
}

/* Separator in topbar nav */
.topbar-divider {
  width: 1px !important;
  height: 24px !important;
  background: var(--gc-border-med) !important;
  margin: 0 4px !important;
  display: inline-block !important;
}

/* Dropdown menus from topbar */
.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;
}

/* Topbar mega dropdown panels */
.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; }
}