/* ============================================================================
   admin-extras.css — heavier, admin/staff-portal visual layer.
   Contents: work gallery, search palette, AI panel, analytics dashboard,
             schedule bento theme, service-forms bento, finance bento,
             clients/leads/staff bento panels, business switcher bento,
             calendar cell overflow, dark-mode polish for bentos.
   Generated from styles.css by scripts/split-styles-css.cjs on 2026-04-22T18:14:11.806Z.
   Loaded on admin.html, staff.html, client.html (for now) to guarantee
   visual parity with the pre-split site. Marketing / auth pages should NOT
   need this file — migrate them off once visually verified.
   ============================================================================ */

/* ============================================================
   WORK GALLERY
   ============================================================ */

/* Top bar */
.gallery-top-bar {
  margin-bottom: 1.5rem;
}
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.gallery-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: #1e293b;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.gallery-upload-btn:hover {
  background: #334155;
}
.gallery-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Filters */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.gallery-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.gallery-search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #94a3b8;
  pointer-events: none;
}
.gallery-search-input {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  font-size: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: #334155;
  outline: none;
  transition: border-color 0.15s;
}
.gallery-search-input:focus {
  border-color: #94a3b8;
}
.gallery-filter-select {
  padding: 0.5rem 0.625rem;
  font-size: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: #334155;
  outline: none;
  cursor: pointer;
}

/* Photo grid - uniform cards */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Photo card */
.gallery-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.gallery-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.gallery-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f1f5f9;
  line-height: 0;
}
.gallery-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.2s;
}
.gallery-card:hover .gallery-card-img {
  transform: scale(1.03);
}
.gallery-card-info {
  padding: 0.625rem 0.75rem;
}
.gallery-card-caption {
  font-size: 0.75rem;
  font-weight: 500;
  color: #334155;
  margin-bottom: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.gallery-card-uploader {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: #64748b;
}
.gallery-card-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #1e293b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 600;
  flex-shrink: 0;
}
.gallery-card-date {
  font-size: 0.625rem;
  color: #94a3b8;
  white-space: nowrap;
}
.gallery-card-delete {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  color: #ef4444;
}
.gallery-card:hover .gallery-card-delete {
  opacity: 1;
}
.gallery-card-delete:hover {
  background: #fef2f2;
}

/* Empty state */
.gallery-empty {
  text-align: center;
  padding: 4rem 2rem;
}

/* ============================================================
   GALLERY MODALS (upload, lightbox, confirm)
   ============================================================ */

/* Shared backdrop */
.gallery-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Upload panel */
.gallery-upload-panel {
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.gallery-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.gallery-modal-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s;
}
.gallery-modal-close:hover {
  color: #334155;
}
.gallery-upload-body {
  padding: 1.25rem;
}
.gallery-upload-footer {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid #f1f5f9;
}
.gallery-upload-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Dropzone */
.gallery-dropzone {
  border: 2px dashed #e2e8f0;
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gallery-dropzone:hover,
.gallery-dropzone-active {
  border-color: #94a3b8;
  background: #f8fafc;
}

/* Upload previews */
.gallery-upload-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.gallery-preview-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.gallery-preview-img-wrap {
  position: relative;
  border-radius: 0.375rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
  line-height: 0;
}
.gallery-preview-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.gallery-preview-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.gallery-preview-remove:hover {
  background: rgba(239,68,68,0.8);
}
.gallery-preview-caption {
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.625rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background: #fff;
  outline: none;
}

/* Progress bar */
.gallery-upload-progress {
  margin-bottom: 0.75rem;
}
.gallery-progress-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.gallery-progress-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 3px;
  transition: width 0.3s;
  width: 0%;
}

/* Buttons */
.gallery-btn-secondary {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.gallery-btn-secondary:hover {
  background: #e2e8f0;
}
.gallery-btn-danger {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.gallery-btn-danger:hover {
  background: #dc2626;
}
.gallery-btn-small {
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background: #1e293b;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}
.gallery-btn-secondary-small {
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  cursor: pointer;
}

/* Confirm dialog */
.gallery-confirm-panel {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}
.gallery-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.gallery-lightbox-img-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  min-height: 300px;
  max-height: 70vh;
  overflow: hidden;
}
.gallery-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 2;
}
.gallery-lightbox-nav:hover {
  background: rgba(255,255,255,0.3);
}
.gallery-lightbox-prev { left: 0.75rem; }
.gallery-lightbox-next { right: 0.75rem; }

.gallery-lightbox-info {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f1f5f9;
}
.gallery-lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.gallery-lightbox-caption {
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.5;
}
.gallery-lightbox-action {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: #f1f5f9;
  border: none;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gallery-lightbox-action:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.gallery-lightbox-action-danger:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* Caption edit */
.gallery-caption-edit {
  padding: 0.25rem 0;
}
.gallery-caption-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  outline: none;
  color: #334155;
}
.gallery-caption-input:focus {
  border-color: #94a3b8;
}

/* ============================================================
   GALLERY DARK MODE
   ============================================================ */

html.dark .gallery-card {
  background: #1e293b;
  border-color: #334155;
}
html.dark .gallery-card-caption {
  color: #e2e8f0;
}
html.dark .gallery-card-uploader {
  color: #94a3b8;
}
html.dark .gallery-card-date {
  color: #64748b;
}
html.dark .gallery-card-img-wrap {
  background: #0f172a;
}
html.dark .gallery-card-delete {
  background: rgba(30,41,59,0.9);
}
html.dark .gallery-card-delete:hover {
  background: rgba(127,29,29,0.5);
}

html.dark .gallery-search-input,
html.dark .gallery-filter-select {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
html.dark .gallery-search-input:focus,
html.dark .gallery-filter-select:focus {
  border-color: #0ea5e9;
}

html.dark .gallery-upload-panel,
html.dark .gallery-confirm-panel {
  background: #1e293b;
  border-color: #334155;
}
html.dark .gallery-upload-header {
  border-color: #334155;
}
html.dark .gallery-upload-footer {
  border-color: #334155;
}
html.dark .gallery-dropzone {
  border-color: #475569;
}
html.dark .gallery-dropzone:hover,
html.dark .gallery-dropzone-active {
  border-color: #64748b;
  background: #0f172a;
}
html.dark .gallery-preview-item {
  background: #0f172a;
  border-color: #334155;
}
html.dark .gallery-preview-caption {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}
html.dark .gallery-progress-bar {
  background: #334155;
}
html.dark .gallery-btn-secondary,
html.dark .gallery-btn-secondary-small {
  background: #334155;
  border-color: #475569;
  color: #cbd5e1;
}
html.dark .gallery-btn-secondary:hover,
html.dark .gallery-btn-secondary-small:hover {
  background: #475569;
}

html.dark .gallery-lightbox-content {
  background: #1e293b;
}
html.dark .gallery-lightbox-info {
  border-color: #334155;
}
html.dark .gallery-lightbox-caption {
  color: #e2e8f0;
}
html.dark .gallery-lightbox-action {
  background: #334155;
  color: #94a3b8;
}
html.dark .gallery-lightbox-action:hover {
  background: #475569;
  color: #e2e8f0;
}
html.dark .gallery-lightbox-action-danger:hover {
  background: rgba(127,29,29,0.4);
  color: #f87171;
}
html.dark .gallery-caption-input {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
html.dark .gallery-caption-input:focus {
  border-color: #0ea5e9;
}

html.dark .gallery-empty h3 {
  color: #94a3b8;
}
html.dark .gallery-empty p {
  color: #64748b;
}

/* ───────────────────────────────────────────────────────────────────────────
   SEARCH COMMAND PALETTE
   ─────────────────────────────────────────────────────────────────────────── */

/* Dropdown container */
#search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #0c0c0e;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -5px rgba(0, 0, 0, 0.2);
  max-height: 340px;
  overflow-y: auto;
  z-index: 100;
  padding: 4px 0;
}

#search-dropdown.hidden {
  display: none;
}

/* Scrollbar styling */
#search-dropdown::-webkit-scrollbar {
  width: 4px;
}
#search-dropdown::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 4px;
}
#search-dropdown::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Category labels */
.search-category-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 8px 12px 4px 12px;
  user-select: none;
}

/* Result item */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  border-radius: 6px;
  margin: 0 4px;
}
.search-result-item:hover,
.search-result-item.search-result-active {
  background-color: #1e1e21;
}

/* Result icon */
.search-result-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #94a3b8;
}

/* Result label */
.search-result-label {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category badge */
.search-result-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #1e1e21;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Empty state */
.search-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  color: #94a3b8;
  font-size: 12px;
}
.search-empty-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Ctrl+K hint on input */
#sidebar-search-wrap::after {
  content: 'Ctrl+K';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
  line-height: 1.4;
}

/* Hide hint when input has value */
#sidebar-search-wrap.has-value::after {
  display: none;
}


/* ── Dark Mode ─────────────────────────────────────────────────────────── */

html.dark #search-dropdown {
  background: #161618;
  border-color: #27272a;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 10px -5px rgba(0, 0, 0, 0.3);
}
html.dark #search-dropdown::-webkit-scrollbar-thumb {
  background: #3f3f46;
}
html.dark #search-dropdown::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

html.dark .search-category-label {
  color: #52525b;
}

html.dark .search-result-item:hover,
html.dark .search-result-item.search-result-active {
  background-color: #27272a;
}

html.dark .search-result-icon {
  color: #94a3b8;
}

html.dark .search-result-label {
  color: #e2e8f0;
}

html.dark .search-result-badge {
  color: #52525b;
  background: #0c0c0e;
}

html.dark .search-empty-state {
  color: #52525b;
}

html.dark #sidebar-search-wrap::after {
  color: #3f3f46;
  background: #0c0c0e;
  border-color: #27272a;
}

/* ───────────────────────────────────────────────────────────────────────────
   AI BUSINESS ASSISTANT PANEL
   ─────────────────────────────────────────────────────────────────────────── */

/* Panel container */
.ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.06);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-panel-open {
  transform: translateX(0);
}

/* Panel overlay */
#ai-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: opacity 0.2s ease;
}
#ai-panel-overlay.hidden {
  display: none;
}

/* Header */
.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.ai-panel-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-panel-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c4a6e;
  flex-shrink: 0;
}
.ai-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
}
.ai-panel-subtitle {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.2;
}
.ai-panel-header-actions {
  display: flex;
  gap: 4px;
}
.ai-panel-action-btn {
  padding: 6px;
  border-radius: 6px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-panel-action-btn:hover {
  background: #f1f5f9;
  color: #475569;
}

/* Messages area */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-messages::-webkit-scrollbar {
  width: 4px;
}
.ai-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Welcome message */
.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px 16px;
  gap: 12px;
}
.ai-welcome-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c4a6e;
}
.ai-welcome-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.ai-welcome-text {
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}
.ai-welcome-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}
.ai-suggestion {
  padding: 8px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.ai-suggestion:hover {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0369a1;
}

/* Message bubbles */
.ai-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: aiFadeIn 0.2s ease;
}
@keyframes aiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-message-user {
  flex-direction: row-reverse;
}
.ai-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-msg-avatar-user {
  background: #1e293b;
  color: #ffffff;
}
.ai-msg-avatar-ai {
  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
  color: #0c4a6e;
}
.ai-msg-content {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.65;
  max-width: 80%;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.ai-message-user .ai-msg-content {
  background: #1e293b;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.ai-message-ai .ai-msg-content {
  background: #f1f5f9;
  color: #334155;
  border-bottom-left-radius: 4px;
}

/* Typing indicator dots */
.ai-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px !important;
}
.ai-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: aiDotBounce 1.2s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.ai-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes aiDotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Input area */
.ai-input-area {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.ai-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.15s ease;
}
.ai-input-wrap:focus-within {
  border-color: #7dd3fc;
}
.ai-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
  resize: none;
  outline: none;
  padding: 6px 0;
  min-height: 20px;
  max-height: 100px;
  font-family: inherit;
}
.ai-input::placeholder {
  color: #94a3b8;
}
.ai-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
  color: #0c4a6e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.ai-send-btn:hover {
  opacity: 0.9;
}
.ai-send-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-input-hint {
  display: flex;
  justify-content: space-between;
  padding: 4px 4px 0;
  font-size: 9px;
  color: #94a3b8;
}

/* Settings toggle */
.ai-settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.ai-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  background: #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
  outline: none;
  border: none;
  flex-shrink: 0;
}
.ai-toggle-switch:checked {
  background: #6366f1;
}
.ai-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.ai-toggle-switch:checked::after {
  transform: translateX(16px);
}


/* ── Dark Mode ─────────────────────────────────────────────────────────── */

