/* =====================================================================
   CacaoFlow — Dark Theme
   Loaded AFTER each page's inline <style>, so overrides win ties.

   Palette (neutral near-black + cacao gold):
     near-black canvas, flat layered surfaces, one gold accent,
     muted green / red / blue only for status.
   ===================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  /* canvas */
  --cf-bg: #0F0F10;
  --cf-sidebar: #0A0A0B;
  --cf-topbar: #151517;

  /* surfaces */
  --cf-surface: #1A1A1C;   /* cards, panels */
  --cf-surface-2: #202023; /* inner boxes, table head, inputs-on-card */
  --cf-surface-3: #26262A; /* hover, secondary buttons */
  --cf-input: #141416;

  /* lines */
  --cf-border: #27272B;
  --cf-border-soft: rgba(255, 255, 255, 0.07);
  --cf-border-strong: rgba(255, 255, 255, 0.14);

  /* type */
  --cf-text: #F2F0EC;
  --cf-text-2: #C7C3BD;
  --cf-muted: #9A968F;
  --cf-faint: #6E6A65;

  /* accent */
  --cf-gold: #D9962C;
  --cf-gold-soft: #E8B45F;
  --cf-gold-deep: #B87C22;
  --cf-gold-tint: rgba(217, 150, 44, 0.13);
  --cf-gold-line: rgba(217, 150, 44, 0.32);

  /* status */
  --cf-green: #55B684;
  --cf-green-tint: rgba(45, 106, 79, 0.20);
  --cf-green-line: rgba(85, 182, 132, 0.30);

  --cf-red: #E1736A;
  --cf-red-tint: rgba(178, 55, 46, 0.18);
  --cf-red-line: rgba(225, 115, 106, 0.30);

  --cf-blue: #6BA9E8;
  --cf-blue-tint: rgba(59, 130, 246, 0.14);
  --cf-blue-line: rgba(107, 169, 232, 0.30);

  --cf-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --cf-shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, 0.7);
}

/* =====================================================================
   BASE
   ===================================================================== */

html[data-theme="dark"] body {
  background: var(--cf-bg) !important;
  color: var(--cf-text);
}

html[data-theme="dark"] #page-content,
html[data-theme="dark"] #main-wrapper,
html[data-theme="dark"] .main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .analytics-panel,
html[data-theme="dark"] .dss-panel,
html[data-theme="dark"] .settings-container,
html[data-theme="dark"] .settings-layout,
html[data-theme="dark"] .settings-wrap,
html[data-theme="dark"] .profile-container,
html[data-theme="dark"] .notification-container,
html[data-theme="dark"] .section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] a {
  color: var(--cf-gold);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .divider-line {
  border-color: var(--cf-border) !important;
  background: var(--cf-border) !important;
}
html[data-theme="dark"] .divider {
  background: transparent !important;
  border-color: var(--cf-border) !important;
}

/* ---------- Scrollbar ---------- */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--cf-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2B2B30;
  border-radius: 8px;
  border: 2px solid var(--cf-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3A3A40;
}
html[data-theme="dark"] ::selection {
  background: rgba(217, 150, 44, 0.28);
  color: #FFF7E9;
}
html[data-theme="dark"] #scroll-indicator {
  background: #212125 !important;
}
html[data-theme="dark"] #scroll-indicator-fill {
  background: #3E3E44 !important;
}

/* =====================================================================
   SIDEBAR
   ===================================================================== */

html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .sidebar {
  background: var(--cf-sidebar) !important;
  border-right: 1px solid var(--cf-border) !important;
  box-shadow: none;
}

html[data-theme="dark"] .logo-area,
html[data-theme="dark"] .sidebar-header {
  border-bottom: 1px solid var(--cf-border) !important;
}

html[data-theme="dark"] .logo-text,
html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .brand-text {
  color: #F5EFE4;
}
html[data-theme="dark"] .logo-text > span:first-child,
html[data-theme="dark"] .brand-cacao {
  color: #F5EFE4 !important;
}
html[data-theme="dark"] .logo-text > span:last-child,
html[data-theme="dark"] .brand-flow {
  color: var(--cf-gold) !important;
}
html[data-theme="dark"] .logo-icon,
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .collapse-button,
html[data-theme="dark"] .collapse-btn {
  color: var(--cf-gold);
}
html[data-theme="dark"] .collapse-button:hover,
html[data-theme="dark"] .collapse-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cf-gold-soft);
}

/* ---------- Nav ---------- */
html[data-theme="dark"] .sidebar-nav .nav-link,
html[data-theme="dark"] .nav-menu .nav-link,
html[data-theme="dark"] .nav-link {
  color: var(--cf-text-2) !important;
  border-radius: 10px;
  border-left: 3px solid transparent;
}
html[data-theme="dark"] .nav-link i,
html[data-theme="dark"] .nav-icon {
  color: inherit !important;
}
html[data-theme="dark"] .sidebar-nav .nav-link:hover,
html[data-theme="dark"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--cf-text) !important;
}
html[data-theme="dark"] .sidebar-nav .nav-link.active,
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .nav-item.active {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold-soft) !important;
  border-left: 3px solid var(--cf-gold) !important;
}

html[data-theme="dark"] .menu-label {
  color: var(--cf-faint) !important;
}

