/* UI Overhaul Overrides (cosmetic-only)
   Comfortable density, noticeable accents, balanced motion
   No DOM/JS changes — selectors match existing markup */

/* Performance: prefer transform/opacity animations */
.nav-tabs, .controls, #clientsList, .quick-view-panel, .quick-view-overlay, .toast, .user-dropdown {
  will-change: transform, opacity;
}

/* Accessible focus rings */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.22);
}

/* Breadcrumbs polish (existing IDs/classes) */
.breadcrumb-nav {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
}
.breadcrumb-items { max-width: 1200px; margin: 0 auto; }
.breadcrumb-item { color: rgba(42,42,42,0.7); }
.breadcrumb-item.active { color: var(--charcoal-strong, #222); }

/* Search container + spinner */
.search-container { position: relative; }
.search-spinner {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid rgba(201, 169, 97, 0.3);
  border-top-color: var(--gold, #c9a961);
  border-radius: 50%;
  animation: ui-spin 1s linear infinite;
  opacity: 0; pointer-events: none;
}
.search-container.loading .search-spinner { opacity: 1; }

/* Sort bar and buttons */
.sort-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 0 8px 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 6px;
}
.sort-btn {
  appearance: none;
  border: 1px solid rgba(201, 169, 97, 0.28);
  background: transparent;
  color: var(--charcoal, #1a1a1a);
  padding: 6px 10px; border-radius: 6px;
  font-size: 0.9rem; cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), background 160ms, color 160ms, border-color 160ms;
}
.sort-btn:hover { background: rgba(201,169,97,0.12); border-color: var(--gold, #c9a961); color: var(--gold, #c9a961); }
.sort-btn.active { background: var(--gold, #c9a961); color: #fff; border-color: var(--gold, #c9a961); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18); }
.sort-btn[data-dir="asc"]::after { content: " ↑"; }
.sort-btn[data-dir="desc"]::after { content: " ↓"; }

/* Clients list: only fade for updates to avoid jank */
#clientsList { transition: opacity 160ms ease-out; will-change: opacity; }
#clientsList.list-transition-out { opacity: 0; }

/* Client card: status accent and comfortable spacing */
.client-card { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), box-shadow 180ms, border-color 180ms, opacity 200ms; }
.client-card:hover { transform: translateY(-2px); }
.client-card::before { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), background 160ms; }
/* Use ::after for a narrow status stripe to avoid covering content */
.client-card { 
  position: relative;
  border-left-color: transparent; 
}
.client-card::after {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gold, #c9a961);
  border-radius: 0 4px 4px 0;
  pointer-events: none;
}
.client-card.status-open::after { background: var(--status-open, #4a7c59); }
.client-card.status-on-hold::after { background: var(--status-hold, #e07a5f); }
.client-card.status-closed::after { background: var(--status-closed, #81717a); }

/* Urgency border accents without layout shift */
.urgency-border-normal { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
.urgency-border-urgent { box-shadow: inset 0 0 0 2px rgba(184, 134, 11, 0.32); }
.urgency-border-critical { box-shadow: inset 0 0 0 2px rgba(139, 0, 0, 0.34); }

/* Matter urgency chip mapping */
.matter-urgency { padding: 2px 8px; border-radius: 3px; font-size: 0.7rem; font-weight: 600; border: 1px solid transparent; letter-spacing: 0.04em; text-transform: uppercase; }
.matter-urgency.urgency-normal   { background: rgba(70,130,180,0.12);  color: #4d7ea8; border-color: rgba(70,130,180,0.24); }
.matter-urgency.urgency-urgent   { background: rgba(184,134,11,0.16);  color: #b8860b; border-color: rgba(184,134,11,0.28); }
.matter-urgency.urgency-critical { background: rgba(139,0,0,0.16);     color: #8b0000; border-color: rgba(139,0,0,0.28); }

/* No-matters placeholder comfort */
.no-matters-placeholder { display: flex; align-items: center; gap: 8px; color: rgba(42,42,42,0.65); }

/* Skeleton loaders sized to avoid CLS */
.skeleton-card { background: #fff; border: 1px solid rgba(201, 169, 97, 0.15); border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.skeleton-element {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.1), rgba(0,0,0,0.06));
  background-size: 200% 100%; border-radius: 4px;
  animation: ui-shimmer 1200ms ease-in-out infinite;
}
.skeleton-title { width: 40%; height: 14px; margin-bottom: 10px; }
.skeleton-meta  { display: flex; gap: 8px; }
.skeleton-meta-item { width: 18%; height: 12px; }
.skeleton-content { margin-top: 12px; }
.skeleton-matter { width: 100%; height: 44px; }

/* Quick View: transform-only slide for smoothness */
.quick-view-panel {
  right: 0 !important; /* override inline right:-450px */
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backface-visibility: hidden; translate: 0 0; /* hint */
}
.quick-view-panel.show { transform: translateX(0); }
.quick-view-overlay { transition: opacity 200ms ease-out; }

/* User profile dropdown */
.user-profile { border: 1px solid rgba(201,169,97,0.25); background: rgba(255,255,255,0.7); }
.user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px;
  background: #fff; border: 1px solid rgba(201,169,97,0.3); border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12); padding: 6px; display: none;
}
.user-profile.open .user-dropdown { display: block; animation: ui-fade-in 160ms ease-out both; }
.user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background 160ms ease; }
.user-dropdown-item:hover { background: rgba(201,169,97,0.12); }
.user-dropdown-divider { height: 1px; background: rgba(201,169,97,0.22); margin: 6px 0; }

/* Connection status */
#connectionStatus { display: inline-flex; align-items: center; gap: 6px; color: rgba(42,42,42,0.7); }
.connected-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-open, #4a7c59); box-shadow: 0 0 0 0 rgba(74,124,89,0.5); animation: ui-pulse-dot 2000ms infinite; }

/* Toast entrance polish */
.toast { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease; }
.toast.show { transform: translateX(0) translateZ(0); opacity: 1; }

/* Animations */
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ui-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(74,124,89,0.5);} 70% { box-shadow: 0 0 0 8px rgba(74,124,89,0);} 100% { box-shadow: 0 0 0 0 rgba(74,124,89,0);} }

/* Dark mode parity (respect existing .dark-mode) */
body.dark-mode .breadcrumb-nav { background: #1a1a1a; border-bottom-color: rgba(212,175,55,0.22); }
body.dark-mode .sort-bar { background: #1e1e1e; border-color: rgba(212,175,55,0.22); }
body.dark-mode .sort-btn { color: #e5e5e5; border-color: rgba(212,175,55,0.28); }
body.dark-mode .sort-btn:hover { background: rgba(212,175,55,0.12); color: var(--gold, #c9a961); }
body.dark-mode .sort-btn.active { background: var(--gold, #c9a961); color: #121212; }
body.dark-mode .user-profile { background: rgba(42,42,42,0.3); border-color: rgba(212,175,55,0.25); }
body.dark-mode .user-dropdown { background: #2a2a2a; border-color: rgba(212,175,55,0.3); }
body.dark-mode .user-dropdown-item { color: #e5e5e5; }
body.dark-mode .no-matters-placeholder { color: rgba(229,229,229,0.7); }
body.dark-mode .skeleton-card { background: #2a2a2a; border-color: rgba(212,175,55,0.15); }
body.dark-mode .skeleton-element { background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); }
body.dark-mode .quick-view-panel { background: #2a2a2a; border-left-color: rgba(212,175,55,0.3); }

/* Reduced motion: disable long animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Fix: stabilize client-card hover (no translate to avoid hover wobble) */
.client-card {
  transition: box-shadow 180ms cubic-bezier(0.2, 0, 0, 1), border-color 180ms, opacity 200ms;
}
.client-card:hover {
  transform: translateY(0) !important; /* override any prior translate */
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.25);
  border-color: var(--gold, #c9a961);
}

/* Seamless rolling banner (expects duplicated text in content)
   The provided banner text already includes the items twice. We animate
   half-width for a continuous, seamless loop without a jump. */
.news-banner { --ticker-speed: 60s; }
.news-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: ui-ticker var(--ticker-speed) linear infinite;
}
.news-content:hover { animation-play-state: paused; }
@keyframes ui-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hide Closed Toggle layout in filter-controls */
.toggle-group { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.toggle-group .toggle-label { font-size: 0.85rem; color: rgba(42,42,42,0.75); }
body.dark-mode .toggle-group .toggle-label { color: rgba(229,229,229,0.8); }

/* Ensure kebab dropdown stacks above all UI and is not clipped */
.client-card { overflow: visible !important; }
.action-menu { position: relative; }
.kebab-dropdown { z-index: 4000 !important; }

/* Place kebab under the status badge */
.client-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.client-status .action-menu {
  position: relative;
}
.client-status .kebab-toggle { padding: 6px; border-radius: 6px; }
.client-status .kebab-dropdown { right: 0; top: calc(100% + 6px); }

/* --- Enhancements: global smoothing and microinteractions (appended) --- */
:root {
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
  --ui-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ui-ease-overshoot: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-fast: 140ms;
  --ui-base: 200ms;
  --ui-slow: 320ms;
  --ui-delight: 720ms;
  --ui-slower: 440ms;
}
html { scroll-behavior: smooth; }

.btn, .action-btn, .filter-btn, .nav-tab, .custom-dropdown-trigger, .kebab-dropdown .dropdown-item, .user-dropdown-item, .modal-close {
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease),
              color var(--ui-fast) ease, background-color var(--ui-fast) ease, border-color var(--ui-fast) ease;
  transform: translateZ(0);
}
.btn:active, .action-btn:active, .filter-btn:active, .nav-tab:active, .custom-dropdown-trigger:active, .kebab-dropdown .dropdown-item:active, .user-dropdown-item:active { transform: scale(0.99); }

.form-input, .form-select, .form-textarea, .search-input { transition: border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease, background-color var(--ui-fast) ease; backface-visibility: hidden; }
.search-input:focus { transform: translateZ(0); }

.panel { will-change: max-height; }
.panel-content { transition: max-height var(--ui-slow) var(--ui-ease), padding var(--ui-fast) var(--ui-ease); }

.modal { will-change: opacity; }
.modal-content { will-change: transform, opacity; backface-visibility: hidden; }

.nav-tab { transform: translateZ(0); }
.nav-tab:hover { filter: saturate(1.05); }

.toast:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.18); }

.task-checkbox { transition: filter var(--ui-fast) ease; }
.task-checkbox:checked { filter: saturate(1.1); }

.news-banner { position: relative; }
.news-banner::before, .news-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; }
.news-banner::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.news-banner::after  { right: 0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
body.dark-mode .news-banner::before { background: linear-gradient(90deg, rgba(26,26,26,1), rgba(26,26,26,0)); }
body.dark-mode .news-banner::after  { background: linear-gradient(270deg, rgba(26,26,26,1), rgba(26,26,26,0)); }

/* Correct sort arrow glyphs */
.sort-btn[data-dir="asc"]::after { content: " \2191" !important; }
.sort-btn[data-dir="desc"]::after { content: " \2193" !important; }

/* Layout coherence + control surfaces */
#clientsTab {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  grid-template-areas:
    "controls controls"
    "sidebar main";
  gap: 16px 24px;
  align-items: start;
  padding: 0 24px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
#clientsTab.active { display: grid; }
#clientsTab .controls {
  grid-area: controls;
  position: sticky;
  top: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  align-items: flex-start;
  gap: 12px 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(201, 169, 97, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  box-shadow: 0 14px 48px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  z-index: 100;
  transition: box-shadow var(--ui-base) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}
#clientsTab .sidebar {
  grid-area: sidebar;
  margin: 0;
  padding: 0;
  max-width: none;
  position: sticky;
  top: 18px;
  align-self: start;
}
#clientsTab .sidebar .panel {
  border-radius: 14px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
}
#clientsTab .panel-header { padding: 16px 18px; }
#clientsTab .panel-content { padding: 16px 18px; }
#clientsTab .main-content {
  grid-area: main;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) {
  #clientsTab {
    grid-template-columns: 1fr;
    grid-template-areas:
      "controls"
      "sidebar"
      "main";
  }
  #clientsTab .sidebar { position: relative; top: auto; }
  #clientsTab .controls { top: 8px; }
}

/* Keep nav tabs anchored at the top without following scroll */
.nav-tabs {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--z-header) - 1);  /* Must be BELOW header so dropdowns render on top */
  transition: box-shadow var(--ui-fast) var(--ui-ease), background-color var(--ui-fast) var(--ui-ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.nav-tabs::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,169,97,0.15), transparent 12%, transparent 88%, rgba(201,169,97,0.15));
  opacity: 0.8;
  pointer-events: none;
}
.nav-tabs-content {
  position: relative;
}
.tab-slider {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold, #c9a961), var(--gold-light, #d4b876));
  box-shadow: 0 6px 16px rgba(201,169,97,0.3);
  transition: transform var(--ui-base) var(--ui-ease-overshoot), width var(--ui-base) var(--ui-ease-overshoot), opacity var(--ui-fast) ease;
}
.nav-tab {
  position: relative;
  isolation: isolate;
  transition: color var(--ui-fast) var(--ui-ease), background-color var(--ui-fast) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}
.nav-tab::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: rgba(201,169,97,0.12);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
  z-index: -1;
}
.nav-tab:hover { transform: translateY(-2px); }
.nav-tab:hover::after { opacity: 1; transform: scale(1); }
.nav-tab.active { color: var(--charcoal-strong, #222); transform: translateY(-1px); }
.nav-tab.active::after { opacity: 1; transform: scale(1); }
.nav-tab .tab-icon { transition: transform var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease); }
.nav-tab[data-tab="clients"]:active .tab-icon,
.nav-tab[data-tab="clients"].active:active .tab-icon { animation: icon-bounce var(--ui-delight) var(--ui-ease-overshoot); }
.nav-tab[data-tab="tasks"]:active .tab-icon,
.nav-tab[data-tab="tasks"].active:active .tab-icon { animation: icon-rotate var(--ui-delight) var(--ui-ease-overshoot); }
.nav-tab[data-tab="tickler"]:active .tab-icon,
.nav-tab[data-tab="tickler"].active:active .tab-icon { animation: icon-wiggle var(--ui-delight) var(--ui-ease-overshoot); }
.nav-tab[data-tab="chat"]:active .tab-icon,
.nav-tab[data-tab="chat"].active:active .tab-icon { animation: icon-pop var(--ui-delight) var(--ui-ease-overshoot); }

/* Harmonize search + filter controls */
#clientsTab .search-container {
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 999px;
  padding: 6px 12px 6px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
#clientsTab .search-container:focus-within {
  border-color: var(--gold, #c9a961);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12), 0 10px 30px rgba(0,0,0,0.08);
}
#clientsTab .search-icon { left: 22px; color: rgba(42,42,42,0.6); }
#clientsTab .search-input {
  border: none;
  background: transparent;
  padding: 10px 50px 10px 44px;
  box-shadow: none;
  font-size: 0.95rem;
}
#clientsTab .search-input:focus { box-shadow: none; }
#clientsTab .search-spinner { right: 18px; }

#clientsTab .filter-controls {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 10px 12px;
}
#clientsTab .filter-group { gap: 8px; }
#clientsTab .filter-btn {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(201, 169, 97, 0.24);
  background: rgba(255,255,255,0.85);
  color: var(--charcoal, #1a1a1a);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  letter-spacing: 0.01em;
  font-weight: 700;
}
#clientsTab .filter-btn:hover {
  background: rgba(201,169,97,0.12);
  color: var(--gold, #c9a961);
  transform: translateY(-1px);
}
#clientsTab .filter-btn.selected {
  background: linear-gradient(180deg, var(--gold, #c9a961) 0%, var(--gold-dark, #b89851) 100%);
  color: #fff;
  border-color: var(--gold-dark, #b89851);
  box-shadow: 0 10px 24px rgba(201, 169, 97, 0.25);
}
#clientsTab .toggle-group {
  background: rgba(255,255,255,0.92);
  border-color: rgba(201, 169, 97, 0.18);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 8px 12px;
}
#clientsTab .toggle-label {
  color: rgba(42,42,42,0.7);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Add Client Section - nested in controls for sticky behavior */
#addClientSection {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 169, 97, 0.14);
  position: relative;
}

#addClientToggleBtn {
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-base) var(--ui-ease);
}

#addClientToggleBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.35);
}

#addClientToggleBtn:active {
  transform: translateY(0);
}

/* Dropdown form - ensure it appears above everything */
#clientFormDropdown {
  z-index: 1000 !important;
  animation: dropdown-slide-in var(--ui-base) var(--ui-ease-overshoot);
}

@keyframes dropdown-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

#clientsTab .sort-bar {
  margin: 0 0 14px;
  border-radius: 10px;
  padding: 10px 12px;
  border-color: rgba(201, 169, 97, 0.2);
}
#clientsTab .sort-btn { border-radius: 10px; padding: 8px 12px; }

/* Sidebar form rhythm */
#clientsTab .form-field { margin-bottom: 14px; }
#clientsTab .quick-actions { gap: 10px; }
#clientsTab .quick-action {
  border-radius: 10px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  background: #fff;
  color: var(--charcoal-strong, #222);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
#clientsTab .quick-action:hover { color: var(--gold, #c9a961); transform: translateY(-1px); }
#clientsTab .form-actions .btn-primary { width: 100%; }

/* Client content spacing */
#clientsTab .clients-list { gap: 14px; }
#clientsTab .client-card {
  border-radius: 14px;
  border: 1px solid rgba(201, 169, 97, 0.18);
  box-shadow: 0 14px 32px rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
  /* Animation handled by GSAP stagger controller */
}
#clientsTab .client-header { padding: 18px 18px 12px; }
#clientsTab .client-meta { gap: 10px; }
#clientsTab .client-meta-item {
  border-color: rgba(201, 169, 97, 0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#clientsTab .client-actions { gap: 10px; }

/* Dark mode counterparts */
body.dark-mode #clientsTab .controls {
  background: linear-gradient(180deg, rgba(26,26,26,0.98), rgba(26,26,26,0.92));
  border-color: rgba(212, 175, 55, 0.26);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
body.dark-mode #clientsTab .sidebar .panel {
  background: #1e1e1e;
  border-color: rgba(212, 175, 55, 0.24);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
body.dark-mode #clientsTab .search-container {
  background: #242424;
  border-color: rgba(212, 175, 55, 0.2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
body.dark-mode #clientsTab .search-icon { color: rgba(229,229,229,0.7); }
body.dark-mode #clientsTab .search-input { color: #f2f2f2; }
body.dark-mode #clientsTab .filter-btn {
  background: rgba(36,36,36,0.9);
  border-color: rgba(212, 175, 55, 0.24);
  color: #e5e5e5;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
body.dark-mode #clientsTab .filter-btn.selected {
  color: #121212;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
body.dark-mode #clientsTab .toggle-group {
  background: #222;
  border-color: rgba(212, 175, 55, 0.26);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  color: #e5e5e5;
}
body.dark-mode #clientsTab .toggle-label { color: rgba(229,229,229,0.75); }
body.dark-mode #clientsTab .quick-action {
  background: #1f1f1f;
  border-color: rgba(212, 175, 55, 0.24);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  color: #f2f2f2;
}
body.dark-mode #clientsTab .client-card {
  background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);
  border-color: rgba(212, 175, 55, 0.24);
  box-shadow: 0 14px 32px rgba(0,0,0,0.5);
}
body.dark-mode #clientsTab .client-meta-item {
  background: #242424;
  border-color: rgba(212, 175, 55, 0.2);
}
body.dark-mode #addClientSection {
  border-top-color: rgba(212, 175, 55, 0.18);
}
body.dark-mode #clientFormDropdown {
  background: #242424 !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}