html.dark .ai-panel {
  background: #1e293b;
  border-color: #334155;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}
html.dark .ai-panel-header {
  border-color: #334155;
}
html.dark .ai-panel-title {
  color: #e2e8f0;
}
html.dark .ai-panel-action-btn:hover {
  background: #334155;
  color: #e2e8f0;
}
html.dark .ai-messages::-webkit-scrollbar-thumb {
  background: #475569;
}
html.dark .ai-welcome-title {
  color: #e2e8f0;
}
html.dark .ai-welcome-text {
  color: #94a3b8;
}
html.dark .ai-suggestion {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}
html.dark .ai-suggestion:hover {
  border-color: #6366f1;
  color: #a5b4fc;
  background: #1e293b;
}
html.dark .ai-message-user .ai-msg-content {
  background: #6366f1;
  color: #ffffff;
}
html.dark .ai-message-ai .ai-msg-content {
  background: #334155;
  color: #e2e8f0;
}
html.dark .ai-typing-dots span {
  background: #64748b;
}
html.dark .ai-input-area {
  border-color: #334155;
}
html.dark .ai-input-wrap {
  background: #0f172a;
  border-color: #334155;
}
html.dark .ai-input {
  color: #e2e8f0;
}
html.dark .ai-input::placeholder {
  color: #64748b;
}
html.dark .ai-toggle-switch {
  background: #475569;
}
html.dark .ai-toggle-switch:checked {
  background: #6366f1;
}
html.dark #ai-panel-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Responsive: smaller screens */
@media (max-width: 480px) {
  .ai-panel {
    width: 100vw;
  }
}

/* ============================================================================
   ANALYTICS DASHBOARD
   ============================================================================ */

/* Header */
.an-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.an-header-left { display: flex; flex-direction: column; gap: 2px; }
.an-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0; letter-spacing: -0.02em; }
.an-subtitle { font-size: 12px; color: #64748b; margin: 0; }
.an-header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.an-select {
  padding: 7px 30px 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  background: #fff;
  cursor: pointer;
  outline: none;
  appearance: auto;
}
.an-select:focus { border-color: #94a3b8; }
.an-custom-range { display: flex; align-items: center; gap: 6px; }
.an-date-input {
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #334155;
  background: #f8fafc;
  outline: none;
}
.an-date-sep { font-size: 11px; color: #94a3b8; }
.an-apply-btn {
  padding: 7px 14px;
  background: #0f172a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.an-apply-btn:hover { background: #1e293b; }
.an-refresh-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.an-refresh-btn:hover { background: #f1f5f9; color: #334155; }

/* Export Dropdown */
.an-export-wrap { position: relative; }
.an-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.an-export-btn:hover { background: #f1f5f9; }
.an-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 50;
  min-width: 180px;
  padding: 4px;
  animation: anFadeIn 0.15s ease;
}
.an-export-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}
.an-export-item:hover { background: #f1f5f9; }

/* Loader */
.an-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: #64748b;
  font-size: 13px;
}
.an-loader-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* KPI Strip */
.an-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.an-kpi-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(226,232,240,0.6);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.an-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.an-kpi-accent {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.an-kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.an-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}
.an-kpi-change {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.an-kpi-vs { color: #94a3b8; }
.an-trend-up { color: #10b981; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.an-trend-down { color: #ef4444; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }

/* Tab Navigation */
.an-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20px;
  overflow-x: auto;
}
.an-tab-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.an-tab-btn:hover { color: #334155; }
.an-tab-btn.active {
  color: #FF6B00;
  font-weight: 600;
  border-bottom-color: #FF6B00;
}
.an-tab-content { animation: anFadeIn 0.25s ease; }
@keyframes anFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.an-card {
  background: #fff;
  border: 1px solid rgba(226,232,240,0.6);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  margin-bottom: 16px;
}
.an-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 14px 0;
}

/* Grids */
.an-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 0; }
.an-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.an-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }

/* Chart Container */
.an-chart-container { height: 260px; position: relative; }
.an-chart-lg { height: 320px; }

/* Mini KPI (used in sub-tabs) */
.an-kpi-mini {
  position: relative;
  background: #fff;
  border: 1px solid rgba(226,232,240,0.6);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
}
.an-kpi-mini::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.an-kpi-mini-label {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.an-kpi-mini-value {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}
.an-kpi-mini-text { font-size: 14px; }

/* Tables */
.an-table-wrap { overflow-x: auto; }
.an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.an-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.an-table td {
  padding: 10px 12px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}
.an-table tbody tr:hover { background: #f8fafc; }
.an-table-total td { border-top: 2px solid #e2e8f0; background: #f8fafc; }

/* Badges */
.an-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.an-badge-completed { background: #dcfce7; color: #166534; }

/* Client cell */
.an-client-cell { display: flex; flex-direction: column; }
.an-client-name { font-weight: 600; color: #0f172a; }
.an-client-email { font-size: 11px; color: #94a3b8; }

/* Pagination */
.an-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
}
.an-page-info { font-size: 11px; color: #94a3b8; }
.an-page-btns { display: flex; gap: 6px; }
.an-page-btn {
  padding: 5px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.an-page-btn:hover { background: #f1f5f9; }

/* Empty State */
.an-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: #94a3b8;
  font-size: 13px;
}

/* Staff Leaderboard */
.an-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.an-leaderboard-row:last-child { border-bottom: none; }
.an-lb-rank { width: 36px; flex-shrink: 0; text-align: center; }
.an-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  background: #f1f5f9;
  color: #64748b;
}
.an-medal-gold { background: #fef3c7; color: #92400e; }
.an-medal-silver { background: #e2e8f0; color: #475569; }
.an-medal-bronze { background: #fed7aa; color: #9a3412; }
.an-lb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.an-lb-info { flex: 1; min-width: 0; }
.an-lb-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.an-lb-stats { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.an-lb-bar-wrap {
  width: 100px;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.an-lb-bar {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* AI Analyst Placeholder */
.an-ai-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  border-radius: 16px;
  border: 1px solid rgba(186,230,253,0.5);
  background: linear-gradient(180deg, rgba(240,249,255,0.6) 0%, rgba(255,255,255,0) 100%);
  overflow: hidden;
}
.an-ai-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(125,211,252,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.an-ai-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
  color: #0c4a6e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
}
.an-ai-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
  color: #0c4a6e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.an-ai-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}
.an-ai-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 0 24px 0;
}
.an-ai-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.an-ai-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  text-align: left;
}
.an-ai-feature svg { color: #0ea5e9; flex-shrink: 0; }

/* ---- DARK MODE ---- */
html.dark .an-title { color: #e2e8f0; }
html.dark .an-subtitle { color: #94a3b8; }
html.dark .an-select { background: #161618; color: #e2e8f0; border-color: #27272a; }
html.dark .an-date-input { background: #161618; color: #e2e8f0; border-color: #27272a; }
html.dark .an-apply-btn { background: #e2e8f0; color: #0c0c0e; }
html.dark .an-refresh-btn { background: #161618; border-color: #27272a; color: #94a3b8; }
html.dark .an-refresh-btn:hover { background: #27272a; color: #e2e8f0; }
html.dark .an-export-btn { background: #161618; border-color: #27272a; color: #e2e8f0; }
html.dark .an-export-btn:hover { background: #27272a; }
html.dark .an-export-menu { background: #161618; border-color: #27272a; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
html.dark .an-export-item { color: #e2e8f0; }
html.dark .an-export-item:hover { background: #27272a; }
html.dark .an-loader { color: #94a3b8; }
html.dark .an-loader-spinner { border-color: #27272a; border-top-color: #2563eb; }
html.dark .an-kpi-card { background: #161618; border-color: #27272a; }
html.dark .an-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
html.dark .an-kpi-label { color: #94a3b8; }
html.dark .an-kpi-value { color: #e2e8f0; }
html.dark .an-tabs { border-color: #27272a; }
html.dark .an-tab-btn { color: #94a3b8; }
html.dark .an-tab-btn:hover { color: #e2e8f0; }
html.dark .an-tab-btn.active { color: #FF8C33; border-bottom-color: #FF8C33; }
html.dark .an-card { background: #161618; border-color: #27272a; }
html.dark .an-card-title { color: #e2e8f0; }
html.dark .an-kpi-mini { background: #161618; border-color: #27272a; }
html.dark .an-kpi-mini-label { color: #94a3b8; }
html.dark .an-kpi-mini-value { color: #e2e8f0; }
html.dark .an-table th { color: #94a3b8; border-color: #27272a; }
html.dark .an-table td { color: #cbd5e1; border-color: rgba(39,39,42,0.5); }
html.dark .an-table tbody tr:hover { background: rgba(39,39,42,0.3); }
html.dark .an-table-total td { border-color: #3f3f46; background: rgba(39,39,42,0.3); }
html.dark .an-badge-completed { background: rgba(22,163,74,0.15); color: #4ade80; }
html.dark .an-client-name { color: #e2e8f0; }
html.dark .an-pagination { border-color: #27272a; }
html.dark .an-page-btn { background: #161618; border-color: #27272a; color: #e2e8f0; }
html.dark .an-page-btn:hover { background: #27272a; }
html.dark .an-empty-state { color: #64748b; }
html.dark .an-leaderboard-row { border-color: rgba(39,39,42,0.5); }
html.dark .an-lb-name { color: #e2e8f0; }
html.dark .an-lb-bar-wrap { background: #27272a; }
html.dark .an-medal { background: #27272a; color: #94a3b8; }
html.dark .an-medal-gold { background: rgba(251,191,36,0.15); color: #fbbf24; }
html.dark .an-medal-silver { background: rgba(148,163,184,0.15); color: #94a3b8; }
html.dark .an-medal-bronze { background: rgba(251,146,60,0.15); color: #fb923c; }
html.dark .an-ai-placeholder { border-color: rgba(125,211,252,0.2); background: linear-gradient(180deg, rgba(14,165,233,0.05) 0%, rgba(22,22,24,0) 100%); }
html.dark .an-ai-title { color: #e2e8f0; }
html.dark .an-ai-desc { color: #94a3b8; }
html.dark .an-ai-feature { background: #161618; border-color: #27272a; color: #cbd5e1; }

/* ---- LEARNING & MODULES DARK MODE ---- */

/* Card base */
html.dark .learning-category {
  background-color: #161618 !important;
  border-color: #27272a !important;
}

/* Category header band (all gradient variants) */
html.dark .learning-category [class*="bg-gradient-to-r"] {
  background: linear-gradient(to right, #1a2e4a 0%, #161618 100%) !important;
  border-color: #27272a !important;
}
/* Category title and sub-count text inside header band */
html.dark .learning-category [class*="bg-gradient-to-r"] h3,
html.dark .learning-category [class*="bg-gradient-to-r"] p {
  color: #e2e8f0 !important;
}
/* Icon circles in the category header */
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-emerald-100"],
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-blue-100"],
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-purple-100"],
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-orange-100"],
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-rose-100"],
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-cyan-100"],
html.dark .learning-category [class*="bg-gradient-to-r"] [class*="bg-indigo-100"] {
  background-color: rgba(255,255,255,0.12) !important;
}
html.dark .learning-category [class*="bg-gradient-to-r"] svg {
  color: #93c5fd !important;
}

/* Module row hover */
html.dark .learning-module:hover {
  background-color: #27272a !important;
}
/* Module title */
html.dark .learning-module .font-medium.text-gray-900,
html.dark .learning-module p.font-medium {
  color: #e2e8f0 !important;
}
/* Module description */
html.dark .learning-module .text-gray-500,
html.dark .learning-module p.text-gray-500 {
  color: #94a3b8 !important;
}
/* Module read-time */
html.dark .learning-module .text-gray-400,
html.dark .learning-module p.text-gray-400 {
  color: #64748b !important;
}

/* Module number/icon badge (inside cards) */
html.dark .learning-module [class*="bg-emerald-100"],
html.dark .learning-module [class*="bg-blue-100"],
html.dark .learning-module [class*="bg-purple-100"],
html.dark .learning-module [class*="bg-orange-100"],
html.dark .learning-module [class*="bg-rose-100"],
html.dark .learning-module [class*="bg-cyan-100"],
html.dark .learning-module [class*="bg-indigo-100"] {
  background-color: #334155 !important;
}
html.dark .learning-module svg {
  color: #93c5fd !important;
}

/* "Coming Soon" badge — replace amber with indigo/slate */
html.dark .learning-module .bg-amber-100 {
  background-color: #312e81 !important;
}
html.dark .learning-module .text-amber-700 {
  color: #a5b4fc !important;
}

/* Search input */
html.dark #learning-search-input {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html.dark #learning-search-input::placeholder {
  color: #64748b !important;
}

/* ---- CLIENTS PAGE — "Unregistered" BADGE DARK MODE ---- */
html.dark #section-clients .bg-amber-100 {
  background-color: #1e3a5f !important;
}
html.dark #section-clients .text-amber-700 {
  color: #93c5fd !important;
}

/* ---- STAFF PAYMENTS PAGE DARK MODE ---- */

/* Page title */
html.dark #section-payments > h2 {
  color: #e2e8f0 !important;
}

/* ── Summary KPI Cards ── */
/* Unpaid (orange) card */
html.dark #section-payments .bg-orange-50 {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #section-payments .text-orange-600 {
  color: #fb923c !important;
}
/* Awaiting (blue) card */
html.dark #section-payments .bg-blue-50 {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #section-payments .text-blue-600 {
  color: #60a5fa !important;
}
/* Paid (green) card */
html.dark #section-payments .bg-green-50 {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #section-payments .text-green-600 {
  color: #4ade80 !important;
}
/* All Time (slate) card */
html.dark #section-payments .bg-slate-50:not(.payment-filter-btn) {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #section-payments .text-slate-700 {
  color: #cbd5e1 !important;
}
/* Admin Revenue (purple) card */
html.dark #section-payments .bg-purple-50 {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #section-payments .text-purple-600 {
  color: #a78bfa !important;
}
/* Shared KPI label & sublabel colors */
html.dark #section-payments .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark #section-payments .text-slate-400 {
  color: #64748b !important;
}
html.dark #section-payments .border-slate-100\/50 {
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── Filter Tab Buttons ── */
html.dark #section-payments .payment-filter-btn {
  background-color: #1e1e21 !important;
  color: #94a3b8 !important;
}
html.dark #section-payments .payment-filter-btn.active {
  background-color: #e2e8f0 !important;
  color: #0c0c0e !important;
}

/* ── Admin Revenue Collapsible Section ── */
html.dark #company-revenue-section {
  background-color: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #company-revenue-section h4 {
  color: #c4b5fd !important;
}
html.dark #company-revenue-section .text-purple-600,
html.dark #company-revenue-section .text-purple-700 {
  color: #a78bfa !important;
}
/* Revenue list item cards */
html.dark #company-revenue-list .bg-white {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #company-revenue-list .text-gray-900 {
  color: #e2e8f0 !important;
}
html.dark #company-revenue-list .text-gray-600 {
  color: #94a3b8 !important;
}
html.dark #company-revenue-list .text-gray-500 {
  color: #64748b !important;
}

/* ── Payments List Container ── */
html.dark #section-payments > .bg-white {
  background-color: #161618 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark #section-payments .divide-slate-50 > div {
  border-color: rgba(255,255,255,0.06) !important;
}

/* Payment row hover */
html.dark #payments-list > div:hover {
  background-color: #1e1e21 !important;
}
/* Staff name & amount */
html.dark #payments-list .text-gray-900 {
  color: #e2e8f0 !important;
}
/* Service name */
html.dark #payments-list .text-gray-600 {
  color: #94a3b8 !important;
}
/* Date, rate, created text */
html.dark #payments-list .text-gray-500 {
  color: #64748b !important;
}

/* Status badges in dark mode */
html.dark #payments-list .bg-orange-100 {
  background-color: rgba(251, 146, 60, 0.15) !important;
}
html.dark #payments-list .text-orange-700 {
  color: #fb923c !important;
}
html.dark #payments-list .bg-blue-100 {
  background-color: rgba(96, 165, 250, 0.15) !important;
}
html.dark #payments-list .text-blue-700 {
  color: #60a5fa !important;
}
html.dark #payments-list .bg-green-100 {
  background-color: rgba(74, 222, 128, 0.15) !important;
}
html.dark #payments-list .text-green-700 {
  color: #4ade80 !important;
}

/* "Mark Paid" button */
html.dark #payments-list .bg-green-600 {
  background-color: #16a34a !important;
}

/* Loading & empty state */
html.dark #payments-loading .text-slate-600 {
  color: #94a3b8 !important;
}
html.dark #payments-empty .text-slate-600 {
  color: #94a3b8 !important;
}
html.dark #payments-empty .text-slate-400 {
  color: #64748b !important;
}

/* ---- ALL TOGGLE SWITCHES ---- */

/* LIGHT MODE — OFF state: clearly visible gray track */
input.sr-only.peer + div {
  background-color: #94a3b8 !important;
  border: 1px solid #94a3b8 !important;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* LIGHT MODE — ON state: blue (peer-checked:bg-blue-600 / bg-blue-500) */
input.sr-only.peer:checked + div.peer-checked\:bg-blue-600,
input.sr-only.peer:checked + div.peer-checked\:bg-blue-500 {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* LIGHT MODE — ON state: green (peer-checked:bg-green-500) */
input.sr-only.peer:checked + div.peer-checked\:bg-green-500 {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
/* LIGHT MODE — ON state: indigo (peer-checked:bg-indigo-600) */
input.sr-only.peer:checked + div.peer-checked\:bg-indigo-600 {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
/* LIGHT MODE — knob shadow */
input.sr-only.peer + div::after {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* Button-style toggles (Affects Price / Affects Time in form editor) - LIGHT */
button[role="switch"] {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
button[role="switch"][aria-checked="true"],
button[role="switch"].bg-deep-charcoal {
  background-color: #1e293b !important;
  border-color: #1e293b !important;
  box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.12);
}
button[role="switch"] span {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* DARK MODE — OFF state: visible track */
html.dark input.sr-only.peer + div {
  background-color: #3f3f46 !important;
  border: 1px solid #52525b !important;
}
/* DARK MODE — ON state: blue */
html.dark input.sr-only.peer:checked + div.peer-checked\:bg-blue-600,
html.dark input.sr-only.peer:checked + div.peer-checked\:bg-blue-500 {
  background-color: #3b82f6 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
/* DARK MODE — ON state: green */
html.dark input.sr-only.peer:checked + div.peer-checked\:bg-green-500 {
  background-color: #22c55e !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
/* DARK MODE — ON state: indigo */
html.dark input.sr-only.peer:checked + div.peer-checked\:bg-indigo-600 {
  background-color: #4f46e5 !important;
  border-color: #818cf8 !important;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}
/* DARK MODE — Knob: subtle border when OFF */
html.dark input.sr-only.peer + div::after {
  border-color: #52525b !important;
}
/* DARK MODE — Knob: white border when ON */
html.dark input.sr-only.peer:checked + div::after {
  border-color: white !important;
}
/* Button-style toggles - DARK */
html.dark button[role="switch"] {
  background-color: #3f3f46 !important;
  border-color: #52525b !important;
}
html.dark button[role="switch"][aria-checked="true"],
html.dark button[role="switch"].bg-deep-charcoal {
  background-color: #3b82f6 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* ── TIME SLOT PICKER & SCHEDULING ── */
html.dark #timeslot-picker-modal > div:nth-child(2) > div,
html.dark #staff-conflict-modal > div:nth-child(2) > div,
html.dark #force-add-modal > div:nth-child(2) > div {
  background: #161618;
  color: #e2e8f0;
}
html.dark #timeslot-picker-modal h3,
html.dark #staff-conflict-modal h3,
html.dark #force-add-modal h3 {
  color: #f1f5f9;
}
html.dark #timeslot-picker-modal .timeslot-available {
  background: #0f3a2a !important;
  border-color: #166534 !important;
}
html.dark #timeslot-picker-modal .timeslot-available span {
  color: #86efac !important;
}
html.dark #timeslot-picker-modal .timeslot-occupied {
  background: #3b2610 !important;
  border-color: #92400e !important;
}
html.dark #timeslot-picker-modal .timeslot-disabled {
  background: #27272a !important;
  border-color: #3f3f46 !important;
}
html.dark .bh-row {
  background: #27272a !important;
}
html.dark .bh-row span {
  color: #cbd5e1 !important;
}
html.dark .bh-row input[type="time"] {
  background: #0c0c0e;
  color: #e2e8f0;
  border-color: #3f3f46;
}
html.dark #staff-conflict-details {
  background: #3b2610 !important;
  border-color: #92400e !important;
  color: #fbbf24 !important;
}
html.dark #force-add-details {
  background: #3b1010 !important;
  border-color: #991b1b !important;
  color: #fca5a5 !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .an-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .an-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .an-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .an-grid-2 { grid-template-columns: 1fr; }
  .an-grid-3 { grid-template-columns: 1fr; }
  .an-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .an-header { flex-direction: column; align-items: flex-start; }
  .an-header-right { width: 100%; flex-wrap: wrap; }
  .an-lb-bar-wrap { display: none; }
}
@media (max-width: 480px) {
  .an-kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .an-grid-4 { grid-template-columns: 1fr; }
  .an-kpi-value { font-size: 18px; }
  .an-tabs { gap: 0; }
  .an-tab-btn { padding: 8px 12px; font-size: 12px; }
}

/* ============================================================================
   Grid Background – All Admin Portal Sections
   ============================================================================ */
.section-content {
  position: relative;
  min-height: calc(100vh - 64px);
}
.section-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.section-content > * {
  position: relative;
  z-index: 1;
}

html.dark .section-content::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULE "BENTO" THEME — EXPERIMENTAL RESTYLE (scoped to #section-schedule)
   ───────────────────────────────────────────────────────────────────────────
   UI-only overrides — no HTML / JS changes. Delete this entire block to
   revert the Schedule page to its original look.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bento-purple-50: #f3f0ff;
  --bento-purple-100: #e9e3ff;
  --bento-purple-200: #d9cfff;
  --bento-purple-400: #9c87f5;
  --bento-purple-500: #7c65e6;
  --bento-purple-600: #6a51d8;
  --bento-surface: #fafaf7;
  --bento-card-border: #eceae4;
  --bento-text-muted: #8b8a99;
}

/* ── Outer surface + spacing ────────────────────────────────────────────── */
#section-schedule {
  background: var(--bento-surface);
  padding: 20px;
  border-radius: 22px;
  margin: -16px -8px 0;
}
@media (max-width: 768px) {
  #section-schedule { margin: 0; padding: 12px; border-radius: 16px; }
}

/* Page heading */
#section-schedule > h2.text-lg {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a1a24 !important;
}

/* ── Stat cards → colorful bento chips ──────────────────────────────────── */
#section-schedule .metric-card {
  background: #ffffff !important;
  border: 1px solid var(--bento-card-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.04) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
  position: relative;
  overflow: hidden;
}
#section-schedule .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(80, 70, 140, 0.25) !important;
}
#section-schedule .metric-card > div:first-child {
  align-items: flex-start;
}

/* Wrap the icon in a colored chip */
#section-schedule .metric-card svg {
  width: 18px !important;
  height: 18px !important;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 14px;
  background: var(--bento-purple-100);
  color: var(--bento-purple-600) !important;
  stroke-width: 1.75 !important;
}
/* Revenue (first card) — emerald chip like image's "available" */
#section-schedule .metric-card:nth-child(1) svg {
  background: #dcfce7; color: #059669 !important;
}
#section-schedule .metric-card:nth-child(2) svg {
  background: #fff4e2; color: #e8893a !important;
}
#section-schedule .metric-card:nth-child(3) svg {
  background: #dbeafe; color: #2563eb !important;
}
#section-schedule .metric-card:nth-child(4) svg {
  background: #ede9fe; color: #6a51d8 !important;
}
#section-schedule .metric-card:nth-child(5) svg {
  background: #dcfce7; color: #059669 !important;
}

/* Card label + number */
#section-schedule .metric-card p.uppercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
}
#section-schedule .metric-card p.font-bold {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bento-text-muted) !important;
  letter-spacing: 0 !important;
  margin-top: 2px;
}
/* Revenue card shows the number big */
#section-schedule .metric-card:nth-child(1) p.font-bold {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.02em !important;
}

/* ── Recent Bookings card ──────────────────────────────────────────────── */
#section-schedule > .bg-white.rounded-2xl,
#section-schedule #mobile-bookings-list,
#section-schedule #day-timeline-section,
#section-schedule #day-view-list-card {
  background: #ffffff !important;
  border: 1px solid var(--bento-card-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.04) !important;
}

/* Filter select pill */
#section-schedule #filter-status {
  border-radius: 999px !important;
  border-color: var(--bento-card-border) !important;
  background: #faf9f5 !important;
  padding: 6px 28px 6px 14px !important;
  font-weight: 500 !important;
}
#section-schedule #filter-status:focus {
  outline: none;
  border-color: var(--bento-purple-400) !important;
  box-shadow: 0 0 0 3px var(--bento-purple-100) !important;
}
#section-schedule button[onclick="loadBookings()"] {
  color: var(--bento-purple-600) !important;
}

/* ── Calendar header + nav buttons ─────────────────────────────────────── */
#section-schedule #calendar-month,
#section-schedule #mobile-calendar-month {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: #1a1a24 !important;
}
#section-schedule button[onclick="goToToday()"] {
  background: var(--bento-purple-100) !important;
  color: var(--bento-purple-600) !important;
}
#section-schedule button[onclick="goToToday()"]:hover {
  background: var(--bento-purple-200) !important;
}

/* ── Calendar grid cells ───────────────────────────────────────────────── */
#section-schedule #calendar-grid > div {
  border-radius: 14px !important;
  border-color: var(--bento-card-border) !important;
}
/* Disabled / padding cells: subtle diagonal hatch like the reference */
#section-schedule #calendar-grid > div:empty,
#section-schedule #calendar-grid > div.bg-slate-50\/30 {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 6px,
    rgba(156, 135, 245, 0.07) 6px,
    rgba(156, 135, 245, 0.07) 7px
  ) !important;
  background-color: #ffffff !important;
  border-color: transparent !important;
}
/* Past days: lighter hatch */
#section-schedule #calendar-grid > div.bg-slate-50\/50 {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 6px,
    rgba(180, 180, 200, 0.08) 6px,
    rgba(180, 180, 200, 0.08) 7px
  ) !important;
  background-color: #fcfbf8 !important;
}
/* Today: purple tint (replaces orange) */
#section-schedule #calendar-grid > div.bg-orange-50 {
  background: var(--bento-purple-50) !important;
  border: 1px solid var(--bento-purple-200) !important;
  box-shadow: inset 0 0 0 1px var(--bento-purple-200);
}
#section-schedule #calendar-grid > div.bg-orange-50 .text-\[\#FF6B00\] {
  color: var(--bento-purple-600) !important;
}
/* Selected day: deeper purple fill */
#section-schedule #calendar-grid > div.bg-blue-50 {
  background: var(--bento-purple-100) !important;
  border: 1px solid var(--bento-purple-400) !important;
  box-shadow: inset 0 0 0 1px var(--bento-purple-400);
}
#section-schedule #calendar-grid > div.bg-blue-50 .text-blue-600 {
  color: var(--bento-purple-600) !important;
}
/* Weekday header row: softer */
#section-schedule .grid-cols-7 > .text-slate-300 {
  color: #b4b2bf !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

/* ── Booking event pills inside calendar cells → RIBBON / BANNER look ──── */
#section-schedule #calendar-grid [onclick^="viewBookingDetails"] {
  position: relative;
  padding: 3px 11px 3px 7px !important;
  border-radius: 3px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  /* Right-flag notch — banner style */
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
  transition: transform 140ms ease, filter 140ms ease;
  overflow: hidden !important;
}
#section-schedule #calendar-grid [onclick^="viewBookingDetails"]:hover {
  transform: translateX(1px);
  filter: brightness(1.05);
}
/* Per-status banner gradients */
#section-schedule #calendar-grid .bg-\[\#FF6B00\] { background: linear-gradient(180deg, #ff8c1a, #f97316) !important; }
#section-schedule #calendar-grid .bg-\[\#FF6B00\]:hover { background: linear-gradient(180deg, #f97316, #ea580c) !important; }
#section-schedule #calendar-grid .bg-blue-500 { background: linear-gradient(180deg, #60a5fa, #3b82f6) !important; }
#section-schedule #calendar-grid .bg-indigo-500 { background: linear-gradient(180deg, #8b73e8, var(--bento-purple-600)) !important; }
#section-schedule #calendar-grid .bg-orange-500 { background: linear-gradient(180deg, #fb923c, #f97316) !important; }
#section-schedule #calendar-grid .bg-emerald-500 { background: linear-gradient(180deg, #34d399, #10b981) !important; }

