/* ============================================================
   Policy & Consent Management ERP - styles.css
   Professional corporate design for AWS CloudFront / S3
   ============================================================ */

/* ─── CSS Variables (Design Tokens) ─────────────────────────── */

.report-type-select {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 8px 12px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.report-type-select:hover {
  border-color: var(--color-border-hover);
  background: #f8fafc;
}

.report-type-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.al-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(26, 86, 219, 0.07);
  border: 1px solid rgba(26, 86, 219, 0.18);
  border-radius: 12px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}

.al-expand-btn:hover {
  background: rgba(26, 86, 219, 0.14);
  box-shadow: 0 1px 4px rgba(26, 86, 219, 0.15);
}

.al-sub-rows td {
  background: #f8fafc;
  border-bottom: 1px solid #e8edf3;
  font-size: 0.8rem;
  color: #475569;
}

.al-sub-rows td:first-child {
  padding-left: 32px;
  color: #94a3b8;
}

#page-leads .page-header-actions,
#page-applications .page-header-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.page-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-header-actions .lead-action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  margin-top: 0;
}

.page-header-actions .lead-action-icon-reload {
  color: var(--color-primary-active);
}

.page-header-actions .lead-action-icon-primary {
  color: #ffffff;
}

.data-table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
  /* Note: height:100% was here but overridden by the second definition;
     removed to avoid confusion — see the canonical definition below. */
}

@media (max-width: 768px) {

  /* A native <select> sizes itself to its longest <option>, and inside
     flex/grid cells (min-width defaults to auto) that can push the layout
     past the screen edge. Clamp every dropdown to its container and let
     the wrapping cells shrink — long options ellipsize instead of
     widening the page. */
  select {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .form-group,
  .form-row>*,
  .crm-filter-group,
  [style*="grid-template-columns"]>div {
    min-width: 0;
  }

  /* Searchable dropdown (e.g. Leads "Area"): its panel has a 200px floor
     which can spill past the screen inside the 2-column filter grid. */
  .crm-searchable-select-panel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {

  .crm-filter-group .form-input {
    width: 100px;
  }

  .crm-filter-group {
    flex-shrink: 0;
  }

  #page-my-timesheet [style*="width:300px;background:#fff;border-radius:10px;border:1px solid #e2e8f0;padding:20px;"] {
    width: 100% !important;
  }

  #notif-dropdown {
    width: calc(100vw - 24px) !important;
    max-width: 360px;
    right: -8px !important;
  }
}

.policy-content-body.has-document {
  max-height: 72vh;
  overflow: hidden;
}

.policy-doc-viewer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 68vh;
  min-height: 430px;
}

.policy-doc-caption {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
}

.policy-doc-frame-wrap {
  flex: 1;
  min-height: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.policy-doc-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

.policy-doc-link-row {
  font-size: 13px;
}

.consent-search-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.consent-search-input {
  max-width: 440px;
  width: 100%;
  background: #fff !important;
  border: 1px solid #d7e0ea;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.consent-search-input svg {
  left: 14px;
  color: #94a3b8;
  width: 18px;
  height: 18px;
}

.consent-search-input input {
  min-height: 44px;
  padding: 10px 42px 10px 42px;
  border: none;
  border-radius: 14px;
  background: #fff !important;
  font-size: 0.9375rem;
}

.consent-search-input input:focus {
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.consent-search-input input::placeholder {
  color: #94a3b8;
}

.consent-search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.consent-search-clear svg {
  width: 14px;
  height: 14px;
}

.consent-search-input input:not(:placeholder-shown)~.consent-search-clear {
  opacity: 1;
  pointer-events: auto;
}

.consent-search-clear:hover {
  background: #f1f5f9;
  color: #475569;
}

.consent-detail-table-wrap {
  overflow-x: auto;
}

#consent-detail-modal .modal-large {
  max-width: min(1180px, calc(100vw - 48px));
}

#consent-detail-modal .modal-body {
  padding-bottom: 12px;
}

.icon-btn.assign:hover {
  background: #0891b2;
  border-color: #0891b2;
  color: #fff;
}

.sidebar.collapsed .sidebar-section-items {
  gap: 4px;
}

.sidebar.collapsed .sidebar-section.is-collapsed .sidebar-section-items {
  display: none !important;
}

.sidebar.collapsed .sidebar-section:not(.is-collapsed) .sidebar-section-items {
  display: grid !important;
}

.sidebar.collapsed .sidebar-section-toggle {
  display: none !important;
}

.sidebar.collapsed .sidebar-section+.sidebar-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 4px;
  margin-top: 4px;
}

.policy-tag-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 4px 20px 8px;
}

.policy-tag-filter>span {
  margin-right: 2px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.policy-tag-filter .tag-filter-btn {
  padding: 6px 14px;
  min-height: 30px;
  line-height: 1;
}

.policies-pager-meta {
  color: #475569;
  font-size: 13px;
  font-weight: 500;
}

.policies-pager-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.policies-page-label {
  color: #334155;
  font-size: 13px;
  min-width: 88px;
  text-align: center;
}

.policy-page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
}

.policy-page-size-label,
.policy-page-size-suffix {
  font-size: 14px;
  color: #475569;
  font-weight: 500;
  white-space: nowrap;
}

.policy-page-size-select {
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  padding: 0 2px;
  height: 30px;
  outline: none;
  min-width: 48px;
  cursor: pointer;
}

.sortable-th {
  user-select: none;
  white-space: nowrap;
}

.sort-header-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.sort-header-label {
  display: inline-block;
}

.sort-arrow-stack {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  transform: translateY(-1px);
}

.sort-arrow-up,
.sort-arrow-down {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}

.sort-arrow-up.active,
.sort-arrow-down.active {
  color: var(--color-primary-active);
}

.training-table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 14px 12px 8px;
  border-top: 1px solid #e2e8f0;
}

.training-pagination-meta,
.training-pagination-label {
  font-size: 13px;
  color: #475569;
}

.training-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.training-table-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  color: #64748b;
  font-size: 14px;
}

.training-table-loader-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 12px;
  color: #64748b;
  font-size: 14px;
}

#policies-table-container .sortable-th {
  user-select: none;
  white-space: nowrap;
  padding-right: 10px;
}

#policies-table-container .sort-header-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

#policies-table-container .sort-header-label {
  display: inline-block;
}

#policies-table-container .sort-arrow-stack {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  transform: translateY(-1px);
}

#policies-table-container .sort-arrow-up,
#policies-table-container .sort-arrow-down {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}

#page-training-admin #training-admin-tab-contents .data-table-toolbar {
  row-gap: 12px;
}

#page-training-admin #training-admin-tab-contents .data-table-filters {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#page-training-admin #training-admin-tab-contents .data-table-filters .btn-primary.btn-sm {
  margin-left: 2px;
  padding-left: 14px;
  padding-right: 14px;
}

#page-training-admin #training-admin-tab-contents .policy-page-size-control {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

#page-training-admin #training-admin-tab-contents .policy-page-size-label,
#page-training-admin #training-admin-tab-contents .policy-page-size-suffix {
  font-size: 13px;
}

#page-training-admin #training-admin-tab-contents .policy-page-size-select {
  height: 26px;
  font-size: 14px;
  min-width: 42px;
}

#page-training-admin #training-admin-tab-assignments .policy-page-size-control {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

#page-training-admin #training-admin-tab-assignments .policy-page-size-label,
#page-training-admin #training-admin-tab-assignments .policy-page-size-suffix {
  font-size: 13px;
}

#page-training-admin #training-admin-tab-assignments .policy-page-size-select {
  height: 26px;
  font-size: 14px;
  min-width: 42px;
}

#page-training .data-table-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-training .policy-page-size-control {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

#page-training .policy-page-size-label,
#page-training .policy-page-size-suffix {
  font-size: 13px;
}

#page-training .policy-page-size-select {
  height: 26px;
  font-size: 14px;
  min-width: 42px;
}

#page-training .data-table-filters .btn.btn-secondary.btn-sm {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
}

#policies-table-container .sort-arrow-up.active,
#policies-table-container .sort-arrow-down.active {
  color: var(--color-primary-active);
}

#page-policies {
  display: block;
}

#page-policies .data-table-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

#page-policies .policy-page-size-control {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

#page-policies .policy-page-size-label,
#page-policies .policy-page-size-suffix {
  font-size: 13px;
}

#page-policies .policy-page-size-select {
  height: 26px;
  font-size: 14px;
  min-width: 42px;
}

#page-policies .data-table-filters .btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 13px;
}

#page-policies .policy-card-actions {
  display: flex;
  align-items: center;
  height: 34px;
}

#page-policies:not(.active) .policy-page-layout {
  display: none !important;
}

#page-policies .policy-page-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#page-policies .policy-tabs {
  display: flex;
  gap: 8px;
  background: #fff;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: 0;
}

#page-policies .policy-section-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

#page-policies .policy-section-tab:hover {
  background: #f8fafc;
  color: #0f172a;
}

#page-policies .policy-section-tab.active {
  background: var(--color-primary);
  color: #fff;
}

#page-policies .policy-section-card {
  min-height: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#page-policies .policy-card-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

#page-policies .policy-card-actions:empty {
  display: none;
}

#page-policies .policy-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#page-policies .policy-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}

#page-policies .policy-section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}

#page-policies .policy-section-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

#page-policies .policy-tag-editor {
  padding-top: 4px;
}

#page-policies .policy-tag-editor-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

#page-policies .policy-data-table-wrapper {
  padding: 0;
}

#policies-table-container {
  margin: 2px 0 0;
}

#policies-pagination {
  margin-top: 16px !important;
  padding: 14px 12px 10px;
  row-gap: 10px;
  border-top: 1px solid #e2e8f0;
}

#policies-table-container .actions-cell {
  vertical-align: middle;
  text-align: center;
}

#policies-table-container .policy-actions-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#policies-table-container .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

#policies-table-container .icon-btn svg {
  width: 19px;
  height: 19px;
}

#policies-table-container .icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

#policies-table-container .icon-btn.view:hover {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
}

#policies-table-container .icon-btn.edit:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

#policies-table-container .icon-btn.delete:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}

@media (max-width: 900px) {
  #page-policies .policy-section-card {
    padding: 14px;
  }

  #page-policies .policy-section-header {
    flex-direction: column;
    align-items: stretch;
  }

  #page-policies .policy-tag-editor-row {
    flex-wrap: wrap;
  }
}

.sidebar-section-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 10px 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sidebar-section-toggle:hover {
  color: #cbd5e1;
}

.sidebar-section-toggle-icon {
  font-size: 0.875rem;
  line-height: 1;
  transition: transform var(--transition);
}

.sidebar-section-items {
  display: grid;
  gap: 4px;
}

.sidebar-section.is-collapsed .sidebar-section-items {
  display: none;
}

.sidebar-section.is-collapsed .sidebar-section-toggle-icon {
  transform: rotate(-90deg);
}

.sidebar.collapsed .sidebar-section-toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar.collapsed .sidebar-section-title-text,
.sidebar.collapsed .sidebar-section-toggle-icon {
  display: none;
}

#nav-leads svg,
#nav-applications svg {
  opacity: 0.95;
  width: 21px;
  height: 21px;
}

.sidebar {
  overflow: hidden;
}

.sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
  background-clip: content-box;
}

@media (max-width: 1024px) {
  .sidebar-nav {
    padding-right: 6px;
  }
}

/* ─── CSS Variables (Design Tokens) ─────────────────────────── */
:root {
  --color-primary: #1a56db;
  --color-primary-hover: #1648b8;
  --color-primary-active: #123a93;
  --color-primary-light: #e8eefb;
  --color-primary-subtle: #f3f7fd;
  --color-surface: #ffffff;
  --color-background: #f1f5f9;
  --color-sidebar: #0f172a;
  --color-sidebar-hover: #1e293b;
  --color-sidebar-active: #1a56db;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #74839b;
  /* was #94a3b8 (2.9:1); now ~4.1:1 on white */
  --color-text-inverse: #ffffff;
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-info: #1a56db;
  --color-info-bg: #e8eefb;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

  --sidebar-width: 260px;
  --topbar-height: 64px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── DS v1 additions (Phase 0) — additive only ── */
  /* Spacing scale (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Type scale */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-stat: 28px;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(26, 86, 219, 0.25);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Control sizing */
  --control-height: 40px;
  --control-height-sm: 32px;
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

/* ─── Login Screen ─────────────────────────────────────────── */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 24px;
}

.login-container {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 48px 40px;
  max-width: 440px;
  width: 100%;
  text-align: center;
}

.login-logo {
  width: 96px;
  height: 96px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.login-logo svg {
  width: 28px;
  height: 28px;
  color: var(--color-text-inverse);
}

.login-container h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.login-container p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  line-height: 1.5;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: all var(--transition);
  margin-bottom: 16px;
}

.login-btn:hover {
  background: var(--color-background);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-sm);
}

.login-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.login-footer {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ─── App Layout ──────────────────────────────────────────── */
#app-screen {
  display: none;
  min-height: 100vh;
}

#app-screen.active {
  display: flex;
}

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform var(--transition);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-inverse);
}

.sidebar-brand {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  letter-spacing: -0.01em;
}

.sidebar-brand span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: 24px;
}

.sidebar-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  padding: 0 12px;
  margin-bottom: 6px;
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 450;
  color: rgba(255, 255, 255, 0.72);
  transition: all var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-inverse);
}

.sidebar-link.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-inverse);
  font-weight: 500;
}

/* DS v1: active = quiet fill + primary left rail (not solid blue) */
.sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #5c8bee;
  /* readable tint of --color-primary on the dark sidebar */
}

.sidebar-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Uniform icon weight across nav (markup mixes 1.5 / 1.9 strokes) */
.sidebar-link svg,
.sidebar-link svg path {
  stroke-width: 1.6;
}

.sidebar-link.active svg,
.sidebar-link:hover svg {
  opacity: 1;
}

.sidebar-link .badge {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}

.sidebar-link.active .badge {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-text-inverse);
}

.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Main Content Area ──────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  padding-top: var(--topbar-height);
}

/* ─── Top Bar ────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 40;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── CRM pages: header controls portaled into the topbar (desktop) ──
   The slot sits between the title and the bell/profile; the moved
   .page-header is flattened into a single compact row: search first,
   then the action buttons. Below 1025px the JS never portals, so the
   slot stays empty and pages keep their normal in-page layout. */
.topbar-page-controls {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 16px 0 24px;
  /* If a page has more controls than fit (e.g. Leads on a narrow
     desktop), scroll them quietly instead of pushing the bell/profile
     out of the bar. */
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-page-controls::-webkit-scrollbar {
  display: none;
}

.topbar-page-controls .page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.topbar-page-controls .page-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}

/* Search leads the row, buttons follow */
.topbar-page-controls .crm-leads-search-row,
.topbar-page-controls .page-header>.crm-page-search,
.topbar-page-controls .page-header-actions>.crm-page-search {
  order: -1;
  flex: 0 1 260px;
  min-width: 140px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-page-controls .crm-page-search {
  max-width: 260px;
}

.topbar-page-controls .crm-page-search input {
  width: 100%;
  padding: 5px 10px 5px 32px;
  font-size: 0.78rem;
}

.topbar-page-controls .crm-page-search svg {
  width: 14px;
  height: 14px;
}

/* Icon-only buttons: font-size 0 hides raw text nodes and .btn-label
   spans alike (icons are px-sized so they're unaffected); the button
   name shows as a hover tooltip via title, set in JS when missing. */
.topbar-page-controls .btn {
  padding: 8px;
  font-size: 0;
  gap: 0;
  line-height: 0;
  white-space: nowrap;
}

.topbar-page-controls .report-type-select {
  max-width: 220px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  transition: all var(--transition);
}

.mobile-menu-btn:hover {
  background: var(--color-background);
}

.mobile-menu-btn svg {
  width: 20px;
  height: 20px;
}

.topbar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  transition: all var(--transition);
  position: relative;
}

.topbar-icon-btn:hover {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  border: 2px solid var(--color-surface);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: all var(--transition);
}

.user-menu:hover {
  background: var(--color-background);
  border-color: var(--color-border-hover);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.user-info {
  text-align: left;
}

.user-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.user-role {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.user-menu-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

/* ─── User Dropdown ──────────────────────────────────────── */
.user-dropdown {
  position: absolute;
  top: calc(var(--topbar-height) - 4px);
  right: 32px;
  width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 100;
  display: none;
  overflow: hidden;
}

.user-dropdown.open {
  display: block;
  animation: slideDown 150ms ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.user-dropdown-header .name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.user-dropdown-header .email {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: all var(--transition);
}

.user-dropdown-item:hover {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.user-dropdown-item.danger {
  color: var(--color-danger);
}

.user-dropdown-item.danger:hover {
  background: var(--color-danger-bg);
}

.user-dropdown-item svg {
  width: 16px;
  height: 16px;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
}

/* ─── Page Content ───────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 20px 24px;
  padding-bottom: 64px;
  min-width: 0;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}

.page-header-left h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.page-header-left p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.page-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ─── Stats Row ──────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card-icon.blue {
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.stat-card-icon.green {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.stat-card-icon.amber {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.stat-card-icon.red {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.stat-card-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.stat-card-subtext {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-background);
  border-color: var(--color-border-hover);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}

.btn-success:hover {
  background: #047857;
  border-color: #047857;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding: 9px 10px;
}

.btn-ghost:hover {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.75rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s;
}

.btn-icon:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-icon svg {
  width: 14px;
  height: 14px;
}

.btn-icon-danger {
  color: #ef4444;
  border-color: #fecaca;
}

.btn-icon-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Data Table ─────────────────────────────────────────── */
.data-table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
  /* visual clip to border-radius, but children can still scroll */
}

/* All table containers are independently scrollable */
[id$="-table-container"],
.table-container,
#teams-table,
#projects-table,
#training-content-container,
#my-training-list {
  overflow-x: auto;
}

.data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
}

.data-table-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.data-table-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-size: 0.8125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text-primary);
  transition: all var(--transition);
  outline: none;
}

