/**
 * Hacklog Theme
 *
 * A minimal, high-contrast theme for professional project management.
 * Designed for long daily use with improved legibility and hierarchy.
 *
 * Fonts:
 * - IBM Plex Sans (headings)
 * - Ubuntu (body text)
 *
 * Color Philosophy:
 * - Uses Bootstrap 5's semantic color system
 * - Enhances contrast through font-weight and spacing
 * - Maintains calm, professional aesthetic
 */

/* ============================================
   FONTS
   ============================================ */

/* IBM Plex Sans - Headings */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Ubuntu - Body Text */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/* When the user picks dark theme, body gets class "theme-dark". */
/* Everything below here only applies when body.theme-dark exists. */

/* Dark: page background and main text color */
body.theme-dark {
    background-color: #1a1f2e;
    color: #b8bcc6;
}

/* Dark: headings (slightly brighter than body text) */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
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: #e2e6eb;
}

body.theme-dark .text-muted {
    color: #7d8590 !important;
}

body.theme-dark a {
    color: #7ba3ff;
}

body.theme-dark a:hover {
    color: #a3c2ff;
}

/* Dark: cards (box background and border) */
body.theme-dark .card {
    background-color: #232a36;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Dark: big numbers in cards (e.g. "0" in Project Health) */
body.theme-dark .card-body .fs-2,
body.theme-dark .card-body .fs-5 {
    color: #b8bcc6;
}

body.theme-dark .card-header {
    background-color: #2a3342;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.theme-dark .card-header.bg-white {
    background-color: #2a3342 !important;
    color: #e2e6eb;
}
body.theme-dark .card-header.bg-white .card-title,
body.theme-dark .card-header.bg-white .text-muted {
    color: #e2e6eb !important;
}
body.theme-dark .card-header.bg-white .text-muted {
    color: #b8bcc6 !important;
    color: #e2e6eb;
}

body.theme-dark .modal-content {
    background-color: #232a36;
    color: #b8bcc6;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: rgba(255, 255, 255, 0.06);
}

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

/* Task form modal: header (buttons row), tabs bar, and sticky sections */
.task-form-header {
    border-bottom-color: #dee2e6;
}
.task-form-tabs-bg {
    background-color: #fff;
    border-bottom-color: #dee2e6;
}
body.theme-dark .task-form-header {
    background-color: #232a36 !important; /* match modal content and tabs */
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Buttons in task form header: exact same background as header (#232a36) */
body.theme-dark .task-form-header .btn-outline-secondary,
body.theme-dark .task-form-header .btn-outline-danger {
    background-color: #232a36 !important;
    border-color: rgba(255, 255, 255, 0.25);
    color: #e2e6eb;
}
body.theme-dark .task-form-header .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.35);
    color: #e2e6eb;
}
body.theme-dark .task-form-header .btn-outline-danger {
    border-color: rgba(248, 81, 73, 0.6);
    color: #f87171;
}
body.theme-dark .task-form-header .btn-outline-danger:hover {
    background-color: rgba(248, 81, 73, 0.12) !important;
    border-color: rgba(248, 81, 73, 0.8);
    color: #fca5a5;
}
body.theme-dark .task-form-header .btn-primary {
    background-color: #343d4a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e2e6eb !important;
}
body.theme-dark .task-form-header .btn-primary:hover {
    background-color: #3d4754 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #e2e6eb !important;
}
body.theme-dark .task-form-tabs-bg {
    background-color: #232a36 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dark: top navbar bar */
body.theme-dark .navbar {
    background-color: #1e2430 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dark: tables (e.g. Users list - header row and data rows) */
body.theme-dark .table {
    color: #b8bcc6;
}

body.theme-dark .table-bordered,
body.theme-dark .table-bordered th,
body.theme-dark .table-bordered td {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark: table header row (so it's not white) */
body.theme-dark thead th,
body.theme-dark thead.table-light th {
    background-color: #2a3342;
    color: #e2e6eb;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Data rows – no white background; match card surface */
body.theme-dark .table tbody td {
    background-color: #232a36;
    border-bottom-color: rgba(255, 255, 255, 0.05);
    color: #b8bcc6;
}

body.theme-dark .table-hover tbody tr:hover td {
    background-color: #2a3342;
}

/* Dark: badges inside tables (Role, Status) */
body.theme-dark .table .badge {
    color: #fff;
}

/* Dark: form inputs and dropdowns */
body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: #2a3342;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e6eb;
}

body.theme-dark .form-control::placeholder {
    color: #7d8590;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    border-color: #7ba3ff;
    box-shadow: 0 0 0 0.2rem rgba(123, 163, 255, 0.25);
}

/* Dark: file input "Choose File" button */
body.theme-dark .form-control[type="file"]::file-selector-button {
    background-color: #2a3342;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e6eb;
}
body.theme-dark .form-control[type="file"]::-webkit-file-upload-button {
    background-color: #2a3342;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: #e2e6eb;
}

body.theme-dark .form-label {
    color: #e2e6eb;
}

body.theme-dark .form-text {
    color: #b8bcc6;
}

body.theme-dark .form-check-label {
    color: #e2e6eb;
}

body.theme-dark .user-picker-list {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background-color: #232a36;
}

body.theme-dark .form-check-input {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: #2a3342;
}
body.theme-dark .form-check-input:checked {
    border-color: #7ba3ff;
    background-color: #7ba3ff;
}

/* Dark: "Move to:" label and similar input-group labels */
body.theme-dark .input-group-text {
    background-color: #2a3342;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e6eb;
}

/* Dark: alert boxes (info, danger, empty-state) */
body.theme-dark .alert {
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e6eb;
}

body.theme-dark .alert-info {
    background-color: #1e2d3d;
    border-color: rgba(123, 163, 255, 0.25);
    color: #c8d9f0;
}

body.theme-dark .alert-info .alert-link,
body.theme-dark .alert-info strong {
    color: #e2e6eb;
}

body.theme-dark .alert-danger {
    background-color: #2d2224;
    border-color: rgba(248, 81, 73, 0.3);
    color: #f0c8c6;
}

body.theme-dark .alert-danger .alert-link,
body.theme-dark .alert-danger strong {
    color: #f5e0df;
}

body.theme-dark .alert-success {
    background-color: #1a2e1e;
    border-color: rgba(25, 135, 84, 0.4);
    color: #b8e0c8;
}
body.theme-dark .alert-success .alert-link,
body.theme-dark .alert-success strong {
    color: #d4f0de;
}
body.theme-dark .alert-success .btn-close {
    filter: invert(1);
}

/* Dark: empty-state style alert (e.g. "No projects yet") */
body.theme-dark .alert-light {
    background-color: #232a36;
    border-color: rgba(255, 255, 255, 0.06);
    color: #b8bcc6;
}

body.theme-dark .alert-light .alert-link {
    color: #a3c2ff;
}

/* Dark: text inside cards (titles, lists, muted) */
body.theme-dark .card-body,
body.theme-dark .card .card-title,
body.theme-dark .card .card-text,
body.theme-dark .card ol,
body.theme-dark .card li {
    color: #b8bcc6;
}

body.theme-dark .card .card-title {
    color: #e2e6eb;
}

body.theme-dark .card .text-muted {
    color: #7d8590 !important;
}

/* Dark: list group rows */
body.theme-dark .list-group-item {
    background-color: #232a36;
    border-color: rgba(255, 255, 255, 0.06);
    color: #b8bcc6;
}

/* Dark: breadcrumb links */
body.theme-dark .breadcrumb-item,
body.theme-dark .breadcrumb-item a {
    color: #7d8590;
}

body.theme-dark .breadcrumb-item.active {
    color: #e2e6eb;
}

/* Dark: project cards on Projects page */
body.theme-dark .project-card {
    background-color: #232a36;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.theme-dark .project-card:hover {
    border-color: rgba(123, 163, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.theme-dark .bg-primary-subtle {
    background-color: rgba(123, 163, 255, 0.12) !important;
}

/* Dark: tab links (Home, Board, Schedule, etc.) */
body.theme-dark .nav-tabs .nav-link {
    color: #b8bcc6;
}

body.theme-dark .nav-tabs .nav-link:hover {
    color: #e2e6eb;
    border-color: rgba(255, 255, 255, 0.12);
}

body.theme-dark .nav-tabs .nav-link.active {
    background-color: #2a3342;
    border-color: rgba(255, 255, 255, 0.12);
    border-bottom-color: #232a36; /* merge with tab content background */
    color: #e2e6eb;
}

body.theme-dark .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Dark: secondary and outline buttons */
body.theme-dark .btn-secondary,
body.theme-dark .btn-outline-secondary {
    background-color: #2a3342;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e6eb;
}

body.theme-dark .btn-secondary:hover,
body.theme-dark .btn-outline-secondary:hover {
    background-color: #343d4a;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e6eb;
}

/* Dark: timeline view table – force header bar and text (override light gradient) */
body.theme-dark .timeline-table thead th {
    background: #2a3342 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #e2e6eb;
}
body.theme-dark .timeline-table thead th.timeline-header,
body.theme-dark .timeline-table thead th .text-muted {
    color: #e2e6eb !important;
}

/* Dark: phase name in left column (override .text-body / .text-muted on the link) */
body.theme-dark .timeline-phase-label,
body.theme-dark .timeline-phase-label a,
body.theme-dark .timeline-phase-label a.text-body,
body.theme-dark .timeline-phase-label a.text-muted {
    color: #e2e6eb !important;
}
body.theme-dark .timeline-phase-label a.text-danger {
    color: #f5a9a9 !important;
}
body.theme-dark .timeline-phase-label a:hover {
    color: #a3c2ff !important;
}
body.theme-dark .timeline-phase-label .text-muted {
    color: #b8bcc6 !important;
}

body.theme-dark .timeline-table tbody td {
    border-left-color: rgba(255, 255, 255, 0.05);
    border-top-color: rgba(255, 255, 255, 0.05);
}

body.theme-dark .timeline-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

body.theme-dark .timeline-heat-low {
    background-color: rgba(123, 163, 255, 0.06) !important;
}

body.theme-dark .timeline-heat-medium {
    background-color: rgba(123, 163, 255, 0.12) !important;
}

body.theme-dark .timeline-heat-high {
    background-color: rgba(123, 163, 255, 0.18) !important;
}

/* Dark: task card status dropdown */
body.theme-dark .task-card select[name="status"] {
    background-color: transparent;
}

/* Dark: dropdown menus */
body.theme-dark .dropdown-menu {
    background-color: #232a36;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-dark .dropdown-item {
    color: #b8bcc6;
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: #e2e6eb;
}

/* Dark: anything with class bg-light (use dark instead) */
body.theme-dark .bg-light {
    background-color: #2a3342 !important;
    color: #b8bcc6;
}

/* Dark: assignee pills (Assign To) on Task Form – border fits theme */
body.theme-dark .badge.bg-light.text-dark,
body.theme-dark #assignedUserPills .badge {
    color: #e2e6eb !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- Theme toggle (light/dark switch in navbar) --- */
.hl-theme-toggle {
    padding: 0;
    border-radius: 999px;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hl-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.3);
}

.hl-theme-toggle-track {
    position: relative;
    width: 44px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(248, 249, 250, 0.3), rgba(173, 181, 189, 0.4));
    overflow: hidden;
}

.hl-theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

body.theme-dark .hl-theme-toggle-thumb {
    transform: translateX(22px);
    background: #2a3342;
}

body.theme-dark .hl-theme-toggle-track {
    background: rgba(42, 51, 66, 0.8);
}

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

/**
 * Body text uses Ubuntu for excellent on-screen readability
 * Light weight (300) improves clarity at standard sizes
 */
body {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: #212529;
    background-color: #F8F9FA;
}

/**
 * Headings use IBM Plex Sans for clear hierarchy
 * Medium weights (500-600) provide structure without aggression
 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    color: #212529;
}

/**
 * Page-level headings (h1) use slightly bolder weight
 * for immediate visual hierarchy
 */
h1, .h1 {
    font-weight: 700;
}

/**
 * Smaller headings use medium weight to avoid visual clutter
 */
h5, h6, .h5, .h6 {
    font-weight: 500;
}


/* ============================================
   LINKS
   ============================================ */

/**
 * Links use primary color with medium weight for clarity
 * Hover state increases weight rather than relying solely on color
 */
a {
    color: #0B5ED7;
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    color: #0a58ca;
    text-decoration: underline;
}


/* ============================================
   CARDS & SURFACES
   ============================================ */

/**
 * Cards use pure white backgrounds on the light gray page
 * This creates clear visual separation without shadows
 */
.card {
    background-color: #FFFFFF;
    border-color: #DEE2E6;
}

/**
 * Card headers use light background for subtle hierarchy
 * Font weight creates emphasis without color contrast
 */
.card-header {
    background-color: #F8F9FA;
    border-bottom-color: #DEE2E6;
    font-weight: 500;
}

/**
 * Light card variant maintains readability
 */
.card.bg-light {
    background-color: #F8F9FA !important;
}


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

/**
 * Primary buttons use the accent color
 * Font weight adds substance without increasing size
 */
.btn-primary {
    background-color: #6482b4;
    border-color: #6482b4;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #557099;
    border-color: #557099;
}

/* Dark mode primary button */
body.theme-dark .btn-primary {
    background-color: #7ba3ff;
    border-color: #7ba3ff;
    color: #0b1020;
    box-shadow: 0 0 0 1px rgba(11, 16, 32, 0.8), 0 2px 6px rgba(0, 0, 0, 0.45);
}

body.theme-dark .btn-primary:hover {
    background-color: #a3c2ff;
    border-color: #a3c2ff;
    color: #050711;
}

/**
 * Outline buttons maintain consistency with improved weight
 */
.btn-outline-primary {
    color: #6482b4;
    border-color: #6482b4;
    font-weight: 500;
}

.btn-outline-primary:hover {
    background-color: #6482b4;
    border-color: #6482b4;
}

/**
 * Secondary and outline-secondary buttons remain subdued
 * to maintain action hierarchy
 */
.btn-secondary,
.btn-outline-secondary {
    font-weight: 400;
}


/* ============================================
   BADGES
   ============================================ */

/**
 * Badges use medium weight for readability at small sizes
 * No font-family override - inherits from context
 */
.badge {
    font-weight: 500;
}

/**
 * Secondary badge - improved contrast for readability
 * Uses darker gray background with white text
 */
.badge.bg-secondary {
    background-color: #495057 !important;
    color: #ffffff !important;
}


/* ============================================
   NAVIGATION
   ============================================ */

/**
 * Navbar brand uses heading font for consistency
 */
.navbar-brand {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/**
 * Navigation links use medium weight for clarity
 */
.nav-link {
    font-weight: 500;
}

a:hover {
    text-decoration: underline!important;
}


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

/**
 * Table headers use heading font for hierarchy
 */
thead th {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/**
 * Table borders use neutral gray
 */
.table-bordered {
    border-color: #DEE2E6;
}

/**
 * Table borders use neutral gray
 */
.table-bordered th,
.table-bordered td {
    border-color: #DEE2E6;
}


/* ============================================
   FORMS
   ============================================ */

/**
 * Form labels use medium weight for clarity
 * without overwhelming the form field
 */
.form-label {
    font-weight: 500;
    color: #212529;
}

/**
 * Form controls maintain readability
 */
.form-control,
.form-select {
    border-color: #DEE2E6;
}

.form-control:focus,
.form-select:focus {
    border-color: #0B5ED7;
    box-shadow: 0 0 0 0.25rem rgba(11, 94, 215, 0.25);
}


/* ============================================
   ALERTS & EMPTY STATES
   ============================================ */

/**
 * Alerts use subtle backgrounds with clear borders
 * Text weight ensures readability
 */
.alert {
    border-color: #DEE2E6;
}

/**
 * Alert links inherit proper weight
 */
.alert-link {
    font-weight: 600;
}

/* Alert contrast: readable text on alert types (light mode) */
.alert-info {
    background-color: #e8f4fc;
    border-color: #b6d4e8;
    color: #0c5460;
}

.alert-info .alert-link {
    color: #062c33;
}

.alert-danger {
    background-color: #fdf3f4;
    border-color: #e8c8cb;
    color: #721c24;
}

.alert-danger .alert-link {
    color: #491217;
}

/* Card content: clear text for lists and body (light mode) */
.card-body,
.card .card-title,
.card .card-text,
.card ol,
.card li {
    color: #212529;
}

.card .text-muted {
    color: #495057 !important;
}


/* ============================================
   LIST GROUPS
   ============================================ */

/**
 * List group items maintain clean borders
 */
.list-group-item {
    border-color: #DEE2E6;
}


/* ============================================
   BREADCRUMBS
   ============================================ */

/**
 * Breadcrumbs use medium weight for readability
 */
.breadcrumb-item {
    font-weight: 400;
}

.breadcrumb-item.active {
    font-weight: 500;
    color: #6C757D;
}


/* ============================================
   MODALS
   ============================================ */

/**
 * Modal headers use heading font and weight
 */
.modal-header {
    border-bottom-color: #DEE2E6;
}

.modal-title {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

.modal-footer {
    border-top-color: #DEE2E6;
}


/* ============================================
   TEXT UTILITIES - IMPROVED CONTRAST
   ============================================ */

/**
 * Muted text uses Bootstrap's neutral gray
 * Maintains readability while being visually subordinate
 */
.text-muted {
    color: #495057 !important;
}

/**
 * Warning text - improved contrast for readability on white backgrounds
 * Uses darker amber tone that meets WCAG AA standards
 */
.text-warning {
    color: #996900 !important;
}

/**
 * Small text maintains adequate weight
 */
.small,
small {
    font-weight: 400;
}


/* ============================================
   SEMANTIC EMPHASIS
   ============================================ */

/**
 * Font-weight utilities for emphasis without color
 * Provides hierarchy through typography alone
 */
.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}


/* ============================================
   TRIX EDITOR CONTENT
   ============================================ */

/**
 * Rendered Trix content maintains body font
 * Headings within content use appropriate hierarchy
 */
.trix-content {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.trix-content h1,
.trix-content h2,
.trix-content h3,
.trix-content h4,
.trix-content h5,
.trix-content h6 {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/* --- Trix toolbar (Bold, Italic, etc.) --- */
trix-toolbar .trix-button-group {
    border-color: #d1d5db;
    background-color: #f8f9fa;
}

trix-toolbar .trix-button {
    color: #4b5563;
    border-bottom-color: #e5e7eb;
}

trix-toolbar .trix-button:not(:first-child) {
    border-left-color: #e5e7eb;
}

trix-toolbar .trix-button--icon::before {
    opacity: 0.55;
}

trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 0.9;
}

trix-toolbar .trix-button.trix-active {
    background-color: #e0e7ff;
    color: #3730a3;
}

trix-toolbar .trix-button:disabled,
trix-toolbar .trix-button:disabled::before {
    color: #9ca3af;
    opacity: 0.5;
}

/* Trix toolbar - dark mode */
body.theme-dark trix-toolbar {
    background-color: #2a3342;
    border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark trix-toolbar .trix-button-group {
    background-color: #232a36;
    border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark trix-toolbar .trix-button {
    color: #b8bcc6;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.theme-dark trix-toolbar .trix-button:not(:first-child) {
    border-left-color: rgba(255, 255, 255, 0.06);
}

/* Invert black SVG icons to light grey so they’re readable on dark */
body.theme-dark trix-toolbar .trix-button--icon::before {
    filter: invert(1) brightness(0.88);
    opacity: 0.95;
}

body.theme-dark trix-toolbar .trix-button--icon.trix-active::before {
    filter: invert(1) brightness(1);
    opacity: 1;
}

body.theme-dark trix-toolbar .trix-button.trix-active {
    background-color: rgba(123, 163, 255, 0.2);
    color: #e2e6eb;
}

body.theme-dark trix-toolbar .trix-button:disabled::before {
    filter: invert(1) brightness(0.5);
    opacity: 0.4;
}

body.theme-dark trix-editor {
    background-color: #2a3342;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e6eb;
}

body.theme-dark trix-toolbar .trix-dialog {
    background-color: #232a36;
    border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark trix-toolbar .trix-input--dialog {
    background-color: #2a3342;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e6eb;
}

.hl-logo {
  display: inline-block;
  padding: 8px 10px;
  background: linear-gradient(
    to right,
    #0B5ED7,
    #0A58CA,
    #084298
  );
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

/* ============================================
   TIMELINE DUE-DATE HEAT MARKERS
   ============================================ */

/**
 * Visual density indicators for timeline weeks with due dates
 * Uses subtle blue tints to show work concentration without overwhelming phase bars
 * Heat levels represent density (count), not urgency
 */

/* Timeline table structure - calm, subtle borders */
.timeline-table {
    border-collapse: separate;
    border-spacing: 0;
}

.timeline-table thead th {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0.75rem 0.5rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f8f9fa 100%);
}

.timeline-table tbody td {
    border-left: 1px solid rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    padding: 0.75rem 0.5rem;
}

.timeline-table tbody td:first-child {
    border-left: none;
}

.timeline-header {
    font-weight: 500;
    font-size: 0.875rem;
}

.timeline-row {
    transition: background-color 0.2s ease;
}

.timeline-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.timeline-phase-label {
    font-weight: 500;
}

.timeline-overdue {
    background-color: rgba(220, 53, 69, 0.03);
}
/* Epic bars - soft, muted colors */
.timeline-bar-active {
    background-color: rgba(100, 130, 180, 0.18) !important;
}

.timeline-bar-completed {
    background-color: rgba(108, 117, 125, 0.12) !important;
}

.timeline-bar-overdue {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

.timeline-cell {
    position: relative;
}

/* Low density: 1 due date - subtle background hint */
.timeline-heat-low {
    background-color: rgba(100, 130, 180, 0.04) !important;
}

/* Medium density: 2-3 due dates - light emphasis */
.timeline-heat-medium {
    background-color: rgba(100, 130, 180, 0.08) !important;
}

/* High density: 4+ due dates - noticeable but not dominant */
.timeline-heat-high {
    background-color: rgba(100, 130, 180, 0.14) !important;
}

/* ============================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ============================================ */

/**
 * Project navigation tabs - horizontal scrolling on mobile
 */
.project-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    border-color: #0B5ED7;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.bg-primary-subtle {
    background-color: rgba(11, 94, 215, 0.3) !important;
}

.project-card .card-title a {
    color: inherit;
    transition: color 0.2s ease;
}

.project-card:hover .card-title a {
    color: #0B5ED7;
}

/**
 * Project navigation tabs - horizontal scrolling on mobile
 */
.project-nav-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.project-nav-wrapper::-webkit-scrollbar {
    height: 4px;
}

.project-nav-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.project-nav-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

.project-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.project-nav-wrapper .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
}

.project-nav-wrapper .nav-item {
    flex-shrink: 0;
}

/**
 * Board header - responsive layout for title and actions
 */
.board-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.board-header-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.board-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* On tablets and up, arrange header horizontally */
@media (min-width: 768px) {
    .board-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .board-header-title {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .board-header-actions {
        flex-shrink: 0;
    }
}

/* Ensure buttons don't get too small on mobile */
@media (max-width: 767px) {
    .board-header-actions .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .board-header-actions .dropdown-menu {
        font-size: 0.875rem;
    }
}

/* ============================================
   TASK CARD INTERACTIVE STATUS BADGE
   ============================================ */

/**
 * Style the status dropdown to look like a badge
 * Makes it clear that the status is clickable/interactive
 */
.task-card select[name="status"] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 8px 8px;
    padding: 0.25rem 1.25rem 0.25rem 0.5rem;
    text-transform: uppercase;
    transition: opacity 0.15s ease-in-out;
}

.task-card select[name="status"]:hover {
    opacity: 0.85;
}

.task-card select[name="status"]:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Style dropdown options to match their respective badge colors */
.task-card select[name="status"] option {
    background-color: white;
    color: #212529;
    padding: 0.5rem;
}

/* ============================================