/* Legend dots recolored */
#section-schedule .bg-\[\#FF6B00\].rounded-full { background: #e8893a !important; }
#section-schedule .bg-blue-500.rounded-full { background: #5b8def !important; }
#section-schedule .bg-indigo-500.rounded-full { background: var(--bento-purple-500) !important; }
#section-schedule .bg-emerald-500.rounded-full { background: #34c38f !important; }

/* ── Day timeline card ─────────────────────────────────────────────────── */
#section-schedule #day-view-title {
  color: #1a1a24 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
#section-schedule #timeline-nav-pill {
  background: #f5f3ee !important;
  border-radius: 12px !important;
}
#section-schedule #timeline-nav-pill button[style*="color:#FF6B00"] {
  background: #ffffff !important;
  color: var(--bento-purple-600) !important;
}

/* Day-view table header */
#section-schedule #day-view-table-header {
  background: #faf9f5;
  color: #8b8a99 !important;
}

/* Status pills (keep existing data-status colors but soften) */
#section-schedule .rounded-full.bg-orange-100 { background: #fff4e2 !important; color: #b6661c !important; }
#section-schedule .rounded-full.bg-blue-100 { background: #e5edff !important; color: #3150a8 !important; }
#section-schedule .rounded-full.bg-indigo-100 { background: #ede9fe !important; color: var(--bento-purple-600) !important; }
#section-schedule .rounded-full.bg-emerald-100 { background: #d3f5e4 !important; color: #15794b !important; }
#section-schedule .rounded-full.bg-red-100 { background: #fde2e2 !important; color: #9b2c2c !important; }

/* ── Unified Live Jobs banner ───────────────────────────────────────────
   One banner, three row variants that swap based on booking phase:
     • data-live-variant="scheduled" — in window, no clock-in   (violet)
     • data-live-variant="live"      — in window + clocked in   (green)
     • data-live-variant="clockin"   — clocked in outside window (blue)
   ----------------------------------------------------------------------- */
#section-schedule #live-jobs-banner > div {
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%) !important;
  border: 1px solid #c4b5fd !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 2px rgba(124, 101, 230, 0.08),
    0 8px 24px -14px rgba(124, 101, 230, 0.25) !important;
}

/* Shared row shell — depth + hover lift, colors set per-variant below */
#section-schedule #live-jobs-banner [data-live-job] {
  border: 1px solid rgba(124, 101, 230, 0.18) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}
#section-schedule #live-jobs-banner [data-live-job]:hover {
  transform: translateY(-1px);
}

/* Scheduled — violet (default) */
#section-schedule #live-jobs-banner [data-live-variant="scheduled"] {
  border-color: rgba(124, 101, 230, 0.22) !important;
}
#section-schedule #live-jobs-banner [data-live-variant="scheduled"]:hover {
  box-shadow: 0 4px 12px -6px rgba(124, 101, 230, 0.35) !important;
}

/* Live — green (clock-in + in window) */
#section-schedule #live-jobs-banner [data-live-variant="live"] {
  border-color: rgba(34, 197, 94, 0.35) !important;
  background: linear-gradient(180deg, #ffffff, #f0fdf4) !important;
  box-shadow: inset 3px 0 0 0 #22c55e, 0 1px 2px rgba(34, 197, 94, 0.05);
}
#section-schedule #live-jobs-banner [data-live-variant="live"]:hover {
  box-shadow: inset 3px 0 0 0 #16a34a, 0 4px 12px -6px rgba(34, 197, 94, 0.35) !important;
}

/* Clocked in — blue (active entry, outside the scheduled window) */
#section-schedule #live-jobs-banner [data-live-variant="clockin"] {
  border-color: rgba(59, 130, 246, 0.35) !important;
  background: linear-gradient(180deg, #ffffff, #eff6ff) !important;
  box-shadow: inset 3px 0 0 0 #3b82f6, 0 1px 2px rgba(59, 130, 246, 0.05);
}
#section-schedule #live-jobs-banner [data-live-variant="clockin"]:hover {
  box-shadow: inset 3px 0 0 0 #2563eb, 0 4px 12px -6px rgba(59, 130, 246, 0.35) !important;
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
html.dark #section-schedule #live-jobs-banner > div {
  background: linear-gradient(135deg, rgba(124, 101, 230, 0.14) 0%, rgba(99, 102, 241, 0.10) 100%) !important;
  border-color: rgba(124, 101, 230, 0.35) !important;
  box-shadow: none !important;
}
html.dark #section-schedule #live-jobs-banner h3 { color: #ddd6fe !important; }
html.dark #section-schedule #live-jobs-banner [data-live-job] {
  background: #1c1b22 !important;
}
html.dark #section-schedule #live-jobs-banner [data-live-job] p.text-gray-900 { color: #f1f5f9 !important; }
html.dark #section-schedule #live-jobs-banner [data-live-job] p.text-gray-500 { color: #a1a1aa !important; }

html.dark #section-schedule #live-jobs-banner [data-live-variant="scheduled"] {
  border-color: rgba(124, 101, 230, 0.35) !important;
}
html.dark #section-schedule #live-jobs-banner [data-live-variant="scheduled"]:hover {
  background: rgba(124, 101, 230, 0.12) !important;
}

html.dark #section-schedule #live-jobs-banner [data-live-variant="live"] {
  background: linear-gradient(180deg, #1c1b22, rgba(34, 197, 94, 0.10)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}
html.dark #section-schedule #live-jobs-banner [data-live-variant="live"]:hover {
  background: rgba(34, 197, 94, 0.12) !important;
}

html.dark #section-schedule #live-jobs-banner [data-live-variant="clockin"] {
  background: linear-gradient(180deg, #1c1b22, rgba(59, 130, 246, 0.10)) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}
html.dark #section-schedule #live-jobs-banner [data-live-variant="clockin"]:hover {
  background: rgba(59, 130, 246, 0.12) !important;
}

/* ── Dark mode: keep bento feel without fighting dark palette ─────────── */
html.dark #section-schedule {
  background: #141319 !important;
}
html.dark #section-schedule .metric-card,
html.dark #section-schedule > .bg-white.rounded-2xl,
html.dark #section-schedule #mobile-bookings-list,
html.dark #section-schedule #day-timeline-section,
html.dark #section-schedule #day-view-list-card {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
  box-shadow: none !important;
}
html.dark #section-schedule .metric-card p.uppercase,
html.dark #section-schedule #calendar-month,
html.dark #section-schedule #day-view-title,
html.dark #section-schedule > h2.text-lg {
  color: #f1f5f9 !important;
}
html.dark #section-schedule .metric-card:nth-child(1) p.font-bold {
  color: #f1f5f9 !important;
}
html.dark #section-schedule #calendar-grid > div {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-schedule #calendar-grid > div:empty,
html.dark #section-schedule #calendar-grid > div.bg-slate-50\/30,
html.dark #section-schedule #calendar-grid > div.bg-slate-50\/50 {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 6px,
    rgba(156, 135, 245, 0.06) 6px,
    rgba(156, 135, 245, 0.06) 7px
  ) !important;
  background-color: #141319 !important;
}
html.dark #section-schedule #calendar-grid > div.bg-orange-50 {
  background: rgba(124, 101, 230, 0.12) !important;
  border-color: rgba(124, 101, 230, 0.4) !important;
}
html.dark #section-schedule #calendar-grid > div.bg-blue-50 {
  background: rgba(124, 101, 230, 0.22) !important;
  border-color: var(--bento-purple-400) !important;
}

/* ── Recent Bookings → clean white list with colored icon tiles ────────── */
#section-schedule #bookings-list {
  gap: 0 !important;
  max-height: 520px !important;
  background: #ffffff;
  border: 1px solid #f1efe5;
  border-radius: 14px;
  padding: 2px 0;
  overflow-y: auto;
}
#section-schedule #bookings-list > div {
  flex-shrink: 1 !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 14px 14px 14px 64px !important;
  position: relative;
  box-shadow: inset 0 -1px 0 #f1efe5;
  transition: background 140ms ease !important;
}
#section-schedule #bookings-list > div:last-child {
  box-shadow: none;
}
#section-schedule #bookings-list > div:hover {
  background: #fafaf7 !important;
}
/* Neutralise the old left border accent */
#section-schedule #bookings-list > div[class*="border-l-"] {
  border-left-width: 0 !important;
}

/* Colored rounded-square icon tile on the left */
#section-schedule #bookings-list > div::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: #94a3b8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  box-shadow:
    0 2px 6px -2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Pending → amber clock */
#section-schedule #bookings-list > div.border-l-\[\#FF6B00\]::before {
  background-color: #f59e0b;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
}
/* Assigned → blue arrow */
#section-schedule #bookings-list > div.border-l-blue-500::before {
  background-color: #3b82f6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>");
}
/* Accepted → indigo check */
#section-schedule #bookings-list > div.border-l-indigo-500::before {
  background-color: #6366f1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
/* In progress → orange spinner/info */
#section-schedule #bookings-list > div.border-l-orange-500::before {
  background-color: #f97316;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9'/><polyline points='3 4 3 12 11 12'/></svg>");
}
/* Completed → emerald solid check */
#section-schedule #bookings-list > div.border-l-emerald-500::before {
  background-color: #10b981;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
/* Cancelled → grey X */
#section-schedule #bookings-list > div.border-l-gray-500::before {
  background-color: #94a3b8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='6' y1='18' x2='18' y2='6'/></svg>");
}

/* Typography inside each row */
#section-schedule #bookings-list > div .text-xs.font-medium.text-slate-400 {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
}
#section-schedule #bookings-list > div p.font-medium {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.005em !important;
  margin-top: 2px;
}
#section-schedule #bookings-list > div p.text-xs.text-slate-500 {
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-top: 1px;
}
#section-schedule #bookings-list > div .text-\[10px\] {
  font-size: 10px !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
}

/* Status pill in the top-right of each row → subtle, pro */
#section-schedule #bookings-list > div .text-\[10px\].rounded-full {
  font-size: 9.5px !important;
  font-weight: 500 !important;
  padding: 3px 9px !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
  border-radius: 999px !important;
}

/* Custom scrollbar */
#section-schedule #bookings-list::-webkit-scrollbar { width: 6px; }
#section-schedule #bookings-list::-webkit-scrollbar-thumb { background: #e5e1d2; border-radius: 3px; }
#section-schedule #bookings-list::-webkit-scrollbar-thumb:hover { background: #d4d0c0; }
/* Custom scrollbar for the right rail */
#section-schedule #bookings-list::-webkit-scrollbar { width: 6px; }
#section-schedule #bookings-list::-webkit-scrollbar-track { background: transparent; }
#section-schedule #bookings-list::-webkit-scrollbar-thumb {
  background: #d9cfff; border-radius: 4px;
}
#section-schedule #bookings-list::-webkit-scrollbar-thumb:hover { background: #9c87f5; }

/* Smaller calendar cells (since calendar is now 2/3 width) */
#section-schedule #calendar-grid > div {
  min-height: 72px !important;
  padding: 6px !important;
}
@media (min-width: 1200px) {
  #section-schedule #calendar-grid > div { min-height: 90px !important; }
}
#section-schedule #calendar-grid .text-sm.font-bold {
  font-size: 12px !important;
}

/* ── Day timeline + Booking details → match reference image ───────────── */
/* ── Today's Schedule (timeline) + Booking Details table — reference-match ─ */
#section-schedule #day-timeline-section,
#section-schedule #day-view-list-card {
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid #eceadf !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.03) !important;
}

/* ─── Today's Schedule header polish ─── */
#section-schedule #day-timeline-section > .px-6.py-5 {
  padding: 18px 22px !important;
  border-bottom: 1px solid #f1efe5 !important;
}
#section-schedule #day-timeline-section h3#day-view-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.01em !important;
}
#section-schedule #day-timeline-section #timeline-date-label {
  font-size: 12px !important;
  color: #8b8a99 !important;
  margin-top: 2px !important;
}
/* Count pill ("1 booking") */
#section-schedule #day-view-count {
  background: #ede9fe !important;
  color: var(--bento-purple-600) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
}
/* Today nav pill */
#section-schedule #timeline-nav-pill {
  background: #f8f6ec !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}
#section-schedule #timeline-nav-pill > button:nth-child(2) {
  background: #ffffff !important;
  color: var(--bento-purple-600) !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.08) !important;
}

/* Timeline grid + event blocks: crisper */
#section-schedule #day-timeline-scroll {
  background: #ffffff !important;
  border-top-color: #f1efe5 !important;
}
#section-schedule #day-timeline-blocks > div,
#section-schedule #day-timeline-blocks > a {
  border-radius: 8px !important;
  border-left-width: 3px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.05) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
#section-schedule #day-timeline-blocks > div:hover,
#section-schedule #day-timeline-blocks > a:hover {
  transform: translateX(1px);
  box-shadow: 0 4px 10px -4px rgba(15, 15, 30, 0.12) !important;
}
/* Force readable text colours inside timeline blocks (light mode).
   Target only the Tailwind slate-text classes so the inline-styled time
   range (which uses status-coloured inline `style="color:..."`) is
   preserved. */
#section-schedule #day-timeline-blocks p.text-slate-800 {
  color: #1e293b !important;
}
#section-schedule #day-timeline-blocks p.text-slate-500 {
  color: #64748b !important;
}
#section-schedule #day-timeline-blocks p.text-slate-400 {
  color: #94a3b8 !important;
}
/* Timeline hour labels */
#section-schedule #day-timeline-labels span {
  color: #64748b !important;
  font-weight: 500 !important;
}

/* ─── Booking Details card: modern table layout ─── */
#section-schedule #day-view-list-card {
  margin-top: 18px !important;
}

/* Card top strip → title + (future filters) row */
#section-schedule #day-view-list-card > div:first-child {
  background: #ffffff !important;
  border-bottom: 1px solid #f1efe5 !important;
  padding: 16px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#section-schedule #day-view-list-card > div:first-child h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.01em;
}
/* Decorative filter-icon chip on the right of the title (pure CSS) */
#section-schedule #day-view-list-card > div:first-child::after {
  content: '';
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid #eceadf;
  background: #ffffff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='8' x2='20' y2='8'/><line x1='7' y1='14' x2='17' y2='14'/><line x1='10' y1='20' x2='14' y2='20'/></svg>")
    center / 16px 16px no-repeat;
}

/* Column header row → clean white with bold column titles */
#section-schedule #day-view-table-header {
  background: #ffffff !important;
  padding: 12px 22px !important;
  border-bottom: 1px solid #f1efe5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11.5px !important;
  color: #1a1a24 !important;
  font-weight: 700 !important;
}
#section-schedule #day-view-table-header > div {
  font-weight: 700 !important;
  color: #1a1a24 !important;
  letter-spacing: 0.04em !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
}

/* Table rows: generous padding, clean dividers */
#section-schedule #day-view-list > div {
  padding: 18px 22px !important;
  border-bottom: 1px solid #f4f2ed !important;
  transition: background 140ms ease !important;
}
#section-schedule #day-view-list > div:hover {
  background: #faf9f5 !important;
}
#section-schedule #day-view-list > div:last-child {
  border-bottom: none !important;
}

/* Customer avatar → purple-tinted circle (keeps initials) */
#section-schedule #day-view-list .w-9.h-9.rounded-full {
  width: 36px !important; height: 36px !important;
  background: linear-gradient(135deg, #ede9fe 0%, #d8cfff 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(106, 81, 216, 0.12);
}
#section-schedule #day-view-list .w-9.h-9.rounded-full span {
  color: var(--bento-purple-600) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* ── Status badge → circle-icon + label (like reference) ── */
#section-schedule #day-view-list .inline-flex.rounded-full {
  padding: 5px 12px 5px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
  gap: 7px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  position: relative;
}
/* Coloured round icon prefix (white glyph inside filled circle) */
#section-schedule #day-view-list .inline-flex.rounded-full::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  display: inline-block;
  flex-shrink: 0;
  opacity: 1;
  margin-right: 0;
}

/* Status colour variants — scoped to the pill span ONLY
   (previously matched Tailwind's hover:bg-slate-50 on rows) */
#section-schedule #day-view-list span.inline-flex.rounded-full.bg-orange-50 {
  background: #fff3e4 !important;
  color: #c86a1c !important;
  border-color: transparent !important;
}
#section-schedule #day-view-list span.inline-flex.rounded-full.bg-orange-50::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='12 7 12 12 15 14'/></svg>");
}

#section-schedule #day-view-list span.inline-flex.rounded-full.bg-blue-50 {
  background: #e3edfc !important;
  color: #2a4ba6 !important;
  border-color: transparent !important;
}
#section-schedule #day-view-list span.inline-flex.rounded-full.bg-blue-50::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>");
}

#section-schedule #day-view-list span.inline-flex.rounded-full.bg-indigo-50 {
  background: #ede9fe !important;
  color: var(--bento-purple-600) !important;
  border-color: transparent !important;
}
#section-schedule #day-view-list span.inline-flex.rounded-full.bg-indigo-50::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

#section-schedule #day-view-list span.inline-flex.rounded-full.bg-emerald-50 {
  background: #d7f4e5 !important;
  color: #1a7a4f !important;
  border-color: transparent !important;
}
#section-schedule #day-view-list span.inline-flex.rounded-full.bg-emerald-50::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

#section-schedule #day-view-list span.inline-flex.rounded-full.bg-slate-50 {
  background: #fde2e2 !important;
  color: #b91c1c !important;
  border-color: transparent !important;
}
#section-schedule #day-view-list span.inline-flex.rounded-full.bg-slate-50::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='6' y1='18' x2='18' y2='6'/></svg>");
}

/* Typography per column */
#section-schedule #day-view-list .col-span-3.text-slate-600 {
  color: #8b8a99 !important;
  font-size: 13px !important;
}
#section-schedule #day-view-list .col-span-2.text-slate-600 {
  color: #1a1a24 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
#section-schedule #day-view-list .col-span-4 .text-slate-900 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.005em;
}

/* Actions column: ellipsis in a bordered rounded button */
#section-schedule #day-view-list .col-span-1 > div.p-1\.5 {
  padding: 6px !important;
  border: 1px solid #eceadf !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  transition: border-color 140ms ease, background 140ms ease !important;
}
#section-schedule #day-view-list .col-span-1 > div.p-1\.5:hover {
  border-color: #cbc7bd !important;
  background: #faf9f5 !important;
}
#section-schedule #day-view-list .col-span-1 > div.p-1\.5 svg {
  width: 16px !important;
  height: 16px !important;
  color: #8b8a99 !important;
}

/* Dark-mode tweaks for the new pieces */
html.dark #section-schedule #bookings-list > div {
  background: #1c1b22 !important; border-color: #2b2a33 !important;
}
html.dark #section-schedule #bookings-list > div:hover { background: #23212b !important; }
html.dark #section-schedule #day-view-list-card > div:first-child,
html.dark #section-schedule #day-view-table-header {
  background: #1c1b22 !important; border-color: #2b2a33 !important;
}
html.dark #section-schedule #day-view-list > div { border-color: #2b2a33 !important; }
html.dark #section-schedule #day-view-list > div:hover { background: #23212b !important; }
html.dark #section-schedule #day-view-list .col-span-4 .text-slate-900,
html.dark #section-schedule #day-view-list .col-span-2.text-slate-600 { color: #e2e8f0 !important; }

