/**
 * Monday.com-inspired dark theme for SeamHR
 * Scope: body.theme-dark
 */

:root {
  --surface-main: #1b1c28;
  --surface-elevated: #252736;
  --surface-muted: #1e1f2e;
  --border: #3d3f50;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --text-primary: #f0f1f4;
  --text-secondary: #9ca0b2;
  --accent-primary: #5e5ce6;
  --accent-primary-hover: #6d6bed;
  --accent-success: #00c875;
  --accent-warning: #ffcb00;
  --accent-danger: #ff5c5c;
  --accent-info: #579bfc;
  --accent-purple: #a25ddc;
  --accent-orange: #ff9f43;
  --radius: 8px;
  --radius-sm: 6px;
}

/* ---------------------------------------------------------------------------
   1. Base – body, main, typography
   --------------------------------------------------------------------------- */
body.theme-dark {
  background-color: var(--surface-main);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-link-color: var(--text-primary);
  --bs-link-hover-color: var(--text-primary);
}

body.theme-dark main {
  background-color: var(--surface-main);
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: var(--text-primary);
}

body.theme-dark .text-muted {
  color: var(--text-secondary) !important;
}

body.theme-dark .text-dark {
  color: var(--text-primary) !important;
}

body.theme-dark .text-primary {
  color: var(--accent-primary) !important;
}

/* Site-wide: all links use standard color, no underline */
body.theme-dark a,
body.theme-dark a:link,
body.theme-dark a:visited,
body.theme-dark a:hover,
body.theme-dark a:focus {
  color: var(--text-primary);
  text-decoration: none !important;
}