/* ---------- Sidebar profile ---------- */
html[data-theme="dark"] .sidebar-profile-section,
html[data-theme="dark"] .sidebar-footer {
  border-top: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .sidebar-profile:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .sidebar-avatar,
html[data-theme="dark"] .dropdown-avatar {
  background: var(--cf-surface-3) !important;
  border: 1px solid var(--cf-border-soft);
}
html[data-theme="dark"] .sidebar-user-name {
  color: #F2EDE4 !important;
}
html[data-theme="dark"] .sidebar-user-label {
  color: var(--cf-muted) !important;
}

/* =====================================================================
   TOPBAR
   ===================================================================== */

html[data-theme="dark"] #topbar,
html[data-theme="dark"] .topbar {
  background: var(--cf-topbar) !important;
  border-bottom: 1px solid var(--cf-border) !important;
}

html[data-theme="dark"] .page-title {
  color: #F3EEE5 !important;
}

html[data-theme="dark"] .mobile-menu-button,
html[data-theme="dark"] .mobile-menu {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .mobile-menu-button:hover,
html[data-theme="dark"] .mobile-menu:hover {
  background: var(--cf-surface-3) !important;
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .notification-button,
html[data-theme="dark"] .top-notification-button,
html[data-theme="dark"] .header-btn {
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .notification-button:hover,
html[data-theme="dark"] .top-notification-button:hover,
html[data-theme="dark"] .header-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--cf-text) !important;
}

html[data-theme="dark"] .notification-badge,
html[data-theme="dark"] .badge {
  background: #C0392B !important;
  color: #FFF !important;
  border: 2px solid var(--cf-topbar);
}

/* inline record counters ("7 records", "2 batches") */
html[data-theme="dark"] .count {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold-soft) !important;
  border: 1px solid var(--cf-gold-line) !important;
}

/* =====================================================================
   HEADINGS & COPY
   ===================================================================== */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .content-heading h2,
html[data-theme="dark"] .page-header h2,
html[data-theme="dark"] .intro h2,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .subsection-title,
html[data-theme="dark"] .profile-heading,
html[data-theme="dark"] .dss-title,
html[data-theme="dark"] .analytics-header h2,
html[data-theme="dark"] .theme-name,
html[data-theme="dark"] .setting-name,
html[data-theme="dark"] .setting-label,
html[data-theme="dark"] .playfair {
  color: #F3EEE5 !important;
}

html[data-theme="dark"] .content-heading p,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .intro p,
html[data-theme="dark"] .page-intro,
html[data-theme="dark"] .section-description,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .subsection-desc,
html[data-theme="dark"] .dss-sub,
html[data-theme="dark"] .dss-note,
html[data-theme="dark"] .theme-description,
html[data-theme="dark"] .setting-description,
html[data-theme="dark"] .setting-desc,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .security-note,
html[data-theme="dark"] .dark-mode-note,
html[data-theme="dark"] .save-status,
html[data-theme="dark"] .char-count {
  color: var(--cf-muted) !important;
}

/* gold eyebrow labels + "see all" links */
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .view-link,
html[data-theme="dark"] .recommendation-type,
html[data-theme="dark"] .toolbar-action,
html[data-theme="dark"] .history-clear,
html[data-theme="dark"] .staff-link {
  color: var(--cf-gold) !important;
}
html[data-theme="dark"] .toolbar-action:hover,
html[data-theme="dark"] .history-clear:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--cf-gold-soft) !important;
}

/* =====================================================================
   SURFACES — cards, panels, boxes
   ===================================================================== */

html[data-theme="dark"] .card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .sub-summary-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-section,
html[data-theme="dark"] .history-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .storage-card,
html[data-theme="dark"] .list-card,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .empty-panel,
html[data-theme="dark"] .dss-card,
html[data-theme="dark"] .settings-nav,
html[data-theme="dark"] .settings-menu,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .recommendation-card,
html[data-theme="dark"] .process-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .buyer-panel,
html[data-theme="dark"] .product-panel,
html[data-theme="dark"] .recent-card,
html[data-theme="dark"] .logout-box,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .login-card {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 14px;
  box-shadow: var(--cf-shadow);
}

/* inner / nested boxes sit one step lighter */
html[data-theme="dark"] .detail-box,
html[data-theme="dark"] .meta-box,
html[data-theme="dark"] .action-box,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .info-value,
html[data-theme="dark"] .info-chip,
html[data-theme="dark"] .storage-detail,
html[data-theme="dark"] .storage-note,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .record-item,
html[data-theme="dark"] .empty-table,
html[data-theme="dark"] .note,
html[data-theme="dark"] .profile-note,
html[data-theme="dark"] .recommendation-block {
  background: var(--cf-surface-2) !important;
  border: 1px solid var(--cf-border-soft) !important;
  border-radius: 10px;
  color: var(--cf-text-2);
}

html[data-theme="dark"] .card-head,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .chart-header,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .history-head,
html[data-theme="dark"] .report-head,
html[data-theme="dark"] .dss-head,
html[data-theme="dark"] .recent-header,
html[data-theme="dark"] .settings-header,
html[data-theme="dark"] .notification-header,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .section-toolbar,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .process-header,
html[data-theme="dark"] .process-footer,
html[data-theme="dark"] .form-actions,
html[data-theme="dark"] .history-row,
html[data-theme="dark"] .summary-line,
html[data-theme="dark"] .activity-row,
html[data-theme="dark"] .header {
  border-color: var(--cf-border) !important;
}