/* ─── Dark mode: Today's Schedule (timeline) + Booking Details card ─── */
html.dark #section-schedule #day-timeline-section,
html.dark #section-schedule #day-view-list-card {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-schedule #day-timeline-section > .px-6.py-5 {
  border-bottom-color: #2b2a33 !important;
}
html.dark #section-schedule #day-timeline-section h3#day-view-title { color: #f1f5f9 !important; }
html.dark #section-schedule #day-timeline-section #timeline-date-label { color: #94a3b8 !important; }
html.dark #section-schedule #day-view-count {
  background: rgba(139, 115, 232, 0.18) !important;
  color: #b9a5ff !important;
}
html.dark #section-schedule #timeline-nav-pill {
  background: #141319 !important;
}
html.dark #section-schedule #timeline-nav-pill > button:nth-child(2) {
  background: #2b2a33 !important;
  color: #b9a5ff !important;
  box-shadow: none !important;
}
html.dark #section-schedule #day-timeline-scroll {
  background: #1c1b22 !important;
  border-top-color: #2b2a33 !important;
}
html.dark #section-schedule #day-timeline-blocks p.text-slate-800 { color: #f1f5f9 !important; }
html.dark #section-schedule #day-timeline-blocks p.text-slate-500 { color: #94a3b8 !important; }
html.dark #section-schedule #day-timeline-blocks p.text-slate-400 { color: #64748b !important; }
html.dark #section-schedule #day-timeline-labels span { color: #94a3b8 !important; }

/* Booking Details card in dark mode */
html.dark #section-schedule #day-view-list-card > div:first-child {
  background: #1c1b22 !important;
  border-bottom-color: #2b2a33 !important;
}
html.dark #section-schedule #day-view-list-card > div:first-child h4 { color: #f1f5f9 !important; }
html.dark #section-schedule #day-view-list-card > div:first-child::after {
  border-color: #2b2a33 !important;
  background-color: #141319 !important;
}
html.dark #section-schedule #day-view-table-header {
  background: #141319 !important;
  border-bottom-color: #2b2a33 !important;
  color: #e2e8f0 !important;
}
html.dark #section-schedule #day-view-table-header > div { color: #e2e8f0 !important; }
html.dark #section-schedule #day-view-list .col-span-1 > div.p-1\.5 {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-schedule #day-view-list .col-span-1 > div.p-1\.5:hover {
  background: #2b2a33 !important;
  border-color: #3a3844 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUSINESS SWITCHER — sleek bento trigger + animated dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

/* Trigger button */
#business-selector-trigger {
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#business-selector-trigger:hover {
  background: #faf9f5 !important;
  border-color: #eceadf !important;
}
#business-selector:has(#business-switcher-menu:not(.hidden)) #business-selector-trigger {
  background: #faf9f5 !important;
  border-color: #eceadf !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.04);
}

/* Avatar inside the trigger (initials) */
#business-selector-avatar {
  background: linear-gradient(135deg, #6a51d8 0%, #8b73e8 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px -2px rgba(106, 81, 216, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  overflow: hidden;
}
/* When a company logo is loaded, drop the purple gradient — show the logo on
   a clean white tile with a subtle border so it reads on any theme. */
#business-selector-avatar.has-logo {
  background: #ffffff !important;
  color: transparent;
  box-shadow: 0 2px 6px -2px rgba(15, 15, 30, 0.18),
              inset 0 0 0 1px #eceadf !important;
}
#business-selector-avatar.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
  display: block;
}
html.dark #business-selector-avatar.has-logo {
  background: #f8fafc !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Role badge colours */
#business-role-badge {
  letter-spacing: 0.02em;
  background: #ede9fe !important;
  color: #6a51d8 !important;
}
#business-role-badge[data-role="admin"] { background: #e3edfc !important; color: #2a4ba6 !important; }
#business-role-badge[data-role="staff"] { background: #d7f4e5 !important; color: #1a7a4f !important; }
#business-role-badge[data-role="client"] { background: #ebeaf0 !important; color: #64748b !important; }

/* Chevron rotation when dropdown is open */
.business-selector-chevron {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
#business-selector:has(#business-switcher-menu:not(.hidden)) .business-selector-chevron {
  transform: rotate(180deg);
  color: #1a1a24 !important;
}

/* Dropdown panel itself */
#business-switcher-menu {
  border: 1px solid #eceadf !important;
  border-radius: 14px !important;
  box-shadow:
    0 16px 40px -12px rgba(20, 20, 40, 0.18),
    0 0 0 1px rgba(15, 15, 30, 0.02) !important;
  padding: 6px !important;
  width: 304px !important;
  transform-origin: top left;
}
#business-switcher-menu:not(.hidden) {
  animation: dropdownIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* "YOUR BUSINESSES" header strip */
#business-switcher-menu > .px-4.py-2.border-b {
  padding: 8px 10px !important;
  border-bottom: 0 !important;
  margin-bottom: 2px !important;
}
#business-switcher-menu > .px-4.py-2.border-b p {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.08em !important;
}

/* Scrollable list */
#business-switcher-list {
  padding: 0 !important;
}
#business-switcher-list > button {
  padding: 10px !important;
  border-radius: 10px !important;
  gap: 10px !important;
  margin: 2px 0 !important;
  transition: background 140ms ease, transform 140ms ease !important;
  position: relative;
}
#business-switcher-list > button:hover {
  background: #faf9f5 !important;
  transform: translateX(1px);
}
/* Current business row highlight — purple bento */
#business-switcher-list > button.bg-blue-50 {
  background: #f4f0ff !important;
  box-shadow: inset 0 0 0 1px rgba(106, 81, 216, 0.15) !important;
}
#business-switcher-list > button.bg-blue-50 p.font-medium {
  color: #6a51d8 !important;
}

/* Logo/initials tile */
#business-switcher-list .switcher-logo-box {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid #eceadf !important;
  background: #ffffff !important;
  flex-shrink: 0;
  overflow: hidden;
}
#business-switcher-list .switcher-logo-box span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6a51d8 !important;
}

/* Business name typography */
#business-switcher-list > button p.font-medium {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.005em;
}

/* Role pills inside the dropdown */
#business-switcher-list > button .text-xs.rounded-full {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  letter-spacing: 0.02em !important;
}
#business-switcher-list > button .bg-purple-100.text-purple-700 { background: #ede9fe !important; color: #6a51d8 !important; }
#business-switcher-list > button .bg-blue-100.text-blue-700 { background: #e3edfc !important; color: #2a4ba6 !important; }
#business-switcher-list > button .bg-green-100.text-green-700 { background: #d7f4e5 !important; color: #1a7a4f !important; }
#business-switcher-list > button .bg-slate-100.text-slate-700 { background: #ebeaf0 !important; color: #64748b !important; }

/* Checkmark for current row → purple */
#business-switcher-list > button svg.text-blue-600 {
  color: #6a51d8 !important;
  background: #ede9fe;
  border-radius: 999px;
  padding: 2px;
  width: 20px !important;
  height: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL POPUP / DROPDOWN / MODAL ANIMATIONS — subtle, professional
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sidebar user menu + any other .hidden-toggled dropdowns */
#sidebar-user-menu:not(.hidden) {
  animation: dropdownIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom left;
}

/* Booking detail modal entrance */
#booking-detail-modal:not(.hidden) > .absolute.inset-0 {
  animation: modalBackdropIn 160ms ease-out;
}
#booking-detail-modal:not(.hidden) > .relative > .relative.bg-white {
  animation: modalCardIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center top;
}

/* Welcome wizard + setup/billing guide modals */
#welcome-wizard:not(.hidden) > div:last-child,
#setup-guide-modal:not(.hidden) > div:last-child,
#billing-guide-modal:not(.hidden) > div:last-child {
  animation: modalCardIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Business switcher — dark-mode polish (matches the bento charcoal palette)
   ═══════════════════════════════════════════════════════════════════════════ */
html.dark #business-selector-trigger:hover,
html.dark #business-selector:has(#business-switcher-menu:not(.hidden)) #business-selector-trigger {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
/* Dropdown panel — cleaner charcoal surface + proper separation */
html.dark #business-switcher-menu {
  background: #18171d !important;
  border-color: #2b2a33 !important;
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
/* "YOUR BUSINESSES" header — slightly lighter for readability */
html.dark #business-switcher-menu > .px-4.py-2.border-b p {
  color: #64748b !important;
}
/* Row defaults */
html.dark #business-switcher-list > button {
  background: transparent !important;
}
html.dark #business-switcher-list > button:hover {
  background: #1c1b22 !important;
}
html.dark #business-switcher-list > button p.font-medium {
  color: #e2e8f0 !important;
}
/* Logo / initials tile — clean off-white so logos/initials always read well */
html.dark #business-switcher-list .switcher-logo-box {
  background: #f8fafc !important;
  border-color: #2b2a33 !important;
}
html.dark #business-switcher-list .switcher-logo-box span {
  color: #1a1a24 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECENT BOOKINGS — dark mode outer card + readable name text
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer Recent Bookings wrapper — drop the white border, add a subtle
   charcoal-blue glow on dark so it blends nicely with the dashboard. */
html.dark #schedule-recent-card {
  background: #1c1b22 !important;
  border: 1px solid transparent !important;
  box-shadow:
    0 0 0 1px rgba(44, 82, 130, 0.22),
    0 10px 30px -18px rgba(30, 64, 120, 0.45),
    0 0 22px -6px rgba(30, 64, 120, 0.20) !important;
}
/* Inner bookings list: remove the cream border on dark */
html.dark #section-schedule #bookings-list {
  background: transparent !important;
  border-color: transparent !important;
}
/* Row surface + divider on dark */
html.dark #section-schedule #bookings-list > div {
  background: transparent !important;
  box-shadow: inset 0 -1px 0 #2b2a33 !important;
  border: 0 !important;
}
html.dark #section-schedule #bookings-list > div:last-child { box-shadow: none !important; }
html.dark #section-schedule #bookings-list > div:hover {
  background: rgba(185, 165, 255, 0.04) !important;
}
/* Client name → readable light text */
html.dark #section-schedule #bookings-list > div p.font-medium {
  color: #f1f5f9 !important;
}
/* Service subtitle + date */
html.dark #section-schedule #bookings-list > div p.text-xs.text-slate-500 {
  color: #94a3b8 !important;
}
html.dark #section-schedule #bookings-list > div .text-xs.font-medium.text-slate-400 {
  color: #cbd5e1 !important;
}
html.dark #section-schedule #bookings-list > div .text-\[10px\] {
  color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE POLISH — smoother/muted icon chips, badges, accents
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat card icon chips: desaturated, translucent, readable on dark */
html.dark #section-schedule .metric-card svg {
  background: rgba(139, 115, 232, 0.14) !important;
  color: #a996ea !important;
  box-shadow: inset 0 0 0 1px rgba(139, 115, 232, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(1) svg {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #6ee7b7 !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(2) svg {
  background: rgba(251, 146, 60, 0.12) !important;
  color: #fdba74 !important;
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(3) svg {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #93c5fd !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(4) svg {
  background: rgba(139, 115, 232, 0.14) !important;
  color: #b9a5ff !important;
  box-shadow: inset 0 0 0 1px rgba(139, 115, 232, 0.20) !important;
}
html.dark #section-schedule .metric-card:nth-child(5) svg {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #6ee7b7 !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18) !important;
}

/* Stat card secondary text + "not paid" link: softer, not bright red */
html.dark #section-schedule .metric-card p.font-bold { color: #94a3b8 !important; }
html.dark #section-schedule .metric-card .text-red-500,
html.dark #section-schedule .metric-card a.text-red-500 {
  color: #f87171 !important;
  opacity: 0.85;
}

/* "Today" pill on the calendar header — subtle in dark */
html.dark #section-schedule button[onclick="goToToday()"] {
  background: rgba(139, 115, 232, 0.14) !important;
  color: #b9a5ff !important;
  box-shadow: inset 0 0 0 1px rgba(139, 115, 232, 0.22) !important;
}
html.dark #section-schedule button[onclick="goToToday()"]:hover {
  background: rgba(139, 115, 232, 0.22) !important;
}

/* "Refresh" button in Recent Bookings — readable on dark */
html.dark #section-schedule button[onclick="loadBookings()"] {
  color: #b9a5ff !important;
}
html.dark #section-schedule button[onclick="loadBookings()"]:hover {
  color: #d4c8ff !important;
}

/* Filter status pill (dropdown) — dark chrome */
html.dark #section-schedule #filter-status {
  background: #141319 !important;
  border-color: #2b2a33 !important;
  color: #e2e8f0 !important;
}
html.dark #section-schedule #filter-status:focus {
  border-color: rgba(139, 115, 232, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 115, 232, 0.15) !important;
}

/* Legend dots — ensure they stay visible on dark */
html.dark #section-schedule .rounded-full.w-2.h-2 {
  opacity: 0.9;
}

/* Business switcher trigger — avatar + role badge muted in dark */
html.dark #business-selector-avatar {
  background: linear-gradient(135deg, #3a3554 0%, #4a4470 100%) !important;
  color: #d4c8ff !important;
  box-shadow: inset 0 0 0 1px rgba(185, 165, 255, 0.18),
              0 2px 6px -2px rgba(0, 0, 0, 0.4) !important;
}
html.dark #business-role-badge {
  background: rgba(139, 115, 232, 0.18) !important;
  color: #b9a5ff !important;
}
html.dark #business-role-badge[data-role="admin"] {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
}
html.dark #business-role-badge[data-role="staff"] {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #business-role-badge[data-role="client"] {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #cbd5e1 !important;
}
html.dark #business-name { color: #f1f5f9 !important; }
html.dark .business-selector-chevron { color: #64748b !important; }
html.dark #business-selector:has(#business-switcher-menu:not(.hidden)) .business-selector-chevron {
  color: #e2e8f0 !important;
}

/* Dropdown: current / selected business row — clean blue-accent highlight
   that matches the rest of the dark theme (no heavy purple wash). */
html.dark #business-switcher-list > button.bg-blue-50 {
  background: rgba(59, 130, 246, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28) !important;
}
html.dark #business-switcher-list > button.bg-blue-50 p.font-medium {
  color: #93c5fd !important;
}
html.dark #business-switcher-list > button svg.text-blue-600 {
  color: #ffffff !important;
  background: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.30);
}
/* Role pills in the switcher dropdown */
html.dark #business-switcher-list > button .bg-purple-100.text-purple-700 {
  background: rgba(139, 115, 232, 0.18) !important; color: #b9a5ff !important;
}
html.dark #business-switcher-list > button .bg-blue-100.text-blue-700 {
  background: rgba(96, 165, 250, 0.15) !important; color: #93c5fd !important;
}
html.dark #business-switcher-list > button .bg-green-100.text-green-700 {
  background: rgba(52, 211, 153, 0.15) !important; color: #6ee7b7 !important;
}
html.dark #business-switcher-list > button .bg-slate-100.text-slate-700 {
  background: rgba(148, 163, 184, 0.15) !important; color: #cbd5e1 !important;
}

/* Recent bookings status pill (green "Completed") — gentler on dark */
html.dark #section-schedule #bookings-list .rounded-full.bg-emerald-100,
html.dark #section-schedule #bookings-list .rounded-full.bg-green-100 {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #section-schedule #bookings-list .rounded-full.bg-orange-100 {
  background: rgba(251, 146, 60, 0.15) !important;
  color: #fdba74 !important;
}
html.dark #section-schedule #bookings-list .rounded-full.bg-blue-100 {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
}
html.dark #section-schedule #bookings-list .rounded-full.bg-indigo-100 {
  background: rgba(139, 115, 232, 0.18) !important;
  color: #b9a5ff !important;
}
html.dark #section-schedule #bookings-list .rounded-full.bg-red-100 {
  background: rgba(248, 113, 113, 0.15) !important;
  color: #fca5a5 !important;
}

/* Booking Details row — booking status pills on dark (scoped to the pill span only) */
html.dark #section-schedule #day-view-list span.inline-flex.rounded-full.bg-orange-50 {
  background: rgba(251, 146, 60, 0.14) !important;
  color: #fdba74 !important;
}
html.dark #section-schedule #day-view-list span.inline-flex.rounded-full.bg-blue-50 {
  background: rgba(96, 165, 250, 0.14) !important;
  color: #93c5fd !important;
}
html.dark #section-schedule #day-view-list span.inline-flex.rounded-full.bg-indigo-50 {
  background: rgba(139, 115, 232, 0.18) !important;
  color: #b9a5ff !important;
}
html.dark #section-schedule #day-view-list span.inline-flex.rounded-full.bg-emerald-50 {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #section-schedule #day-view-list span.inline-flex.rounded-full.bg-slate-50 {
  background: rgba(248, 113, 113, 0.14) !important;
  color: #fca5a5 !important;
}

/* Client avatar circles inside Booking Details rows — dark variants */
html.dark #section-schedule #day-view-list .col-span-4 .bg-indigo-100 {
  background: rgba(139, 115, 232, 0.18) !important;
  color: #b9a5ff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE FORMS — premium bento cards (light + dark)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section header + counter pill */
#section-forms > .flex.items-center.justify-between > .flex.items-center.gap-3 > h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: #1a1a24 !important;
}

/* Create Service button → charcoal bento */
#section-forms #create-service-btn {
  background: linear-gradient(135deg, #1e293b 0%, #243b55 55%, #2c5282 100%) !important;
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 9px 16px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease !important;
}
#section-forms #create-service-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(44, 82, 130, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Grid spacing */
#section-forms #services-list > .grid {
  gap: 18px !important;
}

/* Card → premium bento */
#section-forms #services-list > .grid > div {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) !important;
  border: 1px solid #eceadf !important;
  border-radius: 18px !important;
  padding: 20px !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 30, 0.04),
    0 0 0 1px rgba(15, 15, 30, 0.01) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
  overflow: hidden;
}
#section-forms #services-list > .grid > div::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #d5ceb8, #eceadf);
  opacity: 0.8;
}
#section-forms #services-list > .grid > div:hover {
  transform: translateY(-2px);
  border-color: #d5ceb8 !important;
  box-shadow: 0 8px 24px -14px rgba(60, 50, 110, 0.25) !important;
}
/* Active service card → purple accent + ring */
#section-forms #services-list > .grid > div.ring-2 {
  border-color: rgba(139, 115, 232, 0.35) !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 30, 0.04),
    0 0 0 1px rgba(139, 115, 232, 0.18),
    0 10px 28px -18px rgba(106, 81, 216, 0.35) !important;
  --tw-ring-color: transparent !important;
}
#section-forms #services-list > .grid > div.ring-2::before {
  background: linear-gradient(90deg, #8b73e8, #6a51d8) !important;
  opacity: 1;
  height: 3px;
}

/* Title + description */
#section-forms #services-list h3 {
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.01em;
}
#section-forms #services-list .text-slate-500.text-xs.mt-1 {
  font-size: 12px !important;
  color: #7b7a89 !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}

/* ACTIVE / INACTIVE badge → sleek capsule */
#section-forms #services-list .bg-blue-100.text-blue-700 {
  background: rgba(139, 115, 232, 0.14) !important;
  color: #6a51d8 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(139, 115, 232, 0.18) !important;
}
#section-forms #services-list .bg-slate-100.text-slate-500 {
  background: #f4f2ec !important;
  color: #8b8a99 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
}

/* Toggle switch → clean iOS-style (grey off, blue on)
   Keep Tailwind's default 40x20 track + 16x16 thumb + translate-x-5 so the
   thumb snaps cleanly to each end with no overflow.
   NOTE: the checked selector below matches `div.w-10.h-5` (not just `div`) so
   it beats the unchecked base rule on specificity, not just on order. */
#section-forms #services-list label.inline-flex > div.w-10.h-5 {
  background: #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 15, 30, 0.10) !important;
  transition: background-color 180ms ease !important;
}
#section-forms #services-list label.inline-flex > div.w-10.h-5::after {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.18), 0 2px 4px -1px rgba(15, 15, 30, 0.10) !important;
}
#section-forms #services-list label.inline-flex > input:checked + div.w-10.h-5 {
  background: #3b82f6 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
#section-forms #services-list label.inline-flex:hover > input:checked + div.w-10.h-5 {
  background: #2563eb !important;
}

/* Meta row (price · duration · questions) → three divider chips */
#section-forms #services-list .flex.items-center.gap-4.mb-4 {
  gap: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
  border-top: 1px dashed #eceadf !important;
  border-bottom: 1px dashed #eceadf !important;
}
#section-forms #services-list .flex.items-center.gap-4.mb-4 > div {
  flex: 1;
  padding: 0 12px;
  gap: 6px !important;
  font-size: 11.5px !important;
  color: #5b5a68 !important;
  position: relative;
}
#section-forms #services-list .flex.items-center.gap-4.mb-4 > div:first-child { padding-left: 0; }
#section-forms #services-list .flex.items-center.gap-4.mb-4 > div + div::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 1px;
  background: #eceadf;
}
#section-forms #services-list .flex.items-center.gap-4.mb-4 > div svg {
  width: 14px !important;
  height: 14px !important;
  color: #8b8a99 !important;
}
#section-forms #services-list .flex.items-center.gap-4.mb-4 > div span {
  font-weight: 600 !important;
  color: #1a1a24 !important;
}