/* Modal and overlay polish */
.modal-overlay {
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(0, 0, 0, 0.5);
  transition: opacity var(--ui-base) var(--ui-ease), backdrop-filter var(--ui-base) var(--ui-ease);
}
.modal {
  transition: opacity var(--ui-base) var(--ui-ease);
}
.modal.show {
  opacity: 1;
}

/* Enhanced modal spring entrance with overshoot */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content {
  animation: modalSpringIn 400ms var(--ui-ease-overshoot) both;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(201, 169, 97, 0.15);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Dark mode glass modal */
body.dark-mode .modal-content {
  background: rgba(26, 26, 26, 0.88);
  border-color: rgba(212, 175, 55, 0.2);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Toast animation */
.toast {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform var(--ui-base) var(--ui-ease-overshoot), opacity var(--ui-base) ease;
}
.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Quick view sheet */
.quick-view-panel {
  transition: transform var(--ui-base) var(--ui-ease-overshoot), box-shadow var(--ui-fast) ease;
  box-shadow: 0 18px 48px rgba(0,0,0,0.24);
}
.quick-view-overlay {
  backdrop-filter: blur(10px);
  transition: opacity var(--ui-base) ease, backdrop-filter var(--ui-base) ease;
}

/* Card glow for critical actions */
.action-btn,
.btn-primary {
  transition: transform var(--ui-fast) var(--ui-ease-overshoot), box-shadow var(--ui-fast) var(--ui-ease);
}
.action-btn:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(201,169,97,0.28);
}
.action-btn:active,
.btn-primary:active {
  transform: translateY(0);
}

/* Matter list immersiveness */
.client-actions .btn,
.client-actions .action-btn {
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease);
}
.client-actions .btn:hover,
.client-actions .action-btn:hover { transform: translateY(-1px); }
.client-actions .btn:active,
.client-actions .action-btn:active { transform: translateY(0); }