html[data-theme="dark"] .product-visual {
  background: var(--cf-surface-2) !important;
  border-bottom: 1px solid var(--cf-border) !important;
}

/* KPI cards carry a coloured top rule, as in the reference design */
html[data-theme="dark"] .stats-grid > .card,
html[data-theme="dark"] .metrics-grid > .metric-card,
html[data-theme="dark"] .summary-card {
  border-top: 2px solid var(--cf-gold) !important;
  border-radius: 12px;
}
html[data-theme="dark"] .summary-card.green {
  border-top-color: var(--cf-green) !important;
}
html[data-theme="dark"] .summary-card.muted {
  border-top-color: var(--cf-border-strong) !important;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .summary-card:hover,
html[data-theme="dark"] .sub-summary-card:hover,
html[data-theme="dark"] .report-card:hover,
html[data-theme="dark"] .list-card:hover,
html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .storage-card:hover {
  border-color: var(--cf-border-strong) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* ---------- Card typography ---------- */
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .chart-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .report-title,
html[data-theme="dark"] .order-title,
html[data-theme="dark"] .storage-title,
html[data-theme="dark"] .storage-name,
html[data-theme="dark"] .recommendation-title,
html[data-theme="dark"] .process-name,
html[data-theme="dark"] .record-title,
html[data-theme="dark"] .recent-title,
html[data-theme="dark"] .logout-title,
html[data-theme="dark"] .empty-title,
html[data-theme="dark"] .empty-chart-title,
html[data-theme="dark"] .product-name,
html[data-theme="dark"] .cart-name,
html[data-theme="dark"] .notification-title,
html[data-theme="dark"] .title,
html[data-theme="dark"] .activity-title,
html[data-theme="dark"] .staff-title {
  color: #F0ECE5 !important;
}

html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .summary-value,
html[data-theme="dark"] .sub-summary-value,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .detail-value,
html[data-theme="dark"] .info-value,
html[data-theme="dark"] .meta-value,
html[data-theme="dark"] .field-value,
html[data-theme="dark"] .storage-quantity,
html[data-theme="dark"] .recommendation-value,
html[data-theme="dark"] .qty-value,
html[data-theme="dark"] .activity-value,
html[data-theme="dark"] .summary-total {
  color: #F5F2EC !important;
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .summary-label,
html[data-theme="dark"] .sub-summary-label,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .detail-label,
html[data-theme="dark"] .info-label,
html[data-theme="dark"] .meta-label,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .period-label,
html[data-theme="dark"] .recommendation-label,
html[data-theme="dark"] .card-sub,
html[data-theme="dark"] .chart-description,
html[data-theme="dark"] .panel-description,
html[data-theme="dark"] .report-text,
html[data-theme="dark"] .report-desc,
html[data-theme="dark"] .record-meta,
html[data-theme="dark"] .activity-meta,
html[data-theme="dark"] .product-meta,
html[data-theme="dark"] .cart-meta,
html[data-theme="dark"] .storage-sub,
html[data-theme="dark"] .storage-info-row span,
html[data-theme="dark"] .process-ref,
html[data-theme="dark"] .empty-text,
html[data-theme="dark"] .empty-chart-text,
html[data-theme="dark"] .logout-text,
html[data-theme="dark"] .message,
html[data-theme="dark"] .notification-message,
html[data-theme="dark"] .notification-time,
html[data-theme="dark"] .time,
html[data-theme="dark"] .history-date,
html[data-theme="dark"] .recommendation-date,
html[data-theme="dark"] .recommendation-footer,
html[data-theme="dark"] .staff-text,
html[data-theme="dark"] .staff-label,
html[data-theme="dark"] .history-meta,
html[data-theme="dark"] .storage-detail span,
html[data-theme="dark"] .page-intro p,
html[data-theme="dark"] .analytics-header p,
html[data-theme="dark"] .empty-card p,
html[data-theme="dark"] .empty-panel p,
html[data-theme="dark"] .empty p {
  color: var(--cf-muted) !important;
}

/* money / accent figures */
html[data-theme="dark"] .product-price,
html[data-theme="dark"] .progress-percent {
  color: var(--cf-gold) !important;
}

/* =====================================================================
   ALERT STRIPS
   ===================================================================== */

html[data-theme="dark"] .alert-strip {
  background: rgba(217, 150, 44, 0.09) !important;
  border: 1px solid var(--cf-gold-line) !important;
  border-radius: 12px;
}
html[data-theme="dark"] .alert-strip span,
html[data-theme="dark"] .alert-strip b,
html[data-theme="dark"] .alert-strip strong,
html[data-theme="dark"] .alert-strip i,
html[data-theme="dark"] .alert-strip a {
  color: var(--cf-gold-soft) !important;
}

html[data-theme="dark"] .alert-strip.danger {
  background: var(--cf-red-tint) !important;
  border: 1px solid var(--cf-red-line) !important;
}
html[data-theme="dark"] .alert-strip.danger span,
html[data-theme="dark"] .alert-strip.danger b,
html[data-theme="dark"] .alert-strip.danger strong,
html[data-theme="dark"] .alert-strip.danger i,
html[data-theme="dark"] .alert-strip.danger a {
  color: var(--cf-red) !important;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

/* secondary / outline / neutral */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-inline,
html[data-theme="dark"] .small-btn,
html[data-theme="dark"] .header-button,
html[data-theme="dark"] .view-details-button,
html[data-theme="dark"] .qty-btn,
html[data-theme="dark"] .modal-cancel,
html[data-theme="dark"] .modal-button,
html[data-theme="dark"] .notification-action,
html[data-theme="dark"] .password-toggle,
html[data-theme="dark"] button.history-clear,
html[data-theme="dark"] .setting-nav-btn,
html[data-theme="dark"] .settings-menu-button {
  background: var(--cf-surface-3) !important;
  color: var(--cf-text) !important;
  border: 1px solid var(--cf-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-inline:hover,
html[data-theme="dark"] .small-btn:hover,
html[data-theme="dark"] .header-button:hover,
html[data-theme="dark"] .view-details-button:hover,
html[data-theme="dark"] .qty-btn:hover,
html[data-theme="dark"] .modal-cancel:hover,
html[data-theme="dark"] .modal-button:hover,
html[data-theme="dark"] .notification-action:hover,
html[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .setting-nav-btn:hover {
  background: #303036 !important;
  border-color: var(--cf-border-strong) !important;
  color: #FFF !important;
}

html[data-theme="dark"] .setting-nav-btn,
html[data-theme="dark"] .settings-menu-button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .setting-nav-btn.active,
html[data-theme="dark"] .settings-menu-button.active {
  background: var(--cf-gold-tint) !important;
  border-color: var(--cf-gold-line) !important;
  color: var(--cf-gold-soft) !important;
}

/* gold text links that live on a dark surface */
html[data-theme="dark"] .staff-link:hover,
html[data-theme="dark"] .view-link:hover {
  color: var(--cf-gold-soft) !important;
  text-decoration: underline;
}

/* primary / gold */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .login-button,
html[data-theme="dark"] .modal-confirm,
html[data-theme="dark"] .complete-sale,
html[data-theme="dark"] .add-order,
html[data-theme="dark"] .change-photo,
html[data-theme="dark"] .small-btn.primary,
html[data-theme="dark"] .receipt-btn,
html[data-theme="dark"] .proceed-button,
html[data-theme="dark"] .btn.primary {
  background: var(--cf-gold) !important;
  border: 1px solid var(--cf-gold) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: none !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-gold:hover,
html[data-theme="dark"] .primary-button:hover,
html[data-theme="dark"] .login-button:hover,
html[data-theme="dark"] .modal-confirm:hover,
html[data-theme="dark"] .complete-sale:hover,
html[data-theme="dark"] .add-order:hover,
html[data-theme="dark"] .change-photo:hover,
html[data-theme="dark"] .small-btn.primary:hover,
html[data-theme="dark"] .receipt-btn:hover,
html[data-theme="dark"] .proceed-button:hover,
html[data-theme="dark"] .btn.primary:hover {
  background: var(--cf-gold-soft) !important;
  border-color: var(--cf-gold-soft) !important;
  color: #2A1B04 !important;
}

/* disabled (e.g. empty-cart "Complete Sale") */
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .btn-gold:disabled,
html[data-theme="dark"] .complete-sale:disabled,
html[data-theme="dark"] button:disabled {
  background: var(--cf-surface-3) !important;
  border-color: var(--cf-border) !important;
  color: var(--cf-faint) !important;
  cursor: not-allowed;
}

/* danger */
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .small-btn.danger,
html[data-theme="dark"] .history-delete-button,
html[data-theme="dark"] .header-button.danger,
html[data-theme="dark"] .cart-remove,
html[data-theme="dark"] .delete {
  background: var(--cf-red-tint) !important;
  border: 1px solid var(--cf-red-line) !important;
  color: var(--cf-red) !important;
}
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .small-btn.danger:hover,
html[data-theme="dark"] .history-delete-button:hover,
html[data-theme="dark"] .header-button.danger:hover,
html[data-theme="dark"] .cart-remove:hover,
html[data-theme="dark"] .delete:hover {
  background: rgba(178, 55, 46, 0.28) !important;
  color: #F09A92 !important;
}

/* icon buttons */
html[data-theme="dark"] .icon-btn {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .icon-btn:hover {
  background: var(--cf-surface-3) !important;
  color: var(--cf-text) !important;
}

/* =====================================================================
   INPUTS
   ===================================================================== */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .field-input,
html[data-theme="dark"] .field-select,
html[data-theme="dark"] .setting-select,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .history-search,
html[data-theme="dark"] .period-select,
html[data-theme="dark"] .status-select,
html[data-theme="dark"] .mini-search,
html[data-theme="dark"] .discount-input,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .field input {
  background: var(--cf-input) !important;
  border: 1px solid var(--cf-border) !important;
  color: var(--cf-text) !important;
  border-radius: 10px;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--cf-faint) !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .search-input:focus,
html[data-theme="dark"] .period-select:focus,
html[data-theme="dark"] .setting-select:focus {
  outline: none;
  border-color: var(--cf-gold-line) !important;
  box-shadow: 0 0 0 3px rgba(217, 150, 44, 0.12);
}

html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .input-wrap {
  background: var(--cf-input) !important;
  border-color: var(--cf-border) !important;
}

/* pure positioning wrappers — must stay see-through so the rounded
   input inside them is the only visible shape */
html[data-theme="dark"] .input-wrapper,
html[data-theme="dark"] .password-wrap,
html[data-theme="dark"] .password-wrapper,
html[data-theme="dark"] .form-group,
html[data-theme="dark"] .form-options,
html[data-theme="dark"] .info-item,
html[data-theme="dark"] .field {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-theme="dark"] .search-bar:focus-within,
html[data-theme="dark"] .input-wrap:focus-within {
  border-color: var(--cf-gold-line) !important;
  box-shadow: 0 0 0 3px rgba(217, 150, 44, 0.12);
}
html[data-theme="dark"] .search-box i,
html[data-theme="dark"] .input-icon,
html[data-theme="dark"] .search-bar i {
  color: var(--cf-faint) !important;
}

/* profile read-only values — the value is the box, never its wrapper */
html[data-theme="dark"] .field-value,
html[data-theme="dark"] .field.readonly .field-value {
  background: var(--cf-surface-2) !important;
  border: 1px solid var(--cf-border-soft) !important;
  color: var(--cf-text) !important;
}

/* =====================================================================
   TABS & FILTER CHIPS
   ===================================================================== */

/* pill containers */
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .tab-group,
html[data-theme="dark"] .analytics-tabs,
html[data-theme="dark"] .dss-tabs,
html[data-theme="dark"] .dss-subtabs,
html[data-theme="dark"] .chart-period,
html[data-theme="dark"] .period-group {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 999px;
}

html[data-theme="dark"] .tab-btn,
html[data-theme="dark"] .analytics-tab,
html[data-theme="dark"] .dss-tab,
html[data-theme="dark"] .chart-period button,
html[data-theme="dark"] .filter,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .filter-button {
  background: transparent !important;
  color: var(--cf-muted) !important;
  border-color: transparent !important;
  border-radius: 999px;
}
html[data-theme="dark"] .tab-btn:hover,
html[data-theme="dark"] .analytics-tab:hover,
html[data-theme="dark"] .dss-tab:hover,
html[data-theme="dark"] .chart-period button:hover,
html[data-theme="dark"] .filter:hover,
html[data-theme="dark"] .filter-button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--cf-text) !important;
}

/* sub-navigation tabs (post-harvest, inventory): quiet dark pill, gold label */
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .tab-bar .tab-btn.active {
  background: var(--cf-surface-3) !important;
  color: var(--cf-gold-soft) !important;
  font-weight: 600;
}

/* section tabs (analytics, DSS) + filter chips: solid gold pill */
html[data-theme="dark"] .analytics-tab.active,
html[data-theme="dark"] .dss-tab.active,
html[data-theme="dark"] .dss-subtabs .tab-btn.active,
html[data-theme="dark"] .chart-period button.active,
html[data-theme="dark"] .filter.active,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-button.active {
  background: var(--cf-gold) !important;
  color: #FFFFFF !important;
  border-color: var(--cf-gold) !important;
  font-weight: 600;
}

/* standalone (non-pill-container) chips */
html[data-theme="dark"] .filter-row .filter-btn,
html[data-theme="dark"] .filters .filter-btn {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .filter-row .filter-btn.active,
html[data-theme="dark"] .filters .filter-btn.active {
  background: var(--cf-gold) !important;
  border-color: var(--cf-gold) !important;
  color: #FFFFFF !important;
}

/* =====================================================================
   TABLES
   ===================================================================== */

html[data-theme="dark"] .table-wrap {
  border-radius: 12px;
  overflow: hidden;
}
html[data-theme="dark"] table {
  background: transparent;
  border-color: var(--cf-border);
}
html[data-theme="dark"] thead th,
html[data-theme="dark"] .table-head,
html[data-theme="dark"] .history-head {
  background: var(--cf-surface-2) !important;
  color: var(--cf-muted) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 12px;
}
html[data-theme="dark"] tbody td,
html[data-theme="dark"] .history-cell {
  color: var(--cf-text-2) !important;
  border-bottom: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .history-row:hover {
  background: rgba(255, 255, 255, 0.028) !important;
}
html[data-theme="dark"] tbody td b,
html[data-theme="dark"] tbody td strong,
html[data-theme="dark"] .cell-type,
html[data-theme="dark"] .cell-batch {
  color: var(--cf-text) !important;
}

/* =====================================================================
   STATUS PILLS & BADGES
   ===================================================================== */

html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .status,
html[data-theme="dark"] .dss-status-pill,
html[data-theme="dark"] .recommendation-status,
html[data-theme="dark"] .history-status,
html[data-theme="dark"] .storage-status,
html[data-theme="dark"] .notification-tag {
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
}

/* success / good / available / completed */
html[data-theme="dark"] .status-complete,
html[data-theme="dark"] .status-completed,
html[data-theme="dark"] .status-success,
html[data-theme="dark"] .status-stored,
html[data-theme="dark"] .available,
html[data-theme="dark"] .good,
html[data-theme="dark"] .active-status,
html[data-theme="dark"] .success,
html[data-theme="dark"] .history-status-completed,
html[data-theme="dark"] .status-resolved,
html[data-theme="dark"] .recommendation-status.success,
html[data-theme="dark"] .dss-status-pill.success {
  background: var(--cf-green-tint) !important;
  color: var(--cf-green) !important;
  border-color: var(--cf-green-line) !important;
}

/* attention / active / low / ready-for-evaluation (gold) */
html[data-theme="dark"] .status-ready,
html[data-theme="dark"] .status-warning,
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .low,
html[data-theme="dark"] .poor,
html[data-theme="dark"] .fair,
html[data-theme="dark"] .monitor,
html[data-theme="dark"] .recommendation-status.monitor,
html[data-theme="dark"] .dss-status-pill.monitor,
html[data-theme="dark"] .role-badge,
html[data-theme="dark"] .role-pill,
html[data-theme="dark"] .role-light,
html[data-theme="dark"] .profile-role,
html[data-theme="dark"] .portal-badge {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold-soft) !important;
  border-color: var(--cf-gold-line) !important;
}

/* in-progress — blue, as in the reference design */
html[data-theme="dark"] .status-pill.status-active {
  background: var(--cf-blue-tint) !important;
  color: var(--cf-blue) !important;
  border-color: var(--cf-blue-line) !important;
}

/* danger / overdue / depleted / cancelled / pending */
html[data-theme="dark"] .status-cancelled,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-danger,
html[data-theme="dark"] .status-failed,
html[data-theme="dark"] .critical,
html[data-theme="dark"] .history-status-cancelled,
html[data-theme="dark"] .history-status.cancelled {
  background: var(--cf-red-tint) !important;
  color: var(--cf-red) !important;
  border-color: var(--cf-red-line) !important;
}

/* neutral chips */
html[data-theme="dark"] .neutral,
html[data-theme="dark"] .notification-tag {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--cf-text-2) !important;
  border-color: var(--cf-border-soft) !important;
}

html[data-theme="dark"] .active-dot,
html[data-theme="dark"] .dot {
  background: currentColor;
}

/* =====================================================================
   ACCENT ICON TILES
   ===================================================================== */

html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .summary-icon,
html[data-theme="dark"] .sub-summary-icon,
html[data-theme="dark"] .metric-icon,
html[data-theme="dark"] .storage-icon,
html[data-theme="dark"] .report-icon,
html[data-theme="dark"] .empty-icon,
html[data-theme="dark"] .empty-icon-wrap,
html[data-theme="dark"] .empty-chart-icon,
html[data-theme="dark"] .cart-empty-icon,
html[data-theme="dark"] .notification-icon,
html[data-theme="dark"] .staff-icon,
html[data-theme="dark"] .dropdown-icon {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold) !important;
  border: 1px solid var(--cf-gold-line);
}

/* logout is a destructive action — keep it red, not the neutral gold tile */
html[data-theme="dark"] .logout-icon {
  background: var(--cf-red-tint) !important;
  color: var(--cf-red) !important;
  border: 1px solid var(--cf-red-line);
}

/* A bare glyph used only for column alignment — never a tile.
   Tinting it painted a small square badge behind every menu item. */
html[data-theme="dark"] .settings-menu-icon,
html[data-theme="dark"] .nav-icon {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

/* green-keyed metrics (e.g. fermented-bean weight) */
html[data-theme="dark"] .summary-card.green .summary-icon,
html[data-theme="dark"] .sub-summary-icon.green,
html[data-theme="dark"] .metric-icon.green,
html[data-theme="dark"] .stat-icon.green {
  background: var(--cf-green-tint) !important;
  color: var(--cf-green) !important;
  border-color: var(--cf-green-line);
}

/* =====================================================================
   RECOMMENDATION CARDS (DSS)
   ===================================================================== */

html[data-theme="dark"] .recommendation-card {
  border-left: 4px solid var(--cf-gold) !important;
}
html[data-theme="dark"] .recommendation-card.success {
  background: rgba(45, 106, 79, 0.10) !important;
  border: 1px solid var(--cf-green-line) !important;
  border-left: 4px solid var(--cf-green) !important;
}
html[data-theme="dark"] .recommendation-card.monitor {
  background: rgba(217, 150, 44, 0.08) !important;
  border: 1px solid var(--cf-gold-line) !important;
  border-left: 4px solid var(--cf-gold) !important;
}
html[data-theme="dark"] .recommendation-card.critical,
html[data-theme="dark"] .recommendation-card.danger {
  background: rgba(178, 55, 46, 0.10) !important;
  border: 1px solid var(--cf-red-line) !important;
  border-left: 4px solid var(--cf-red) !important;
}
html[data-theme="dark"] .recommendation-card .recommendation-block {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .recommendation-footer {
  border-top: 1px solid var(--cf-border) !important;
}

/* =====================================================================
   SCHEDULE (DUE TODAY / SOON LIST)
   ===================================================================== */

html[data-theme="dark"] .schedule-row {
  border-bottom: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .schedule-icon {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold) !important;
}
html[data-theme="dark"] .schedule-icon.drying {
  background: var(--cf-green-tint) !important;
  color: var(--cf-green) !important;
}
html[data-theme="dark"] .schedule-type,
html[data-theme="dark"] .schedule-due {
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .schedule-batch {
  color: #F0ECE5 !important;
}
html[data-theme="dark"] .schedule-badge {
  background: var(--cf-surface-3) !important;
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .schedule-badge.today {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold-soft) !important;
}
html[data-theme="dark"] .schedule-badge.overdue {
  background: var(--cf-red-tint) !important;
  color: var(--cf-red) !important;
}

/* =====================================================================
   PROGRESS
   ===================================================================== */

html[data-theme="dark"] .progress-track {
  background: var(--cf-surface-3) !important;
  border-radius: 999px;
}
html[data-theme="dark"] .progress-fill,
html[data-theme="dark"] .progress-bar {
  background: var(--cf-gold) !important;
  border-radius: 999px;
}
html[data-theme="dark"] .progress-label,
html[data-theme="dark"] .progress-meta {
  color: var(--cf-muted) !important;
}

/* =====================================================================
   MODALS, DROPDOWNS, TOASTS
   ===================================================================== */

html[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="dark"] .modal-box {
  background: #1C1C1F !important;
  border: 1px solid var(--cf-border-strong) !important;
  border-radius: 16px;
  box-shadow: var(--cf-shadow-lg);
}
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-header {
  color: #F3EEE5 !important;
  border-color: var(--cf-border) !important;
}
html[data-theme="dark"] .modal-message,
html[data-theme="dark"] .modal-body {
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .modal-footer {
  border-color: var(--cf-border) !important;
}
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .close-modal {
  background: transparent !important;
  border: 0 !important;
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .close-modal:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--cf-text) !important;
}

html[data-theme="dark"] #profile-dropdown,
html[data-theme="dark"] #notification-dropdown,
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .dropdown-content,
html[data-theme="dark"] .settings-panel {
  background: #1C1C1F !important;
  border: 1px solid var(--cf-border-strong) !important;
  border-radius: 12px;
  box-shadow: var(--cf-shadow-lg);
}
html[data-theme="dark"] .dropdown-header {
  border-bottom: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .dropdown-name {
  color: #F0ECE5 !important;
}
html[data-theme="dark"] .dropdown-email {
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .dropdown-item {
  color: var(--cf-text-2) !important;
  border-radius: 8px;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-user:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--cf-text) !important;
}
html[data-theme="dark"] .dropdown-item.danger {
  color: var(--cf-red) !important;
}
html[data-theme="dark"] .dropdown-item.danger:hover {
  background: var(--cf-red-tint) !important;
}

html[data-theme="dark"] .toast {
  background: #232327 !important;
  border: 1px solid var(--cf-border-strong) !important;
  color: var(--cf-text) !important;
  border-radius: 12px;
  box-shadow: var(--cf-shadow-lg);
}
html[data-theme="dark"] .toast-text {
  color: var(--cf-text) !important;
}
html[data-theme="dark"] .toast-close {
  color: var(--cf-muted) !important;
}

/* =====================================================================
   NOTIFICATIONS LIST
   ===================================================================== */

html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .item {
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .notification-item:hover,
html[data-theme="dark"] .item:hover {
  background: var(--cf-surface-2) !important;
}
html[data-theme="dark"] .notification-item.unread,
html[data-theme="dark"] .item.unread {
  background: rgba(217, 150, 44, 0.07) !important;
}
html[data-theme="dark"] .unread-label {
  color: var(--cf-gold) !important;
}
html[data-theme="dark"] .empty,
html[data-theme="dark"] .empty p,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-chart,
html[data-theme="dark"] .cart-empty {
  color: var(--cf-muted) !important;
}

/* =====================================================================
   PROFILE
   ===================================================================== */

html[data-theme="dark"] .profile-hero {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 16px;
}
html[data-theme="dark"] .profile-avatar,
html[data-theme="dark"] .large-avatar {
  border: 2px solid var(--cf-border-strong) !important;
  background: var(--cf-surface-3);
}
html[data-theme="dark"] .profile-name {
  color: #F3EEE5 !important;
}
html[data-theme="dark"] .profile-contact,
html[data-theme="dark"] .profile-email,
html[data-theme="dark"] .profile-meta {
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .profile-footer,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .profile-body {
  border-color: var(--cf-border) !important;
}
html[data-theme="dark"] .avatar-option {
  background: var(--cf-surface-2) !important;
  border: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .avatar-option.selected {
  border-color: var(--cf-gold) !important;
  box-shadow: 0 0 0 2px var(--cf-gold-tint);
}

/* =====================================================================
   SETTINGS
   ===================================================================== */

html[data-theme="dark"] .setting-row {
  border-color: var(--cf-border) !important;
}
html[data-theme="dark"] .setting-row:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}
html[data-theme="dark"] .save-bar {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .danger-zone {
  background: rgba(178, 55, 46, 0.07) !important;
  border: 1px solid var(--cf-red-line) !important;
}
html[data-theme="dark"] .danger-title {
  color: var(--cf-red) !important;
}

/* toggles */
html[data-theme="dark"] .slider {
  background: #3A3A40 !important;
}
html[data-theme="dark"] .slider:before {
  background: #EDEAE5 !important;
}
html[data-theme="dark"] .toggle input:checked + .slider,
html[data-theme="dark"] .switch input:checked + .slider {
  background: var(--cf-gold) !important;
}

/* theme picker */
html[data-theme="dark"] .theme-option {
  background: var(--cf-surface-2) !important;
  border: 1.5px solid var(--cf-border) !important;
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .theme-option:hover {
  border-color: var(--cf-border-strong) !important;
}

/* the owner page marks the chosen card .selected, the staff page .active */
html[data-theme="dark"] .theme-option.selected,
html[data-theme="dark"] .theme-option.active {
  background: var(--cf-gold-tint) !important;
  border-color: var(--cf-gold) !important;
  color: var(--cf-gold-soft) !important;
  box-shadow: 0 0 0 3px rgba(217, 150, 44, 0.10) !important;
}
html[data-theme="dark"] .theme-check {
  background: var(--cf-gold) !important;
  color: #2A1B04 !important;
}

/* The two swatches are pictures of a theme, not surfaces that follow
   it — so they are pinned to the very colours the light stylesheet
   uses. Otherwise the "Light" card turned cream-on-cream once dark
   mode was on, and stopped depicting anything. */
html[data-theme="dark"] .theme-preview {
  background: transparent !important;
  border: 1px solid var(--cf-border) !important;
}
html[data-theme="dark"] .light-side {
  background: #3D1C02 !important;
}
html[data-theme="dark"] .light-preview {
  background: #F7F3EA !important;
}
html[data-theme="dark"] .dark-side {
  background: #100D0A !important;
}
html[data-theme="dark"] .dark-preview {
  background: #191512 !important;
}

/* =====================================================================
   POST-HARVEST CHOICES
   ===================================================================== */

html[data-theme="dark"] .choice label {
  background: var(--cf-surface-2) !important;
  border: 1px solid var(--cf-border) !important;
  color: var(--cf-text-2) !important;
}
html[data-theme="dark"] .choice input:checked + label {
  background: var(--cf-gold-tint) !important;
  border-color: var(--cf-gold-line) !important;
  color: var(--cf-gold-soft) !important;
}

/* =====================================================================
   LOGIN
   ===================================================================== */

html[data-theme="dark"] .login-page {
  background: #000 !important;
}
html[data-theme="dark"] .login-side {
  background: var(--cf-bg) !important;
}

/* .login-card carries no padding of its own — it is a width limiter in
   the light design, where the form simply sits on the page. Giving it a
   card surface without padding pinned the logo to the border, so the
   padding is supplied here along with the surface. */
html[data-theme="dark"] .login-card {
  padding: 36px 34px !important;
  border-radius: 18px !important;
  background: #18181A !important;
  border: 1px solid var(--cf-border) !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8) !important;
}

/* the eye toggle lives inside the field: an icon, not a button box */
html[data-theme="dark"] .password-toggle {
  background: transparent !important;
  border: 0 !important;
  color: var(--cf-faint) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .password-toggle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--cf-text-2) !important;
}

/* form labels on the login card need more presence than page captions */
html[data-theme="dark"] .login-card .form-label {
  color: var(--cf-text-2) !important;
  letter-spacing: 0.01em;
}
html[data-theme="dark"] .login-card .form-input {
  background: #131315 !important;
  border-color: #2E2E33 !important;
}
html[data-theme="dark"] .login-card .form-input:focus {
  border-color: var(--cf-gold-line) !important;
  background: #161618 !important;
}

/* photo panel: deepen the wash so it sits with the dark form side */
html[data-theme="dark"] .visual-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.62),
    rgba(0, 0, 0, 0.34)
  ) !important;
}
html[data-theme="dark"] .visual-brand h2,
html[data-theme="dark"] .visual-content h2 {
  color: #F7F2E8 !important;
}
html[data-theme="dark"] .visual-brand p,
html[data-theme="dark"] .visual-content p {
  color: rgba(255, 255, 255, 0.74) !important;
}
html[data-theme="dark"] .portal-badge {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #F0E7D6 !important;
}

/* brand lockup */
html[data-theme="dark"] .brand-logo {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold) !important;
  border: 1px solid var(--cf-gold-line);
  box-shadow: none !important;
}
html[data-theme="dark"] .cacao,
html[data-theme="dark"] .brand-cacao {
  color: #F3EEE5 !important;
}
html[data-theme="dark"] .flow,
html[data-theme="dark"] .brand-flow {
  color: var(--cf-gold) !important;
}
html[data-theme="dark"] .staff-label {
  background: var(--cf-gold-tint) !important;
  color: var(--cf-gold-soft) !important;
}

html[data-theme="dark"] .login-header h1,
html[data-theme="dark"] .login-header h2 {
  color: #F3EEE5 !important;
}
html[data-theme="dark"] .login-header p,
html[data-theme="dark"] .login-footer,
html[data-theme="dark"] .divider-text,
html[data-theme="dark"] .remember,
html[data-theme="dark"] .remember span {
  color: var(--cf-muted) !important;
}
html[data-theme="dark"] .divider-line {
  background: var(--cf-border) !important;
}
html[data-theme="dark"] .forgot-link {
  color: var(--cf-gold) !important;
}
html[data-theme="dark"] .input-icon {
  color: var(--cf-faint) !important;
}
html[data-theme="dark"] .remember input[type="checkbox"] {
  accent-color: var(--cf-gold);
}

/* primary submit + the "other portal" link-button */
html[data-theme="dark"] .staff-login,
html[data-theme="dark"] .owner-login {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  color: var(--cf-gold-soft) !important;
}
html[data-theme="dark"] .staff-login:hover,
html[data-theme="dark"] .owner-login:hover {
  background: var(--cf-surface-3) !important;
  border-color: var(--cf-gold-line) !important;
}

html[data-theme="dark"] .form-message,
html[data-theme="dark"] .message.error,
html[data-theme="dark"] .modal-message.error {
  color: var(--cf-red) !important;
}
html[data-theme="dark"] .success-message {
  color: var(--cf-green) !important;
}

/* =====================================================================
   TRANSITIONS
   ===================================================================== */

html[data-theme="dark"] body,
html[data-theme="dark"] #topbar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .btn {
  transition: background-color 0.22s ease, border-color 0.22s ease,
    color 0.22s ease, box-shadow 0.22s ease;
}