/* Action buttons row (Edit / Delete) */
#section-forms #services-list button[onclick^="editService"] {
  background: #faf9f5 !important;
  border: 1px solid #eceadf !important;
  color: #1a1a24 !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease !important;
}
#section-forms #services-list button[onclick^="editService"]:hover {
  background: #f4f2ec !important;
  border-color: #d5ceb8 !important;
}
#section-forms #services-list button[onclick^="editService"] svg { color: #5b5a68 !important; }

#section-forms #services-list button[onclick^="confirmDeleteService"] {
  background: #fff5f5 !important;
  border: 1px solid #fde2e2 !important;
  color: #b91c1c !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  transition: background 140ms ease, border-color 140ms ease !important;
}
#section-forms #services-list button[onclick^="confirmDeleteService"]:hover {
  background: #fde2e2 !important;
  border-color: #f8b4b4 !important;
}

/* Counter pill at the top of section */
#section-forms #active-services-counter {
  padding: 4px 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 10.5px !important;
}
#section-forms #active-services-counter.bg-green-100 {
  background: rgba(52, 211, 153, 0.14) !important;
  color: #157a4f !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.22) !important;
}
#section-forms #active-services-counter.bg-yellow-100 {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #a16207 !important;
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.25) !important;
}
#section-forms #active-services-counter.bg-slate-100 {
  background: #f4f2ec !important;
  color: #64748b !important;
  box-shadow: inset 0 0 0 1px #eceadf !important;
}

/* ─── Service Forms dark mode ────────────────────────────────────────────── */
html.dark #section-forms > .flex.items-center.justify-between > .flex.items-center.gap-3 > h2 {
  color: #f1f5f9 !important;
}
html.dark #section-forms #create-service-btn {
  background: linear-gradient(135deg, #2b2a33 0%, #3a3844 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html.dark #section-forms #create-service-btn:hover {
  background: linear-gradient(135deg, #3a3844 0%, #4a4858 100%) !important;
}
html.dark #section-forms #services-list > .grid > div {
  background: linear-gradient(180deg, #1c1b22 0%, #18171d 100%) !important;
  border-color: #2b2a33 !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}
html.dark #section-forms #services-list > .grid > div::before {
  background: linear-gradient(90deg, #2b2a33, #1c1b22) !important;
  opacity: 1;
}
html.dark #section-forms #services-list > .grid > div:hover {
  border-color: #3a3844 !important;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5) !important;
}
html.dark #section-forms #services-list > .grid > div.ring-2 {
  border-color: rgba(139, 115, 232, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(139, 115, 232, 0.22),
    0 10px 28px -16px rgba(106, 81, 216, 0.45) !important;
}
html.dark #section-forms #services-list > .grid > div.ring-2::before {
  background: linear-gradient(90deg, #8b73e8, #6a51d8) !important;
}
html.dark #section-forms #services-list h3 { color: #f1f5f9 !important; }
html.dark #section-forms #services-list .text-slate-500.text-xs.mt-1 { color: #94a3b8 !important; }
html.dark #section-forms #services-list .bg-blue-100.text-blue-700 {
  background: rgba(139, 115, 232, 0.18) !important;
  color: #b9a5ff !important;
  box-shadow: inset 0 0 0 1px rgba(139, 115, 232, 0.22) !important;
}
html.dark #section-forms #services-list .bg-slate-100.text-slate-500 {
  background: #2b2a33 !important;
  color: #94a3b8 !important;
}
html.dark #section-forms #services-list label.inline-flex > div.w-10.h-5 {
  background: #3b3a44 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html.dark #section-forms #services-list label.inline-flex > div.w-10.h-5::after {
  background: #ffffff !important;
  border-color: transparent !important;
}
html.dark #section-forms #services-list label.inline-flex > input:checked + div.w-10.h-5 {
  background: #3b82f6 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}
html.dark #section-forms #services-list label.inline-flex:hover > input:checked + div.w-10.h-5 {
  background: #60a5fa !important;
}
html.dark #section-forms #services-list .flex.items-center.gap-4.mb-4 {
  border-top-color: #2b2a33 !important;
  border-bottom-color: #2b2a33 !important;
}
html.dark #section-forms #services-list .flex.items-center.gap-4.mb-4 > div + div::before {
  background: #2b2a33 !important;
}
html.dark #section-forms #services-list .flex.items-center.gap-4.mb-4 > div { color: #94a3b8 !important; }
html.dark #section-forms #services-list .flex.items-center.gap-4.mb-4 > div span { color: #e2e8f0 !important; }
html.dark #section-forms #services-list .flex.items-center.gap-4.mb-4 > div svg { color: #64748b !important; }

html.dark #section-forms #services-list button[onclick^="editService"] {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
  color: #e2e8f0 !important;
}
html.dark #section-forms #services-list button[onclick^="editService"]:hover {
  background: #23212b !important;
  border-color: #3a3844 !important;
}
html.dark #section-forms #services-list button[onclick^="editService"] svg { color: #94a3b8 !important; }

html.dark #section-forms #services-list button[onclick^="confirmDeleteService"] {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(248, 113, 113, 0.18) !important;
  color: #fca5a5 !important;
}
html.dark #section-forms #services-list button[onclick^="confirmDeleteService"]:hover {
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark #section-forms #active-services-counter.bg-green-100 {
  background: rgba(52, 211, 153, 0.14) !important;
  color: #6ee7b7 !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.22) !important;
}
html.dark #section-forms #active-services-counter.bg-yellow-100 {
  background: rgba(234, 179, 8, 0.14) !important;
  color: #fcd34d !important;
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.22) !important;
}
html.dark #section-forms #active-services-counter.bg-slate-100 {
  background: #23212b !important;
  color: #94a3b8 !important;
  box-shadow: inset 0 0 0 1px #2b2a33 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINANCE — premium bento treatment (light + dark)
   Covers: Finance title, sub-tabs, KPI cards, filter pills, payments/invoice
   rows, action chips, Custom Invoices section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page title */
#section-payments > h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: #1a1a24 !important;
}

/* ── Sub-tab pill (Staff / Booking / Custom) → sleek segmented control ── */
#section-payments > .flex.items-center.gap-1.mb-6.bg-slate-100 {
  background: #f4f2ec !important;
  border: 1px solid #eceadf !important;
  border-radius: 14px !important;
  padding: 5px !important;
  box-shadow: inset 0 1px 2px rgba(15, 15, 30, 0.04) !important;
}
#section-payments .finance-tab-btn {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: 10px !important;
  color: #5b5a68 !important;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}
#section-payments .finance-tab-btn:hover { color: #1a1a24 !important; }
#section-payments .finance-tab-btn.bg-white,
#section-payments .finance-tab-btn.shadow-sm {
  background: #ffffff !important;
  color: #1a1a24 !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 30, 0.06),
    0 4px 12px -6px rgba(15, 15, 30, 0.08) !important;
}

/* ── KPI Summary Cards → cream bento with colored icon chips ────────────── */
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) !important;
  border: 1px solid #eceadf !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 30, 0.04),
    0 0 0 1px rgba(15, 15, 30, 0.01) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
  overflow: hidden;
}
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div:hover,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -14px rgba(60, 50, 110, 0.22) !important;
}
/* Thin colored accent strip at top of each KPI card */
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div::before,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  opacity: 0.85;
}
/* Staff payments KPI colors */
#section-payments .bg-orange-50::before { background: linear-gradient(90deg, #fbbf7a, #f59e0b) !important; }
#section-payments .bg-blue-50::before { background: linear-gradient(90deg, #93c5fd, #3b82f6) !important; }
#section-payments .bg-green-50::before { background: linear-gradient(90deg, #86efac, #10b981) !important; }
#section-payments .bg-slate-50::before { background: linear-gradient(90deg, #cbd5e1, #94a3b8) !important; }
#section-payments .bg-purple-50::before { background: linear-gradient(90deg, #c4b5fd, #8b5cf6) !important; }
/* Booking-invoice KPI colors (emerald/amber/red) */
#section-payments .bg-emerald-50::before { background: linear-gradient(90deg, #86efac, #10b981) !important; }
#section-payments .bg-amber-50::before { background: linear-gradient(90deg, #fcd34d, #f59e0b) !important; }
#section-payments .bg-red-50::before { background: linear-gradient(90deg, #fca5a5, #ef4444) !important; }

/* Override Tailwind's colored backgrounds → keep cream bento surface */
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-orange-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-blue-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-green-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-slate-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-purple-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-emerald-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-amber-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-red-50,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-slate-50 {
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) !important;
  border-color: #eceadf !important;
}

/* KPI typography */
#section-payments .grid > div p.text-xs.text-slate-500,
#section-payments .grid > div p.text-\[10px\].font-medium {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8b8a99 !important;
  margin-bottom: 8px !important;
}
#section-payments .grid > div p.text-2xl.font-bold,
#section-payments .grid > div p.text-xl.font-bold {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #1a1a24 !important;
}
#section-payments .grid > div p.text-\[11px\].text-slate-400 {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #8b8a99 !important;
  margin-top: 4px !important;
}

/* Admin Revenue card → purple accent + "View Details" link */
#section-payments #company-revenue-card p.text-purple-600 {
  color: #6a51d8 !important;
}
#section-payments #company-revenue-card .text-purple-600 svg { color: #6a51d8 !important; }
#section-payments #company-revenue-card button.text-purple-600 {
  color: #6a51d8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
  background: rgba(139, 115, 232, 0.10) !important;
  border-radius: 999px !important;
  transition: background 140ms ease !important;
  margin-top: 8px !important;
  display: inline-block !important;
}
#section-payments #company-revenue-card button.text-purple-600:hover {
  background: rgba(139, 115, 232, 0.18) !important;
}

/* ── Filter buttons (All / Unpaid / Paid / etc.) → sleek pills ─────────── */
#section-payments .payment-filter-btn,
#section-payments .bi-filter-btn {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  background: #faf9f5 !important;
  color: #5b5a68 !important;
  border: 1px solid #eceadf !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease !important;
}
#section-payments .payment-filter-btn:hover,
#section-payments .bi-filter-btn:hover {
  background: #f4f2ec !important;
  color: #1a1a24 !important;
  border-color: #d5ceb8 !important;
}
#section-payments .payment-filter-btn.active,
#section-payments .bi-filter-btn.active,
#section-payments .payment-filter-btn.bg-deep-charcoal,
#section-payments .bi-filter-btn.bg-deep-charcoal {
  background: linear-gradient(135deg, #1e293b 0%, #243b55 55%, #2c5282 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px -3px rgba(30, 41, 59, 0.28) !important;
}

/* ── Payments List container ───────────────────────────────────────────── */
#section-payments > .bg-white.rounded-2xl,
#section-payments #finance-staff-payments > .bg-white.rounded-2xl {
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) !important;
  border: 1px solid #eceadf !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 30, 0.04),
    0 0 0 1px rgba(15, 15, 30, 0.01) !important;
  overflow: hidden;
}

/* Payment/invoice rows */
#section-payments #payments-list > div {
  padding: 16px 20px !important;
  transition: background 140ms ease !important;
  border-color: #f1efe5 !important;
}
#section-payments #payments-list > div:hover {
  background: #faf9f5 !important;
}
#section-payments .divide-slate-50 > div + div {
  border-color: #f1efe5 !important;
}

/* Booking-invoices + custom-invoices row cards */
#section-payments #booking-invoices-list > div,
#section-payments #custom-invoices-list > div {
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) !important;
  border: 1px solid #eceadf !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.03) !important;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease !important;
  margin-bottom: 10px !important;
}
#section-payments #booking-invoices-list > div:hover,
#section-payments #custom-invoices-list > div:hover {
  transform: translateY(-1px);
  border-color: #d5ceb8 !important;
  box-shadow: 0 8px 22px -14px rgba(60, 50, 110, 0.22) !important;
}

/* Status pills inside Finance — softer bento chips */
#section-payments .rounded-full.bg-emerald-100 { background: #d7f4e5 !important; color: #15794b !important; }
#section-payments .rounded-full.bg-blue-100 { background: #e3edfc !important; color: #2a4ba6 !important; }
#section-payments .rounded-full.bg-amber-100 { background: #fdecc8 !important; color: #92400e !important; }
#section-payments .rounded-full.bg-red-100 { background: #fde2e2 !important; color: #9b2c2c !important; }
#section-payments .rounded-full.bg-slate-100 { background: #f4f2ec !important; color: #64748b !important; }

/* Invoice action chip buttons → refined */
#section-payments #custom-invoices-list button[onclick^="markInvoicePaid"],
#section-payments #custom-invoices-list button[onclick^="emailInvoice"],
#section-payments #custom-invoices-list button[onclick^="downloadInvoicePdf"],
#section-payments #custom-invoices-list button[onclick^="editInvoice"],
#section-payments #custom-invoices-list button[onclick^="deleteInvoice"] {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease !important;
}
#section-payments #custom-invoices-list button[onclick^="markInvoicePaid"] {
  background: rgba(52, 211, 153, 0.14) !important;
  color: #15794b !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
}
#section-payments #custom-invoices-list button[onclick^="markInvoicePaid"]:hover {
  background: rgba(52, 211, 153, 0.22) !important;
}
#section-payments #custom-invoices-list button[onclick^="emailInvoice"] {
  background: rgba(96, 165, 250, 0.14) !important;
  color: #1e4bd1 !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
}
#section-payments #custom-invoices-list button[onclick^="emailInvoice"]:hover {
  background: rgba(96, 165, 250, 0.22) !important;
}
#section-payments #custom-invoices-list button[onclick^="downloadInvoicePdf"],
#section-payments #custom-invoices-list button[onclick^="editInvoice"] {
  background: #faf9f5 !important;
  color: #1a1a24 !important;
  border-color: #eceadf !important;
}
#section-payments #custom-invoices-list button[onclick^="downloadInvoicePdf"]:hover,
#section-payments #custom-invoices-list button[onclick^="editInvoice"]:hover {
  background: #f4f2ec !important;
  border-color: #d5ceb8 !important;
}
#section-payments #custom-invoices-list button[onclick^="deleteInvoice"] {
  background: #fff5f5 !important;
  color: #b91c1c !important;
  border-color: #fde2e2 !important;
}
#section-payments #custom-invoices-list button[onclick^="deleteInvoice"]:hover {
  background: #fde2e2 !important;
  border-color: #f8b4b4 !important;
}

/* Invoice number + client typography */
#section-payments #custom-invoices-list span.text-sm.font-bold {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.005em !important;
}
#section-payments #custom-invoices-list p.text-sm.text-slate-700 {
  font-size: 13px !important;
  color: #5b5a68 !important;
  font-weight: 500 !important;
}
#section-payments #custom-invoices-list p.text-lg.font-bold {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.02em !important;
}

/* "New Invoice" button and empty state + section title */
#section-payments #finance-custom-invoices h3,
#section-payments #finance-booking-invoices h3,
#section-payments #finance-staff-payments h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a24 !important;
  letter-spacing: -0.01em;
}
#section-payments #finance-custom-invoices button[onclick="openInvoiceWizard()"] {
  background: linear-gradient(135deg, #1e293b 0%, #243b55 55%, #2c5282 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: transform 140ms ease, box-shadow 140ms ease !important;
}
#section-payments #finance-custom-invoices button[onclick="openInvoiceWizard()"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(44, 82, 130, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Logo upload banner → cream bento warning */
#section-payments #invoice-logo-banner {
  background: linear-gradient(180deg, #fff9ec 0%, #fdefce 100%) !important;
  border: 1px solid #f3d88a !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 30, 0.03) !important;
}

/* Saved Layouts chips */
#section-payments #saved-layouts-list > div {
  background: #faf9f5 !important;
  border: 1px solid #eceadf !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  transition: background 140ms ease, border-color 140ms ease !important;
}
#section-payments #saved-layouts-list > div:hover {
  background: #f4f2ec !important;
  border-color: #d5ceb8 !important;
}

/* ─────────────────────────────────────── Finance dark mode ──────────── */
html.dark #section-payments > h2 { color: #f1f5f9 !important; }

/* Sub-tab pill on dark */
html.dark #section-payments > .flex.items-center.gap-1.mb-6.bg-slate-100 {
  background: #141319 !important;
  border-color: #2b2a33 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
html.dark #section-payments .finance-tab-btn { color: #94a3b8 !important; }
html.dark #section-payments .finance-tab-btn:hover { color: #e2e8f0 !important; }
html.dark #section-payments .finance-tab-btn.bg-white,
html.dark #section-payments .finance-tab-btn.shadow-sm {
  background: #2b2a33 !important;
  color: #f1f5f9 !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 12px -6px rgba(0, 0, 0, 0.5) !important;
}

/* KPI cards dark */
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div {
  background: linear-gradient(180deg, #1c1b22 0%, #18171d 100%) !important;
  border-color: #2b2a33 !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div:hover,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div:hover {
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.55) !important;
  border-color: #3a3844 !important;
}
/* KPI typography dark */
html.dark #section-payments .grid > div p.text-xs.text-slate-500,
html.dark #section-payments .grid > div p.text-\[10px\].font-medium {
  color: #94a3b8 !important;
}
html.dark #section-payments .grid > div p.text-2xl.font-bold,
html.dark #section-payments .grid > div p.text-xl.font-bold {
  color: #f1f5f9 !important;
}
html.dark #section-payments .grid > div p.text-\[11px\].text-slate-400 {
  color: #94a3b8 !important;
}
/* KPI color-specific number tints on dark */
html.dark #section-payments .text-orange-600 { color: #fdba74 !important; }
html.dark #section-payments .text-blue-600 { color: #93c5fd !important; }
html.dark #section-payments .text-green-600 { color: #6ee7b7 !important; }
html.dark #section-payments .text-slate-700,
html.dark #section-payments .text-slate-800 { color: #e2e8f0 !important; }
html.dark #section-payments .text-purple-600 { color: #b9a5ff !important; }
html.dark #section-payments .text-emerald-600,
html.dark #section-payments .text-emerald-700 { color: #6ee7b7 !important; }
html.dark #section-payments .text-amber-600,
html.dark #section-payments .text-amber-700 { color: #fcd34d !important; }
html.dark #section-payments .text-red-600,
html.dark #section-payments .text-red-700 { color: #fca5a5 !important; }

/* Filter pills on dark */
html.dark #section-payments .payment-filter-btn,
html.dark #section-payments .bi-filter-btn {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
  color: #94a3b8 !important;
}
html.dark #section-payments .payment-filter-btn:hover,
html.dark #section-payments .bi-filter-btn:hover {
  background: #23212b !important;
  border-color: #3a3844 !important;
  color: #e2e8f0 !important;
}
html.dark #section-payments .payment-filter-btn.active,
html.dark #section-payments .bi-filter-btn.active {
  background: linear-gradient(135deg, #2c5282 0%, #3b6bb5 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.5) !important;
}

/* List containers + invoice rows dark */
html.dark #section-payments > .bg-white.rounded-2xl,
html.dark #section-payments #finance-staff-payments > .bg-white.rounded-2xl,
html.dark #section-payments #booking-invoices-list > div,
html.dark #section-payments #custom-invoices-list > div {
  background: linear-gradient(180deg, #1c1b22 0%, #18171d 100%) !important;
  border-color: #2b2a33 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
html.dark #section-payments #booking-invoices-list > div:hover,
html.dark #section-payments #custom-invoices-list > div:hover {
  border-color: #3a3844 !important;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5) !important;
}
html.dark #section-payments #payments-list > div:hover {
  background: #23212b !important;
}
html.dark #section-payments .divide-slate-50 > div + div {
  border-color: #2b2a33 !important;
}

/* Invoice typography dark */
html.dark #section-payments #custom-invoices-list span.text-sm.font-bold,
html.dark #section-payments #custom-invoices-list p.text-lg.font-bold {
  color: #f1f5f9 !important;
}
html.dark #section-payments #custom-invoices-list p.text-sm.text-slate-700 {
  color: #cbd5e1 !important;
}
html.dark #section-payments #booking-invoices-list p.text-sm.font-medium.text-slate-800 {
  color: #f1f5f9 !important;
}
html.dark #section-payments #booking-invoices-list p.text-xs.text-slate-500,
html.dark #section-payments #custom-invoices-list .flex.items-center.gap-3.mt-1.text-xs.text-slate-400 {
  color: #94a3b8 !important;
}
html.dark #section-payments #booking-invoices-list span.text-sm.font-semibold.text-slate-800 {
  color: #f1f5f9 !important;
}