.data-table-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
  background: var(--color-surface);
}

.data-table-search input::placeholder {
  color: var(--color-text-muted);
}

.data-table-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.data-table-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-table-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.crm-page-search {
  align-self: center;
}

.crm-page-search input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.crm-table-filters {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 8px;
  margin-bottom: 10px;
}

.crm-filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 220px;
}

.crm-filter-group label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.crm-filter-group .form-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.75rem;
}

/* ─── CRM filters-as-popup (Leads/Contacts/Reports) ──────────────
   Every CRM filter panel opens as a popup at all widths, so the
   Filters toggle button is always visible. */
.crm-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.crm-view-toggle-mobile-btn {
  display: none;
}

.crm-filter-backdrop {
  display: none;
}

.crm-filter-popup-header,
.crm-filter-popup-footer {
  display: none;
}

/* Desktop: this wrapper must not generate its own box, so the filter
   groups inside it stay direct flex items of the filter row (unchanged
   desktop layout). Mobile below turns it into the popup's scroll body. */
.crm-filter-popup-body {
  display: contents;
}

@media (max-width: 768px) {
  .crm-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 10px;
  }

  .crm-filter-toggle-btn svg {
    width: 13px;
    height: 13px;
  }

  /* Flush the Filters button to the same left edge as the header's
     action buttons (the toolbar normally carries its own inset). */
  #crm-leads-table-wrapper .data-table-toolbar,
  #crm-contacts-table-wrapper .data-table-toolbar {
    padding-left: 0;
    padding-right: 0;
  }

  #crm-leads-filter-panel,
  #crm-contacts-filter-panel,
  #crm-reports-filter-panel {
    display: none !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 90vh !important;
    height: 90dvh !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow: hidden !important;
    background: var(--color-surface, #fff) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    z-index: 1200 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  #crm-leads-filter-panel.open,
  #crm-contacts-filter-panel.open,
  #crm-reports-filter-panel.open {
    display: flex !important;
  }

  #crm-leads-filter-panel .crm-filter-group,
  #crm-contacts-filter-panel .crm-filter-group,
  #crm-reports-filter-panel .crm-filter-group {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  #crm-leads-filter-panel .crm-filter-group .form-input,
  #crm-contacts-filter-panel .crm-filter-group .form-input,
  #crm-reports-filter-panel .crm-filter-group .form-input {
    width: 100%;
  }

  .crm-filter-popup-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }

  .crm-filter-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .crm-filter-popup-footer {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
  }

}

/* Opened backdrop is shared by every width — mobile popups and the
   Leads desktop popup both sit on top of it. */
.crm-filter-backdrop.open {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1190;
}

/* Leads/Contacts/Reports: the same filters popup as mobile, sized as a
   centered dialog on tablet/desktop. Toggle button + open/close JS shared. */
@media (min-width: 769px) {

  #crm-leads-filter-panel,
  #crm-contacts-filter-panel,
  #crm-reports-filter-panel {
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    background: var(--color-surface, #fff) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    z-index: 1200 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  #crm-leads-filter-panel.open,
  #crm-contacts-filter-panel.open,
  #crm-reports-filter-panel.open {
    display: flex !important;
  }

  #crm-leads-filter-panel .crm-filter-popup-header,
  #crm-contacts-filter-panel .crm-filter-popup-header,
  #crm-reports-filter-panel .crm-filter-popup-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }

  #crm-leads-filter-panel .crm-filter-popup-body,
  #crm-contacts-filter-panel .crm-filter-popup-body,
  #crm-reports-filter-panel .crm-filter-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 16px;
  }

  #crm-leads-filter-panel .crm-filter-group,
  #crm-contacts-filter-panel .crm-filter-group,
  #crm-reports-filter-panel .crm-filter-group {
    min-width: 0;
    max-width: none;
  }

  #crm-leads-filter-panel .crm-filter-popup-footer,
  #crm-contacts-filter-panel .crm-filter-popup-footer,
  #crm-reports-filter-panel .crm-filter-popup-footer {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
  }

  /* These toolbars only hosted the inline filter row; with the filters
     living in the popup they would render as an empty strip. (Reports'
     filter bar stays — it also holds the Refresh/Export buttons.) */
  #crm-leads-table-wrapper>.data-table-toolbar,
  #crm-contacts-table-wrapper>.data-table-toolbar {
    display: none;
  }
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #f8fafc;
  border-bottom: 2px solid var(--color-border);
}

th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

td {
  padding: 12px 16px;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-background);
  vertical-align: middle;
  background: white;
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: #f8fafc;
}

tbody tr:hover td {
  background: #f9fafb;
}

tbody tr:last-child td {
  border-bottom: none;
}

.td-title {
  font-weight: 500;
  color: var(--color-text-primary);
}

.td-desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-date {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.td-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── Empty State ────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-text-muted);
}

.empty-state-icon svg {
  width: 24px;
  height: 24px;
}

.empty-state h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.empty-state p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  max-width: 320px;
}

/* ─── Status Badges ──────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.badge-accepted {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-accepted .dot {
  background: var(--color-success);
}

.badge-rejected {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge-rejected .dot {
  background: var(--color-danger);
}

.badge-pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-pending .dot {
  background: var(--color-warning);
}

.badge-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-role.admin {
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.badge-role.hr {
  background: #f0fdf4;
  color: #16a34a;
}

.badge-role.it {
  background: #fefce8;
  color: #ca8a04;
}

.badge-role.employee {
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.badge-role.manager {
  background: #faf5ff;
  color: #9333ea;
}

/* ─── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(8px);
  transition: transform var(--transition);
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0 24px;
}

.modal-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.modal-close:hover {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

.document-viewer-close {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.document-viewer-close:hover {
  border-color: var(--color-primary);
  background: var(--color-background);
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: all var(--transition);
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 24px 24px 24px;
}

/* Assign Training tab pills */
#assign-modal .assign-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #f8fafc;
}

#assign-modal .filter-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--transition);
}

#assign-modal .filter-tab:hover {
  background: #eef2ff;
  color: var(--color-text-primary);
}

#assign-modal .filter-tab.active {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #bfdbfe;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ─── Toast Notifications ────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  max-width: 420px;
  pointer-events: auto;
  animation: toastIn 300ms ease-out;
}

.toast.removing {
  animation: toastOut 200ms ease-in forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast.success .toast-icon {
  color: var(--color-success);
}

.toast.error .toast-icon {
  color: var(--color-danger);
}

.toast.warning .toast-icon {
  color: var(--color-warning);
}

.toast.info .toast-icon {
  color: var(--color-primary);
}

.toast-message {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--color-text-primary);
}

.toast-dismiss {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all var(--transition);
}

.toast-dismiss:hover {
  color: var(--color-text-primary);
  background: var(--color-background);
}

/* ─── Field Validation Errors ────────────────────────────── */
.field-error {
  display: block;
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.4;
  animation: errorFadeIn 0.2s ease-out;
}

@keyframes errorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-input.error,
.form-select.error {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
}

/* ─── Confirm Dialog ─────────────────────────────────────── */
.confirm-body {
  text-align: center;
  padding: 32px 24px 24px 24px;
}

.confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.confirm-icon svg {
  width: 24px;
  height: 24px;
}

.confirm-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.confirm-body p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ─── Loading Spinner (used for buttons / inline) ────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

.spinner.sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner.lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── WorkMate Page Loader ───────────────────────────────── */
.wm-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.wm-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.35;
  animation: wm-bounce 1.4s ease-in-out infinite;
}

.wm-dot:nth-child(2) {
  animation-delay: 0.22s;
}

.wm-dot:nth-child(3) {
  animation-delay: 0.44s;
}

@keyframes wm-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  30% {
    transform: translateY(-9px);
    opacity: 1;
  }
}

.wm-loader-msg {
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  letter-spacing: 0.02em;
}

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  gap: 12px;
}

.loading-overlay span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ─── Card Component ─────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ─── Page Views ─────────────────────────────────────────── */
.page-view {
  display: none;
}

.page-view.active {
  display: block;
}

/* ─── Skeleton Loading ───────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, #f1f5f9 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ─── Responsive ─────────────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 45;
  display: none;
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-overlay.open {
    display: block;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .topbar {
    left: 0;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .page-content {
    padding: 24px 16px;
  }

  .topbar {
    padding: 0 16px;
  }

  .page-header {
    flex-direction: column;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .data-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .data-table-search {
    max-width: none;
  }

  .user-info {
    display: none;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .stats-row {
    grid-template-columns: 1fr;
  }

  .page-header-actions {
    flex-direction: column;
    width: 100%;
  }

  .page-header-actions .btn {
    width: 100%;
  }

  .modal {
    margin: 16px;
  }

  .policy-content-body.has-document {
    max-height: 64vh;
  }

  .policy-doc-viewer {
    height: 58vh;
    min-height: 320px;
  }
}

/* ─── Utility ────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hidden {
  display: none !important;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── WorkMate Login Branding ─────────────────────────────────── */
.login-logo-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.login-logo-svg {
  width: 96px;
  height: 96px;
  background: var(--color-primary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-svg svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

.login-app-name {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 12px 0 4px;
}

.login-tagline {
  font-size: 0.9375rem;
  color: var(--text-secondary, #64748b);
  margin-bottom: 28px;
}

/* ─── Sidebar brand button (clickable logo) ───────────────────── */
.sidebar-brand-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
}

.sidebar-brand-btn:hover .brand-name {
  color: var(--color-primary);
}

.company-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.company-logo-svg {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-logo-svg svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f1f5f9;
}

.brand-sub {
  font-size: 0.7rem;
  color: var(--text-secondary, #64748b);
}

/* ─── Policy row hover ────────────────────────────────────────── */
.policy-row-clickable:hover {
  background: var(--bg-hover, #f8fafc);
}

.policy-title-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.policy-title-cell .tag-chip {
  align-self: flex-start;
  width: fit-content;
  margin: 4px 0 6px;
}

.policy-desc {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
}

.policy-meta {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 16px;
}

.policy-meta-row {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  flex-wrap: wrap;
}

.policy-content-body {
  max-height: 55vh;
  overflow-y: auto;
}

.policy-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary, #0f172a);
  white-space: pre-wrap;
}

.modal-large {
  max-width: min(720px, calc(100vw - 32px));
}

.accepted-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #16a34a;
  font-weight: 600;
  font-size: 0.875rem;
}

/* ─── Consent stats mini ──────────────────────────────────────── */
.consent-mini-stats {
  font-size: 0.8rem;
}

.accepted-count {
  color: #16a34a;
  font-weight: 500;
}

.pending-count {
  color: #d97706;
  font-weight: 500;
}

/* ─── Consent grouped cards ───────────────────────────────────── */
.consent-group-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.consent-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 16px;
}

.consent-group-info {
  flex: 1;
}

.consent-group-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.consent-group-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
}

.consent-progress-bar-wrap {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  margin-bottom: 12px;
  overflow: hidden;
}

.consent-progress-bar {
  height: 100%;
  background: #16a34a;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.consent-group-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-pill {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}

.stat-pill.accepted {
  background: #dcfce7;
  color: #16a34a;
}

.stat-pill.pending {
  background: #fef9c3;
  color: #854d0e;
}

.stat-pill.total {
  background: #f1f5f9;
  color: #475569;
}

/* ─── Consent detail modal ────────────────────────────────────── */
.consent-detail-stats {
  margin-bottom: 16px;
}

.consent-detail-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.consent-stat-pill {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}

.consent-stat-pill.accepted {
  background: #dcfce7;
  color: #16a34a;
}

.consent-stat-pill.pending {
  background: #fef9c3;
  color: #854d0e;
}

.consent-stat-pill.total {
  background: #f1f5f9;
  color: #475569;
}

/* ─── Stat card purple variant ────────────────────────────────── */
.stat-card-icon.purple {
  background: #f3e8ff;
  color: #7c3aed;
}

/* ─── Clickable stat cards ────────────────────────────────────── */
.stat-card-clickable {
  cursor: pointer;
  border: none;
  text-align: left;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.stat-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-card-hint {
  font-size: 0.72rem;
  color: var(--color-primary);
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-weight: 500;
}

.stat-card-clickable:hover .stat-card-hint {
  opacity: 1;
}

/* ─── Icon Button (inline table actions) ─────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.icon-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════
   PHASE 2 — EFFORT TRACKING STYLES
   ═══════════════════════════════════════════════════════════ */

/* ─── Log Hours Layout ─────────────────────────────────── */
.log-hours-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .log-hours-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Timesheet Grid ─────────────────────────────────────── */
.timesheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.timesheet-table th {
  background: var(--color-surface-secondary, #f8fafc);
  padding: 10px 12px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary, #64748b);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.timesheet-table th:first-child {
  text-align: left;
}

.timesheet-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #f1f5f9);
  text-align: center;
  color: var(--color-text-primary, #0f172a);
}

.timesheet-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.timesheet-table tfoot td {
  font-weight: 700;
  background: var(--color-surface-secondary, #f8fafc);
  border-top: 2px solid var(--color-border, #e2e8f0);
}

.ts-hours-cell {
  font-weight: 600;
  color: var(--color-primary);
}

.ts-empty-cell {
  color: var(--color-text-muted, #cbd5e1);
}

.ts-today {
  background: #eff6ff !important;
}

.ts-weekend {
  background: var(--color-surface-secondary, #f8fafc);
  opacity: 0.7;
}

.ts-total-row td {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700;
}

/* ─── Project Table ─────────────────────────────────────── */
.project-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.project-status-badge.active {
  background: #dcfce7;
  color: #15803d;
}

.project-status-badge.completed {
  background: #dbeafe;
  color: #1d4ed8;
}

.project-status-badge.on_hold {
  background: #fef9c3;
  color: #854d0e;
}

.project-status-badge.archived {
  background: #f1f5f9;
  color: #64748b;
}

.project-progress-bar {
  height: 6px;
  background: var(--color-border, #e2e8f0);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}

.project-progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.project-progress-bar-fill.over {
  background: #ef4444;
}

/* ─── Recent Logs Table ─────────────────────────────────── */
.log-entry-row,
.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border, #f1f5f9);
}

.log-entry-row:last-child {
  border-bottom: none;
}

.log-entry-date {
  min-width: 80px;
  font-size: 11px;
  color: var(--color-text-secondary, #64748b);
  padding-top: 2px;
}

.log-entry-info {
  flex: 1;
}

.log-entry-project {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.log-entry-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
}

.log-entry-hours {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  min-width: 50px;
  text-align: right;
}

.log-entry-actions {
  display: flex;
  gap: 4px;
}

/* ─── KPI Cards for Reports ─────────────────────────────── */
.kpi-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 20px 24px;
}

.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary, #64748b);
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-primary, #0f172a);
  line-height: 1;
}

.kpi-sub {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
  margin-top: 4px;
}

/* ─── Member Chip ────────────────────────────────────────── */
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-secondary, #f1f5f9);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.member-chip.selected {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.member-chip:hover {
  opacity: 0.8;
}

/* ─── Timer ──────────────────────────────────────────────── */
.timer-display {
  font-size: 48px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 2px;
  color: var(--color-text-primary, #0f172a);
  padding: 16px 0;
  font-variant-numeric: tabular-nums;
}

.timer-section {
  background: var(--color-surface-secondary, #f8fafc);
  border-radius: var(--radius-md, 8px);
  padding: 16px;
  border: 1px solid var(--color-border, #e2e8f0);
}


/* ─── Stats Grid (KPI cards row) ────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.stats-grid .kpi-card {
  padding: 14px 18px;
}

.stats-grid .kpi-value {
  font-size: 22px;
}

/* ─── Reports layout ─────────────────────────────────────── */
.report-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .report-charts-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Sidebar collapse ───────────────────────────────────── */
.sidebar {
  transition: width 0.2s ease;
  overflow: hidden;
}


/* ─── Chart sizing fixes ────────────────────────────────── */
.report-charts-grid .card {
  padding: 16px;
}

.report-charts-grid canvas {
  max-height: 200px !important;
}

#chart-daily {
  max-height: 180px !important;
}

/* ─── Teams page KPI compact ─────────────────────────────── */
#teams-kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ─── Reports page header + filter ──────────────────────── */
.report-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.report-filter-bar .form-group {
  margin: 0;
  flex: 1;
  min-width: 140px;
}

/* ─── Sidebar brand name always visible ──────────────────── */
.sidebar-brand-text .brand-name {
  color: #f1f5f9 !important;
}

.sidebar-brand-text .brand-tagline {
  color: #94a3b8 !important;
}


/* ─── Chart canvas sizes ─────────────────────────────────── */
#chart-by-project,
#chart-by-employee {
  max-height: 240px;
}

#chart-daily {
  max-height: 150px;
}

.report-charts-grid .card {
  overflow: hidden;
}




/* Collapsed state */
.sidebar.collapsed {
  width: 60px !important;
}

/* Hide all text in collapsed sidebar */
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-section-label {
  display: none !important;
}

/* Hide text nodes in buttons - use font-size trick */
.sidebar.collapsed .sidebar-link {
  font-size: 0 !important;
  justify-content: center !important;
  padding: 12px !important;
}

.sidebar.collapsed .sidebar-link svg {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-link .badge {
  display: none !important;
}

/* Hide brand text */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .brand-tagline,
.sidebar.collapsed p {
  display: none !important;
}

.sidebar.collapsed .sidebar-brand-btn {
  justify-content: center !important;
  padding: 12px 8px !important;
}

/* Main wrapper transition */
.main-wrapper {
  transition: margin-left 0.25s ease;
}


/* ══════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE — CLEAN IMPLEMENTATION
   ══════════════════════════════════════════════════════════ */

/* Smooth transition for sidebar width */
.sidebar {
  transition: width 0.25s ease;
  overflow: hidden;
}

/* Smooth transition for main content */
.main-wrapper {
  transition: margin-left 0.25s ease;
}

/* Toggle button at bottom of sidebar */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
  letter-spacing: 0;
}

.sidebar-toggle:hover {
  background: rgba(26, 86, 219, 0.15);
  color: #93c5fd;
}

/* ── Collapsed state ── */
.sidebar.collapsed {
  width: 60px !important;
}

/* Hide section titles */
.sidebar.collapsed .sidebar-section-title {
  display: none !important;
}

/* Hide nav label text */
.sidebar.collapsed .nav-label {
  display: none !important;
}

/* Hide badge counts */
.sidebar.collapsed .badge {
  display: none !important;
}

/* Center the icon */
.sidebar.collapsed .sidebar-link {
  justify-content: center !important;
  padding: 10px 0 !important;
}

.sidebar.collapsed .sidebar-link svg {
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
}

/* Hide brand text */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .brand-tagline {
  display: none !important;
}

.sidebar.collapsed .sidebar-brand-btn {
  justify-content: center !important;
  padding: 10px !important;
}

.sidebar.collapsed .sidebar-brand-btn .sidebar-logo {
  margin: 0 !important;
}

/* Collapsed toggle shows ▶ */
.sidebar.collapsed .sidebar-toggle {
  font-size: 14px;
}

/* ── Tag chips & filter buttons ── */
.tag-chip {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px 3px 2px 0;
}

.tag-filter-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #475569;
}

.tag-filter-btn.active {
  background: var(--color-primary-active);
  color: #fff;
  border-color: var(--color-primary-active);
}

.tag-filter-btn:hover {
  background: #e2e8f0;
}

.tag-filter-btn.active:hover {
  background: #1d4ed8;
}

.btn-sm {
  padding: 4px 12px;
  font-size: 12px;
}

/* ─── Training Badge Classes ─────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-blue {
  background: #dbeafe;
  color: var(--color-primary-active);
}

.badge-green {
  background: #dcfce7;
  color: #166534;
}

.badge-amber {
  background: #fef9c3;
  color: #854d0e;
}

.badge-red {
  background: #fee2e2;
  color: #991b1b;
}

.badge-purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.badge-gray {
  background: #f3f4f6;
  color: #374151;
}

/* ─── Responsive Design for Profile ───────────────────────── */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .profile-tabs {
    padding: 6px;
    gap: 4px;
  }

  .profile-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .profile-tab svg {
    width: 16px;
    height: 16px;
  }

  .profile-tab-content {
    padding: 16px;
  }

  .profile-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .profile-section-header h3 {
    font-size: 16px;
  }

  .profile-section-header .btn-sm {
    width: 100%;
    justify-content: center;
  }

  .profile-info-grid {
    grid-template-columns: 1fr;
  }

  .profile-stats {
    grid-template-columns: 1fr;
  }
}

/* ─── Profile Card Specific Styles ───────────────────────── */
.profile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.profile-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
}

.profile-card-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar-large {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
}

.profile-card-info {
  flex: 1;
}

.profile-card-name {
  margin: 0 0 4px 0;
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 600;
}

.profile-card-email {
  margin: 0 0 6px 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.profile-card-role {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.profile-card-avatar {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
}

.profile-card-btn {
  color: var(--color-text-muted);
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}

.profile-card:hover .profile-card-btn {
  color: var(--color-primary);
}

/* ─── Profile Page Specific Styles ───────────────────────── */
.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
}

.user-avatar-large {
  width: 96px;
  height: 96px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
}

.profile-header-info h1 {
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
  font-size: 32px;
  font-weight: 700;
}

.profile-header-info .email {
  color: var(--color-text-secondary);
  font-size: 16px;
  margin: 0 0 12px 0;
}

.profile-header-info .role {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 6px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.profile-section h3 {
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-field label {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.profile-field .value {
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 400;
  min-height: 20px;
  word-wrap: break-word;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.profile-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--color-background);
  border-radius: var(--radius-md);
}

.profile-stat-item .label {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.profile-stat-item .value {
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 600;
}

/* Profile Input Styling */
.profile-input[readonly],
.profile-input:disabled {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  color: var(--color-text-primary);
  cursor: default;
  font-weight: 500;
}

.profile-input[readonly]:focus,
.profile-input:disabled:focus {
  outline: none;
  border-color: #e2e8f0;
  box-shadow: none;
}

.profile-input:not([readonly]):not(:disabled) {
  background-color: white;
  border-color: #cbd5e1;
  transition: all 0.2s ease;
}

.profile-input:not([readonly]):not(:disabled):focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
  outline: none;
}

/* Success Button */
.btn-success {
  background-color: #10b981;
  border-color: #10b981;
  color: white;
}

.btn-success:hover {
  background-color: #059669;
  border-color: #059669;
}

.btn-success:active {
  background-color: #047857;
  border-color: #047857;
}

/* Profile Container */
.profile-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

/* Profile Tabs Navigation */
.profile-tabs {
  display: flex;
  gap: 4px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.profile-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.profile-tab:hover {
  color: var(--color-text-primary);
  background: transparent;
}

.profile-tab.active {
  background: transparent;
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.profile-tab.active span {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.profile-tab svg {
  flex-shrink: 0;
}

/* Profile Tab Content */
.profile-tab-content {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  min-height: 400px;
}

.profile-section-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}

.profile-section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.profile-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  gap: 6px;
}

.btn-outline {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
}

.btn-outline:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--color-text-primary);
}

.profile-tab-panel {
  display: none;
}

.profile-tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Profile Header Enhancement - Compact Version */
.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px 28px;
  border-radius: var(--radius-lg);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-header-info h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: white;
}

.profile-header-info .email {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
  color: white;
}

.user-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

/* Profile Section Enhancement */
.profile-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.profile-section:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.profile-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
}

/* Profile Field Enhancement */
.profile-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .profile-info-grid {
    grid-template-columns: 1fr;
  }

  .profile-header {
    padding: 24px;
    flex-direction: column;
    text-align: center;
  }

  .user-avatar-large {
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOG HOURS — Timesheet Grid UI
   ═══════════════════════════════════════════════════════════════ */

/* ── Page container ──────────────────────────────────────────── */
#page-log-hours {
  padding: 0;
  /* Previously had margin: -20px -24px which bled outside .page-content.
     Now we extend via padding on the parent (.page-view--flush) instead. */
  margin: 0;
  background: #f1f5f9;
}

.lh-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  position: relative;
}

.lh-week-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lh-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: background 0.15s, border-color 0.15s;
}

.lh-icon-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.lh-week-label-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  min-width: 140px;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.lh-week-label-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* ── Grid wrapper ────────────────────────────────────────────── */
.lh-grid-wrapper {
  overflow-x: auto;
  background: #fff;
  min-height: 120px;
}

.lh-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 900px;
}