/* Entrance polish for empty states and skeletons */
.empty-state,
.skeleton-card {
  animation: ui-soft-scale var(--ui-slower) var(--ui-ease-overshoot) both;
}

/* Keyframes */
@keyframes ui-fade-lift {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ui-soft-scale {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  60% { opacity: 1; transform: translateY(0) scale(1.008); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes icon-bounce {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  65% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes icon-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-6deg); }
  60% { transform: rotate(6deg); }
}
@keyframes icon-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  75% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tab .tab-icon { animation: none !important; }
}

/* ----------------------------------------------
   Skeuomorphic buttons (cosmetic only)
   ---------------------------------------------- */
/* Base outline buttons: add subtle bevel and depth without filling */
.btn, .action-btn {
  position: relative;
  background-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.25),
    0 4px 10px rgba(0,0,0,0.06);
}
.btn:hover, .action-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.25),
    0 8px 16px rgba(0,0,0,0.10);
}
.btn:active, .action-btn:active {
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 1px 0 rgba(255,255,255,0.15),
    0 2px 8px rgba(0,0,0,0.12);
}

/* Filled variants: modern skeuo (subtle gloss + layered shadows) */
.btn-primary, .btn-billing, .btn-secondary {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.btn-primary {
  background-image: linear-gradient(to bottom, var(--gold-light, #e4c896), var(--gold, #c9a961) 60%, var(--gold-dark, #a08550));
  border-color: var(--gold-dark, #a08550) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 0 rgba(0,0,0,0.06),
    0 8px 18px rgba(0,0,0,0.16);
}
.btn-primary::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 1px; height: 58%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0));
  pointer-events: none;
  transition: opacity var(--ui-fast, 140ms) ease;
  opacity: 0.7;
}
.btn-primary:hover::after { opacity: 0.9; }
.btn-primary:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 2px 0 rgba(0,0,0,0.06),
    0 6px 12px rgba(0,0,0,0.18);
}