/* Status pills on dark */
html.dark #section-payments .rounded-full.bg-emerald-100 {
  background: rgba(52, 211, 153, 0.15) !important; color: #6ee7b7 !important;
}
html.dark #section-payments .rounded-full.bg-blue-100 {
  background: rgba(96, 165, 250, 0.15) !important; color: #93c5fd !important;
}
html.dark #section-payments .rounded-full.bg-amber-100 {
  background: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important;
}
html.dark #section-payments .rounded-full.bg-red-100 {
  background: rgba(248, 113, 113, 0.15) !important; color: #fca5a5 !important;
}
html.dark #section-payments .rounded-full.bg-slate-100 {
  background: #23212b !important; color: #94a3b8 !important;
}

/* Action chip buttons on dark */
html.dark #section-payments #custom-invoices-list button[onclick^="markInvoicePaid"] {
  background: rgba(52, 211, 153, 0.14) !important;
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, 0.22) !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="markInvoicePaid"]:hover {
  background: rgba(52, 211, 153, 0.22) !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="emailInvoice"] {
  background: rgba(96, 165, 250, 0.14) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.22) !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="emailInvoice"]:hover {
  background: rgba(96, 165, 250, 0.22) !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="downloadInvoicePdf"],
html.dark #section-payments #custom-invoices-list button[onclick^="editInvoice"] {
  background: #1c1b22 !important;
  color: #e2e8f0 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="downloadInvoicePdf"]:hover,
html.dark #section-payments #custom-invoices-list button[onclick^="editInvoice"]:hover {
  background: #23212b !important;
  border-color: #3a3844 !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="deleteInvoice"] {
  background: rgba(248, 113, 113, 0.08) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.22) !important;
}
html.dark #section-payments #custom-invoices-list button[onclick^="deleteInvoice"]:hover {
  background: rgba(248, 113, 113, 0.18) !important;
}

/* Section titles dark */
html.dark #section-payments #finance-custom-invoices h3,
html.dark #section-payments #finance-booking-invoices h3,
html.dark #section-payments #finance-staff-payments h3 {
  color: #f1f5f9 !important;
}

/* New Invoice button dark — use subtler charcoal-blue */
html.dark #section-payments #finance-custom-invoices button[onclick="openInvoiceWizard()"] {
  background: linear-gradient(135deg, #2c5282 0%, #3b6bb5 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html.dark #section-payments #finance-custom-invoices button[onclick="openInvoiceWizard()"]:hover {
  background: linear-gradient(135deg, #3b6bb5 0%, #4a7fc5 100%) !important;
}

/* Logo banner dark */
html.dark #section-payments #invoice-logo-banner {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
html.dark #section-payments #invoice-logo-banner p.text-xs.text-amber-700 {
  color: #fcd34d !important;
}
html.dark #section-payments #invoice-logo-banner .text-amber-500 { color: #fbbf24 !important; }

/* Saved layouts chips dark */
html.dark #section-payments #saved-layouts-list > div {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-payments #saved-layouts-list > div:hover {
  background: #23212b !important;
  border-color: #3a3844 !important;
}
html.dark #section-payments #saved-layouts-list span.text-xs.font-medium.text-slate-700 {
  color: #e2e8f0 !important;
}

/* Empty state text dark */
html.dark #section-payments .hidden.p-8.text-center p.text-slate-600 {
  color: #cbd5e1 !important;
}

/* Uppercase KPI label dark (for booking invoices cards) */
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 p.text-\[10px\].font-medium.text-emerald-600,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 p.text-\[10px\].font-medium.text-amber-600,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 p.text-\[10px\].font-medium.text-red-600,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 p.text-\[10px\].font-medium.text-slate-500 {
  color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR CELL OVERFLOW — fixed row height, vertical-only scroll
   (prevents a single busy day from stretching the whole week row)
   ═══════════════════════════════════════════════════════════════════════════ */

#section-schedule #calendar-grid {
  overflow: hidden !important; /* no horizontal scroll at grid level */
}
#section-schedule #calendar-grid > div {
  max-height: 140px !important; /* cap every cell to a consistent height */
  overflow: hidden !important;
  min-width: 0 !important;
}
/* Inner events list: grow to fill remaining space, scroll Y when overflowing */
#section-schedule #calendar-grid > div > .space-y-1 {
  max-height: 98px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  padding-right: 2px;
}
/* Custom scrollbar for the inner calendar-day events list */
#section-schedule #calendar-grid > div > .space-y-1::-webkit-scrollbar {
  width: 5px;
}
#section-schedule #calendar-grid > div > .space-y-1::-webkit-scrollbar-track {
  background: transparent;
}
#section-schedule #calendar-grid > div > .space-y-1::-webkit-scrollbar-thumb {
  background: rgba(139, 115, 232, 0.35);
  border-radius: 3px;
}
#section-schedule #calendar-grid > div > .space-y-1::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 115, 232, 0.55);
}
html.dark #section-schedule #calendar-grid > div > .space-y-1::-webkit-scrollbar-thumb {
  background: rgba(185, 165, 255, 0.30);
}
html.dark #section-schedule #calendar-grid > div > .space-y-1::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 165, 255, 0.50);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — stat card icons use ghost-white / soft silver (no bright colors)
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark #section-schedule .metric-card svg,
html.dark #section-schedule .metric-card:nth-child(1) svg,
html.dark #section-schedule .metric-card:nth-child(2) svg,
html.dark #section-schedule .metric-card:nth-child(3) svg,
html.dark #section-schedule .metric-card:nth-child(4) svg,
html.dark #section-schedule .metric-card:nth-child(5) svg {
  background: rgba(226, 232, 240, 0.08) !important;
  color: #e2e8f0 !important; /* ghost white */
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.14) !important;
}
/* Keep a hint of status tint on the chip ring so cards aren't identical */
html.dark #section-schedule .metric-card:nth-child(1) svg {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(2) svg {
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(3) svg {
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18) !important;
}
html.dark #section-schedule .metric-card:nth-child(4) svg {
  box-shadow: inset 0 0 0 1px rgba(139, 115, 232, 0.22) !important;
}
html.dark #section-schedule .metric-card:nth-child(5) svg {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18) !important;
}

/* Note: theme switching uses the simple .theme-toggle icon button defined
   near the top of this file. A previous pill-switch (.theme-switch) was
   reverted — do not reintroduce without owner sign-off. */

/* ═══════════════════════════════════════════════════════════════════════════
   END SCHEDULE "BENTO" THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENTS / LEADS SUB-TAB PILL
   Scoped sub-tab switcher under the Clients section header.
   ═══════════════════════════════════════════════════════════════════════════ */
#section-clients .clients-subtab-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px;
  border-radius: 12px;
}
#section-clients .clients-subtab-btn {
  letter-spacing: 0.01em;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
#section-clients .clients-subtab-btn:not(.bg-white):hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Dark mode */
html.dark #section-clients .clients-subtab-pill {
  background: #1c1b22;
  border-color: #2b2a33;
}
html.dark #section-clients .clients-subtab-btn {
  color: #94a3b8 !important;
}
html.dark #section-clients .clients-subtab-btn.bg-white {
  background: linear-gradient(180deg, #2a2833 0%, #242129 100%) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
html.dark #section-clients .clients-subtab-btn:not(.bg-white):hover {
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0 !important;
}

/* Lead list row cards — subtle hover lift in dark mode */
html.dark #section-clients #leads-list > button {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-clients #leads-list > button:hover {
  background: #23212b !important;
  border-color: #3b3a44 !important;
}
html.dark #section-clients #leads-list > button .text-slate-900 {
  color: #f1f5f9 !important;
}
html.dark #section-clients #leads-list > button .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark #section-clients #leads-list > button .text-slate-400 {
  color: #64748b !important;
}

/* Empty / loading states + cards inside the leads panel */
html.dark #section-clients #leads-empty,
html.dark #section-clients #leads-loading,
html.dark #section-clients #leads-list-view > .bg-white,
html.dark #section-clients #lead-detail-view .bg-white {
  background: #1c1b22 !important;
  border-color: #2b2a33 !important;
}
html.dark #section-clients #lead-detail-view .text-slate-900 {
  color: #f1f5f9 !important;
}
html.dark #section-clients #lead-detail-view .text-slate-700 {
  color: #cbd5e1 !important;
}
html.dark #section-clients #lead-detail-view .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark #section-clients #lead-detail-view .text-slate-400 {
  color: #64748b !important;
}
html.dark #section-clients #lead-detail-notes {
  background: #14131a !important;
  border-color: #2b2a33 !important;
  color: #e2e8f0 !important;
}
html.dark #section-clients #lead-detail-notes:focus {
  background: #1c1b22 !important;
}
html.dark #section-clients #leads-search {
  background: #14131a !important;
  color: #e2e8f0 !important;
}
html.dark #section-clients #leads-search::placeholder {
  color: #64748b !important;
}

/* Add Lead modal — dark mode */
html.dark #add-lead-modal .bg-white {
  background: #1c1b22 !important;
  color: #e2e8f0 !important;
}
html.dark #add-lead-modal .border-slate-100 {
  border-color: #2b2a33 !important;
}
html.dark #add-lead-modal .text-slate-900 { color: #f1f5f9 !important; }
html.dark #add-lead-modal .text-slate-700 { color: #cbd5e1 !important; }
html.dark #add-lead-modal .text-slate-600 { color: #94a3b8 !important; }
html.dark #add-lead-modal .text-slate-400 { color: #64748b !important; }
html.dark #add-lead-modal input,
html.dark #add-lead-modal textarea {
  background: #14131a !important;
  border-color: #2b2a33 !important;
  color: #e2e8f0 !important;
}
html.dark #add-lead-modal input::placeholder,
html.dark #add-lead-modal textarea::placeholder {
  color: #64748b !important;
}


/* CLIENTS-PAGE-BENTO-V1 */
/* ═══════════════════════════════════════════════════════════════════════════
   CLIENTS PAGE — premium bento redesign
   Scoped stats strip, invite card, and panel/list layout.
   ═══════════════════════════════════════════════════════════════════════════ */

#section-clients .clients-stat {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  overflow: hidden;
}
#section-clients .clients-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.12);
  border-color: rgba(15, 23, 42, 0.10);
}
#section-clients .clients-stat__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
#section-clients .clients-stat__icon svg { width: 14px; height: 14px; }
#section-clients .clients-stat__label {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
#section-clients .clients-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-top: 4px;
  line-height: 1.1;
}
#section-clients .clients-stat--total { background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 60%); }
#section-clients .clients-stat--total .clients-stat__icon { background: #ede9fe; color: #6d28d9; }
#section-clients .clients-stat--active { background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%); }
#section-clients .clients-stat--active .clients-stat__icon { background: #d1fae5; color: #047857; }
#section-clients .clients-stat--unreg { background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%); }
#section-clients .clients-stat--unreg .clients-stat__icon { background: #fef3c7; color: #b45309; }

/* Invite card */
#section-clients .clients-invite-card {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 60%);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#section-clients .clients-invite-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px 120px at 100% 0%, rgba(59, 130, 246, 0.08), transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
#section-clients .clients-invite-card__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: #dbeafe; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
#section-clients .clients-invite-card__icon svg { width: 18px; height: 18px; }
#section-clients .clients-invite-card__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
#section-clients .clients-invite-card__title {
  font-size: 14px; font-weight: 600; color: #0f172a; letter-spacing: -0.01em;
}
#section-clients .clients-invite-card__sub {
  font-size: 11.5px; color: #64748b; margin-top: 2px;
}
#section-clients .clients-invite-card__form {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
#section-clients .clients-invite-card__input-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
#section-clients .clients-invite-card__input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #94a3b8; pointer-events: none;
}
#section-clients .clients-invite-card__input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
#section-clients .clients-invite-card__input::placeholder { color: #94a3b8; }
#section-clients .clients-invite-card__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#section-clients .clients-invite-card__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25);
}
#section-clients .clients-invite-card__btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 8px 16px -6px rgba(15, 23, 42, 0.35);
}

/* Subheader utility */
#section-clients .clients-subheader {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Clients panel */
#section-clients .clients-panel {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
#section-clients .clients-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  flex-wrap: wrap;
}
#section-clients .clients-panel__title-wrap {
  display: flex; align-items: center; gap: 10px;
}
#section-clients .clients-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}
#section-clients .clients-panel__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  background: #f1f5f9; color: #475569;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
#section-clients .clients-panel__tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#section-clients .clients-panel__search {
  position: relative;
  display: flex; align-items: center;
}
#section-clients .clients-panel__search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #94a3b8; pointer-events: none;
}
#section-clients .clients-panel__search input {
  width: 240px;
  padding: 8px 12px 8px 30px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: #0f172a;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
#section-clients .clients-panel__search input::placeholder { color: #94a3b8; }
#section-clients .clients-panel__search input:focus {
  outline: none;
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
#section-clients .clients-panel__filter {
  padding: 8px 30px 8px 12px;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: #0f172a;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
#section-clients .clients-panel__filter:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* Clients table rows */
#section-clients .clients-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.2fr) 140px 120px 100px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: background 140ms ease;
}
#section-clients .clients-row:hover { background: #fafafa; }
#section-clients .clients-row:last-child { border-bottom: 0; }

#section-clients .clients-row--head {
  padding: 10px 18px;
  background: #fafaf8;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  cursor: default;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
}
#section-clients .clients-row--head:hover { background: #fafaf8; }
#section-clients .clients-row--head .clients-row__cell--bookings,
#section-clients .clients-row--head .clients-row__cell--status {
  justify-content: center;
  text-align: center;
}
#section-clients .clients-row--head .clients-row__cell--action { text-align: right; }

#section-clients .clients-row__cell { min-width: 0; }
#section-clients .clients-row__cell--client { display: flex; align-items: center; gap: 12px; }
#section-clients .clients-row__avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
#section-clients .clients-row__name-block { min-width: 0; }
#section-clients .clients-row__name {
  font-size: 13.5px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-clients .clients-row__meta {
  font-size: 11px; color: #94a3b8; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-clients .clients-row__cell--email {
  font-size: 12.5px;
  color: #64748b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-clients .clients-row__cell--bookings {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px;
}
#section-clients .clients-row__cell--status {
  display: flex; align-items: center; justify-content: center;
}
#section-clients .clients-bookings-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px;
  padding: 0 7px;
  background: #eff6ff; color: #1d4ed8;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
}
#section-clients .clients-bookings-label { color: #64748b; }

#section-clients .clients-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
}
#section-clients .clients-pill__dot {
  width: 6px; height: 6px; border-radius: 999px;
  display: inline-block;
}
#section-clients .clients-pill--active { background: #d1fae5; color: #047857; }
#section-clients .clients-pill--active .clients-pill__dot { background: #10b981; }
#section-clients .clients-pill--unreg { background: #fef3c7; color: #b45309; }
#section-clients .clients-pill--unreg .clients-pill__dot { background: #f59e0b; }

#section-clients .clients-row__cell--action { display: flex; justify-content: flex-end; }
#section-clients .clients-action {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  white-space: nowrap;
}
#section-clients .clients-action--remove { color: #dc2626; background: transparent; }
#section-clients .clients-action--remove:hover { background: #fee2e2; }
#section-clients .clients-action--invite { color: #1d4ed8; background: #eff6ff; }
#section-clients .clients-action--invite:hover { background: #dbeafe; transform: translateY(-1px); }

#section-clients .clients-empty {
  padding: 48px 20px;
  text-align: center;
}
#section-clients .clients-empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: #f1f5f9; color: #cbd5e1;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
#section-clients .clients-empty__icon svg { width: 26px; height: 26px; }
#section-clients .clients-empty__title { font-size: 13px; font-weight: 600; color: #334155; }
#section-clients .clients-empty__sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }

/* Pending invitations row (premium) */
#section-clients .clients-pending-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#section-clients .clients-pending-row__left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
#section-clients .clients-pending-row__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  background: #fef3c7; color: #b45309;
  display: inline-flex; align-items: center; justify-content: center;
}
#section-clients .clients-pending-row__icon svg { width: 15px; height: 15px; }
#section-clients .clients-pending-row__email { font-size: 13px; font-weight: 600; color: #0f172a; }
#section-clients .clients-pending-row__meta { font-size: 11px; color: #94a3b8; margin-top: 1px; }
#section-clients .clients-pending-row__actions { display: flex; gap: 6px; }
#section-clients .clients-pending-btn {
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}
#section-clients .clients-pending-btn--copy { color: #047857; background: #d1fae5; }
#section-clients .clients-pending-btn--copy:hover { background: #a7f3d0; }
#section-clients .clients-pending-btn--cancel { color: #dc2626; background: transparent; }
#section-clients .clients-pending-btn--cancel:hover { background: #fee2e2; }

/* Responsive — stack on small screens */
@media (max-width: 720px) {
  #section-clients .clients-row--head { display: none; }
  #section-clients .clients-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "client action"
      "email  email"
      "meta   meta";
    padding: 14px;
    gap: 8px;
  }
  #section-clients .clients-row__cell--client { grid-area: client; }
  #section-clients .clients-row__cell--action { grid-area: action; }
  #section-clients .clients-row__cell--email {
    grid-area: email; font-size: 12px; padding-left: 48px;
  }
  #section-clients .clients-row__cell--bookings,
  #section-clients .clients-row__cell--status {
    grid-area: meta;
    display: inline-flex;
    padding-left: 48px;
  }
  #section-clients .clients-row__cell--status { margin-left: auto; padding-left: 8px; }
  #section-clients .clients-panel__search input { width: 100%; }
  #section-clients .clients-panel__tools { width: 100%; }
  #section-clients .clients-stat__value { font-size: 18px; }
  #section-clients .clients-stat__label { font-size: 9.5px; }
}

/* Dark mode */
html.dark #section-clients .clients-stat {
  background: #161618 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-clients .clients-stat--total { background: linear-gradient(135deg, rgba(139, 115, 232, 0.08) 0%, #161618 60%) !important; }
html.dark #section-clients .clients-stat--active { background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, #161618 60%) !important; }
html.dark #section-clients .clients-stat--unreg { background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, #161618 60%) !important; }
html.dark #section-clients .clients-stat--total .clients-stat__icon { background: rgba(139, 115, 232, 0.15) !important; color: #b9a5ff !important; }
html.dark #section-clients .clients-stat--active .clients-stat__icon { background: rgba(52, 211, 153, 0.15) !important; color: #6ee7b7 !important; }
html.dark #section-clients .clients-stat--unreg .clients-stat__icon { background: rgba(251, 191, 36, 0.15) !important; color: #fbbf24 !important; }
html.dark #section-clients .clients-stat__label { color: #94a3b8 !important; }
html.dark #section-clients .clients-stat__value { color: #f1f5f9 !important; }

html.dark #section-clients .clients-invite-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, #161618 60%) !important;
  border-color: rgba(59, 130, 246, 0.20) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-clients .clients-invite-card__icon { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; }
html.dark #section-clients .clients-invite-card__title { color: #f1f5f9 !important; }
html.dark #section-clients .clients-invite-card__sub { color: #94a3b8 !important; }
html.dark #section-clients .clients-invite-card__input {
  background: #14131a !important;
  border-color: #2b2a33 !important;
  color: #f1f5f9 !important;
}
html.dark #section-clients .clients-invite-card__input::placeholder { color: #64748b !important; }
html.dark #section-clients .clients-invite-card__input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}
html.dark #section-clients .clients-invite-card__btn {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
}
html.dark #section-clients .clients-invite-card__btn:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
}

html.dark #section-clients .clients-subheader { color: #64748b !important; }

html.dark #section-clients .clients-panel {
  background: #161618 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-clients .clients-panel__head {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark #section-clients .clients-panel__title { color: #f1f5f9 !important; }
html.dark #section-clients .clients-panel__count {
  background: #1c1b22 !important;
  color: #cbd5e1 !important;
}
html.dark #section-clients .clients-panel__search input {
  background: #14131a !important;
  border-color: #2b2a33 !important;
  color: #f1f5f9 !important;
}
html.dark #section-clients .clients-panel__search input::placeholder { color: #64748b !important; }
html.dark #section-clients .clients-panel__search input:focus {
  background: #1c1b22 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}