.lh-grid thead th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.lh-grid thead th:first-child {
  text-align: left;
  padding-left: 16px;
}

.lh-grid thead th:last-child {
  border-right: none;
}

.lh-proj-col {
  width: 280px;
}

.lh-day-col {
  width: 100px;
}

.lh-total-col {
  width: 90px;
  text-align: right !important;
}

.lh-del-col {
  width: 36px;
  border-right: none !important;
}

.lh-today {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* Grid rows */
.lh-grid-row td {
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  padding: 0;
  height: 48px;
}

.lh-grid-row td:last-child {
  border-right: none;
}

.lh-grid-row:hover td {
  background: #f8fafc;
}

/* ── Project selector cell ───────────────────────────────────── */
.lh-proj-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 12px 0 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #1e293b;
  transition: background 0.12s;
}

.lh-proj-selector:hover {
  background: var(--color-primary-subtle);
}

.lh-proj-dot {
  font-size: 10px;
  flex-shrink: 0;
}

.lh-proj-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lh-client-name {
  font-weight: 400;
  color: #94a3b8;
}

.lh-proj-placeholder {
  color: var(--color-primary);
  font-weight: 500;
}

.lh-proj-add-icon {
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1;
}

/* ── Time cells — inline editable ────────────────────────────── */
.lh-time-cell {
  text-align: center;
  vertical-align: middle;
  padding: 4px 2px !important;
  position: relative;
}

.lh-time-cell:hover {
  background: #f8fafc !important;
}

/* Cell inner wrapper */
.lh-cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 2px;
}

/* Clickable cell display — replaces inline input + dots */
.lh-cell-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 30px;
  border-radius: 5px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  background: transparent;
  transition: background .12s, color .12s;
}

.lh-cell-placeholder {
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 400;
}

.lh-cell-clickable {
  cursor: pointer;
}

.lh-cell-clickable:hover .lh-cell-display {
  background: #eff6ff;
  color: var(--color-primary);
}

.lh-cell-clickable:hover .lh-cell-placeholder {
  color: #93c5fd;
}

/* My Timesheet grid container */
.mts-grid-container {
  overflow-x: auto;
}

.mts-grid-container .lh-grid-table {
  width: 100%;
}

/* My Timesheet stats pills */
.mts-stat-pill {
  flex: 1;
  padding: 16px 24px;
  background: #f8fafc;
  border-right: 1px solid #d1d5db;
  text-align: center;
}

.mts-stat-pill:last-child {
  border-right: none;
}

.mts-stat-label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.mts-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}

/* ── MTS Filter Bar ──────────────────────────────────────────── */
.mts-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}

.mts-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.mts-filter-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.mts-daterange-btn {
  gap: 8px;
}

.mts-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}

/* ── Date Picker Popup ───────────────────────────────────────── */
.mts-datepicker-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.mts-presets-col {
  border-right: 1px solid #f1f5f9;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 148px;
}

.mts-preset-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: #475569;
  border-radius: 6px;
  transition: background .1s;
}

.mts-preset-btn:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.mts-preset-btn.mts-preset-active {
  background: var(--color-primary-light);
  color: var(--color-primary-active);
  font-weight: 600;
}

/* ── Calendar ────────────────────────────────────────────────── */
.mts-cal {
  min-width: 240px;
}

.mts-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mts-cal-nav {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 16px;
  transition: background .1s;
}

.mts-cal-nav:hover {
  background: #f1f5f9;
}

.mts-cal-nav:disabled {
  opacity: .3;
  cursor: default;
}

.mts-cal-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.mts-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}

.mts-cal-dow {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.mts-cal-day {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
  position: relative;
}

.mts-cal-day:hover:not(.mts-cal-empty):not(.mts-cal-selected):not(.mts-cal-start):not(.mts-cal-end) {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.mts-cal-empty {
  cursor: default;
  color: #cbd5e1;
}

.mts-cal-today {
  font-weight: 700;
  color: var(--color-primary);
}

.mts-cal-in-range {
  background: var(--color-primary-light) !important;
  border-radius: 0 !important;
  color: var(--color-primary-active);
}

.mts-cal-start,
.mts-cal-end {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700;
}

.mts-cal-start.mts-cal-in-range {
  border-radius: 6px 0 0 6px !important;
}

.mts-cal-end.mts-cal-in-range {
  border-radius: 0 6px 6px 0 !important;
}

/* ── Filter Dropdowns ────────────────────────────────────────── */
.mts-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
}

.mts-drop-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  background: #fff;
}

.mts-drop-search {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.mts-drop-search:focus {
  border-color: var(--color-primary);
}

.mts-drop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #334155;
}

.mts-drop-item:hover {
  background: #f8fafc;
}

.mts-drop-item input[type=checkbox] {
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.mts-drop-empty {
  padding: 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* ── MTS Export Dropdown ─────────────────────────────────────── */
.mts-export-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.mts-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1000;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  min-width: 160px;
  padding: 4px 0;
}

.mts-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: #334155;
  text-align: left;
  transition: background .1s;
}

.mts-export-item:hover {
  background: #f8fafc;
  color: var(--color-primary);
}

.mts-export-item svg {
  flex-shrink: 0;
  color: #94a3b8;
}

.mts-export-item:hover svg {
  color: var(--color-primary);
}

/* ── Generic checkbox multi-select (CRM filter popups) ── */
.wm-msel {
  position: relative;
}

.wm-msel-trigger {
  width: 100%;
  padding: 6px 28px 6px 8px;
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.wm-msel-trigger:hover,
.wm-msel-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.wm-msel-trigger.has-selection {
  color: var(--color-text-primary);
}

.wm-msel-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  /* Above the CRM filter popup panel (z-index 1200) */
  z-index: 1300;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.wm-msel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--color-text-primary);
  user-select: none;
}

.wm-msel-item:hover {
  background: #f1f5f9;
}

.wm-msel-item input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.wm-msel-empty {
  padding: 10px 12px;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ── Project modal team members multi-select dropdown ── */
.proj-members-trigger {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.proj-members-trigger:hover,
.proj-members-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.proj-members-trigger span {
  color: var(--color-text-muted);
}

.proj-members-trigger span.has-selection {
  color: var(--color-text-primary);
}

.proj-members-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  z-index: 300;
}

.proj-members-search-wrap {
  padding: 8px 8px 4px;
}

.proj-members-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.proj-members-search:focus {
  border-color: var(--color-primary);
}

.proj-members-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0 8px;
}

.proj-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  color: #1e293b;
  user-select: none;
}

.proj-member-item:hover {
  background: #f1f5f9;
}

.proj-member-item input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

.proj-member-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: #94a3b8;
}

/* Row total cell */
.lh-grid-row .lh-total-col {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-align: right;
  padding-right: 14px;
}

/* Delete button cell */
.lh-row-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #cbd5e1;
  transition: color 0.15s;
}

.lh-row-remove:hover {
  color: #ef4444;
}

/* ── Footer total row ────────────────────────────────────────── */
#lh-grid-foot td {
  background: #f8fafc;
  border-top: 2px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

#lh-grid-foot td:first-child {
  text-align: left;
  padding-left: 16px;
}

#lh-grid-foot td:last-child {
  border-right: none;
}

.lh-foot-total {
  color: #1e293b;
  font-size: 13px;
  font-weight: 700;
}

.lh-foot-zero {
  color: #cbd5e1;
  font-weight: 400;
}

/* ── Actions bar ─────────────────────────────────────────────── */
.lh-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.lh-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.lh-action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

/* ── Week picker popup ───────────────────────────────────────── */
.lh-week-picker-popup {
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  overflow: hidden;
}

.lh-weekpicker-shortcuts {
  width: 120px;
  border-right: 1px solid #f1f5f9;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lh-shortcut-btn {
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s;
}

.lh-shortcut-btn:hover {
  background: #f1f5f9;
}

.lh-shortcut-btn.active {
  color: var(--color-primary);
  font-weight: 600;
}

.lh-weekpicker-calendars {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.lh-cal-month {
  width: 210px;
}

.lh-cal-header {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  margin-bottom: 10px;
}

.lh-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.lh-cal-dayname {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  padding: 2px 0 6px;
}

.lh-cal-day {
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
  border-radius: 3px;
  cursor: pointer;
  color: #334155;
  transition: background 0.1s;
  user-select: none;
}

.lh-cal-day:hover {
  background: #dbeafe;
}

.lh-cal-day.in-week {
  background: #dbeafe;
  color: #1d4ed8;
}

.lh-cal-day.week-start {
  border-radius: 6px 0 0 6px;
  background: var(--color-primary);
  color: #fff;
}

.lh-cal-day.week-end {
  border-radius: 0 6px 6px 0;
  background: var(--color-primary);
  color: #fff;
}

.lh-cal-day.is-today {
  font-weight: 700;
  text-decoration: underline;
}

.lh-cal-other {
  color: #cbd5e1;
  cursor: default;
}

.lh-cal-other:hover {
  background: none;
}

/* ── Project picker popup ────────────────────────────────────── */
.lh-proj-picker-popup {
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lh-proj-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.lh-search-icon {
  color: #94a3b8;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.lh-proj-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  color: #1e293b;
  background: transparent;
}

.lh-proj-search::placeholder {
  color: #94a3b8;
}

.lh-proj-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.lh-proj-client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lh-proj-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
  color: #1e293b;
}

.lh-proj-item:hover {
  background: var(--color-primary-subtle);
}

.lh-proj-item-name {
  font-weight: 500;
}

.lh-proj-no-results {
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* ── Edit time modal ─────────────────────────────────────────── */
.lh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lh-modal {
  background: #fff;
  border-radius: 10px;
  padding: 28px 28px 20px;
  width: 460px;
  max-width: 95vw;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.lh-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}

.lh-modal-close:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.lh-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.lh-modal-meta {
  margin-bottom: 2px;
}

.lh-modal-date {
  font-size: 13px;
  color: #64748b;
}

.lh-modal-project-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.lh-modal-proj-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.lh-modal-client-name {
  font-size: 13px;
  color: #64748b;
}

.lh-modal-sep {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 14px 0;
}

.lh-modal-time-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.lh-modal-duration-input {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  border: none;
  border-bottom: 2px solid #e2e8f0;
  padding: 4px 0;
  width: 110px;
  background: transparent;
  outline: none;
  font-family: 'Courier New', monospace;
  transition: border-color 0.15s;
}

.lh-modal-duration-input:focus {
  border-bottom-color: var(--color-primary);
}

.lh-modal-time-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lh-time-input {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  color: #1e293b;
  width: 90px;
  outline: none;
  transition: border-color 0.15s;
}

.lh-time-input:focus {
  border-color: var(--color-primary);
}

.lh-time-sep {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 300;
}

.lh-modal-field {
  margin-bottom: 16px;
}

.lh-modal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.lh-modal-textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: #1e293b;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}

.lh-modal-textarea:focus {
  border-color: var(--color-primary);
}

.lh-modal-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.lh-modal-input:focus {
  border-color: var(--color-primary);
}

.lh-modal-billable-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lh-modal-billable-row .lh-modal-label {
  margin-bottom: 0;
  flex: 1;
}

/* Toggle switch */
.lh-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}

.lh-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.lh-toggle-slider {
  position: absolute;
  inset: 0;
  background: #e2e8f0;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}

.lh-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lh-toggle input:checked+.lh-toggle-slider {
  background: #22c55e;
}

.lh-toggle input:checked+.lh-toggle-slider::before {
  transform: translateX(20px);
}

.lh-billable-label {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

/* Modal footer */
.lh-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

.lh-modal-more-wrap {
  position: relative;
  margin-right: auto;
}

.lh-more-btn {
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: background 0.12s;
}

.lh-more-btn:hover {
  background: #f1f5f9;
}

.lh-more-menu {
  position: absolute;
  bottom: 36px;
  left: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  overflow: hidden;
  z-index: 10;
}

.lh-more-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
  color: #475569;
}

.lh-more-menu-item:hover {
  background: #f8fafc;
}

.lh-more-menu-item.danger {
  color: #ef4444;
}

.lh-more-menu-item.danger:hover {
  background: #fef2f2;
}

.lh-modal-btn-cancel {
  padding: 8px 20px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.12s;
}

.lh-modal-btn-cancel:hover {
  background: #eff6ff;
}

.lh-modal-btn-save {
  padding: 8px 24px;
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}

.lh-modal-btn-save:hover {
  background: #1d4ed8;
}

.lh-modal-btn-save:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

/* ── Loading state for grid ──────────────────────────────────── */
.lh-grid-loading {
  text-align: center;
  padding: 48px;
  color: #94a3b8;
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════
   TIME TRACKER PAGE
   ════════════════════════════════════════════════════════════════ */

/* ── Timer bar ─────────────────────────────────────────────────── */
.tt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 20px;
  height: 64px;
  position: sticky;
  top: var(--topbar-height);
  z-index: 30;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.tt-desc-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: #1e293b;
  background: transparent;
  min-width: 0;
}

.tt-desc-input::placeholder {
  color: #94a3b8;
}

.tt-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Project button */
.tt-proj-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s;
}

.tt-proj-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tt-proj-btn.has-value {
  border-color: transparent;
  color: #1e293b;
  font-weight: 500;
}

/* Icon buttons */
.tt-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  transition: all .15s;
}