.btn-secondary {
  color: var(--charcoal, #1a1a1a);
  background-image: linear-gradient(to bottom, #ffffff, #f4efe6 60%, #e7dfcf);
  border-color: #d6cbb3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.6),
    0 8px 18px rgba(0,0,0,0.08);
}
.btn-secondary::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 1px; height: 58%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  pointer-events: none;
  transition: opacity var(--ui-fast, 140ms) ease;
  opacity: 0.6;
}
.btn-secondary:hover::after { opacity: 0.8; }
.btn-secondary:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.5),
    0 2px 0 rgba(0,0,0,0.04),
    0 6px 12px rgba(0,0,0,0.12);
}

.btn-billing {
  background-image: linear-gradient(to bottom, #3a7a3a, var(--billing-green, #2d5a2d) 60%, #1e3d1e);
  border-color: #1e3d1e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 0 rgba(0,0,0,0.06),
    0 8px 18px rgba(0,0,0,0.16);
}
.btn-billing::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 1px; height: 58%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events: none; opacity: 0.6; transition: opacity var(--ui-fast, 140ms) ease;
}
.btn-billing:hover::after { opacity: 0.8; }
.btn-billing:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 2px 0 rgba(0,0,0,0.06),
    0 6px 12px rgba(0,0,0,0.18);
}