html.dark #section-clients .clients-panel__filter {
  background-color: #14131a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  border-color: #2b2a33 !important;
  color: #f1f5f9 !important;
}
html.dark #section-clients .clients-panel__filter option {
  background: #161618 !important;
  color: #f1f5f9 !important;
}

html.dark #section-clients .clients-row {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark #section-clients .clients-row:hover { background: #1c1b22 !important; }
html.dark #section-clients .clients-row--head {
  background: rgba(255, 255, 255, 0.02) !important;
  color: #64748b !important;
}
html.dark #section-clients .clients-row--head:hover { background: rgba(255, 255, 255, 0.02) !important; }
html.dark #section-clients .clients-row__name { color: #f1f5f9 !important; }
html.dark #section-clients .clients-row__meta { color: #64748b !important; }
html.dark #section-clients .clients-row__cell--email { color: #94a3b8 !important; }
html.dark #section-clients .clients-bookings-chip {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}
html.dark #section-clients .clients-bookings-label { color: #94a3b8 !important; }
html.dark #section-clients .clients-pill--active {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #section-clients .clients-pill--active .clients-pill__dot { background: #34d399 !important; }
html.dark #section-clients .clients-pill--unreg {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
}
html.dark #section-clients .clients-pill--unreg .clients-pill__dot { background: #f59e0b !important; }
html.dark #section-clients .clients-action--remove { color: #fca5a5 !important; }
html.dark #section-clients .clients-action--remove:hover { background: rgba(220, 38, 38, 0.12) !important; }
html.dark #section-clients .clients-action--invite {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.15) !important;
}
html.dark #section-clients .clients-action--invite:hover { background: rgba(59, 130, 246, 0.25) !important; }

html.dark #section-clients .clients-empty__icon {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #475569 !important;
}
html.dark #section-clients .clients-empty__title { color: #e2e8f0 !important; }
html.dark #section-clients .clients-empty__sub { color: #64748b !important; }

html.dark #section-clients .clients-pending-row {
  background: #161618 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  border-left-color: #f59e0b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-clients .clients-pending-row__icon {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
}
html.dark #section-clients .clients-pending-row__email { color: #f1f5f9 !important; }
html.dark #section-clients .clients-pending-row__meta { color: #64748b !important; }
html.dark #section-clients .clients-pending-btn--copy {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #section-clients .clients-pending-btn--copy:hover { background: rgba(52, 211, 153, 0.25) !important; }
html.dark #section-clients .clients-pending-btn--cancel { color: #fca5a5 !important; }
html.dark #section-clients .clients-pending-btn--cancel:hover { background: rgba(220, 38, 38, 0.12) !important; }

html.dark #section-clients #clients-loading p { color: #94a3b8 !important; }
/* END CLIENTS-PAGE-BENTO-V1 */


/* CLIENTS-PAGE-BENTO-V2 */
/* ─── Leads row variant (5 cols: lead / contact / labels / added / action) */
#section-clients .clients-row--leads {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) minmax(0, 2fr) 110px 90px;
}
#section-clients .clients-row--leads .clients-row__cell--labels,
#section-clients .clients-row--leads .clients-row__cell--added {
  display: flex; align-items: center;
}
#section-clients .clients-row--head.clients-row--leads .clients-row__cell--labels,
#section-clients .clients-row--head.clients-row--leads .clients-row__cell--added {
  justify-content: flex-start;
}

/* Contact two-line stack (lead row + label staff row) */
#section-clients .clients-lead-contact,
#section-staff .clients-lead-contact {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
#section-clients .clients-lead-contact-line,
#section-staff .clients-lead-contact-line {
  font-size: 12.5px;
  color: #334155;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-clients .clients-lead-contact-line--muted,
#section-staff .clients-lead-contact-line--muted {
  font-size: 11.5px;
  color: #94a3b8;
}

/* Label chips (lead labels) — distinct tinted pills per slug */
#section-clients .clients-labels-row {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
#section-clients .clients-label-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
#section-clients .clients-label-chip--hot-lead       { background: #fee2e2; color: #b91c1c; }
#section-clients .clients-label-chip--interested     { background: #d1fae5; color: #047857; }
#section-clients .clients-label-chip--follow-up      { background: #dbeafe; color: #1d4ed8; }
#section-clients .clients-label-chip--booked         { background: #ede9fe; color: #6d28d9; }
#section-clients .clients-label-chip--bad-lead       { background: #f1f5f9; color: #475569; }
#section-clients .clients-label-chip--not-interested { background: #f1f5f9; color: #475569; }
#section-clients .clients-label-chip--too-far        { background: #ffedd5; color: #c2410c; }
#section-clients .clients-label-chip--needs-quote    { background: #ede9fe; color: #6d28d9; }
#section-clients .clients-label-chip--more           { background: #f1f5f9; color: #64748b; }
#section-clients .clients-labels-empty {
  font-size: 11.5px; color: #cbd5e1;
}

/* Added-pill — subtle rounded timestamp */
#section-clients .clients-added-pill,
#section-staff .clients-added-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: #f1f5f9; color: #475569;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}

/* "View" and "Edit" action variants */
#section-clients .clients-action--view {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.08);
}
#section-clients .clients-action--view:hover {
  background: rgba(59, 130, 246, 0.14);
  transform: translateY(-1px);
}
#section-staff .clients-action--edit {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.08);
}
#section-staff .clients-action--edit:hover {
  background: rgba(59, 130, 246, 0.14);
  transform: translateY(-1px);
}
#section-staff .clients-action--icon {
  padding: 6px;
  color: #94a3b8;
  background: transparent;
}
#section-staff .clients-action--icon:hover {
  color: #dc2626;
  background: #fee2e2;
}

/* Panel "Add Lead" button */
#section-clients .clients-panel__add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25);
}
#section-clients .clients-panel__add-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 8px 16px -6px rgba(15, 23, 42, 0.35);
}

/* Panel hint text (right side of panel head) */
#section-clients .clients-panel__hint,
#section-staff .clients-panel__hint {
  font-size: 11.5px; color: #94a3b8; font-weight: 500;
}

/* Invite card: head-row layout (title + secondary button on same line) */
#section-staff .clients-invite-card__headrow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
#section-staff .clients-invite-card__secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: #334155;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
#section-staff .clients-invite-card__secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

/* Mini "Label" chip beside a name */
#section-clients .clients-mini-chip,
#section-staff .clients-mini-chip {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  background: #f1f5f9; color: #64748b;
  border-radius: 6px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#section-clients .clients-row__name-inline,
#section-staff .clients-row__name-inline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Photo avatar variant (img instead of div) */
#section-clients .clients-row__avatar--img,
#section-staff .clients-row__avatar--img {
  object-fit: cover;
}

/* Rate chips / buttons (staff panels) */
#section-staff .clients-rate-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em;
}
#section-staff .clients-rate-chip--set {
  background: rgba(16, 185, 129, 0.12); color: #047857;
}
#section-staff .clients-rate-chip--unset {
  background: #f1f5f9; color: #94a3b8;
}
#section-staff .clients-rate-btn {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  transition: background 140ms ease, transform 140ms ease;
}
#section-staff .clients-rate-btn--set {
  background: rgba(16, 185, 129, 0.12); color: #047857;
}
#section-staff .clients-rate-btn--set:hover {
  background: rgba(16, 185, 129, 0.18);
  transform: translateY(-1px);
}
#section-staff .clients-rate-btn--unset {
  background: #f1f5f9; color: #475569;
}
#section-staff .clients-rate-btn--unset:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* Staff-row variants: custom grid templates */
#section-staff .clients-row--staff {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.2fr) 130px 130px 150px;
}
#section-staff .clients-row--staff-label {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.2fr) 150px 170px;
}
#section-staff .clients-row--head.clients-row--staff .clients-row__cell--rate,
#section-staff .clients-row--head.clients-row--staff .clients-row__cell--joined,
#section-staff .clients-row--head.clients-row--staff-label .clients-row__cell--rate {
  justify-content: center; text-align: center;
}
#section-staff .clients-row--staff .clients-row__cell--rate,
#section-staff .clients-row--staff .clients-row__cell--joined,
#section-staff .clients-row--staff-label .clients-row__cell--rate {
  display: flex; align-items: center; justify-content: center;
}
#section-staff .clients-row__cell--action { display: flex; justify-content: flex-end; gap: 6px; }

/* Responsive for leads/staff too */
@media (max-width: 820px) {
  #section-clients .clients-row--leads,
  #section-staff .clients-row--staff,
  #section-staff .clients-row--staff-label {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "client action"
      "email  email"
      "meta   meta" !important;
    padding: 14px !important;
    gap: 8px !important;
  }
  #section-clients .clients-row--leads .clients-row__cell--labels,
  #section-clients .clients-row--leads .clients-row__cell--added,
  #section-staff .clients-row--staff .clients-row__cell--rate,
  #section-staff .clients-row--staff .clients-row__cell--joined,
  #section-staff .clients-row--staff-label .clients-row__cell--rate {
    grid-area: meta;
    padding-left: 48px;
    display: inline-flex;
  }
  #section-clients .clients-row--leads .clients-row__cell--added {
    margin-left: auto;
    padding-left: 8px;
  }
}

/* Dark mode additions */
html.dark #section-clients .clients-panel__hint,
html.dark #section-staff .clients-panel__hint { color: #64748b !important; }
html.dark #section-clients .clients-label-chip--hot-lead       { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; }
html.dark #section-clients .clients-label-chip--interested     { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; }
html.dark #section-clients .clients-label-chip--follow-up      { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
html.dark #section-clients .clients-label-chip--booked         { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; }
html.dark #section-clients .clients-label-chip--bad-lead,
html.dark #section-clients .clients-label-chip--not-interested { background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; }
html.dark #section-clients .clients-label-chip--too-far        { background: rgba(249, 115, 22, 0.18) !important; color: #fdba74 !important; }
html.dark #section-clients .clients-label-chip--needs-quote    { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; }
html.dark #section-clients .clients-label-chip--more           { background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; }

html.dark #section-clients .clients-lead-contact-line,
html.dark #section-staff .clients-lead-contact-line { color: #cbd5e1 !important; }
html.dark #section-clients .clients-lead-contact-line--muted,
html.dark #section-staff .clients-lead-contact-line--muted { color: #64748b !important; }
html.dark #section-clients .clients-added-pill,
html.dark #section-staff .clients-added-pill {
  background: rgba(255, 255, 255, 0.06) !important; color: #cbd5e1 !important;
}
html.dark #section-clients .clients-action--view {
  background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important;
}
html.dark #section-clients .clients-action--view:hover { background: rgba(59, 130, 246, 0.25) !important; }
html.dark #section-staff .clients-action--edit {
  background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important;
}
html.dark #section-staff .clients-action--edit:hover { background: rgba(59, 130, 246, 0.25) !important; }
html.dark #section-staff .clients-action--icon:hover {
  background: rgba(220, 38, 38, 0.15) !important; color: #fca5a5 !important;
}
html.dark #section-clients .clients-panel__add-btn {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
}
html.dark #section-clients .clients-panel__add-btn:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
}
html.dark #section-staff .clients-invite-card__secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #cbd5e1 !important;
}
html.dark #section-staff .clients-invite-card__secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
html.dark #section-clients .clients-mini-chip,
html.dark #section-staff .clients-mini-chip {
  background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important;
}
html.dark #section-staff .clients-rate-chip--set {
  background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important;
}
html.dark #section-staff .clients-rate-chip--unset {
  background: rgba(255, 255, 255, 0.05) !important; color: #64748b !important;
}
html.dark #section-staff .clients-rate-btn--set {
  background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important;
}
html.dark #section-staff .clients-rate-btn--set:hover { background: rgba(16, 185, 129, 0.28) !important; }
html.dark #section-staff .clients-rate-btn--unset {
  background: rgba(255, 255, 255, 0.05) !important; color: #cbd5e1 !important;
}
html.dark #section-staff .clients-rate-btn--unset:hover { background: rgba(255, 255, 255, 0.10) !important; }
html.dark #section-clients .clients-labels-empty { color: #475569 !important; }
/* END CLIENTS-PAGE-BENTO-V2 */

/* STAFF-PAGE-BENTO-MIRROR */
/* ─── Staff page — same premium bento, scoped to #section-staff ─── */

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENTS PAGE — premium bento redesign
   Scoped stats strip, invite card, and panel/list layout.
   ═══════════════════════════════════════════════════════════════════════════ */

#section-staff .clients-stat {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  overflow: hidden;
}
#section-staff .clients-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.12);
  border-color: rgba(15, 23, 42, 0.10);
}
#section-staff .clients-stat__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
#section-staff .clients-stat__icon svg { width: 14px; height: 14px; }
#section-staff .clients-stat__label {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
#section-staff .clients-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-top: 4px;
  line-height: 1.1;
}
#section-staff .clients-stat--total { background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 60%); }
#section-staff .clients-stat--total .clients-stat__icon { background: #ede9fe; color: #6d28d9; }
#section-staff .clients-stat--active { background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%); }
#section-staff .clients-stat--active .clients-stat__icon { background: #d1fae5; color: #047857; }
#section-staff .clients-stat--unreg { background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%); }
#section-staff .clients-stat--unreg .clients-stat__icon { background: #fef3c7; color: #b45309; }

/* Invite card */
#section-staff .clients-invite-card {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 60%);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#section-staff .clients-invite-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px 120px at 100% 0%, rgba(59, 130, 246, 0.08), transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
#section-staff .clients-invite-card__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: #dbeafe; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
#section-staff .clients-invite-card__icon svg { width: 18px; height: 18px; }
#section-staff .clients-invite-card__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
#section-staff .clients-invite-card__title {
  font-size: 14px; font-weight: 600; color: #0f172a; letter-spacing: -0.01em;
}
#section-staff .clients-invite-card__sub {
  font-size: 11.5px; color: #64748b; margin-top: 2px;
}
#section-staff .clients-invite-card__form {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
#section-staff .clients-invite-card__input-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
#section-staff .clients-invite-card__input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #94a3b8; pointer-events: none;
}
#section-staff .clients-invite-card__input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
#section-staff .clients-invite-card__input::placeholder { color: #94a3b8; }
#section-staff .clients-invite-card__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#section-staff .clients-invite-card__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25);
}
#section-staff .clients-invite-card__btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 8px 16px -6px rgba(15, 23, 42, 0.35);
}

/* Subheader utility */
#section-staff .clients-subheader {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Clients panel */
#section-staff .clients-panel {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
#section-staff .clients-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  flex-wrap: wrap;
}
#section-staff .clients-panel__title-wrap {
  display: flex; align-items: center; gap: 10px;
}
#section-staff .clients-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}
#section-staff .clients-panel__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  background: #f1f5f9; color: #475569;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
#section-staff .clients-panel__tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#section-staff .clients-panel__search {
  position: relative;
  display: flex; align-items: center;
}
#section-staff .clients-panel__search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #94a3b8; pointer-events: none;
}
#section-staff .clients-panel__search input {
  width: 240px;
  padding: 8px 12px 8px 30px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: #0f172a;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
#section-staff .clients-panel__search input::placeholder { color: #94a3b8; }
#section-staff .clients-panel__search input:focus {
  outline: none;
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
#section-staff .clients-panel__filter {
  padding: 8px 30px 8px 12px;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: #0f172a;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
#section-staff .clients-panel__filter:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* Clients table rows */
#section-staff .clients-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.2fr) 140px 120px 100px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: background 140ms ease;
}
#section-staff .clients-row:hover { background: #fafafa; }
#section-staff .clients-row:last-child { border-bottom: 0; }

#section-staff .clients-row--head {
  padding: 10px 18px;
  background: #fafaf8;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  cursor: default;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
}
#section-staff .clients-row--head:hover { background: #fafaf8; }
#section-staff .clients-row--head .clients-row__cell--bookings,
#section-staff .clients-row--head .clients-row__cell--status {
  justify-content: center;
  text-align: center;
}
#section-staff .clients-row--head .clients-row__cell--action { text-align: right; }

#section-staff .clients-row__cell { min-width: 0; }
#section-staff .clients-row__cell--client { display: flex; align-items: center; gap: 12px; }
#section-staff .clients-row__avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
#section-staff .clients-row__name-block { min-width: 0; }
#section-staff .clients-row__name {
  font-size: 13.5px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-staff .clients-row__meta {
  font-size: 11px; color: #94a3b8; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-staff .clients-row__cell--email {
  font-size: 12.5px;
  color: #64748b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-staff .clients-row__cell--bookings {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px;
}
#section-staff .clients-row__cell--status {
  display: flex; align-items: center; justify-content: center;
}
#section-staff .clients-bookings-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px;
  padding: 0 7px;
  background: #eff6ff; color: #1d4ed8;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
}
#section-staff .clients-bookings-label { color: #64748b; }

#section-staff .clients-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
}
#section-staff .clients-pill__dot {
  width: 6px; height: 6px; border-radius: 999px;
  display: inline-block;
}
#section-staff .clients-pill--active { background: #d1fae5; color: #047857; }
#section-staff .clients-pill--active .clients-pill__dot { background: #10b981; }
#section-staff .clients-pill--unreg { background: #fef3c7; color: #b45309; }
#section-staff .clients-pill--unreg .clients-pill__dot { background: #f59e0b; }

#section-staff .clients-row__cell--action { display: flex; justify-content: flex-end; }
#section-staff .clients-action {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  white-space: nowrap;
}
#section-staff .clients-action--remove { color: #dc2626; background: transparent; }
#section-staff .clients-action--remove:hover { background: #fee2e2; }
#section-staff .clients-action--invite { color: #1d4ed8; background: #eff6ff; }
#section-staff .clients-action--invite:hover { background: #dbeafe; transform: translateY(-1px); }

#section-staff .clients-empty {
  padding: 48px 20px;
  text-align: center;
}
#section-staff .clients-empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: #f1f5f9; color: #cbd5e1;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
#section-staff .clients-empty__icon svg { width: 26px; height: 26px; }
#section-staff .clients-empty__title { font-size: 13px; font-weight: 600; color: #334155; }
#section-staff .clients-empty__sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }

/* Pending invitations row (premium) */
#section-staff .clients-pending-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#section-staff .clients-pending-row__left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
#section-staff .clients-pending-row__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  background: #fef3c7; color: #b45309;
  display: inline-flex; align-items: center; justify-content: center;
}
#section-staff .clients-pending-row__icon svg { width: 15px; height: 15px; }
#section-staff .clients-pending-row__email { font-size: 13px; font-weight: 600; color: #0f172a; }
#section-staff .clients-pending-row__meta { font-size: 11px; color: #94a3b8; margin-top: 1px; }
#section-staff .clients-pending-row__actions { display: flex; gap: 6px; }
#section-staff .clients-pending-btn {
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}
#section-staff .clients-pending-btn--copy { color: #047857; background: #d1fae5; }
#section-staff .clients-pending-btn--copy:hover { background: #a7f3d0; }
#section-staff .clients-pending-btn--cancel { color: #dc2626; background: transparent; }
#section-staff .clients-pending-btn--cancel:hover { background: #fee2e2; }

/* Responsive — stack on small screens */
@media (max-width: 720px) {
  #section-staff .clients-row--head { display: none; }
  #section-staff .clients-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "client action"
      "email  email"
      "meta   meta";
    padding: 14px;
    gap: 8px;
  }
  #section-staff .clients-row__cell--client { grid-area: client; }
  #section-staff .clients-row__cell--action { grid-area: action; }
  #section-staff .clients-row__cell--email {
    grid-area: email; font-size: 12px; padding-left: 48px;
  }
  #section-staff .clients-row__cell--bookings,
  #section-staff .clients-row__cell--status {
    grid-area: meta;
    display: inline-flex;
    padding-left: 48px;
  }
  #section-staff .clients-row__cell--status { margin-left: auto; padding-left: 8px; }
  #section-staff .clients-panel__search input { width: 100%; }
  #section-staff .clients-panel__tools { width: 100%; }
  #section-staff .clients-stat__value { font-size: 18px; }
  #section-staff .clients-stat__label { font-size: 9.5px; }
}

/* Dark mode */
html.dark #section-staff .clients-stat {
  background: #161618 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-staff .clients-stat--total { background: linear-gradient(135deg, rgba(139, 115, 232, 0.08) 0%, #161618 60%) !important; }