.tt-icon-btn:hover {
  border-color: #64748b;
  color: #334155;
}

.tt-icon-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #eff6ff;
}

.tt-billable-btn.active {
  border-color: #22c55e;
  color: #16a34a;
  background: #f0fdf4;
}

/* Manual mode fields */
.tt-manual-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tt-time-inp {
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: #1e293b;
  background: #fff;
  outline: none;
  width: 88px;
}

.tt-time-inp:focus {
  border-color: var(--color-primary);
}

.tt-sep {
  color: #94a3b8;
  font-size: 13px;
}

.tt-date-btn {
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  color: #475569;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.tt-date-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tt-manual-dur {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  min-width: 72px;
  text-align: center;
}

/* Timer display */
.tt-timer-display {
  font-size: 20px;
  font-weight: 700;
  color: #334155;
  min-width: 100px;
  text-align: center;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

.tt-timer-display.running {
  color: #ef4444;
}

/* START / STOP button */
.tt-start-btn {
  padding: 8px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .5px;
  transition: background .15s;
  white-space: nowrap;
}

.tt-start-btn:hover {
  background: var(--color-primary);
}

.tt-start-btn.stop {
  background: #ef4444;
}

.tt-start-btn.stop:hover {
  background: #dc2626;
}

/* Mode toggle */
.tt-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  transition: all .15s;
}

.tt-mode-btn:hover {
  border-color: #64748b;
  color: #334155;
}

.tt-mode-btn.manual-active {
  border-color: #8b5cf6;
  color: #7c3aed;
  background: #f5f3ff;
}

/* ── Three-dots menu ────────────────────────────────────────────── */
.tt-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  transition: all .15s;
}

.tt-more-btn:hover {
  border-color: #64748b;
  color: #334155;
}

.tt-more-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 130px;
  z-index: 50;
  overflow: hidden;
}

.tt-more-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s;
}

.tt-more-discard {
  color: #ef4444;
  font-weight: 500;
}

.tt-more-discard:hover {
  background: #fef2f2;
}

/* ── Popups ─────────────────────────────────────────────────────── */
.tt-popup {
  position: fixed;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 1000;
  min-width: 260px;
  max-width: 340px;
}

.tt-popup-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  outline: none;
  font-size: 13px;
  border-radius: 10px 10px 0 0;
}

.tt-popup-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
}

.tt-popup-client-header {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.tt-popup-proj-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #334155;
}

.tt-popup-proj-item:hover {
  background: #f8fafc;
}

.tt-popup-proj-dot {
  font-size: 12px;
}

.tt-popup-no-results {
  padding: 12px 14px;
  color: #94a3b8;
  font-size: 13px;
}

/* Tags popup */
.tt-tags-popup {
  padding: 10px;
  min-width: 240px;
}

.tt-tags-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.tt-tags-done-btn {
  padding: 5px 14px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
}

/* Date popup */
.tt-date-popup {
  padding: 10px;
  min-width: 220px;
}

.tt-date-shortcuts {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tt-date-shortcut {
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
  color: #475569;
  background: #f8fafc;
  cursor: pointer;
}

.tt-date-shortcut:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tt-date-picker-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 13px;
  outline: none;
}

/* ── Entry list ─────────────────────────────────────────────────── */
.tt-entries {
  padding: 20px 24px;
}

.tt-loading {
  text-align: center;
  padding: 48px;
  color: #94a3b8;
  font-size: 14px;
}

.tt-no-entries {
  text-align: center;
  padding: 64px 20px;
  color: #94a3b8;
}

.tt-no-entries h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #64748b;
}

.tt-no-entries p {
  font-size: 13px;
}

/* Week label */
.tt-week-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 4px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.tt-week-total {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

/* Day group */
.tt-day-group {
  margin-bottom: 8px;
}

.tt-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #f8fafc;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e2e8f0;
  border-bottom: none;
}

.tt-day-name {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.tt-day-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tt-day-total {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.tt-day-copy-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.tt-day-copy-btn:hover {
  color: var(--color-primary);
  background: #eff6ff;
}

/* Entry row */
.tt-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: none;
  cursor: pointer;
  transition: background .1s;
  min-height: 54px;
}

.tt-entry:last-child {
  border-radius: 0 0 8px 8px;
}

.tt-entry:hover {
  background: #f8fafc;
}

.tt-entry-desc {
  flex: 1;
  font-size: 13px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 80px;
}

.tt-entry-desc.empty {
  color: #94a3b8;
  font-style: italic;
}

.tt-entry-proj {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

.tt-entry-proj-dot {
  font-size: 10px;
  flex-shrink: 0;
}

.tt-entry-proj-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-entry-client {
  color: #94a3b8;
  font-weight: 400;
}

/* Meta group: tags icon + $ + time range + calendar icon */
.tt-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tt-entry-meta-btn {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  padding: 3px;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s;
}

.tt-entry-meta-btn:hover {
  color: #64748b;
}

.tt-entry-meta-btn.has-tags {
  color: var(--color-primary);
}

.tt-entry-billable {
  color: #22c55e;
  font-size: 12px;
  font-weight: 700;
  min-width: 14px;
  cursor: default;
}

.tt-entry-billable.unbillable {
  color: #cbd5e1;
}

.tt-entry-times {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 110px;
  text-align: center;
}

.tt-entry-cal-icon {
  display: flex;
  align-items: center;
  color: #94a3b8;
}

.tt-entry-dur {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  min-width: 76px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tt-entry-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tt-entry-resume-btn,
.tt-entry-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  transition: all .15s;
}

.tt-entry-resume-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #eff6ff;
}

.tt-entry-more-btn:hover {
  border-color: #64748b;
  color: #334155;
  background: #f8fafc;
}

/* hide actions until hover */
.tt-entry-actions {
  opacity: 0;
  transition: opacity .15s;
}

.tt-entry:hover .tt-entry-actions {
  opacity: 1;
}

/* ── Edit modal ─────────────────────────────────────────────────── */
.tt-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-edit-modal {
  background: #fff;
  border-radius: 12px;
  width: 480px;
  max-width: 96vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.tt-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
}

.tt-edit-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.tt-edit-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-edit-close:hover {
  background: #e2e8f0;
}

.tt-edit-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tt-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt-edit-row label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.tt-modal-inp {
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  background: #fff;
}

.tt-modal-inp:focus {
  border-color: var(--color-primary);
}

.tt-modal-proj-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  text-align: left;
}

.tt-modal-proj-btn:hover {
  border-color: var(--color-primary);
}

.tt-edit-time-row {
  flex-direction: row !important;
  align-items: flex-end;
  gap: 8px !important;
}

.tt-edit-time-row>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt-modal-time-inp,
.tt-modal-dur-inp {
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  padding: 8px 6px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.tt-modal-time-inp:focus,
.tt-modal-dur-inp:focus {
  border-color: var(--color-primary);
}

.tt-edit-check-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}

.tt-edit-check-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  text-transform: none;
  letter-spacing: 0;
}

.tt-edit-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
  gap: 8px;
}

.tt-modal-delete-btn {
  padding: 8px 14px;
  background: none;
  border: 1.5px solid #fca5a5;
  border-radius: 7px;
  color: #ef4444;
  font-size: 13px;
  cursor: pointer;
}

.tt-modal-delete-btn:hover {
  background: #fef2f2;
}

.tt-modal-cancel-btn {
  padding: 8px 14px;
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  margin-right: 6px;
}

.tt-modal-cancel-btn:hover {
  background: #f8fafc;
}

.tt-modal-save-btn {
  padding: 8px 20px;
  background: var(--color-primary);
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tt-modal-save-btn:hover {
  background: var(--color-primary);
}

.tt-modal-save-btn:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

/* ─── CRM Leads view toggle ────────────────────────────────── */
.crm-view-toggle {
  display: flex;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  overflow: hidden;
  align-self: center;
  height: 35px;
}

.crm-view-toggle-btn {
  padding: 6px 10px;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #94a3b8;
  transition: background 0.15s, color 0.15s;
}

.crm-view-toggle-btn+.crm-view-toggle-btn {
  border-left: 1px solid #e2e8f0;
}

.crm-view-toggle-btn:hover {
  background: #f1f5f9;
  color: #475569;
}

.crm-view-toggle-btn.active {
  background: #eff6ff;
  color: var(--color-primary-active);
}

/* ─── CRM Leads Kanban Board ────────────────────────────────── */
.crm-kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 20px;
  align-items: flex-start;
}

/* Column — sized so exactly 5 columns (New..Proposal Sent-ish) are fully
   visible at once regardless of viewport width, with the rest reachable via
   horizontal scroll on .crm-kanban-board (all columns share this width). */
.crm-kanban-col {
  flex: 0 0 calc((100% - 4 * 14px) / 5);
  min-width: 220px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 74vh;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, outline 0.15s;
  outline: 2px solid transparent;
}

.crm-kanban-col.drag-over {
  outline: 2px solid var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.12), 0 8px 28px rgba(26, 86, 219, 0.18);
}

/* Column header — gradient applied inline */
.crm-kanban-col-header {
  padding: 11px 14px;
  border-radius: 14px 14px 0 0;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.crm-kanban-col-count {
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

/* Cards scroll area */
.crm-kanban-cards {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 0 0 14px 14px;
}

/* Individual card */
.crm-kanban-card {
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  padding: 12px 13px 10px;
  cursor: grab;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.04);
  position: relative;
  user-select: none;
}

.crm-kanban-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 6px 0 -2px rgba(0, 0, 0, 0.06) inset;
  pointer-events: none;
}

.crm-kanban-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.06);
  border-color: #c7d4e3;
  cursor: grab;
}

.crm-kanban-card:active {
  cursor: grabbing;
}

.crm-kanban-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg) scale(0.96);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  cursor: grabbing;
}

.crm-kanban-card-name {
  font-weight: 700;
  font-size: 11px;
  color: #0f172a;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.crm-kanban-card-meta {
  font-size: 10.5px;
  color: #64748b;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.crm-kanban-card-actions {
  display: flex;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

/* Icon buttons (View/Edit/Assign) shrunk to a compact variant just for
   kanban cards — .btn-icon-sm elsewhere (tables etc.) is untouched. */
.crm-kanban-card-actions .btn-icon-sm {
  min-width: 22px;
  height: 22px;
  padding: 3px;
}

.crm-kanban-card-actions .btn-icon-sm svg {
  width: 11px !important;
  height: 11px !important;
}

.crm-kanban-empty {
  text-align: center;
  color: #c8d3de;
  font-size: 12px;
  padding: 28px 8px;
  font-style: italic;
  border: 2px dashed #dde3eb;
  border-radius: 8px;
  margin: 4px 0;
}

/* DS v1 (Phase 3): the decorative "neumorphic/glass" override band that
   lived here (ambient body gradient, dot-grid overlay, frosted topbar,
   sidebar glow, 3D press buttons, floating stat cards, gradient row
   hover, glass toolbar, inset inputs, dramatic modals, gradient page
   titles, 3D kanban toggle) was removed so the base design-system
   styles apply. */

/* ─── Page transition: intentionally NOT animated.
   Any animation/transition on opacity, transform, filter etc. here
   promotes .page-view.active to its own stacking context, which traps
   every position:fixed modal/dropdown inside the page below the
   sidebar and topbar (their z-index no longer beats it). ─── */

/* ─── CRM Detail Drawer (Bitrix24-style right-side slide-in panel) ───
   Replaces the old centered modal for Lead/Contact/Company view+edit.
   Overlay fades in, panel slides in from the right; two-column body:
   details+edit on the left, activity timeline+note on the right. */
.crm-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.crm-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.crm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(1300px, 96vw);
  background: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.crm-drawer-overlay.open .crm-drawer {
  transform: translateX(0);
}

.crm-drawer-header {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.crm-drawer-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.crm-drawer-left {
  flex: 1;
  min-width: 0;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
  padding: 16px;
  background: #fafbfc;
}

.crm-drawer-right {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.crm-drawer-timeline-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 20px;
}

/* "Activity Log" stays put at the top of the scroll region while entries
   scroll underneath it, rather than scrolling away with the list. */
.crm-timeline-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -24px 12px;
  padding: 20px 24px 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  box-shadow: 0 1px 0 #e2e8f0;
}

.crm-drawer-note-box {
  flex-shrink: 0;
  padding: 14px 24px;
  background: #fff;
}

/* Add-note box now sits above the log (was below) — border moves from top
   to bottom to keep the same visual divider between the two sections. */
.crm-drawer-note-box-top {
  border-bottom: 1px solid #e2e8f0;
}

.crm-history-load-more {
  display: block;
  margin: 12px auto 4px;
}

.crm-drawer-edit-btn {
  width: 100%;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.crm-drawer-edit-btn svg {
  width: 15px;
  height: 15px;
}

/* Desktop: the close button sits in the header, to the LEFT of the name,
   icon-only. The header shows only the primary name — no summary sublines
   (that info is a plain field in the body now).
   Mobile keeps the original header close button (to the right of the name)
   + summary sublines, and hides the left-panel Edit-toggle row (mobile
   edits via the card's Edit button, not an in-drawer toggle). */
.crm-drawer-header-close-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-drawer-header-close {
  display: none;
}

.crm-drawer-header-subline {
  display: none;
}

/* Vertical timeline (Bitrix24-style dots on a connecting line) */
.crm-timeline-item {
  position: relative;
  padding-left: 22px;
  padding-bottom: 18px;
  margin-left: 5px;
  border-left: 2px solid #e2e8f0;
}

.crm-timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.crm-timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #eef2f6;
}

/* ─── Lead summary strip: Product / Payment / Assignee ────────────── */
.crm-summary-strip {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 1px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.crm-summary-strip-2col {
  grid-template-columns: 1fr 1fr;
}

.crm-summary-cell {
  background: #fff;
  padding: 12px 16px;
}

.crm-summary-cell-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.crm-summary-cell-value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

/* ─── Details / Address tab switcher ───────────────────────────────── */
.crm-detail-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.crm-detail-tab {
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.crm-detail-tab.active {
  background: #eef2ff;
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Mobile: the old centered modal, unchanged from before this redesign —
   single naturally-scrolling column (fields, then Activity Log, then Add a
   Note, in document order), not the two-pane sliding desktop drawer. */
@media (max-width: 640px) {
  .crm-drawer-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .crm-drawer {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: none;
    transition: none;
  }

  .crm-drawer-body {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }

  .crm-drawer-left {
    width: 100%;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: none;
  }

  .crm-drawer-right {
    width: 100%;
    display: block;
    overflow: visible;
  }

  .crm-drawer-timeline-wrap {
    flex: none;
    overflow: visible;
    padding: 0 20px 0;
  }

  .crm-timeline-sticky-header {
    position: static;
    margin: 0 -20px 12px;
    padding: 16px 20px 12px;
    box-shadow: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .crm-drawer-note-box {
    padding: 14px 20px 20px;
  }

  .crm-drawer-header-close {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .crm-drawer-header-close-desktop {
    display: none;
  }

  .crm-drawer-header-subline {
    display: block;
  }

  .crm-summary-strip {
    grid-template-columns: 1fr;
  }

  .crm-detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── CRM Mobile Card View ─────────────────────────────────────────── */
.crm-mobile-cards {
  display: none;
}

.crm-table-desktop {
  display: block;
}

.crm-mc {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
}

.crm-mc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.crm-mc-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.crm-mc-person {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}

.crm-mc-phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #1a56db;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 8px;
}

.crm-mc-phone:hover {
  text-decoration: underline;
}

.crm-mc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
  margin-bottom: 3px;
}

.crm-mc-row-label {
  font-weight: 600;
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  min-width: 76px;
}

.crm-mc-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.crm-mc-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.crm-mc-badge-new {
  background: #f1f5f9;
  color: #475569;
}

.crm-mc-badge-contacted {
  background: #eff6ff;
  color: #1d4ed8;
}

.crm-mc-badge-not_answered {
  background: #fefce8;
  color: #a16207;
}

.crm-mc-badge-interested {
  background: #eef2ff;
  color: #4338ca;
}

.crm-mc-badge-proposal_sent {
  background: #fffbeb;
  color: #b45309;
}

.crm-mc-badge-converted {
  background: #f0fdf4;
  color: #15803d;
}

.crm-mc-badge-lost {
  background: #fff1f2;
  color: #be123c;
}

.crm-mc-badge-not_interested {
  background: #fff7ed;
  color: #c2410c;
}

.crm-mc-badge-on_hold {
  background: #f8fafc;
  color: #64748b;
}

.crm-mc-badge-trial_activated {
  background: #ecfdf5;
  color: #047857;
}

.crm-mc-badge-trials_signed_up {
  background: #d1fae5;
  color: #047857;
}

.crm-mc-badge-aborted_trials {
  background: #fef2f2;
  color: #b91c1c;
}

/* ─── CRM Mobile Breakpoint ────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Show cards, hide table */
  .crm-mobile-cards {
    display: block;
  }

  .crm-table-desktop {
    display: none !important;
  }

  /* Filter row: smooth touch scroll */
  .crm-table-filters {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-bottom: 6px;
  }

  .crm-table-filters::-webkit-scrollbar {
    height: 3px;
  }

  .crm-table-filters::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
  }

  /* CRM page headers: buttons wrap in a row, not a column stack */
  #page-crm-leads .page-header,
  #page-crm-contacts .page-header,
  #page-crm-companies .page-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  #page-crm-leads .page-header-actions,
  #page-crm-contacts .page-header-actions,
  #page-crm-companies .page-header-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  #page-crm-leads .page-header-actions .btn,
  #page-crm-contacts .page-header-actions .btn,
  #page-crm-companies .page-header-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    padding: 8px 10px;
    white-space: nowrap;
    justify-content: center;
  }

  /* Hide less-used buttons on mobile; sales people mainly need New Lead */
  #btn-reload-crm-leads,
  #btn-crm-leads-template,
  #btn-reload-crm-contacts,
  #btn-crm-products-link,
  #btn-reload-crm-companies {
    display: none !important;
  }

  /* Search bar full width */
  #page-crm-leads .crm-page-search,
  #page-crm-contacts .crm-page-search,
  #page-crm-companies .crm-page-search {
    width: 100%;
  }

  #page-crm-leads .crm-page-search input,
  #page-crm-contacts .crm-page-search input,
  #page-crm-companies .crm-page-search input {
    width: 100%;
  }

  /* Modal: slide up from bottom on mobile */
  .modal-overlay .modal {
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
  }

  /* Kanban: comfortable horizontal swipe */
  .crm-kanban-board {
    gap: 10px;
  }

  .crm-kanban-col {
    flex-basis: 82vw !important;
  }

  /* Data-table wrapper: remove side padding to allow card bleed */
  .data-table-wrapper {
    padding: 0;
  }

  /* Inline two-column form grids inside modals collapse to a single column */
  .modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── CRM V1: Weekly Reports — page & modal visibility overrides ─────── */