/* Disabled state harmony */
.btn[disabled], .btn:disabled, .action-btn[disabled], .action-btn:disabled,
.btn-primary[disabled], .btn-primary:disabled, .btn-secondary[disabled], .btn-secondary:disabled, .btn-billing[disabled], .btn-billing:disabled {
  filter: grayscale(20%);
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.04);
}

/* Dark mode adjustments for skeuo */
body.dark-mode .btn, body.dark-mode .action-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.06),
    0 6px 12px rgba(0,0,0,0.35);
}
body.dark-mode .btn-primary {
  background-image: linear-gradient(to bottom, #c9b06b, #b9974e 60%, #8f6f33);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.4),
    0 10px 20px rgba(0,0,0,0.5);
}
body.dark-mode .btn-secondary {
  color: #f2f2f2;
  background-image: linear-gradient(to bottom, #2a2a2a, #262626 60%, #222);
  border-color: #303030 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.45),
    0 10px 20px rgba(0,0,0,0.55);
}
body.dark-mode .btn-billing {
  background-image: linear-gradient(to bottom, #2f6a2f, #265526 60%, #1b3d1b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.45),
    0 10px 20px rgba(0,0,0,0.55);
}

/* ================================================
   GSAP Animation Overrides
   Disable CSS animations that GSAP now controls
   ================================================ */

/* Client card entrance - GSAP handles stagger */
.client-card {
  animation: none !important;
  animation-delay: 0ms !important;
}

/* Ensure cards are visible by default (GSAP sets initial opacity) */
.client-card {
  opacity: 1;
}

/* ================================================
   COLLAPSIBLE CLIENT CARDS
   Cards are collapsed by default, expand on click
   ================================================ */

/* Collapsed card state (default) */
.client-card.collapsed {
  cursor: pointer;
}

.client-card.collapsed .client-header {
  padding: var(--space-lg, 1rem) var(--space-xl, 1.5rem);
}

.client-card.collapsed .client-header-top {
  gap: var(--space-lg, 1rem);
}

.client-card.collapsed .client-meta,
.client-card.collapsed .client-actions,
.client-card.collapsed .matters-container {
  display: none !important;
}

/* Collapsed card summary line */
.client-card .card-summary {
  display: none;
  font-size: 0.875rem;
  color: var(--gray, #6c6c6c);
  margin-top: var(--space-xs, 0.25rem);
}

.client-card.collapsed .card-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.client-card .card-summary .summary-matters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.client-card .card-summary .summary-urgency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.client-card .card-summary .summary-urgency.urgency-normal {
  background: rgba(74, 124, 89, 0.12);
  color: var(--status-open, #4a7c59);
}

.client-card .card-summary .summary-urgency.urgency-urgent {
  background: rgba(242, 204, 143, 0.25);
  color: #b8860b;
}

.client-card .card-summary .summary-urgency.urgency-critical {
  background: rgba(224, 122, 95, 0.15);
  color: var(--status-hold, #e07a5f);
}

/* Expand indicator */
.client-card .expand-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream, #faf6f0);
  border: 1px solid var(--gray-light, #e6e6e6);
  color: var(--gray, #6c6c6c);
  font-size: 0.75rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.client-card:hover .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
}

.client-card .expand-indicator i {
  transition: transform 0.25s ease;
}

.client-card.expanded .expand-indicator i {
  transform: rotate(180deg);
}

/* Expanded card state */
.client-card.expanded .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
}

.client-card.expanded .card-summary {
  display: none !important;
}

/* Smooth transition for expand/collapse */
.client-card .matters-container {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.25s ease,
              padding 0.25s ease;
}

.client-card.collapsed .matters-container {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.client-card.expanded .matters-container {
  max-height: 1000px;
  opacity: 1;
}

/* Dark mode adjustments */
body.dark-mode .client-card .expand-indicator {
  background: var(--cream-dark, #1f1f1f);
  border-color: var(--gray-light, #404040);
  color: var(--gray, #888888);
}

body.dark-mode .client-card:hover .expand-indicator,
body.dark-mode .client-card.expanded .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: #121212;
}

body.dark-mode .client-card .card-summary {
  color: var(--gray, #888888);
}

/* ================================================
   UNIFIED FILTER CONTROLS
   Dropdown-based filtering with inline sort
   ================================================ */

/* Filter dropdown container */
.filter-dropdown-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white, #ffffff);
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--charcoal, #2a2a2a);
  transition: all 0.2s ease;
  min-width: 140px;
  justify-content: space-between;
}

.filter-dropdown-trigger:hover {
  border-color: var(--gold, #c9a961);
  background: var(--cream, #faf6f0);
}

.filter-dropdown-trigger.active {
  border-color: var(--gold, #c9a961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.filter-dropdown-trigger .filter-icon {
  color: var(--gold, #c9a961);
}

.filter-dropdown-trigger .dropdown-arrow {
  transition: transform 0.2s ease;
  color: var(--gray, #6c6c6c);
}

.filter-dropdown-trigger.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* Filter dropdown menu */
.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--white, #ffffff);
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 500;
  padding: 6px;
}

.filter-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown-section {
  padding: 6px 0;
}

.filter-dropdown-section:not(:last-child) {
  border-bottom: 1px solid var(--gray-light, #e6e6e6);
}

.filter-dropdown-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray, #6c6c6c);
  padding: 6px 12px 4px;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--charcoal, #2a2a2a);
  transition: all 0.15s ease;
}

.filter-dropdown-item:hover {
  background: var(--cream, #faf6f0);
}

.filter-dropdown-item.selected {
  background: rgba(201, 169, 97, 0.12);
  color: var(--gold-dark, #b89851);
  font-weight: 600;
}

.filter-dropdown-item .check-icon {
  width: 16px;
  color: var(--gold, #c9a961);
  opacity: 0;
}

.filter-dropdown-item.selected .check-icon {
  opacity: 1;
}

.filter-dropdown-item .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-dropdown-item .status-dot.dot-all { background: var(--gray, #6c6c6c); }
.filter-dropdown-item .status-dot.dot-open { background: var(--status-open, #4a7c59); }
.filter-dropdown-item .status-dot.dot-hold { background: var(--status-hold, #e07a5f); }
.filter-dropdown-item .status-dot.dot-closed { background: var(--status-closed, #81717a); }

/* Inline sort control */
.sort-control-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray, #6c6c6c);
}

.sort-control-inline .sort-label {
  color: var(--gray, #6c6c6c);
}

.sort-control-inline .sort-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--charcoal, #2a2a2a);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.sort-control-inline .sort-value:hover {
  background: var(--cream, #faf6f0);
  color: var(--gold, #c9a961);
}

.sort-control-inline .sort-value i {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

/* Result count styling */
.result-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--gray, #6c6c6c);
}

.result-count-bar .result-text {
  font-weight: 500;
}

.result-count-bar .result-text strong {
  color: var(--charcoal, #2a2a2a);
  font-weight: 700;
}

/* Streamlined controls layout */
#clientsTab .controls.streamlined {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

#clientsTab .controls.streamlined .search-container {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

#clientsTab .controls.streamlined .controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Dark mode filter dropdown */
body.dark-mode .filter-dropdown-trigger {
  background: var(--cream-dark, #1f1f1f);
  border-color: var(--gray-light, #404040);
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode .filter-dropdown-trigger:hover {
  background: var(--gray-lighter, #333333);
}

body.dark-mode .filter-dropdown-menu {
  background: var(--cream, #2a2a2a);
  border-color: var(--gray-light, #404040);
}

body.dark-mode .filter-dropdown-item {
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode .filter-dropdown-item:hover {
  background: var(--gray-lighter, #333333);
}

body.dark-mode .filter-dropdown-item.selected {
  background: rgba(201, 169, 97, 0.2);
}

/* ================================================
   ADD CLIENT MODAL
   Proper modal replacing the dropdown
   ================================================ */

#addClientModal .modal-content {
  max-width: 500px;
}

#addClientModal .modal-body {
  padding: var(--space-xl, 1.5rem);
}

#addClientModal .quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

#addClientModal .quick-action {
  padding: 8px 16px;
  background: var(--cream, #faf6f0);
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--charcoal, #2a2a2a);
  cursor: pointer;
  transition: all 0.2s ease;
}

#addClientModal .quick-action:hover {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
}

#addClientModal .form-field {
  margin-bottom: 16px;
}

#addClientModal .form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--charcoal-strong, #1a1a1a);
  font-size: 0.9rem;
}

#addClientModal .form-input,
#addClientModal .form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

#addClientModal .form-input:focus,
#addClientModal .form-textarea:focus {
  outline: none;
  border-color: var(--gold, #c9a961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.12);
}

#addClientModal .form-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

#addClientModal .form-actions .btn-primary {
  flex: 1;
}

body.dark-mode #addClientModal .form-label {
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode #addClientModal .form-input,
body.dark-mode #addClientModal .form-textarea {
  background: var(--cream-dark, #1f1f1f);
  border-color: var(--gray-light, #404040);
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode #addClientModal .quick-action {
  background: var(--gray-lighter, #333333);
  border-color: var(--gray-light, #404040);
  color: var(--charcoal, #e5e5e5);
}