/* Nav: keep accent on hover for active feel */
body.theme-dark .navbar a,
body.theme-dark .navbar a:hover {
  color: inherit;
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   2. Navbar and cards
   --------------------------------------------------------------------------- */
body.theme-dark .navbar {
  background-color: var(--surface-elevated) !important;
  border-bottom: 1px solid var(--border-subtle);
}

body.theme-dark .navbar-dark .navbar-brand,
body.theme-dark .navbar-dark .nav-link {
  color: var(--text-primary) !important;
}

body.theme-dark .navbar-dark .nav-link:hover,
body.theme-dark .navbar-dark .nav-link:focus {
  color: var(--accent-primary) !important;
}

body.theme-dark .navbar-dark .nav-link.active {
  color: var(--accent-primary) !important;
  background-color: rgba(94, 92, 230, 0.25);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* Active menu item: visible on default Bootstrap primary navbar too */
.navbar-dark.bg-primary .nav-link.active,
.navbar.bg-primary .nav-link.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font-weight: 600;
}

body.theme-dark .navbar-dark .navbar-toggler {
  border-color: var(--border);
  color: var(--text-primary);
}

body.theme-dark .navbar-dark .navbar-toggler-icon {
  filter: invert(1);
}

body.theme-dark .navbar-brand {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

body.theme-dark .navbar-brand img {
  height: 28px;
  width: auto;
  display: inline-block;
}

body.theme-dark .card {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: none;
}

body.theme-dark .card-header {
  background-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
  font-weight: 500;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 1rem;
}

body.theme-dark .card-body {
  color: var(--text-primary);
}

body.theme-dark .card-body .text-muted {
  color: var(--text-secondary) !important;
}

body.theme-dark .card-body a,
body.theme-dark .card-body a:hover {
  color: var(--text-primary);
  text-decoration: none !important;
}

/* Task comments sidebar: activity under title — do not wrap in .text-muted (children inherit muted; .text-body uses BS default dark) */
body.theme-dark .card-body .task-inline-activity {
  color: var(--text-secondary);
}
body.theme-dark .card-body .task-inline-activity .task-inline-activity-name {
  color: var(--text-primary);
  font-weight: 600;
}
body.theme-dark .card-body .task-inline-activity a:not(.btn) {
  color: var(--text-primary);
  font-weight: 600;
}
body.theme-dark .card-body .task-inline-activity a:not(.btn):hover {
  color: var(--accent-primary-hover);
  text-decoration: underline !important;
}

/* AI Agents chat: avoid Bootstrap bg-body-secondary (light) + inherited light text */
body.theme-dark .agent-chat .agent-chat-messages {
  background-color: var(--surface-elevated);
  border-color: var(--border-subtle);
}

body.theme-dark .agent-chat .agent-chat-messages .card-body {
  background-color: var(--surface-elevated);
  color: var(--text-primary);
}

body.theme-dark .agent-chat .agent-chat-bubble {
  border: 1px solid var(--border-subtle);
}

body.theme-dark .agent-chat .agent-chat-bubble-label {
  color: var(--text-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.theme-dark .agent-chat .agent-chat-bubble--assistant {
  background-color: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border);
}

body.theme-dark .agent-chat .agent-chat-bubble--assistant .agent-msg-content {
  color: var(--text-primary);
}

body.theme-dark .agent-chat .agent-chat-bubble--user {
  background-color: var(--accent-primary) !important;
  color: #fff !important;
  border-color: transparent;
}

body.theme-dark .agent-chat .agent-chat-bubble--user .agent-chat-bubble-label {
  color: rgba(255, 255, 255, 0.85);
}

body.theme-dark .agent-chat .agent-chat-bubble--tool {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--text-primary) !important;
  border-color: var(--border);
}

body.theme-dark .agent-chat .agent-chat-bubble--tool .agent-chat-bubble-pre {
  color: var(--text-primary);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   3. Tables and lists
   --------------------------------------------------------------------------- */
body.theme-dark .table {
  color: var(--text-primary);
  --bs-table-bg: var(--surface-elevated);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: var(--surface-muted);
  --bs-table-hover-bg: var(--surface-muted);
}

body.theme-dark .table th {
  font-weight: 600;
  color: var(--text-primary);
  border-bottom-color: var(--border) !important;
  background-color: var(--surface-muted);
}

body.theme-dark .table td {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary);
}

body.theme-dark .table td a,
body.theme-dark .table a:not(.btn) {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

body.theme-dark .table td a:hover,
body.theme-dark .table a:not(.btn):hover {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

body.theme-dark .table-hover > tbody > tr:hover {
  background-color: var(--surface-muted);
}

/* Monday.com-style: row separation and header */
body.theme-dark .table.table-monday thead th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border-subtle);
  background-color: var(--surface-elevated);
}
body.theme-dark .table.table-monday thead th:first-child {
  border-left: none;
}
body.theme-dark .table.table-monday tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}
body.theme-dark .table.table-monday tbody td:first-child {
  border-left: none;
}
body.theme-dark .table.table-monday tbody tr:last-child td {
  border-bottom: none;
}

/* Bucket section headers (date/status/priority/project views) — align with elevated header, not white */
body.theme-dark .table.table-monday .task-bucket-header-row td.task-bucket-header-cell {
  background-color: var(--surface-elevated) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary);
}
body.theme-dark .table.table-monday .task-bucket-header-row .task-bucket-section-toggle {
  color: var(--text-secondary) !important;
}
body.theme-dark .table.table-monday .task-bucket-header-row .task-bucket-section-toggle:hover {
  color: var(--text-primary) !important;
}
body.theme-dark .table.table-monday .task-bucket-header-row .badge.bg-secondary {
  background-color: var(--surface-muted) !important;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

/* Inline “+ Add item” row — avoid Bootstrap bg-light on dark theme */
body.theme-dark .table.table-monday tr.add-item-row td {
  background-color: var(--surface-muted);
  border-top: 1px solid var(--border-subtle) !important;
}
body.theme-dark .table.table-monday .tasks-inline-add-form {
  background-color: transparent !important;
  border-color: var(--border-subtle) !important;
}

/* Task row: due date text (plain text in .btn-link can inherit wrong color vs table background) */
body.theme-dark .table.table-monday td.task-inline-cell-editable[data-field='end_date'] .task-inline-open.btn-link,
body.theme-dark .table.table-monday td.task-inline-cell-editable[data-field='end_date'] .task-inline-view-due,
body.theme-dark .table.table-monday td.task-inline-cell-editable[data-field='end_date'] .task-inline-due-text {
  color: var(--text-primary) !important;
}
body.theme-dark .table.table-monday td.task-inline-cell-editable[data-field='end_date'] .task-inline-open.btn-link:hover,
body.theme-dark .table.table-monday td.task-inline-cell-editable[data-field='end_date'] .task-inline-open.btn-link:focus {
  color: var(--text-primary) !important;
}
body.theme-dark .table.table-monday td.task-inline-cell-editable[data-field='end_date'] .task-inline-open:hover {
  opacity: 1;
}

/* Task bucket cards (My Work): distinct heading accent per section / view (lighter pastels) */
body.theme-dark .task-bucket-card .task-bucket-card-header {
  border-left: 4px solid
    color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) 72%, rgba(255, 255, 255, 0.22));
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-subtle);
}
body.theme-dark .task-bucket-card .task-bucket-card-header .bucket-total-badge {
  border: 1px solid color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) 55%, rgba(255, 255, 255, 0.12));
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary);
}
body.theme-dark .task-bucket-head--date-0 { --bucket-accent: #f0b4b4; } /* Past dates */
body.theme-dark .task-bucket-head--date-1 { --bucket-accent: #a8ebc8; } /* Today */
body.theme-dark .task-bucket-head--date-2 { --bucket-accent: #b8d4ff; } /* This week */
body.theme-dark .task-bucket-head--date-3 { --bucket-accent: #b8eef5; } /* Next week */
body.theme-dark .task-bucket-head--date-4 { --bucket-accent: #d4b8f0; } /* Later */
body.theme-dark .task-bucket-head--date-5 { --bucket-accent: #d0d4dc; } /* Without a date */

body.theme-dark .task-bucket-head--status-0 { --bucket-accent: #a8ebc8; } /* Done */
body.theme-dark .task-bucket-head--status-1 { --bucket-accent: #b8d4ff; } /* Progress */
body.theme-dark .task-bucket-head--status-2 { --bucket-accent: #ffe08a; } /* Pending */
body.theme-dark .task-bucket-head--status-3 { --bucket-accent: #ffd4a8; } /* Ready for testing */
body.theme-dark .task-bucket-head--status-4 { --bucket-accent: #d4b8f0; } /* Pending approval */
body.theme-dark .task-bucket-head--status-5 { --bucket-accent: #ffb8b8; } /* Cancelled */
body.theme-dark .task-bucket-head--status-6 { --bucket-accent: #c0c4ce; } /* Struck */
body.theme-dark .task-bucket-head--status-7 { --bucket-accent: #d0d4dc; } /* Other */

body.theme-dark .task-bucket-head--priority-0 { --bucket-accent: #ffb8b8; } /* Urgent */
body.theme-dark .task-bucket-head--priority-1 { --bucket-accent: #ffd4a8; } /* High */
body.theme-dark .task-bucket-head--priority-2 { --bucket-accent: #b8d4ff; } /* Medium */
body.theme-dark .task-bucket-head--priority-3 { --bucket-accent: #a8ebc8; } /* Low */
body.theme-dark .task-bucket-head--priority-4 { --bucket-accent: #d0d4dc; } /* Other */

body.theme-dark .task-bucket-head--project-0 { --bucket-accent: #b8d4ff; }
body.theme-dark .task-bucket-head--project-1 { --bucket-accent: #a8ebc8; }
body.theme-dark .task-bucket-head--project-2 { --bucket-accent: #ffe08a; }
body.theme-dark .task-bucket-head--project-3 { --bucket-accent: #ffd4a8; }
body.theme-dark .task-bucket-head--project-4 { --bucket-accent: #d4b8f0; }
body.theme-dark .task-bucket-head--project-5 { --bucket-accent: #b8eef5; }
body.theme-dark .task-bucket-head--project-6 { --bucket-accent: #f0b4b4; }
body.theme-dark .task-bucket-head--project-7 { --bucket-accent: #d0d4dc; }
body.theme-dark .task-bucket-head--project-8 { --bucket-accent: #9ef0c2; }
body.theme-dark .task-bucket-head--project-9 { --bucket-accent: #c4c8ff; }
body.theme-dark .task-bucket-head--project-10 { --bucket-accent: #ffd4a8; }
body.theme-dark .task-bucket-head--project-11 { --bucket-accent: #a8f0e0; }

/* Status badge with colored dot (Monday-style) */
body.theme-dark .table .badge.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.5rem;
}
body.theme-dark .table .badge.badge-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
body.theme-dark .table .badge.bg-success.badge-status::before {
  background: #fff;
}
body.theme-dark .table .badge.bg-info.badge-status::before {
  background: #fff;
}
body.theme-dark .table .badge.bg-warning.badge-status::before {
  background: #fff;
}
body.theme-dark .table .badge.bg-danger.badge-status::before {
  background: #fff;
}
body.theme-dark .table .badge.bg-secondary.badge-status::before {
  background: var(--text-primary);
}
body.theme-dark .table .badge.bg-primary.badge-status::before {
  background: #fff;
}

/* Comment count pill (Monday-style) */
body.theme-dark .table .task-comment-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none !important;
  font-size: 0.8125rem;
}
body.theme-dark .table .task-comment-link:hover {
  color: var(--text-primary);
  background-color: var(--surface-muted);
  text-decoration: none !important;
}
body.theme-dark .table .task-comment-link.has-comments {
  background-color: rgba(87, 155, 252, 0.2);
  color: var(--accent-info);
}
body.theme-dark .table .task-comment-link.has-comments:hover {
  background-color: rgba(87, 155, 252, 0.3);
  color: var(--accent-info);
}

/* Assignee avatar circle (Monday-style) */
body.theme-dark .avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--accent-orange);
  flex-shrink: 0;
}
body.theme-dark .avatar-circle.avatar-primary { background-color: var(--accent-primary); }
body.theme-dark .avatar-circle.avatar-success { background-color: var(--accent-success); }
body.theme-dark .avatar-circle.avatar-info { background-color: var(--accent-info); }
body.theme-dark .avatar-circle.avatar-purple { background-color: var(--accent-purple); }
body.theme-dark .avatar-circle.avatar-danger { background-color: var(--accent-danger); }

/* Comment bubbles: dark background and readable text */
body.theme-dark .comment-bubble {
  background-color: var(--surface-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
body.theme-dark .comment-bubble .comment-body-wrap .text-primary {
  color: var(--accent-info) !important;
}
body.theme-dark .comment-bubble .comment-body-wrap .text-muted,
body.theme-dark .comment-bubble .comment-body-wrap .small.text-muted {
  color: var(--text-secondary) !important;
}
body.theme-dark .comment-bubble .comment-body-content {
  color: var(--text-primary);
}
/* nl2br() leaves \n after <br>; pre-wrap doubled line gaps — use normal + line-height */
.comment-body-content {
  white-space: normal;
  line-height: 1.45;
  overflow-wrap: break-word;
}
body.theme-dark .comment-bubble .comment-body-content a {
  color: var(--accent-info);
}
/* @mention styling: distinct color for employee names after @ */
.comment-body-content .comment-mention {
  color: #0d6efd;
  font-weight: 600;
}
body.theme-dark .comment-bubble .comment-body-content .comment-mention {
  color: var(--accent-info);
  font-weight: 600;
}
.comment-body-content .comment-inline-img {
  cursor: pointer;
}
body.theme-dark .comment-bubble .btn-link.text-muted {
  color: var(--text-secondary) !important;
}
body.theme-dark .comment-bubble .btn-link.text-muted:hover {
  color: var(--text-primary) !important;
}
body.theme-dark .comment-bubble .comment-like-btn .comment-like-icon.text-primary {
  color: var(--accent-primary) !important;
}

/* Subtasks: visually indented rows */
body.theme-dark #subtasks-card .table tbody tr.subtask-row td {
  background: rgba(255, 255, 255, 0.02);
}
body.theme-dark #subtasks-card .table tbody tr.subtask-row td:first-child {
  border-left: 3px solid rgba(94, 92, 230, 0.45);
}
body.theme-dark #subtasks-card .table tbody tr.subtask-row td:nth-child(2) {
  padding-left: 16px;
}
body.theme-dark #subtasks-card .subtask-status-toggle {
  cursor: pointer;
}

/* Pagination (Laravel/Bootstrap) */
body.theme-dark .pagination {
  --bs-pagination-bg: var(--surface-muted);
  --bs-pagination-border-color: var(--border-subtle);
  --bs-pagination-color: var(--text-primary);
  --bs-pagination-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-pagination-hover-border-color: rgba(255, 255, 255, 0.14);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-focus-bg: rgba(94, 92, 230, 0.18);
  --bs-pagination-focus-color: var(--text-primary);
  --bs-pagination-active-bg: var(--accent-primary);
  --bs-pagination-active-border-color: var(--accent-primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: rgba(255, 255, 255, 0.08);
  --bs-pagination-disabled-color: rgba(255, 255, 255, 0.35);
}
body.theme-dark .pagination .page-link {
  border-radius: var(--radius-sm);
}
body.theme-dark .pagination .page-item + .page-item .page-link {
  margin-left: 6px;
}
body.theme-dark .pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(94, 92, 230, 0.25);
}

/* Task title with optional checkmark (Monday-style) */
body.theme-dark .table .task-title-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body.theme-dark .table .task-title-cell .task-done-icon {
  color: var(--accent-success);
  flex-shrink: 0;
}

/* Task and project titles: same color as column headings, no underline */
body.theme-dark .table .task-title-cell a,
body.theme-dark .table .task-title-cell a:hover {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}

body.theme-dark .table td a.project-link,
body.theme-dark .table td a.project-link:hover {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}

/* Employee name link (dashboard): standard color, no underline */
body.theme-dark a.employee-name-link,
body.theme-dark a.employee-name-link:hover,
body.theme-dark .table td a.employee-name-link,
body.theme-dark .table td a.employee-name-link:hover {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

/* Project name link (projects index): standard color, no underline */
body.theme-dark a.project-name-link,
body.theme-dark a.project-name-link:link,
body.theme-dark a.project-name-link:visited,
body.theme-dark a.project-name-link:hover,
body.theme-dark a.project-name-link:focus,
body.theme-dark .table td a.project-name-link,
body.theme-dark .table td a.project-name-link:hover,
body.theme-dark .table-projects tbody td a.project-name-link,
body.theme-dark .table-projects tbody td a.project-name-link:link,
body.theme-dark .table-projects tbody td a.project-name-link:visited,
body.theme-dark .table-projects tbody td a.project-name-link:hover,
body.theme-dark .table-projects tbody td a.project-name-link:focus {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

/* Sidebar project list (tasks page): standard color, no underline */
body.theme-dark a.sidebar-project-link,
body.theme-dark a.sidebar-project-link:hover,
body.theme-dark .list-group-item a.sidebar-project-link,
body.theme-dark .list-group-item a.sidebar-project-link:hover {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

/* Add-item row (tasks list) */
body.theme-dark .add-item-row form.bg-light,
body.theme-dark .add-item-row .bg-light {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-subtle) !important;
}
body.theme-dark .inline-assignee-dropdown {
  background-color: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
}
body.theme-dark .inline-assignee-dropdown .list-group-item {
  background: transparent;
}

body.theme-dark .list-group-item {
  background-color: var(--surface-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

body.theme-dark .list-group-item:hover {
  background-color: var(--surface-muted);
}

body.theme-dark .list-group-item a,
body.theme-dark .list-group-item a:hover {
  color: var(--text-primary);
  text-decoration: none !important;
}

body.theme-dark .list-group-item.text-primary a,
body.theme-dark .list-group-item .text-primary {
  color: var(--accent-primary) !important;
}

/* ---------------------------------------------------------------------------
   4. Forms
   --------------------------------------------------------------------------- */
body.theme-dark .form-control,
body.theme-dark .form-select {
  background-color: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

body.theme-dark .form-control::placeholder {
  color: var(--text-secondary);
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  background-color: var(--surface-muted);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(94, 92, 230, 0.25);
}

body.theme-dark .form-control:disabled,
body.theme-dark .form-select:disabled {
  background-color: var(--surface-main);
  color: var(--text-secondary);
}

body.theme-dark .form-label,
body.theme-dark label {
  color: var(--text-primary);
}

body.theme-dark .form-text {
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   5. Buttons and badges
   --------------------------------------------------------------------------- */
body.theme-dark .btn-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  border-radius: var(--radius-sm);
}

body.theme-dark .btn-primary:hover {
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: #fff;
}

body.theme-dark .btn-outline-primary {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  border-radius: var(--radius-sm);
}

body.theme-dark .btn-outline-primary:hover {
  background-color: rgba(94, 92, 230, 0.15);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Solid primary when "active" (matches .btn-primary); fixes purple text on blue from outline color winning */
body.theme-dark .btn-outline-primary.active,
body.theme-dark .btn-outline-primary:active:not(:disabled),
body.theme-dark .btn-check:checked + .btn-outline-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

body.theme-dark .btn-outline-primary.active:hover,
body.theme-dark .btn-check:checked + .btn-outline-primary:hover {
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: #fff;
}

/* Tasks page Table/Calendar: inactive = outline, active = same as primary button */
body.theme-dark .tasks-view-toggle > .btn:not(.active) {
  background-color: transparent;
}

body.theme-dark .tasks-view-toggle > .btn.active {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

body.theme-dark .tasks-view-toggle > .btn.active:hover {
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: #fff;
}

body.theme-dark .btn-secondary,
body.theme-dark .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

body.theme-dark .btn-secondary:hover,
body.theme-dark .btn-outline-secondary:hover {
  background-color: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
}

body.theme-dark .btn-success {
  background-color: var(--accent-success);
  border-color: var(--accent-success);
  color: #1b1c28;
  border-radius: var(--radius-sm);
}

body.theme-dark .btn-warning {
  background-color: var(--accent-warning);
  border-color: var(--accent-warning);
  color: #1b1c28;
  border-radius: var(--radius-sm);
}

body.theme-dark .btn-danger {
  background-color: var(--accent-danger);
  border-color: var(--accent-danger);
  color: #fff;
  border-radius: var(--radius-sm);
}

body.theme-dark .btn-info {
  background-color: var(--accent-info);
  border-color: var(--accent-info);
  color: #fff;
  border-radius: var(--radius-sm);
}

body.theme-dark .badge.bg-success {
  background-color: var(--accent-success) !important;
  color: #fff !important;
  border-radius: 999px;
}

body.theme-dark .badge.bg-warning,
body.theme-dark .badge.bg-warning.text-dark {
  background-color: var(--accent-warning) !important;
  color: #fff !important;
  border-radius: 999px;
}

body.theme-dark .badge.bg-danger {
  background-color: var(--accent-danger) !important;
  color: #fff;
  border-radius: 999px;
}

body.theme-dark .badge.bg-info {
  background-color: var(--accent-info) !important;
  color: #fff;
  border-radius: 999px;
}

body.theme-dark .badge.bg-primary {
  background-color: var(--accent-primary) !important;
  color: #fff;
  border-radius: 999px;
}

body.theme-dark .badge.bg-secondary {
  background-color: var(--text-secondary) !important;
  color: var(--surface-main);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   6. Alerts and dropdowns
   --------------------------------------------------------------------------- */
body.theme-dark .alert-success {
  background-color: rgba(0, 200, 117, 0.15);
  border-color: var(--accent-success);
  color: var(--text-primary);
}

body.theme-dark .alert-warning {
  background-color: rgba(255, 203, 0, 0.15);
  border-color: var(--accent-warning);
  color: var(--text-primary);
}

body.theme-dark .alert-danger {
  background-color: rgba(255, 92, 92, 0.15);
  border-color: var(--accent-danger);
  color: var(--text-primary);
}

body.theme-dark .alert-info {
  background-color: rgba(87, 155, 252, 0.15);
  border-color: var(--accent-info);
  color: var(--text-primary);
}

body.theme-dark .dropdown-menu {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

body.theme-dark .dropdown-item {
  color: var(--text-primary);
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
  background-color: var(--surface-muted);
  color: var(--text-primary);
}

/* Navbar dropdowns: avoid inheriting low-contrast navbar link color */
body.theme-dark .navbar .dropdown-menu .dropdown-item,
body.theme-dark .navbar .dropdown-menu .dropdown-item:link,
body.theme-dark .navbar .dropdown-menu .dropdown-item:visited {
  color: var(--text-primary) !important;
  opacity: 1;
}

body.theme-dark .navbar .dropdown-menu .dropdown-item:hover,
body.theme-dark .navbar .dropdown-menu .dropdown-item:focus {
  background-color: var(--surface-muted);
  color: var(--text-primary) !important;
}

body.theme-dark .navbar .dropdown-menu .dropdown-header {
  color: var(--text-secondary);
  opacity: 1;
}

body.theme-dark .dropdown-divider {
  border-color: var(--border-subtle);
}

body.theme-dark .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

body.theme-dark .btn-close:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Modals (e.g. End timer popup)
   --------------------------------------------------------------------------- */
body.theme-dark .modal-content {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
}

body.theme-dark .modal-header {
  background-color: rgba(0, 0, 0, 0.15);
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

body.theme-dark .modal-title {
  color: var(--text-primary);
}

body.theme-dark .modal-body {
  color: var(--text-primary);
}

body.theme-dark .modal-footer {
  border-top-color: var(--border-subtle);
}

/* Add note / Edit note: Summernote editor in modals – match dark theme */
body.theme-dark .modal .note-editor.note-frame {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-muted);
}
body.theme-dark .modal .note-editor .note-toolbar {
  background-color: var(--surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.5rem 0.75rem;
}
body.theme-dark .modal .note-editor .note-toolbar .note-btn,
body.theme-dark .modal .note-editor .note-toolbar .dropdown-toggle {
  background-color: transparent;
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
body.theme-dark .modal .note-editor .note-toolbar .note-btn:hover,
body.theme-dark .modal .note-editor .note-toolbar .dropdown-toggle:hover {
  background-color: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
}
body.theme-dark .modal .note-editor .note-editing-area,
body.theme-dark .modal .note-editor .note-editable {
  background-color: var(--surface-muted);
  color: var(--text-primary);
  border-color: transparent;
}
body.theme-dark .modal .note-editor .note-editable:focus {
  background-color: var(--surface-muted);
  color: var(--text-primary);
}
body.theme-dark .modal .note-editor .note-placeholder {
  color: var(--text-secondary);
}
body.theme-dark .modal .note-editor .note-statusbar {
  background-color: var(--surface-elevated);
  border-top-color: var(--border-subtle);
}

/* Invoice create/edit: totals section (Subtotal, Discount, Total) – match dark theme */
body.theme-dark .invoice-totals-section {
  background-color: var(--surface-elevated) !important;
  border-top-color: var(--border-subtle) !important;
  color: var(--text-primary);
}
body.theme-dark .invoice-totals-section .row,
body.theme-dark .invoice-totals-section .col-auto {
  color: var(--text-primary);
}
body.theme-dark .invoice-totals-section .border-top {
  border-color: var(--border-subtle) !important;
}

/* Employee analytics — period banner (no harsh white on dark theme) */
body.theme-dark .employee-analytics-period-summary {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius);
  color: var(--text-primary);
}
body.theme-dark .employee-analytics-period-summary .text-muted {
  color: var(--text-secondary) !important;
}

/* My Work /tasks — projects sidebar: sticky + scrollable list */
.tasks-projects-sidebar-search {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.tasks-projects-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.tasks-projects-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Mobile: cap list height so the page doesn’t stretch endlessly */
@media (max-width: 767.98px) {
  .tasks-projects-sidebar-scroll {
    max-height: min(45vh, 20rem);
  }
}
@media (min-width: 768px) {
  .tasks-projects-sidebar-col {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }
  .tasks-projects-sidebar-card {
    max-height: calc(100vh - 2rem);
  }
}
body.theme-dark .tasks-projects-sidebar-search {
  border-bottom-color: var(--border-subtle) !important;
}

/* My Work /tasks toolbar — scrollable filter popover */
.tasks-filter-panel-body {
  max-height: min(70vh, 28rem);
  overflow-y: auto;
}

/* My Work /tasks toolbar — search + filter panel */
body.theme-dark .tasks-toolbar .input-group-text {
  background-color: var(--surface-muted) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary);
}
body.theme-dark .tasks-toolbar .tasks-toolbar-search .form-control {
  background-color: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
body.theme-dark .tasks-filter-panel {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
}
body.theme-dark .tasks-filter-panel .border-bottom {
  border-color: var(--border-subtle) !important;
}