#page-crm-reports {
  display: none !important;
}

#page-crm-reports.active {
  display: block !important;
}

/* Use display:none so backdrop-filter does not create a compositing layer when closed */
#crm-report-modal {
  display: none !important;
}

#crm-report-modal.open {
  display: flex !important;
}

.phase2-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.crm-report-modal-card {
  max-width: 580px;
}

.crm-rpt-init-hidden {
  display: none;
}

.rpt-green {
  color: #16a34a;
  font-weight: 600;
}

.rpt-red {
  color: #dc2626;
  font-weight: 600;
}

.crm-reports-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.crm-reports-summary-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
}

.crm-reports-summary-card .rpt-label {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.crm-reports-summary-card .rpt-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* ─── Collapsed sidebar: clean icon-only mode ──────────────────────────────
   Override the theme's translateX animations + side margins so icons sit
   perfectly centred inside the 60px collapsed rail.
   ─────────────────────────────────────────────────────────────────────────── */
.sidebar.collapsed .sidebar-link {
  margin: 2px 4px !important;
  /* smaller side margins → icon truly centred */
  padding: 10px 0 !important;
  justify-content: center !important;
  transform: none !important;
  /* kill the translateX(3-4px) slide effect  */
  border-radius: 10px !important;
}

.sidebar.collapsed .sidebar-link:hover {
  transform: none !important;
  /* no slide when icon-only — looks wrong      */
  background: rgba(26, 86, 219, 0.14) !important;
}

.sidebar.collapsed .sidebar-link.active {
  transform: none !important;
}

.sidebar.collapsed .sidebar-link svg {
  margin: 0 !important;
  flex-shrink: 0;
}

/* Brand logo: centred in collapsed header */
.sidebar.collapsed .sidebar-header {
  justify-content: center !important;
  padding: 18px 8px !important;
}

/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE & TABLET RESPONSIVE OVERRIDES
   Breakpoints:  1024px tablet landscape  |  768px tablet portrait
                 640px  large phone       |  480px  phone
   ══════════════════════════════════════════════════════════════════ */

/* ── form-row: 2-col layout for side-by-side fields in modals ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

.form-row .form-group {
  margin-bottom: 0;
}

/* ── Prevent iOS zoom on inputs (font-size < 16px triggers zoom) ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
  font-size: max(16px, 1em);
}

/* ── Notification + user dropdowns: never overflow viewport ── */
#notif-dropdown {
  max-width: calc(100vw - 16px) !important;
  right: 0 !important;
  left: auto !important;
}

.user-dropdown {
  right: 8px !important;
  max-width: calc(100vw - 16px);
}

/* ── Sidebar overlay tap feedback ── */
.mobile-overlay {
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 1024px  TABLET LANDSCAPE + SIDEBAR OVERLAY MODE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Sidebar is an overlay drawer — hide the desktop collapse toggle */
  .sidebar-toggle {
    display: none !important;
  }

  /* Sidebar: always full-width overlay, never collapsed icon rail */
  .sidebar,
  .sidebar.collapsed {
    width: var(--sidebar-width) !important;
    z-index: 50;
  }

  .sidebar:not(.open) {
    transform: translateX(-100%) !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.45);
  }

  /* Undo ALL icon-only collapsed styles on mobile */
  .sidebar.collapsed .sidebar-link {
    font-size: inherit !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    margin: 1px 10px !important;
    transform: none !important;
  }

  .sidebar.collapsed .nav-label {
    display: inline !important;
  }

  .sidebar.collapsed .badge {
    display: inline-flex !important;
  }

  .sidebar.collapsed .brand-name,
  .sidebar.collapsed .brand-tagline {
    display: block !important;
  }

  .sidebar.collapsed .sidebar-brand-btn {
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .sidebar.collapsed .sidebar-section-toggle {
    display: flex !important;
  }

  .sidebar.collapsed .sidebar-header {
    justify-content: flex-start !important;
    padding: 20px 24px !important;
  }

  .sidebar.collapsed .sidebar-section.is-collapsed .sidebar-section-items {
    display: none !important;
  }

  .sidebar.collapsed .sidebar-section:not(.is-collapsed) .sidebar-section-items {
    display: grid !important;
  }

  /* Content area: no left margin (sidebar is overlay) */
  .main-wrapper {
    margin-left: 0 !important;
  }

  .topbar {
    left: 0 !important;
  }

  /* Page content */
  .page-content {
    padding: 16px;
  }

  .topbar {
    padding: 0 16px;
  }

  /* Stats: 2-col on tablet */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Page header: stack title + actions */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .page-header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Modal: comfortable on tablet */
  .modal-overlay {
    padding: 16px;
  }

  .modal {
    max-width: min(520px, calc(100vw - 32px));
  }
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 640px  MOBILE PHONE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Layout ── */
  .page-content {
    padding: 12px 10px 100px;
  }

  .topbar {
    padding: 0 10px;
  }

  .topbar-title {
    font-size: 0.9375rem;
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-right {
    gap: 4px;
  }

  .topbar-icon-btn {
    width: 32px;
    height: 32px;
  }

  .user-menu {
    padding: 4px 8px 4px 4px;
    gap: 6px;
  }

  /* ── Stats: single column ── */
  .stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .stat-card {
    padding: 14px 16px;
  }

  /* ── Page headers: all buttons in a row (not stacked) ── */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  .page-header-left h2,
  .page-title {
    font-size: 1.1rem;
  }

  .page-header-actions {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  /* All header buttons: equal-width side-by-side, NOT full-width stacked */
  .page-header-actions .btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    font-size: 13px;
    padding: 8px 10px;
    justify-content: center;
    white-space: nowrap;
  }

  /* Hide reload + template download buttons (not needed on mobile) */
  #btn-reload-crm-leads,
  #btn-reload-crm-contacts,
  #btn-reload-crm-reports,
  #btn-crm-leads-template {
    display: none !important;
  }

  /* ── CRM Leads: row 1 = Filters/Import/New/View-toggle, row 2 = search ── */
  #page-crm-leads .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  #page-crm-leads .page-header-actions {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #page-crm-leads .page-header-actions .btn {
    padding: 7px;
    min-width: 0;
  }

  #page-crm-leads .page-header-actions .btn svg {
    width: 14px;
    height: 14px;
  }

  #page-crm-leads .page-header-actions .btn-label {
    display: none;
  }

  #page-crm-leads .crm-leads-search-row {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #page-crm-leads .crm-leads-search-row .crm-page-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  #page-crm-leads .crm-page-search input {
    font-size: 13px;
    padding: 7px 10px 7px 30px;
  }

  #page-crm-leads .crm-view-toggle {
    display: none;
  }

  .crm-view-toggle-mobile-btn {
    display: none;
  }

  #page-crm-leads .crm-view-toggle-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #0f172a);
    padding: 0;
  }

  .crm-view-toggle-mobile-btn svg {
    width: 15px;
    height: 15px;
  }

  .crm-view-toggle-mobile-btn .cvtm-icon-kanban {
    display: none;
  }

  .crm-view-toggle-mobile-btn[data-current="kanban"] .cvtm-icon-table {
    display: none;
  }

  .crm-view-toggle-mobile-btn[data-current="kanban"] .cvtm-icon-kanban {
    display: block;
  }

  /* ── CRM Contacts: single row = Add icon, Filter icon, then search bar ── */
  #page-crm-contacts .page-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  #page-crm-contacts #btn-crm-products-link {
    display: none !important;
  }

  #page-crm-contacts .page-header-actions {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #page-crm-contacts .page-header-actions .btn {
    padding: 7px;
    min-width: 0;
  }

  #page-crm-contacts .page-header-actions .btn svg {
    width: 14px;
    height: 14px;
  }

  #page-crm-contacts .page-header-actions .btn-label {
    display: none;
  }

  #page-crm-contacts .crm-leads-search-row {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #page-crm-contacts .crm-leads-search-row .crm-filter-toggle-btn {
    order: -1;
    flex-shrink: 0;
  }

  #page-crm-contacts .crm-leads-search-row .crm-page-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  #page-crm-contacts .crm-page-search input {
    font-size: 13px;
    padding: 7px 10px 7px 30px;
  }

  /* ── CRM Companies / Products / Opportunities: Refresh + New + Search in one line ── */
  #page-crm-companies .page-header,
  #page-crm-products .page-header,
  #page-crm-opportunities .page-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  #page-crm-companies .page-header-actions,
  #page-crm-products .page-header-actions,
  #page-crm-opportunities .page-header-actions {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #page-crm-companies .page-header-actions .btn,
  #page-crm-products .page-header-actions .btn,
  #page-crm-opportunities .page-header-actions .btn {
    padding: 7px;
    min-width: 0;
  }

  #page-crm-companies .page-header-actions .btn svg,
  #page-crm-products .page-header-actions .btn svg,
  #page-crm-opportunities .page-header-actions .btn svg {
    width: 14px;
    height: 14px;
  }

  #page-crm-companies .page-header-actions .btn-label,
  #page-crm-products .page-header-actions .btn-label,
  #page-crm-opportunities .page-header-actions .btn-label {
    display: none;
  }

  #page-crm-companies .crm-page-search,
  #page-crm-products .crm-page-search,
  #page-crm-opportunities .crm-leads-search-row {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  #page-crm-opportunities .crm-leads-search-row .crm-page-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  #page-crm-companies .crm-page-search input,
  #page-crm-products .crm-page-search input,
  #page-crm-opportunities .crm-page-search input {
    font-size: 13px;
    padding: 7px 10px 7px 30px;
  }

  /* ── CRM Reports header, two rows:
     row 1 = report-type dropdown + Refresh + Filters,
     row 2 = search bar + the remaining buttons (Export).
     display:contents flattens the two wrappers so all controls become
     flex items of the header and can be reordered across them. ── */
  #page-crm-reports #crm-reports-sticky-header .page-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  #page-crm-reports .page-header-left,
  #page-crm-reports .page-header-actions {
    display: contents;
  }

  #page-crm-reports .report-type-select {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  #page-crm-reports #btn-refresh-crm-reports {
    order: 2;
    flex: 0 0 auto;
  }

  #page-crm-reports #btn-crm-reports-filter-toggle {
    order: 3;
    flex: 0 0 auto;
  }

  /* Search's 70% basis can't fit next to row 1, so it wraps onto its
     own row and the remaining buttons follow it there. */
  #page-crm-reports .page-header-actions .crm-page-search {
    order: 4;
    flex: 1 1 70%;
    min-width: 0;
    width: auto;
    max-width: none;
  }

  #page-crm-reports #btn-export-crm-reports {
    order: 5;
    flex: 0 0 auto;
  }

  /* Refresh/Filters/Export: icon-only on phones — font-size 0 hides the
     text nodes (icons are px-sized); the name still shows on hover via
     the buttons' title attributes. */
  #page-crm-reports #btn-refresh-crm-reports,
  #page-crm-reports #btn-crm-reports-filter-toggle,
  #page-crm-reports #btn-export-crm-reports {
    font-size: 0;
    gap: 0;
    line-height: 0;
    padding: 8px;
  }

  #page-crm-reports #btn-refresh-crm-reports svg,
  #page-crm-reports #btn-crm-reports-filter-toggle svg,
  #page-crm-reports #btn-export-crm-reports svg {
    margin: 0 !important;
    /* the Refresh/Export svgs carry an inline margin-right */
  }

  /* ── CRM filter bar: 2-column grid so all filters are visible ── */
  .crm-table-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 0 !important;
  }

  .crm-filter-group {
    flex-shrink: 1;
    min-width: 0;
    width: 100%;
  }

  .crm-filter-group .form-input {
    width: 100% !important;
    font-size: 16px !important;
    padding: 8px 10px !important;
  }

  .crm-filter-group label {
    font-size: 0.625rem;
  }

  /* View toggle stays small and right-aligned */
  .crm-view-toggle {
    justify-self: end;
    align-self: flex-end;
  }

  /* Search bar: full width */
  .crm-page-search,
  .data-table-search {
    width: 100%;
    max-width: 100%;
  }

  .crm-page-search input,
  .data-table-search input {
    width: 100%;
  }

  /* ── Data table toolbar ── */
  .data-table-toolbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .crm-table-toolbar {
    padding: 10px 12px;
  }

  /* ── Data tables: horizontal scroll ── */
  .data-table-wrapper {
    border-radius: 10px;
  }

  .data-table td,
  .data-table th {
    font-size: 13px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  /* ── Tabs: horizontal scroll ── */
  .tabs,
  .tab-list,
  [role="tablist"] {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar,
  .tab-list::-webkit-scrollbar {
    display: none;
  }

  /* ── form-row: single column ── */
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* ── Modals: slide up from bottom as a sheet ── */
  .modal-overlay {
    padding: 0;
  }

  .modal-header {
    padding: 18px 16px 0;
  }

  .modal-body {
    padding: 14px 16px;
  }

  .modal-footer {
    padding: 12px 16px 20px;
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100% !important;
    justify-content: center;
  }

  /* Slide-up animation */
  .modal-overlay.open .modal {
    animation: slideUpSheet 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }

  @keyframes slideUpSheet {
    from {
      transform: translateY(40px);
      opacity: 0.7;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* ── CRM lead create/edit: bottom sheet ── */
  #crm-lead-create-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #crm-lead-create-overlay>div {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #crm-lead-create-overlay>div>div:first-child {
    border-radius: 20px 20px 0 0 !important;
    padding: 16px !important;
  }

  #crm-lead-create-form {
    padding: 16px !important;
  }

  /* ── Confirm dialog: bottom sheet ── */
  .confirm-dialog-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .confirm-dialog {
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 28px;
  }

  .confirm-dialog-footer {
    flex-direction: column;
    gap: 8px;
  }

  .confirm-dialog-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Kanban columns ── */
  .crm-kanban-col {
    flex-basis: 80vw !important;
    min-width: 240px !important;
  }

  /* ── Reports page header buttons ── */
  #page-crm-reports .page-header-actions .btn {
    flex: 1 1 auto;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 480px  VERY SMALL PHONES
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .topbar-title {
    display: none;
  }

  .topbar-left {
    gap: 8px;
  }

  .user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .stat-card {
    padding: 12px 14px;
  }

  .stat-value {
    font-size: 1.5rem !important;
  }

  .crm-mc {
    padding: 12px 14px 10px;
  }

  #notif-dropdown {
    right: -8px !important;
    width: calc(100vw - 16px) !important;
  }
}

/* ─── Searchable dropdown filter (e.g. CRM Leads "Area") ────────────── */
.crm-searchable-select {
  position: relative;
}

.crm-searchable-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary, #1e293b);
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
}

.crm-searchable-select-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-searchable-select-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  width: max(100%, 200px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  padding: 8px;
}

.crm-searchable-select-panel.open {
  display: block;
}

.crm-searchable-select-panel .form-input {
  margin-bottom: 6px;
}

.crm-searchable-select-list {
  max-height: 220px;
  overflow-y: auto;
}