html.dark #section-staff .clients-stat--active { background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, #161618 60%) !important; }
html.dark #section-staff .clients-stat--unreg { background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, #161618 60%) !important; }
html.dark #section-staff .clients-stat--total .clients-stat__icon { background: rgba(139, 115, 232, 0.15) !important; color: #b9a5ff !important; }
html.dark #section-staff .clients-stat--active .clients-stat__icon { background: rgba(52, 211, 153, 0.15) !important; color: #6ee7b7 !important; }
html.dark #section-staff .clients-stat--unreg .clients-stat__icon { background: rgba(251, 191, 36, 0.15) !important; color: #fbbf24 !important; }
html.dark #section-staff .clients-stat__label { color: #94a3b8 !important; }
html.dark #section-staff .clients-stat__value { color: #f1f5f9 !important; }

html.dark #section-staff .clients-invite-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, #161618 60%) !important;
  border-color: rgba(59, 130, 246, 0.20) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-staff .clients-invite-card__icon { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; }
html.dark #section-staff .clients-invite-card__title { color: #f1f5f9 !important; }
html.dark #section-staff .clients-invite-card__sub { color: #94a3b8 !important; }
html.dark #section-staff .clients-invite-card__input {
  background: #14131a !important;
  border-color: #2b2a33 !important;
  color: #f1f5f9 !important;
}
html.dark #section-staff .clients-invite-card__input::placeholder { color: #64748b !important; }
html.dark #section-staff .clients-invite-card__input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}
html.dark #section-staff .clients-invite-card__btn {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
}
html.dark #section-staff .clients-invite-card__btn:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
}

html.dark #section-staff .clients-subheader { color: #64748b !important; }

html.dark #section-staff .clients-panel {
  background: #161618 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-staff .clients-panel__head {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark #section-staff .clients-panel__title { color: #f1f5f9 !important; }
html.dark #section-staff .clients-panel__count {
  background: #1c1b22 !important;
  color: #cbd5e1 !important;
}
html.dark #section-staff .clients-panel__search input {
  background: #14131a !important;
  border-color: #2b2a33 !important;
  color: #f1f5f9 !important;
}
html.dark #section-staff .clients-panel__search input::placeholder { color: #64748b !important; }
html.dark #section-staff .clients-panel__search input:focus {
  background: #1c1b22 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}
html.dark #section-staff .clients-panel__filter {
  background-color: #14131a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  border-color: #2b2a33 !important;
  color: #f1f5f9 !important;
}
html.dark #section-staff .clients-panel__filter option {
  background: #161618 !important;
  color: #f1f5f9 !important;
}

html.dark #section-staff .clients-row {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark #section-staff .clients-row:hover { background: #1c1b22 !important; }
html.dark #section-staff .clients-row--head {
  background: rgba(255, 255, 255, 0.02) !important;
  color: #64748b !important;
}
html.dark #section-staff .clients-row--head:hover { background: rgba(255, 255, 255, 0.02) !important; }
html.dark #section-staff .clients-row__name { color: #f1f5f9 !important; }
html.dark #section-staff .clients-row__meta { color: #64748b !important; }
html.dark #section-staff .clients-row__cell--email { color: #94a3b8 !important; }
html.dark #section-staff .clients-bookings-chip {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}
html.dark #section-staff .clients-bookings-label { color: #94a3b8 !important; }
html.dark #section-staff .clients-pill--active {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #section-staff .clients-pill--active .clients-pill__dot { background: #34d399 !important; }
html.dark #section-staff .clients-pill--unreg {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
}
html.dark #section-staff .clients-pill--unreg .clients-pill__dot { background: #f59e0b !important; }
html.dark #section-staff .clients-action--remove { color: #fca5a5 !important; }
html.dark #section-staff .clients-action--remove:hover { background: rgba(220, 38, 38, 0.12) !important; }
html.dark #section-staff .clients-action--invite {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.15) !important;
}
html.dark #section-staff .clients-action--invite:hover { background: rgba(59, 130, 246, 0.25) !important; }

html.dark #section-staff .clients-empty__icon {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #475569 !important;
}
html.dark #section-staff .clients-empty__title { color: #e2e8f0 !important; }
html.dark #section-staff .clients-empty__sub { color: #64748b !important; }

html.dark #section-staff .clients-pending-row {
  background: #161618 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  border-left-color: #f59e0b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.dark #section-staff .clients-pending-row__icon {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
}
html.dark #section-staff .clients-pending-row__email { color: #f1f5f9 !important; }
html.dark #section-staff .clients-pending-row__meta { color: #64748b !important; }
html.dark #section-staff .clients-pending-btn--copy {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
}
html.dark #section-staff .clients-pending-btn--copy:hover { background: rgba(52, 211, 153, 0.25) !important; }
html.dark #section-staff .clients-pending-btn--cancel { color: #fca5a5 !important; }
html.dark #section-staff .clients-pending-btn--cancel:hover { background: rgba(220, 38, 38, 0.12) !important; }

html.dark #section-staff #clients-loading p { color: #94a3b8 !important; }

/* END STAFF-PAGE-BENTO-MIRROR */

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard bento depth
   ──────────────────────────────────────────────────────────────────────────
   Richer layered shadows for the stat cards, calendar, recent bookings and
   the day-view cards on the Schedule/Dashboard page. Previously every bento
   relied on Tailwind's `shadow-sm` (a single 1px shadow) which read flat on
   a plain background. The two-layer stack here adds a tight contact shadow
   plus a soft ambient drop so cards feel lifted without looking heavy.

   Scoped strictly to `#section-schedule` so it doesn't bleed into other
   sections (Clients, Staff, Settings, etc.) that already have their own
   bento treatments.

   Rollback: delete this block.
   ══════════════════════════════════════════════════════════════════════════ */
#section-schedule .metric-card,
#section-schedule #schedule-calendar-card,
#section-schedule #schedule-recent-card,
#section-schedule #mobile-bookings-list,
#section-schedule #day-timeline-section,
#section-schedule #day-view-list-card {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -14px rgba(15, 23, 42, 0.10),
    0 24px 48px -30px rgba(15, 23, 42, 0.14) !important;
}

/* Stat cards lift a little more on hover — paired with the existing
   translateY(-2px) in the base rule this reads as a gentle tactile press. */
#section-schedule .metric-card:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 10px 28px -12px rgba(80, 70, 140, 0.22),
    0 28px 56px -28px rgba(80, 70, 140, 0.28) !important;
}

/* Dark mode — subtle black shadows keep the surfaces reading as elevated
   against the near-black dashboard background. Must override the earlier
   `box-shadow: none !important` rule on these cards (same specificity,
   declared later so the cascade picks this one). */
html.dark #section-schedule .metric-card,
html.dark #section-schedule #schedule-calendar-card,
html.dark #section-schedule #schedule-recent-card,
html.dark #section-schedule #mobile-bookings-list,
html.dark #section-schedule #day-timeline-section,
html.dark #section-schedule #day-view-list-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 8px 24px -14px rgba(0, 0, 0, 0.32),
    0 24px 48px -30px rgba(0, 0, 0, 0.42) !important;
}
html.dark #section-schedule .metric-card:hover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 10px 28px -12px rgba(139, 115, 232, 0.25),
    0 28px 56px -28px rgba(139, 115, 232, 0.32) !important;
}
/* END DASHBOARD-BENTO-DEPTH */


/* ══════════════════════════════════════════════════════════════════════════
   ROLE PILL — unified label styling across admin / staff / client portals
   ──────────────────────────────────────────────────────────────────────────
   Before this, the dropdown role pills were inconsistent:
     • Admin portal used purple Owner / slate Client
     • Staff & Client portals used amber (yellow!) Owner / purple Client
   This block standardises them on one palette (Owner=purple, Admin=blue,
   Staff=green, Client=slate) and upgrades the look to a soft filled
   gradient pill with a tint of ring-shadow so they feel premium instead of
   flat. The header `#business-role-badge` is kept visually aligned so the
   trigger and the dropdown both read the same.

   Scope: `.role-pill` is only emitted by the business switcher dropdowns
   and is namespaced with BEM-style `.role-pill--{role}` modifiers, so there
   is zero risk of collision with other pills (status chips, filter tabs).

   Rollback: delete this block + revert the `roleColors` maps in
   `public/admin/js/features/01-nav-shell.js`, `public/staff/js/app.js`,
   `public/client/js/app.js`.
   ══════════════════════════════════════════════════════════════════════════ */
.role-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: background 140ms ease, color 140ms ease !important;
}

.role-pill--owner {
  background: linear-gradient(180deg, #f1ecff 0%, #e4dcff 100%) !important;
  color: #5b3fc3 !important;
  border-color: rgba(139, 115, 232, 0.28) !important;
}
.role-pill--admin {
  background: linear-gradient(180deg, #e5eefc 0%, #d4e2fb 100%) !important;
  color: #1e4bd1 !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
}
.role-pill--staff {
  background: linear-gradient(180deg, #dbf5e7 0%, #c5efd8 100%) !important;
  color: #15794b !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}
.role-pill--client {
  background: linear-gradient(180deg, #eef1f6 0%, #dfe4ec 100%) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
}

/* Header business-role-badge — same palette, same gradient feel */
#business-role-badge {
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f1ecff 0%, #e4dcff 100%) !important;
  color: #5b3fc3 !important;
  border: 1px solid rgba(139, 115, 232, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
#business-role-badge[data-role="admin"] {
  background: linear-gradient(180deg, #e5eefc 0%, #d4e2fb 100%) !important;
  color: #1e4bd1 !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
}
#business-role-badge[data-role="staff"] {
  background: linear-gradient(180deg, #dbf5e7 0%, #c5efd8 100%) !important;
  color: #15794b !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}
#business-role-badge[data-role="client"] {
  background: linear-gradient(180deg, #eef1f6 0%, #dfe4ec 100%) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
}

/* Dark mode — muted translucent surfaces with the same hue family */
html.dark .role-pill--owner,
html.dark #business-role-badge {
  background: linear-gradient(180deg, rgba(139,115,232,0.22) 0%, rgba(139,115,232,0.14) 100%) !important;
  color: #c8b9ff !important;
  border-color: rgba(139, 115, 232, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
html.dark .role-pill--admin,
html.dark #business-role-badge[data-role="admin"] {
  background: linear-gradient(180deg, rgba(96,165,250,0.22) 0%, rgba(96,165,250,0.14) 100%) !important;
  color: #a6c7ff !important;
  border-color: rgba(96, 165, 250, 0.30) !important;
}
html.dark .role-pill--staff,
html.dark #business-role-badge[data-role="staff"] {
  background: linear-gradient(180deg, rgba(52,211,153,0.22) 0%, rgba(52,211,153,0.14) 100%) !important;
  color: #7cefb9 !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
}
html.dark .role-pill--client,
html.dark #business-role-badge[data-role="client"] {
  background: linear-gradient(180deg, rgba(148,163,184,0.22) 0%, rgba(148,163,184,0.14) 100%) !important;
  color: #dbe2ec !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
}
/* END ROLE-PILL */


/* ══════════════════════════════════════════════════════════════════════════
   FINANCE PAGE — remove cream/gold tint, match the white of other pages
   ──────────────────────────────────────────────────────────────────────────
   The finance section used a warm cream palette (`#fcfbf8`, `#eceadf`,
   `#faf9f5`, `#f4f2ec`, `#f1efe5`, `#d5ceb8`) that read as a subtle yellow
   tint next to the cooler slate palette used everywhere else. This block
   retints the section to a neutral slate/white palette while preserving
   the existing layout, radii and shadows.

   Scoped strictly to `#section-payments` in light mode — dark mode was
   already cool/neutral so it's left alone.

   Rollback: delete this block.
   ══════════════════════════════════════════════════════════════════════════ */

html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-orange-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-blue-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-green-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-slate-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div.bg-purple-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-emerald-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-amber-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-red-50,
html:not(.dark) #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div.bg-slate-50 {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* Sub-tab pill segmented control */
html:not(.dark) #section-payments > .flex.items-center.gap-1.mb-6.bg-slate-100 {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* Payments list container + invoice row cards */
html:not(.dark) #section-payments > .bg-white.rounded-2xl,
html:not(.dark) #section-payments #finance-staff-payments > .bg-white.rounded-2xl,
html:not(.dark) #section-payments #booking-invoices-list > div,
html:not(.dark) #section-payments #custom-invoices-list > div {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* Row dividers & hover — cool slate instead of cream */
html:not(.dark) #section-payments #payments-list > div {
  border-color: #f1f5f9 !important;
}
html:not(.dark) #section-payments #payments-list > div:hover {
  background: #f8fafc !important;
}
html:not(.dark) #section-payments .divide-slate-50 > div + div {
  border-color: #f1f5f9 !important;
}
html:not(.dark) #section-payments #booking-invoices-list > div:hover,
html:not(.dark) #section-payments #custom-invoices-list > div:hover {
  border-color: #cbd5e1 !important;
}

/* Filter pill buttons */
html:not(.dark) #section-payments .payment-filter-btn,
html:not(.dark) #section-payments .bi-filter-btn {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: #475569 !important;
}
html:not(.dark) #section-payments .payment-filter-btn:hover,
html:not(.dark) #section-payments .bi-filter-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Edit-invoice action chip */
html:not(.dark) #section-payments #custom-invoices-list button[onclick^="editInvoice"] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #section-payments #custom-invoices-list button[onclick^="editInvoice"]:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Status pill (slate) */
html:not(.dark) #section-payments .rounded-full.bg-slate-100 {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

/* Saved layouts chips */
html:not(.dark) #section-payments #saved-layouts-list > div {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #section-payments #saved-layouts-list > div:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
/* END FINANCE-WHITE */


/* ══════════════════════════════════════════════════════════════════════════
   EXTENDED BENTO DEPTH — clients, leads, staff, finance, learning, settings
   ──────────────────────────────────────────────────────────────────────────
   Mirrors the layered drop-shadow used on the dashboard (DASHBOARD-BENTO-
   DEPTH) so the rest of the app reads with the same premium "bento" feel.
   Selectors are intentionally specific to each section's bento anchors
   (stat cards, panels, list containers) so modals, dropdowns, tooltips
   and filter pills are NOT affected.

   Rollback: delete this block.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Shared light-mode shadow --- */
#section-clients .clients-stat,
#section-clients .clients-panel,
#section-clients .clients-invite-card,
#section-staff .clients-stat,
#section-staff .clients-panel,
#section-staff .clients-invite-card,
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div,
#section-payments > .bg-white.rounded-2xl,
#section-payments #finance-staff-payments > .bg-white.rounded-2xl,
#section-payments #booking-invoices-list > div,
#section-payments #custom-invoices-list > div,
#section-learning #learning-intro-card,
#section-learning .setup-step,
#section-settings .settings-tab-content > .bg-white.rounded-2xl {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -14px rgba(15, 23, 42, 0.10),
    0 24px 48px -30px rgba(15, 23, 42, 0.14) !important;
}

/* --- Tactile hover lift for stat cards + setup steps --- */
#section-clients .clients-stat:hover,
#section-staff .clients-stat:hover,
#section-learning .setup-step:hover,
#section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div:hover,
#section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 10px 28px -12px rgba(80, 70, 140, 0.22),
    0 28px 56px -28px rgba(80, 70, 140, 0.28) !important;
}

/* --- Dark-mode variants --- */
html.dark #section-clients .clients-stat,
html.dark #section-clients .clients-panel,
html.dark #section-clients .clients-invite-card,
html.dark #section-staff .clients-stat,
html.dark #section-staff .clients-panel,
html.dark #section-staff .clients-invite-card,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div,
html.dark #section-payments > .bg-white.rounded-2xl,
html.dark #section-payments #finance-staff-payments > .bg-white.rounded-2xl,
html.dark #section-payments #booking-invoices-list > div,
html.dark #section-payments #custom-invoices-list > div,
html.dark #section-learning #learning-intro-card,
html.dark #section-learning .setup-step,
html.dark #section-settings .settings-tab-content > .bg-white.rounded-2xl {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 8px 24px -14px rgba(0, 0, 0, 0.32),
    0 24px 48px -30px rgba(0, 0, 0, 0.42) !important;
}
html.dark #section-clients .clients-stat:hover,
html.dark #section-staff .clients-stat:hover,
html.dark #section-learning .setup-step:hover,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.xl\:grid-cols-5 > div:hover,
html.dark #section-payments .grid.grid-cols-1.sm\:grid-cols-3.gap-3 > div:hover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 10px 28px -12px rgba(139, 115, 232, 0.25),
    0 28px 56px -28px rgba(139, 115, 232, 0.32) !important;
}
/* END EXTENDED-BENTO-DEPTH */


/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — premium bento labels, buttons & section structure
   ──────────────────────────────────────────────────────────────────────────
   The settings tabs are dense forms inside plain `.bg-white.rounded-2xl`
   cards. This block adds:
     • Tighter section heading typography (eyebrow label + title)
     • Richer button treatments (Edit Profile, Save, Cancel, etc.)
     • Slightly polished rounded fields

   Scoped to `#section-settings` so the rest of the app is unaffected.
   Rollback: delete this block.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page title — match other sections */
#section-settings > h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

/* Tab bar — upgrade from plain underline to a quiet segmented strip */
#section-settings > .border-b.border-slate-100 {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
#section-settings .settings-tab {
  padding: 10px 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-bottom: 2px solid transparent !important;
  color: #94a3b8 !important;
  transition: color 140ms ease, border-color 140ms ease !important;
}
#section-settings .settings-tab:hover { color: #475569 !important; }
#section-settings .settings-tab.active {
  color: #0f172a !important;
  border-bottom-color: #0f172a !important;
}

/* Bento cards — subtle gradient surface + crisp border */
#section-settings .settings-tab-content > .bg-white.rounded-2xl {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 18px !important;
}

/* Section heading inside a bento — eyebrow + title */
#section-settings .settings-tab-content h3.text-sm.font-semibold {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
}

/* Dividers inside bentos */
#section-settings .settings-tab-content .border-slate-100 {
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* ── Primary-ish pill buttons (Edit Profile, Change Photo, etc.) ── */
#section-settings .settings-tab-content button.bg-slate-100,
#section-settings .settings-tab-content button.bg-slate-50 {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease !important;
}
#section-settings .settings-tab-content button.bg-slate-100:hover,
#section-settings .settings-tab-content button.bg-slate-50:hover {
  background: linear-gradient(180deg, #eef2f7 0%, #e2e8f0 100%) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

/* Dark primary buttons (Save, Update, etc.) — richer charcoal gradient */
#section-settings .settings-tab-content button.bg-deep-charcoal {
  background: linear-gradient(135deg, #1e293b 0%, #243b55 55%, #2c5282 100%) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 12px -4px rgba(30, 41, 59, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
#section-settings .settings-tab-content button.bg-deep-charcoal:hover {
  filter: brightness(1.06);
}

/* Danger buttons (Remove, Delete) — quieter red */
#section-settings .settings-tab-content button.text-red-600 {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Input polish */
#section-settings .settings-tab-content input.bg-slate-50,
#section-settings .settings-tab-content select.bg-slate-50,
#section-settings .settings-tab-content textarea.bg-slate-50 {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 10px !important;
  transition: border-color 140ms ease, background 140ms ease !important;
}
#section-settings .settings-tab-content input.bg-slate-50:focus,
#section-settings .settings-tab-content select.bg-slate-50:focus,
#section-settings .settings-tab-content textarea.bg-slate-50:focus {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18) !important;
}

/* Field labels — tighter eyebrow */
#section-settings .settings-tab-content label.text-xs.font-medium {
  color: #475569 !important;
  letter-spacing: 0.01em !important;
}

/* Dark-mode adjustments for the settings polish */
html.dark #section-settings > h2 { color: #e2e8f0 !important; }
html.dark #section-settings .settings-tab-content > .bg-white.rounded-2xl {
  background: linear-gradient(180deg, #161618 0%, #121214 100%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark #section-settings .settings-tab-content h3.text-sm.font-semibold { color: #e2e8f0 !important; }
html.dark #section-settings .settings-tab-content button.bg-slate-100,
html.dark #section-settings .settings-tab-content button.bg-slate-50 {
  background: linear-gradient(180deg, #1e1e21 0%, #161618 100%) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
html.dark #section-settings .settings-tab-content input.bg-slate-50,
html.dark #section-settings .settings-tab-content select.bg-slate-50,
html.dark #section-settings .settings-tab-content textarea.bg-slate-50 {
  background: #161618 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #section-settings .settings-tab-content label.text-xs.font-medium { color: #cbd5e1 !important; }
/* END SETTINGS-POLISH */