.crm-searchable-select-option {
  padding: 6px 8px;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-searchable-select-option:hover {
  background: #f1f5f9;
}

.crm-searchable-select-option.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   STICKY TABLE LAYOUT — CRM Leads + Contacts
   Page header + filter bar stay put; only the table rows scroll, and
   the pagination bar always stays visible at the bottom.
   Approach: the whole card (toolbar + table + pagination) is a flex
   column capped to the remaining viewport height; the table container
   is the only flexible piece (flex:1), so however tall the filter bar
   grows (wrapping to 1, 2, 3 lines...), the toolbar and pagination
   keep their natural height and only the table rows give up space.
   This avoids the old hardcoded "viewport - 274px" guess, which broke
   (pushed pagination off-screen) whenever the filter bar grew taller.
   ══════════════════════════════════════════════════════════════════ */
#crm-leads-table-wrapper,
#crm-contacts-table-wrapper {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  /* topbar 64px + page-content padding + page-header, with a safety margin */
  gap: 10px;
}

/* Desktop: the page-header controls are portaled into the topbar, so
   the freed vertical space goes to the record list. The page keeps a
   64px bottom padding by default — trim it so the card can reach near
   the bottom edge: topbar 64 + content top pad 20 + bottom pad 16 = 100. */
@media (min-width: 1025px) {

  .page-content:has(#page-crm-leads.active),
  .page-content:has(#page-crm-contacts.active) {
    padding-bottom: 16px;
  }

  #crm-leads-table-wrapper,
  #crm-contacts-table-wrapper {
    max-height: calc(100vh - 100px);
  }
}

#crm-leads-table-wrapper .data-table-toolbar,
#crm-contacts-table-wrapper .data-table-toolbar {
  margin-bottom: 8px;
}

#crm-leads-table-wrapper .data-table-toolbar,
#crm-contacts-table-wrapper .data-table-toolbar {
  flex-shrink: 0;
}

/* Toolbar (and the Area filter's dropdown popup inside it) is a flex item
   sitting above the table-container in DOM order but with no z-index, so
   the table-container's sticky thead (z-index:2) was painting over the
   open Area dropdown. Give the toolbar an explicit stacking priority so
   it — and anything it opens, like the dropdown — always wins. */
#crm-leads-table-wrapper>.data-table-toolbar,
#crm-contacts-table-wrapper>.data-table-toolbar {
  position: relative;
  z-index: 5;
}

/* CRM Leads/Contacts/Reports: when one of these is the active page, size
   the whole card off the real remaining viewport height (flex) instead of
   a fixed guess, so the header/toolbar/pagination stay put and only the
   record list scrolls. Mobile/tablet only — desktop keeps the normal
   document-scrolling layout (this doesn't fit reliably on every desktop
   window height, and there's no need to confine it there anyway). */
@media (max-width: 1024px) {

  .main-wrapper:has(#page-crm-leads.active),
  .main-wrapper:has(#page-crm-contacts.active) {
    height: 100vh;
    height: 100dvh;
    /* real visible viewport on mobile, excludes browser/nav chrome */
    overflow: hidden;
  }

  .page-content:has(#page-crm-leads.active),
  .page-content:has(#page-crm-contacts.active) {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  #page-crm-leads.active,
  #page-crm-contacts.active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #page-crm-leads.active>.page-header,
  #page-crm-contacts.active>.page-header {
    flex-shrink: 0;
  }

  #page-crm-leads.active #crm-leads-table-wrapper,
  #page-crm-contacts.active #crm-contacts-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* Reports: confined layout at every width — the page fills the viewport
   (no document scroll), the header/filter bar and pagination stay put, and
   only the table body scrolls. */
html:has(#page-crm-reports.active),
body:has(#page-crm-reports.active) {
  height: 100%;
  overflow: hidden;
}

.main-wrapper:has(#page-crm-reports.active) {
  height: 100vh;
  height: 100dvh;
  /* real visible viewport on mobile, excludes browser/nav chrome */
  overflow: hidden;
}

.page-content:has(#page-crm-reports.active) {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

#page-crm-reports.active {
  flex: 1 1 auto;
  min-height: 0;
  /* !important needed: the page-view visibility rule declares
     `display: block !important` and would break the flex chain,
     leaving the table unconstrained (content clipped, no inner
     scroll, pagination pushed out of view). */
  display: flex !important;
  flex-direction: column;
}

/* Sticky header keeps its natural height, the card below fills
   whatever is left, and only the table body inside it scrolls. */
#page-crm-reports.active #crm-reports-sticky-header {
  flex-shrink: 0;
}

/* flex 0 1 auto (not 1 1): the card hugs its content like Leads — it ends
   right after pagination when there are few rows — but can still shrink,
   so tall content is capped at the viewport and scrolls inside. */
#page-crm-reports.active #crm-reports-table-wrapper {
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
  /* base .data-table-wrapper sets height:100% — don't fill */
  display: flex;
  flex-direction: column;
}

#page-crm-reports.active #crm-reports-table-container {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#page-crm-reports.active .crm-report-scroll-wrap {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
}

#crm-leads-table-container,
#crm-contacts-table-container,
#crm-companies-table-container {
  overflow-y: auto;
  overflow-x: auto;
  flex: 1 1 auto;
  min-height: 180px;
}

/* Companies: fixed viewport-relative height with a constant (sticky)
   header — the body scrolls inside it instead of the whole page growing. */
#crm-companies-table-wrapper {
  height: 85vh;
  height: 85dvh;
  display: flex;
  flex-direction: column;
}

/* Companies: no page-level scroll — only the table body (above) scrolls. */
html:has(#page-crm-companies.active),
body:has(#page-crm-companies.active) {
  overflow: hidden;
}

/* Keep column headers visible while rows scroll */
#crm-leads-table-container .data-table thead th,
#crm-contacts-table-container .data-table thead th,
#crm-companies-table-container .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-2, #f8fafc);
}

/* Denser Leads table: smaller type + tighter row padding so more
   records fit on screen without scrolling. */
#crm-leads-table-container .data-table th,
#crm-companies-table-container .data-table th {
  padding: 7px 12px;
  font-size: 0.625rem;
}

#crm-leads-table-container .data-table td,
#crm-companies-table-container .data-table td {
  padding: 6px 12px;
  font-size: 0.75rem;
}

/* Leads table: every column (other than the checkbox) shares the same
   width and wraps its text instead of overflowing, with a hover tooltip
   (via .crm-hover-cell) surfacing the full value for anything clamped.
   There are 16 data columns; sizing the table to 16/9 of the container
   (with table-layout:fixed dividing that evenly) means exactly 9 columns
   fill the visible width and the rest scroll horizontally within
   #crm-leads-table-container (already overflow-x:auto). */
.crm-leads-fixed-table {
  table-layout: fixed;
  width: 177.78%;
}

.crm-leads-fixed-table th,
.crm-leads-fixed-table td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
}

.crm-hover-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  cursor: default;
}

/* Pagination bar lives outside the scrollable table container so the
   record count + page controls stay put instead of scrolling with rows,
   and never shrinks (flex column above keeps it always in view). */
#crm-leads-pagination-container,
#crm-contacts-pagination-container,
#crm-companies-pagination-container {
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0;
  background: var(--color-surface, #fff);
}

/* Pagination bar fixed to the bottom of the viewport on every other page
   (Leads/Contacts are excluded above — they already pin pagination via a
   capped-height flex column instead of a viewport overlay). */
[id$="-pagination"]:not(:empty),
[id$="-pagination-container"]:not(:empty) {
  position: fixed;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--color-surface, #fff);
  border-top: 1px solid var(--color-border, #e2e8f0);
  padding: 6px 24px;
}

#crm-leads-pagination-container,
#crm-contacts-pagination-container,
#crm-companies-pagination-container {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0;
}

@media (max-width: 1024px) {

  [id$="-pagination"]:not(:empty),
  [id$="-pagination-container"]:not(:empty) {
    left: 0;
  }
}

/* Reports page: sticky header zone (outside overflow:clip wrapper).
   Mobile/tablet only — see note above the Leads/Contacts sticky rule;
   same fixed-topbar interaction produced a phantom gap on desktop. */
@media (max-width: 1024px) {
  #crm-reports-sticky-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 20;
    background: var(--color-background, #f1f5f9);
    padding-bottom: 0;
  }
}

/* In-page spacing for the reports header (was an inline style; scoped
   to the page so it stops applying when portaled into the topbar). */
#page-crm-reports .page-header {
  padding-top: 4px;
  margin-bottom: 8px;
}

/* Filter bar: now only hosts the (hidden) filter popup + backdrop —
   the visible Filters/Refresh/Export buttons moved into the page
   header. The popup is portaled to <body> when opened, so hiding the
   bar doesn't affect it. */
.crm-reports-filter-bar {
  display: none;
}

/* Reports table: scrollable inner container so thead sticks at top:0 within it */
.crm-report-scroll-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  min-height: 120px;
}

.crm-report-scroll-wrap .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-2, #f8fafc);
  box-shadow: 0 1px 0 var(--color-border);
}

/* Cumulative report: wider Product/Week columns, both pinned to the left
   edge so they stay put during horizontal scroll. Product needs a fixed
   width because Week's `left` offset must line up exactly behind it. */
.crm-cumulative-table th:nth-child(1),
.crm-cumulative-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  background: var(--color-surface, #ffffff);
}

.crm-cumulative-table th:nth-child(2),
.crm-cumulative-table td:nth-child(2) {
  position: sticky;
  left: 160px;
  z-index: 1;
  min-width: 170px;
  white-space: nowrap;
  background: var(--color-surface, #ffffff);
  box-shadow: 2px 0 0 var(--color-border);
  /* seam where scrolling columns slide under */
}

/* Header corner cells sit above both the sticky top row (z-index:2)
   and the sticky body cells. */
.crm-cumulative-table thead th:nth-child(1),
.crm-cumulative-table thead th:nth-child(2) {
  z-index: 3;
  background: var(--color-surface-2, #f8fafc);
}

/* Keep the pinned cells in step with the row hover tint. */
.crm-cumulative-table tbody tr:hover td:nth-child(1),
.crm-cumulative-table tbody tr:hover td:nth-child(2) {
  background: #f9fafb;
}

/* Totals row pinned to the bottom of the scroll area, so the total
   amount stays visible while the rows scroll. background:inherit picks
   up the row's tint (green for payments, blue for cumulative). */
.crm-report-scroll-wrap .crm-report-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 0 -1px 0 var(--color-border);
}

/* Lead Schedule report: assignee names pinned to the left, one column per
   hourly slot, each cell able to stack multiple lead badges. */
.crm-schedule-table th,
.crm-schedule-table td {
  min-width: 110px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.crm-schedule-table th:first-child,
.crm-schedule-table td.crm-schedule-assignee {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 160px;
  max-width: 160px;
  white-space: normal;
  font-weight: 600;
  background: var(--color-surface, #ffffff);
  box-shadow: 2px 0 0 var(--color-border);
}

.crm-schedule-table thead th:first-child {
  z-index: 3;
  background: var(--color-surface-2, #f8fafc);
}

.crm-schedule-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: normal;
}

.crm-schedule-badge {
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cumulative totals: the left-pinned Product/Period cells must paint
   above the row's other bottom-pinned cells (equal z-index would let
   those later siblings slide over them during horizontal scroll). */
.crm-cumulative-table .crm-report-total-row td:nth-child(1),
.crm-cumulative-table .crm-report-total-row td:nth-child(2) {
  z-index: 3;
}

/* Phones: don't pin the Product/Period columns — the viewport is too
   narrow to give up half of it to frozen columns. Header cells keep
   their top-stickiness (only the left-pinning is undone), and the
   totals row keeps its bottom pin. */
@media (max-width: 768px) {

  .crm-cumulative-table th:nth-child(1),
  .crm-cumulative-table th:nth-child(2) {
    left: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    box-shadow: none;
  }

  .crm-cumulative-table tr:not(.crm-report-total-row) td:nth-child(1),
  .crm-cumulative-table tr:not(.crm-report-total-row) td:nth-child(2) {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    box-shadow: none;
  }

  .crm-cumulative-table .crm-report-total-row td:nth-child(1),
  .crm-cumulative-table .crm-report-total-row td:nth-child(2) {
    left: auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* Page header and filter bar: sticky so they don't scroll away.
   Mobile/tablet only — desktop has plenty of vertical room and doesn't
   need this pinning; keeping it unscoped fought with the fixed topbar
   and produced a large phantom gap above the header on desktop. */
@media (max-width: 1024px) {

  #page-crm-leads .page-header,
  #page-crm-contacts .page-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 20;
    background: var(--color-bg, #f8fafc);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  #crm-leads-table-wrapper .crm-table-toolbar,
  #crm-contacts-table-wrapper .crm-table-toolbar {
    position: sticky;
    top: calc(var(--topbar-height) + 52px);
    /* topbar + page-header approx */
    z-index: 19;
    background: var(--color-bg, #f8fafc);
    padding-bottom: 4px;
  }
}

/* ── Safe-area insets for iPhone notch / home-bar ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .modal-footer {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .confirm-dialog {
      padding-bottom: max(28px, env(safe-area-inset-bottom));
    }

    .page-content {
      padding-bottom: max(100px, env(safe-area-inset-bottom));
    }
  }
}

/* ─── Leads/Contacts mobile: tight header→filter gap, pinned pagination,
       scrollable-only list area ───────────────────────────────────── */
@media (max-width: 640px) {

  /* Kill the sticky offsets — the flex parent (#page-crm-leads.active)
     already pins header/toolbar/pagination, so sticky here just adds
     dead space via the "top" offset reservation. */
  #page-crm-leads .page-header,
  #page-crm-contacts .page-header {
    position: static;
    padding-top: 4px;
    padding-bottom: 2px;
  }

  #crm-leads-table-wrapper .crm-table-toolbar,
  #crm-contacts-table-wrapper .crm-table-toolbar {
    position: static;
    padding-top: 2px;
    padding-bottom: 6px;
    margin-bottom: 0 !important;
  }

  #crm-leads-table-wrapper,
  #crm-contacts-table-wrapper {
    gap: 4px !important;
  }

  /* Only this middle section scrolls. align-items must stay "stretch"
     (not "center") — centering shrinks this to fit-content width, which
     squashes the kanban board's horizontally-scrolling columns down to
     nothing and pushes the column titles out of view. The card list
     centers itself instead, via margin:auto below. */
  #crm-leads-table-container,
  #crm-contacts-table-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #crm-leads-table-container .crm-mobile-cards,
  #crm-contacts-table-container .crm-mobile-cards,
  #crm-companies-table-container .crm-mobile-cards,
  #crm-products-table-container .crm-mobile-cards {
    width: 100%;
    max-width: 480px;
    /* keeps cards centered/readable on wider phones */
    margin: 0 auto;
  }

  /* Pin pagination to the bottom of the leads/contacts card, not floating */
  #crm-leads-pagination-container,
  #crm-contacts-pagination-container {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--color-surface, #fff);
    border-top: 1px solid var(--color-border, #e2e8f0);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  }

  /* Reports: same treatment — kill the sticky reservation, only the
     table body scrolls, pagination sits right after it. */
  #crm-reports-sticky-header {
    position: static;
    padding-top: 4px;
  }

  #page-crm-reports .page-header {
    padding-top: 0;
    padding-bottom: 2px;
  }

  #crm-reports-table-wrapper {
    gap: 0 !important;
  }

  .crm-report-scroll-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Note tooltip popup ── */
#note-tooltip {
  display: none;
  position: fixed;
  z-index: 99999;
  min-width: 240px;
  max-width: 340px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   CRM DESKTOP DENSITY PASS (>=1025px only — mobile/tablet untouched)
   - Shrinks the top row controls (Filters/Refresh/search/New etc.)
     across every CRM tab so it takes less vertical space.
   - Removes the fixed-height inner scrollbox on Leads/Contacts/Reports
     so the table body is no longer capped to ~3-4 visible rows; the
     page itself scrolls instead, and the table fills the space.
   - Tightens the gaps between the header/toolbar/table down to a
     couple of pixels so more records show above the fold.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── Smaller buttons across every CRM tab's top row ── */
  #page-crm-contacts .page-header-actions .btn,
  #page-crm-leads .page-header-actions .btn,
  #page-crm-companies .page-header-actions .btn,
  #page-crm-products .page-header-actions .btn,
  #page-crm-opportunities .page-header-actions .btn,
  #page-crm-reports .page-header-actions .btn,
  .crm-reports-filter-bar .btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  #page-crm-contacts .page-header-actions .lead-action-icon,
  #page-crm-leads .page-header-actions .lead-action-icon,
  #page-crm-companies .page-header-actions .lead-action-icon,
  #page-crm-products .page-header-actions .lead-action-icon,
  #page-crm-opportunities .page-header-actions .lead-action-icon {
    width: 14px;
    height: 14px;
  }

  /* Filters/Import/Template/view-toggle icons set their size via an
     inline style attribute, which beats an ordinary class rule — the
     !important here only overrides that inline sizing, nothing else. */
  #page-crm-contacts .page-header-actions .btn svg,
  #page-crm-leads .page-header-actions .btn svg,
  .crm-reports-filter-bar .btn svg,
  .crm-filter-toggle-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* ── Smaller search bar on every CRM tab ── */
  #page-crm-contacts .crm-page-search input,
  #page-crm-leads .crm-page-search input,
  #page-crm-companies .crm-page-search input,
  #page-crm-products .crm-page-search input,
  #page-crm-opportunities .crm-page-search input,
  #page-crm-reports .crm-page-search input {
    padding: 6px 12px 6px 34px;
    font-size: 0.8rem;
  }

  /* ── Smaller Filters toggle + inline filter fields (Leads/Contacts/Reports) ── */
  #page-crm-contacts .crm-filter-toggle-btn,
  #page-crm-reports .crm-filter-toggle-btn,
  #page-crm-leads .crm-filter-toggle-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  #page-crm-contacts .crm-filter-group .form-input,
  #page-crm-leads .crm-filter-group .form-input,
  #page-crm-reports .crm-filter-group .form-input {
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  /* ── Tighter gaps between header / toolbar / table ── */
  #page-crm-contacts .page-header,
  #page-crm-leads .page-header,
  #page-crm-companies .page-header,
  #page-crm-products .page-header,
  #page-crm-opportunities .page-header {
    margin-bottom: 6px;
  }

  #page-crm-reports .page-header {
    margin-bottom: 2px;
  }

  .crm-reports-filter-bar {
    padding: 6px 12px;
  }

  #crm-leads-table-wrapper .data-table-toolbar,
  #crm-contacts-table-wrapper .data-table-toolbar {
    margin-bottom: 2px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #crm-leads-table-wrapper,
  #crm-contacts-table-wrapper,
  #crm-reports-table-wrapper {
    gap: 2px;
  }

  /* Leads/Contacts card: taller cap than the old calc(100vh - 180px)
     so far more rows show at once, still scrollable within the card
     (this also keeps the sticky thead's scroll container intact, so
     it pins correctly instead of overlapping the first row). */
  #crm-leads-table-wrapper,
  #crm-contacts-table-wrapper {
    max-height: 85vh;
  }

  #crm-leads-table-container,
  #crm-contacts-table-container {
    overflow-y: auto;
    min-height: 0;
  }

  /* No outer/page scroll on Leads or Contacts — the table card above
     is height-capped and scrolls internally, so the page around it
     never needs to. */
  .main-wrapper:has(#page-crm-leads.active),
  .main-wrapper:has(#page-crm-contacts.active) {
    height: 100vh;
    overflow: hidden;
  }

  .page-content:has(#page-crm-leads.active),
  .page-content:has(#page-crm-contacts.active) {
    overflow: hidden;
  }
}

/* ============================================================
   DS v1 Component Layer (Phase 1) — additive, shared components
   ============================================================ */

/* ─── Global focus ring (keyboard only) ───────────────────── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
.sidebar-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sidebar .sidebar-link:focus-visible,
.sidebar button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* ─── Button system: missing variants/sizes ───────────────── */
.btn-xs {
  padding: 3px 8px;
  font-size: var(--text-xs);
  min-height: 28px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-danger-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-danger);
}

.btn-danger-ghost:hover {
  background: var(--color-danger-bg);
}

/* ─── Status pills (styles for existing renderStatusBadge) ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.status-badge.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-badge.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-badge.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status-badge.badge-neutral {
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.status-badge.badge-purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.status-badge.badge-orange {
  background: #fff7ed;
  color: #ea580c;
}

/* ─── Alert banners ───────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-info {
  background: var(--color-info-bg);
  border-color: #bfd2f8;
}

.alert-info svg {
  color: var(--color-info);
}

.alert-success {
  background: var(--color-success-bg);
  border-color: #a7f3d0;
}

.alert-success svg {
  color: var(--color-success);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: #fde68a;
}

.alert-warning svg {
  color: var(--color-warning);
}

.alert-danger {
  background: var(--color-danger-bg);
  border-color: #fecaca;
}

.alert-danger svg {
  color: var(--color-danger);
}

/* ─── Empty state variants (base .empty-state exists) ─────── */
.empty-state--table {
  padding: 40px 24px;
}

.empty-state--error .empty-state-icon {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ─── Skeleton loading ────────────────────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: ds-shimmer 1.6s infinite;
}

@keyframes ds-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

.skeleton-table {
  padding: 4px 0;
}

.skeleton-table-row {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-background);
}

.skeleton-table-row .skeleton {
  height: 14px;
  flex: 1;
}

.skeleton-table-row .skeleton:first-child {
  flex: 0 0 22%;
}

.skeleton-table-row .skeleton:last-child {
  flex: 0 0 12%;
}

.skeleton-table-head .skeleton {
  height: 10px;
}

/* ─── Pagination (shared markup for both renderers) ───────── */
.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 4px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
  gap: 8px;
}

.ds-pagination--bordered {
  border-top: 1px solid var(--color-border);
  padding: 12px 16px 4px;
}

.ds-pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ds-page-btn {
  min-width: 28px;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.ds-page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--color-border-hover);
  background: var(--color-background);
}

.ds-page-btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.ds-page-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.ds-page-size {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-sm);
  background: var(--color-surface);
  cursor: pointer;
  color: var(--color-text-secondary);
}

/* ─── Bulk action bar (CRM tables) ────────────────────────── */
.ds-bulk-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-primary-light);
  border: 1px solid #bfd2f8;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ds-bulk-bar .crm-bulk-count {
  font-size: var(--text-md);
  color: var(--color-primary-active);
  font-weight: 600;
}

/* ─── Notification popover (was inline-styled) ────────────── */
.notif-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 44px;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.notif-title {
  font-weight: 700;
  font-size: 15px;
}

.notif-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.notif-chip {
  font-size: var(--text-xs);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: pointer;
}

.notif-mark-read {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
}

.notif-list {
  max-height: 380px;
  overflow-y: auto;
}

.notif-count-badge {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
}

/* ─── Session-expired modal (was inline-styled) ───────────── */
#session-expired-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}

.session-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

.session-modal-icon {
  width: 60px;
  height: 60px;
  background: var(--color-warning-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.session-modal-icon svg {
  width: 30px;
  height: 30px;
}

.session-modal h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.session-modal p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
  line-height: 1.6;
}

.session-modal .btn {
  width: 100%;
  justify-content: center;
  padding: 13px;
}


/* ============================================================
   DS v1 Layout Layer (Phase 2)
   ============================================================ */

/* ─── Page description (one-liner under the topbar title) ─── */
.page-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: -4px 0 16px;
}

/* ─── Full-bleed pages (replaces inline negative-margin hack) ─ */
.page-view--flush {
  padding: 0;
  margin: -20px -24px;
  background: var(--color-background);
}

/* ============================================================
   DS v1 Screen Refinements (Phase 3)
   ============================================================ */

/* ─── Standard table cell types ───────────────────────────── */
.cell-primary {
  font-weight: 500;
  color: var(--color-text-primary);
}

.cell-link {
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}

.cell-link:hover {
  text-decoration: underline;
}

.cell-meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ─── Sortable header affordance ──────────────────────────── */
.sortable-th .sort-header-btn {
  cursor: pointer;
}

.sortable-th[aria-sort] .sort-header-label {
  color: var(--color-primary);
}


/* ============================================================
   DS v1 Responsive & Accessibility Layer (Phase 4)
   ============================================================ */

/* ─── Reduced motion: disable all animation/transitions ────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Skip-to-content link (visible on keyboard focus only) ── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 700;
  padding: 10px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 150ms ease-out;
}

.skip-link:focus-visible {
  top: 8px;
}

/* ─── Button-reset for interactive table cells ──────────────── */
button.cell-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  display: inline;
}

/* ─── Touch targets on coarse pointers / small screens ─────── */
@media (max-width: 768px) {
  .btn {
    min-height: 40px;
  }

  .btn-sm,
  .btn-xs {
    min-height: 36px;
  }

  .ds-page-btn {
    min-width: 36px;
    min-height: 36px;
  }

  .icon-btn {
    width: 40px;
    height: 40px;
  }

  .topbar-icon-btn {
    width: 40px;
    height: 40px;
  }

  .notif-chip {
    min-height: 32px;
  }
}


/* ============================================================
   DS v1 Code-Quality Layer (Phase 5) — classes for repeated
   inline-styled templates. No new visuals beyond flattening.
   ============================================================ */

/* ─── Icon-only table action button (crmV1ActionButton) ────── */
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-width: 32px;
  height: 32px;
}

/* ─── Notification list items ───────────────────────────────── */
.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  background: var(--color-surface);
  transition: background var(--transition);
}

.notif-item:hover {
  background: #f8fafc;
}

.notif-item.unread {
  background: var(--color-primary-subtle);
}

.notif-item-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.notif-item-icon {
  font-size: 18px;
  margin-top: 2px;
}

.notif-item-body {
  flex: 1;
}

.notif-item-title {
  font-weight: 400;
  font-size: var(--text-sm);
  color: #111827;
}

.notif-item.unread .notif-item-title {
  font-weight: 600;
}

.notif-item-msg {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.notif-item-time {
  font-size: var(--text-2xs);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.notif-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 4px;
  display: block;
}

/* ─── Modal body helpers ────────────────────────────────────── */
.modal-desc {
  margin: 0 0 16px;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

/* ─── Kanban transient drag ghost ───────────────────────────── */
.kanban-drag-ghost {
  position: fixed;
  top: -200px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(26, 86, 219, 0.45);
  pointer-events: none;
  z-index: -1;
}

/* ══════════════════════════════════════════════════════════════════
   HUBSPOT-STYLE SIDEBAR
   Collapsed: one continuous icon rail — every icon visible, smaller
   icons, hidden (but working) scrollbar, hover tooltips (app.js).
   Expanded: compact header (smaller logo + brand text) and tighter
   gaps so the full nav fits without crowding.
   Mobile (≤1024px) keeps the full-width overlay drawer untouched.
   ══════════════════════════════════════════════════════════════════ */

/* Scrollbar: hidden but scrolling stays enabled */
.sidebar-nav {
  scrollbar-width: none;
  scrollbar-gutter: auto;
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* ── Expanded sidebar: compact header + tighter rhythm ── */
.sidebar-header {
  padding: 12px 16px;
  gap: 10px;
}

.sidebar-logo,
.company-logo-img {
  width: 30px;
  height: 30px;
}

.company-logo-svg {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.company-logo-svg svg {
  width: 15px;
  height: 15px;
}

.brand-name {
  font-size: 0.8125rem;
}

.sidebar-nav {
  padding: 10px 8px;
}

.sidebar-section {
  margin-bottom: 10px;
}

.sidebar-section-toggle {
  padding: 2px 10px 4px;
  margin-bottom: 2px;
  font-size: 0.625rem;
}

.sidebar-section-items {
  gap: 2px;
}

.sidebar-link {
  gap: 10px;
  padding: 7px 10px;
  font-size: 0.8125rem;
}

.sidebar-link svg {
  width: 17px;
  height: 17px;
}

.sidebar-footer {
  padding: 8px;
}

/* ── Collapsed icon rail (desktop only — mobile resets .collapsed) ── */
@media (min-width: 1025px) {

  /* Every section's icons stay visible in the rail, even if the
     section was folded while the sidebar was expanded. */
  .sidebar.collapsed .sidebar-section-items,
  .sidebar.collapsed .sidebar-section.is-collapsed .sidebar-section-items {
    display: grid !important;
    gap: 2px;
  }

  .sidebar.collapsed .sidebar-section {
    margin-bottom: 0;
  }

  .sidebar.collapsed .sidebar-section+.sidebar-section {
    padding-top: 3px;
    margin-top: 3px;
  }

  .sidebar.collapsed .sidebar-link {
    margin: 1px 6px !important;
    padding: 7px 0 !important;
    border-radius: 8px !important;
  }

  .sidebar.collapsed .sidebar-link svg {
    width: 18px !important;
    height: 18px !important;
  }

  .sidebar.collapsed .sidebar-header {
    padding: 10px 6px !important;
  }

  .sidebar.collapsed .sidebar-brand-btn {
    padding: 4px !important;
  }

  .sidebar.collapsed .sidebar-footer {
    padding: 4px 0 4px;
  }
}

/* ── Contacts & Leads: Business Name in UPPERCASE ───────────────────
   Display-only (text-transform) — the data in the DB keeps its
   original casing. Everything else renders as stored. Covers the
   desktop tables, mobile cards and the Leads kanban cards. */
#crm-leads-table-container .data-table td .cell-link,
#crm-contacts-table-container .data-table td:first-child,
#crm-companies-table-container .data-table td .cell-link,
#crm-leads-table-container .crm-mc-name,
#crm-contacts-table-container .crm-mc-name,
#crm-companies-table-container .crm-mc-name,
.crm-kanban-card-name {
  text-transform: uppercase;
}

/* ── Global scrollbar styling ───────────────────────────────────────
   One consistent slim scrollbar across every page and scroll
   container (tables, modals, dropdowns, kanban, main page scroll).
   The sidebar keeps its own hidden-but-scrollable behavior — its
   class-level rules are more specific than these universal ones. */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: content-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Dashboard: fit the viewport, no page scroll ────────────────────
   Smaller stat/shortcut cards + the Recent Activity panel takes the
   remaining height and scrolls internally. Mobile (≤1024px) keeps the
   normal stacked flow with page scrolling. */
#page-dashboard .stats-row,
#page-dashboard .phase2-shortcut-grid {
  gap: 12px;
  margin-bottom: 14px;
}

#page-dashboard .stat-card {
  padding: 12px 14px;
}

#page-dashboard .stat-card-header {
  margin-bottom: 8px;
}

#page-dashboard .stat-card-icon {
  width: 30px;
  height: 30px;
}

#page-dashboard .stat-card-icon svg {
  width: 16px;
  height: 16px;
}

#page-dashboard .stat-card-value {
  font-size: 1.25rem;
}

#page-dashboard .stat-card-subtext {
  margin-top: 2px;
  font-size: 0.6875rem;
}

#page-dashboard .stat-card-hint {
  display: none;
}

@media (min-width: 1025px) {
  .page-content:has(#page-dashboard.active) {
    padding-bottom: 20px;
  }

  #page-dashboard.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height) - 40px);
    overflow-y: auto;
    /* safety net if cards wrap on narrow desktops */
  }

  #page-dashboard .data-table-wrapper {
    flex: 1;
    min-height: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  #page-dashboard #dashboard-recent-table {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* Keep the Recent Activity header row visible while its list scrolls */
  #page-dashboard #dashboard-recent-table .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-2, #f8fafc);
    box-shadow: 0 1px 0 var(--color-border);
  }
}

/* ══════════════════════════════════════════════════════════════════
   PER-PAGE POLISH BATCH
   Policies / Consents / Training Library / My Training / Leads /
   Time Tracker / Projects / Teams
   ══════════════════════════════════════════════════════════════════ */

/* ── Policies: smaller Policies / Policy Tags tab buttons ── */
#page-policies .policy-tabs {
  padding: 6px;
  gap: 6px;
}

#page-policies .policy-section-tab {
  padding: 6px 14px;
  font-size: 13px;
}

/* ── Consents: smaller search bar ── */
.consent-search-input {
  max-width: 300px;
  border-radius: 10px;
}

.consent-search-input input {
  min-height: 34px;
  padding: 6px 36px 6px 36px;
  font-size: 0.8125rem;
  border-radius: 10px;
}

.consent-search-input svg {
  left: 12px;
  width: 14px;
  height: 14px;
}

/* ── Training Library: compact stat boxes ── */
#page-training-admin .stats-grid {
  gap: 12px;
  margin-bottom: 14px !important;
  /* beats the inline margin-bottom:24px */
}

#page-training-admin .stat-card {
  padding: 12px 14px;
}

#page-training-admin .stat-card-header {
  margin-bottom: 8px;
}

#page-training-admin .stat-card-icon {
  width: 30px;
  height: 30px;
}

#page-training-admin .stat-card-icon svg {
  width: 16px;
  height: 16px;
}

#page-training-admin .stat-card-value {
  font-size: 1.25rem;
}

#page-training-admin .stat-card-subtext {
  margin-top: 2px;
  font-size: 0.6875rem;
}

/* ── My Training: smaller search + dropdowns, one row ── */
@media (min-width: 769px) {
  #page-training .data-table-toolbar {
    flex-wrap: nowrap;
  }
}

#page-training .data-table-search {
  max-width: 240px;
}

#page-training .data-table-search input {
  padding: 6px 10px 6px 32px;
  font-size: 0.8rem;
}

#page-training .data-table-search svg {
  width: 14px;
  height: 14px;
}

#page-training .policy-page-size-select,
#page-training #my-training-status-filter {
  padding: 4px 8px;
  font-size: 12px;
}

/* ── Leads/Companies: wider name column ── */
#crm-leads-table-container .data-table td:has(.cell-link),
#crm-companies-table-container .data-table td:has(.cell-link) {
  min-width: 240px;
}

/* ── Shared: tables always fill their scroll container ── */
#training-content-container table,
#projects-table table,
#teams-table table {
  width: 100%;
  min-width: 100%;
}

/* ── Desktop: contained layouts with their own list scroll ──
   Training Library, Time Tracker, Projects and Teams each lock to the
   viewport; the list/table scrolls inside its box with a sticky header
   and the pagination bar pinned below (always matching the table's
   width, sidebar collapsed or not). Mobile keeps natural page flow. */
@media (min-width: 1025px) {

  /* Training Library: fixed-height scrolling content list */
  #training-content-container {
    max-height: calc(100vh - 430px);
    min-height: 240px;
    overflow: auto;
  }

  #training-content-container .data-table thead th,
  #projects-table .data-table thead th,
  #teams-table .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-2, #f8fafc);
    box-shadow: 0 1px 0 var(--color-border);
  }

  /* Time Tracker: the "What have you worked on?" bar stays fixed at the
     top and the entries list scrolls under it inside its own area —
     no more sliding/overlapping against the page scroll. */
  #page-time-tracker.active {
    display: flex;
    flex-direction: column;
    /* page-content bottom padding is reduced to 20px for effort pages
       (see "effort pages: no bottom dead-band" below); the flush -20px
       margins cancel the remaining padding exactly. */
    height: calc(100vh - var(--topbar-height));
    overflow: hidden;
  }

  #page-time-tracker .tt-bar {
    position: static;
    flex-shrink: 0;
  }

  #page-time-tracker .tt-entries {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* Projects: page fits the viewport, table scrolls inside the card */
  #page-projects.active,
  #page-teams.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height) - 40px);
    overflow-y: auto;
    /* safety net if KPI cards wrap on narrow desktops */
  }

  #page-projects .card,
  #page-teams .card {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #projects-table,
  #teams-table {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  #projects-pagination,
  #teams-pagination {
    flex-shrink: 0;
    padding: 0 12px;
  }
}

/* ── Pagination alignment fix ───────────────────────────────────────
   Policies / Training Library / Projects / Teams: opt out of the
   viewport-fixed pagination overlay — their pagination flows inline
   directly below its own table, inside the same card, so it always
   matches the table's width whether the sidebar is expanded or
   collapsed. (Projects/Teams additionally stay pinned via their
   flex-column card layout on desktop.) */
#policies-pagination:not(:empty),
#training-lib-pagination:not(:empty),
#projects-pagination:not(:empty),
#teams-pagination:not(:empty) {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
}

/* Inner bars carry their own padding/border — avoid doubling them up. */
#training-lib-pagination:not(:empty) {
  padding: 0 12px;
  border-top: none;
}

#projects-pagination:not(:empty),
#teams-pagination:not(:empty) {
  padding: 0 16px;
}

/* ── Mobile drawer width guard ──────────────────────────────────────
   The desktop collapse toggle rewrites --sidebar-width (60px) for the
   fixed pagination bars; that inline variable must never shrink the
   mobile overlay drawer, so pin its width explicitly here. */
@media (max-width: 1024px) {

  .sidebar,
  .sidebar.collapsed {
    width: 260px !important;
  }
}

/* ── Policies: compact one-row toolbar (search + Refresh + New Policy) ── */
#page-policies .policy-data-table-wrapper .data-table-toolbar {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 16px;
}

#page-policies .policy-data-table-wrapper .data-table-search {
  flex: 1;
  min-width: 0;
  max-width: 260px;
}

#page-policies .policy-data-table-wrapper .data-table-search input {
  padding: 6px 10px 6px 32px;
  font-size: 0.8rem;
}

#page-policies .policy-data-table-wrapper .data-table-search svg {
  width: 14px;
  height: 14px;
}

#page-policies .policy-data-table-wrapper .data-table-filters {
  flex-shrink: 0;
  gap: 8px;
}

#btn-refresh-policies {
  padding: 5px 10px;
  font-size: 12px;
}

#btn-refresh-policies svg {
  width: 13px;
  height: 13px;
}

#policy-actions .btn {
  padding: 5px 12px;
  font-size: 12px;
  white-space: nowrap;
}

#policy-actions .btn svg {
  width: 13px !important;
  /* overrides the inline 16px sizing */
  height: 13px !important;
}

/* Card list spacing inside the policies card container */
#policies-table-container .crm-mobile-cards {
  padding: 12px 14px;
}

/* ── Training Library: compact one-row toolbar (search + type + New) ── */
#page-training-admin .data-table-toolbar {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 16px;
}

#page-training-admin .data-table-search {
  flex: 1;
  min-width: 0;
  max-width: 260px;
}

#page-training-admin .data-table-search input {
  padding: 6px 10px 6px 32px;
  font-size: 0.8rem;
}

#page-training-admin .data-table-search svg {
  width: 14px;
  height: 14px;
}

#page-training-admin .data-table-filters {
  flex-shrink: 0;
  gap: 8px;
}

#page-training-admin .data-table-filters .btn {
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}

#page-training-admin .data-table-filters .btn svg {
  width: 13px !important;
  height: 13px !important;
}

/* Card list spacing for the training tables' mobile cards */
#training-content-container .crm-mobile-cards,
#assignment-report-cards.crm-mobile-cards,
#my-training-list .crm-mobile-cards {
  padding: 12px 14px;
}

/* ══ Training Library refinements ═══════════════════════════════════ */

/* Trainings: search + type dropdown + New Training in ONE row at every
   width (overrides the generic mobile toolbar stacking). */
#page-training-admin .data-table-toolbar {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px;
}

#page-training-admin .data-table-search {
  flex: 1 1 auto;
  min-width: 0;
}

#page-training-admin .data-table-filters,
#page-training-admin #training-admin-tab-contents .data-table-filters {
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 8px;
}

#training-type-filter {
  max-width: 130px;
}

/* Assignments: "Assignment Details" heading + content dropdown share the
   row; the dropdown shrinks rather than wrapping below. */
#page-training-admin #training-admin-tab-assignments .data-table-toolbar h3 {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.875rem;
}

#report-content-filter {
  min-width: 0;
  max-width: 220px;
  text-overflow: ellipsis;
}

/* Smaller top stat boxes */
#page-training-admin .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

#page-training-admin .stat-card {
  padding: 10px 12px;
}

#page-training-admin .stat-card-header {
  margin-bottom: 4px;
}

#page-training-admin .stat-card-icon {
  width: 26px;
  height: 26px;
}

#page-training-admin .stat-card-icon svg {
  width: 14px;
  height: 14px;
}

#page-training-admin .stat-card-value {
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  #page-training-admin .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Compact pagination bar + smaller fonts (shared by Trainings,
   Assignments and My Training). */
.training-table-pagination {
  margin-top: 6px;
  padding: 8px 12px 6px;
  gap: 8px;
}

.training-pagination-meta,
.training-pagination-label {
  font-size: 12px;
}

.training-pagination-label {
  min-width: 0;
}

.training-pagination-actions {
  gap: 6px;
}

.training-table-pagination .btn-sm {
  padding: 3px 9px;
  font-size: 11.5px;
}

.training-table-pagination .policy-page-size-control {
  height: 26px;
  padding: 0 8px;
  gap: 4px;
}

.training-table-pagination .policy-page-size-select {
  font-size: 11.5px;
  padding: 2px 4px;
}

.training-table-pagination .policy-page-size-label,
.training-table-pagination .policy-page-size-suffix {
  font-size: 11px;
}

/* Mobile cards: same centered, capped-width stack as Leads/Contacts */
@media (max-width: 640px) {

  #training-content-container .crm-mobile-cards,
  #assignment-report-cards.crm-mobile-cards,
  #my-training-list .crm-mobile-cards {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 0;
  }
}

/* ── Time Tracker mobile: let the timer bar wrap instead of overflowing
   its fixed 64px height over the entries list. Description input takes
   the first line; Project / billable / timer / START wrap below it. */
@media (max-width: 1024px) {
  .tt-bar {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }

  .tt-desc-input {
    flex: 1 1 100%;
    font-size: 14px;
    padding: 2px 0;
  }

  .tt-bar-right {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }

  .tt-timer-display {
    font-size: 17px;
    min-width: 84px;
  }

  .tt-start-btn {
    padding: 7px 16px;
  }
}

/* ── Time Tracker mobile layout ─────────────────────────────────────
   Same containment as desktop: the timer bar sits statically at the
   top (no sticky gap) and the entries list scrolls in its own area.
   Entry rows rewrap into two lines so nothing truncates awkwardly. */
@media (max-width: 1024px) {
  #page-time-tracker.page-view--flush {
    margin: -16px;
    /* .page-content mobile padding is 16px */
  }

  #page-time-tracker.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    overflow: hidden;
  }

  #page-time-tracker .tt-bar {
    position: static;
    flex-shrink: 0;
  }

  #page-time-tracker .tt-entries {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }
}

@media (max-width: 640px) {

  /* Entry rows: description on its own line, project/billable/time/
     duration flow beneath it. */
  .tt-entry {
    flex-wrap: wrap;
    padding: 10px 12px;
    row-gap: 6px;
    min-height: 0;
  }

  .tt-entry-desc {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
  }

  .tt-entry-proj {
    max-width: 48%;
  }

  .tt-entry-times {
    min-width: 0;
    text-align: left;
  }

  .tt-entry-dur {
    min-width: 0;
    margin-left: auto;
  }

  /* Touch has no hover — keep the row actions visible */
  .tt-entry-actions {
    opacity: 1;
  }

  .tt-day-header {
    padding: 8px 12px;
  }

  .tt-week-label {
    padding: 8px 2px 4px;
  }
}

/* ── Time Tracker mobile: kill the residual window scroll ───────────
   The page column is 100dvh-based but .main-wrapper's min-height:100vh
   left the window scrollable by the browser-chrome difference, letting
   the whole column (timer bar included) slide under the topbar and
   expose empty space. Entries scroll internally, so the window scroll
   is unnecessary here — lock it while this page is active. */
@media (max-width: 1024px) {

  html:has(#page-time-tracker.active),
  body:has(#page-time-tracker.active) {
    height: 100%;
    overflow: hidden;
  }
}

/* ── My Timesheet mobile: Export moves up to the date row ───────────
   The filter bar wraps on phones; reorder so row 1 = date + arrows +
   Export (right-aligned) and row 2 = Team/Project. Desktop keeps the
   single-row layout untouched. */
@media (max-width: 640px) {
  #mts-datepicker-wrap {
    order: 1;
  }

  #ts-prev-week {
    order: 2;
  }

  #ts-next-week {
    order: 3;
  }

  #mts-export-wrap {
    order: 4;
    margin-left: auto;
  }

  #mts-team-wrap {
    order: 5;
  }

  #mts-proj-wrap {
    order: 6;
  }

  /* Slimmer controls so the date row fits a phone width */
  #mts-daterange-btn {
    font-size: 12px;
    padding: 6px 8px;
  }

  #ts-prev-week,
  #ts-next-week {
    padding: 4px 8px !important;
    font-size: 14px !important;
  }

  #mts-export-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {

  /* The desktop right-align spacer would sort first (order:0) and eat
     the whole first row — Export uses margin-left:auto instead here. */
  #mts-filter-bar>div[style*="flex:1"] {
    display: none;
  }
}

/* ── Effort pages: no bottom dead-band ──────────────────────────────
   .page-content keeps a 64px bottom padding globally (legacy clearance
   for the viewport-fixed pagination bars). None of the effort-tracking
   pages use those anymore, so that padding just rendered as an empty
   strip below every tab — and made the viewport-locked Projects/Teams
   pages overshoot and scroll. Trim it to 20px for these pages. */
@media (min-width: 1025px) {

  .page-content:has(#page-log-hours.active),
  .page-content:has(#page-time-tracker.active),
  .page-content:has(#page-my-timesheet.active),
  .page-content:has(#page-projects.active),
  .page-content:has(#page-teams.active) {
    padding-bottom: 20px;
  }
}

/* ── Leads/Contacts mobile: header buttons sized to content ─────────
   The generic mobile rule stretches every header button with
   flex:1 1 auto, which blows up the Filters / Import / New buttons
   into wide blocks next to the compact view toggle. Keep them
   content-sized and consistent instead. */
@media (max-width: 1024px) {

  #page-crm-leads .page-header-actions .btn,
  #page-crm-contacts .page-header-actions .btn {
    flex: 0 0 auto !important;
    padding: 7px 10px;
    font-size: 12px;
  }

  #page-crm-contacts .crm-leads-search-row .crm-filter-toggle-btn {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* ── Leads mobile header: one row, search on the right ──────────────
   Buttons (Filters / Import / New / view-toggle) keep content size on
   the left; the search bar fills the remaining space in the SAME row
   (same pattern Contacts already uses). View toggle sizes from the
   same padding as its sibling buttons instead of a fixed 30px box. */
@media (max-width: 1024px) {
  #page-crm-leads .page-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }

  #page-crm-leads .page-header-actions {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  #page-crm-leads .crm-leads-search-row {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  #page-crm-leads .crm-leads-search-row .crm-page-search {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  #page-crm-leads .crm-view-toggle-mobile-btn {
    width: auto;
    height: auto;
    padding: 7px 10px;
  }

  #page-crm-leads .crm-view-toggle-mobile-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* ── Opportunities: search bar and header buttons share one height ── */
#page-crm-opportunities .page-header-actions .btn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

#page-crm-opportunities .crm-page-search input {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════
   BUG FIXES — missing and corrected CSS definitions
   ═══════════════════════════════════════════════════════════════ */

/* ── Fix 4: Skip-to-content link (accessibility) ──────────────
   Was undefined — rendered as an always-visible raw <a> tag.    */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Fix 6: Sidebar collapse toggle button ─────────────────────
   Was undefined — button rendered with no size, position or look. */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.sidebar.collapsed .sidebar-toggle {
  font-size: 1.125rem;
  /* arrow points right when collapsed */
}

/* ── Fix 7: Topbar and main-wrapper offset for collapsed sidebar */
.sidebar.collapsed~.main-wrapper {
  margin-left: 72px;
}

.sidebar.collapsed~.main-wrapper .topbar {
  left: 72px;
}

/* ── Fix 5: Notification dropdown — all classes were undefined ──
   Covers: .notif-dropdown, .notif-header, .notif-title,
   .notif-header-actions, .notif-chip, .notif-chip--active,
   .notif-mark-read, .notif-list, .notif-count-badge           */
.notif-dropdown {
  position: absolute;
  top: calc(var(--topbar-height) - 4px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  display: none;
  overflow: hidden;
}

.notif-dropdown.open {
  display: flex;
  flex-direction: column;
  animation: slideDown 150ms ease-out;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.notif-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.notif-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.notif-chip:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface);
}

/* Active state — replaces the removed inline styles */
.notif-chip--active {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: var(--color-primary);
}

.notif-mark-read {
  font-size: 0.75rem;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  white-space: nowrap;
}

.notif-mark-read:hover {
  background: var(--color-primary-light);
}

.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}

/* Notification badge counter on bell button */
.notif-count-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--color-surface);
  /* Hide when zero */
  line-height: 1;
}

/* ── Fix 9: Dashboard phase-2 shortcut cards grid ──────────────
   Class was used in HTML but never defined — cards stacked as block. */
.phase2-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .phase2-shortcut-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Fix 10: page-subtitle — used in Projects page, was undefined */
.page-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Fix 11: Modal title — CSS targeted h3, HTML uses h2/.modal-title */
.modal-header h2,
.modal-header h3,
.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

/* ── Fix 12: Responsive donut chart card (replaces hard-coded width:300px) */
.mts-donut-card {
  width: 300px;
  min-width: 240px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 20px;
}

@media (max-width: 640px) {
  .mts-donut-card {
    width: 100%;
  }
}

/* ── Fix 3 (companion): page-view--flush pulls flush edges via padding-tweak
   Log Hours uses class="page-view page-view--flush". The margin:-20px -24px
   was removed from #page-log-hours; instead we negate the page-content padding
   cleanly here without affecting sibling elements. */
.page-view--flush {
  margin: -20px -24px;
}

@media (max-width: 1024px) {
  .page-view--flush {
    margin: -24px -16px;
  }
}

/* ── Fix 8: CRM page-header — prevent forced column on tablet ──
   The global @media(max-width:1024px) rule turns every .page-header
   to flex-direction:column which breaks CRM pages (search + buttons
   should stay inline). Override for CRM page-headers specifically. */
#page-crm-leads .page-header,
#page-crm-contacts .page-header,
#page-crm-opportunities .page-header,
#page-crm-reports .page-header,
#page-crm-companies .page-header,
#page-crm-products .page-header {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ── Fix 19: notif chip active — already handled via .notif-chip--active above */

/* ── Fix 20: Date input height clipping in CRM filter groups ───
   The compact padding from .crm-filter-group .form-input clips
   browser-native date picker controls. Give them an explicit min-height. */
.crm-filter-group input[type="date"].form-input {
  min-height: 36px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ── Fix 18: (removed) the empty @media(max-width:768px) block that was at
   line 96-97 has been eliminated — no code change needed here as it was empty. */
/* ── Applied-filter chips (Leads / Contacts / Reports headers) ──────
   Rendered by renderCrmFilterChips(); each chip names one active filter
   and its × clears just that filter and reloads the table. */
.crm-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: -6px 0 12px;
  /* own row between the page header and the table */
}

.crm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  color: #3730a3;
  white-space: nowrap;
  max-width: 260px;
}

.crm-filter-chip b {
  font-weight: 600;
}

.crm-filter-chip-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #6366f1;
  padding: 0 2px;
  flex-shrink: 0;
}

.crm-filter-chip-x:hover {
  color: #312e81;
}

/* Reports: the chips row lives inside the sticky header block — give it
   breathing room without collapsing the sticky area when empty. */
#crm-reports-sticky-header .crm-filter-chips {
  margin: 0 0 8px;
}

/* ── Helpdesk: EasyMDE overrides inside ticket modal ───────────── */
.EasyMDEContainer .editor-toolbar {
  border-radius: 8px 8px 0 0;
  border-color: #e2e8f0;
  background: #f8fafc;
  opacity: 1;
}

.EasyMDEContainer .CodeMirror {
  border-radius: 0 0 8px 8px;
  border-color: #e2e8f0;
  font-family: inherit;
  font-size: 14px;
}

.EasyMDEContainer .CodeMirror-focused {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.EasyMDEContainer .editor-toolbar button.active, 
.EasyMDEContainer .editor-toolbar button:hover {
  background: #e2e8f0;
}

/* Ensure fullscreen editor stays above the modal */
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen,
.editor-preview-side {
  z-index: 1300 !important;
}

/* ── Helpdesk: rendered markdown in ticket table ───────────────────── */
.helpdesk-md-preview {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  max-width: 320px;
}

.helpdesk-md-preview p { margin: 0 0 4px; }
.helpdesk-md-preview p:last-child { margin-bottom: 0; }
.helpdesk-md-preview ul,
.helpdesk-md-preview ol { margin: 2px 0; padding-left: 18px; }
.helpdesk-md-preview li { margin: 1px 0; }
.helpdesk-md-preview h1,
.helpdesk-md-preview h2,
.helpdesk-md-preview h3 { font-size: 13px; font-weight: 600; margin: 4px 0 2px; }
.helpdesk-md-preview code {
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}
.helpdesk-md-preview pre {
  background: #f1f5f9;
  padding: 6px 8px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  margin: 4px 0;
}
.helpdesk-md-preview pre code { background: none; padding: 0; }
.helpdesk-md-preview blockquote {
  border-left: 3px solid #cbd5e1;
  padding-left: 8px;
  margin: 4px 0;
  color: #64748b;
}
.helpdesk-md-preview table {
  border-collapse: collapse;
  font-size: 12px;
  margin: 4px 0;
}
.helpdesk-md-preview th,
.helpdesk-md-preview td {
  border: 1px solid #e2e8f0;
  padding: 3px 6px;
}
.helpdesk-md-preview th { background: #f8fafc; font-weight: 600; }
.helpdesk-md-preview a { color: #4f46e5; text-decoration: underline; }
.helpdesk-md-preview img { max-width: 100%; border-radius: 4px; }