/* ═══════════════════════════════════════════════════════════════════════════
   THEME — Bootstrap 5 variable overrides (Zinc palette, Inter, Linear-inspired)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Font */
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: #18181b;
    --bs-body-bg: #fafafa;

    /* Zinc gray scale */
    --bs-secondary-color: #71717a;
    --bs-tertiary-color: #a1a1aa;
    --bs-border-color: #e4e4e7;
    --bs-border-color-translucent: rgba(0,0,0,.08);

    /* Primary → indigo */
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-hover-color: #4338ca;

    /* Radius */
    --bs-border-radius:    6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 10px;
    --bs-border-radius-pill: 999px;

    /* Shadows — very subtle */
    --bs-box-shadow:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --bs-box-shadow-sm:    0 1px 2px rgba(0,0,0,.05);
    --bs-box-shadow-lg:    0 4px 12px rgba(0,0,0,.08);

    /* Card */
    --bs-card-border-color: #e4e4e7;
    --bs-card-bg: #ffffff;
    --bs-card-box-shadow: none;
    --bs-card-cap-bg: #ffffff;

    /* Table */
    --bs-table-border-color: #f0f0f1;
    --bs-table-hover-bg: #f9f9fb;
    --bs-table-striped-bg: #fafafa;

    /* Input */
    --bs-input-bg: #ffffff;
    --bs-input-border-color: #d4d4d8;
    --bs-input-focus-border-color: #4f46e5;
    --bs-input-focus-box-shadow: 0 0 0 3px rgba(79,70,229,.12);

    /* Modal */
    --bs-modal-bg: #ffffff;
    --bs-modal-border-color: #e4e4e7;
    --bs-modal-content-bg: #ffffff;
    --bs-modal-box-shadow: 0 8px 32px rgba(0,0,0,.12);

    /* Dropdown */
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: #e4e4e7;
    --bs-dropdown-box-shadow: 0 4px 12px rgba(0,0,0,.08);
    --bs-dropdown-link-hover-bg: #f4f4f5;
    --bs-dropdown-link-active-bg: #ede9fe;
    --bs-dropdown-link-active-color: #4f46e5;

    /* Nav tabs */
    --bs-nav-tabs-border-color: #e4e4e7;
    --bs-nav-tabs-link-active-bg: #ffffff;
    --bs-nav-tabs-link-active-border-color: #e4e4e7 #e4e4e7 #ffffff;

    /* Badge */
    --bs-badge-font-size: .72em;
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 4px;

    /* List group */
    --bs-list-group-border-color: #e4e4e7;
    --bs-list-group-action-hover-bg: #f4f4f5;
}

/* ── Dark mode — anthracite/night palette ────────────────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:    #0d0f14;
    --bs-body-color: #ffffff;
    --bs-secondary-color: #e5e7eb;
    --bs-tertiary-color:  #d1d5db;
    --bs-border-color: #232838;
    --bs-border-color-translucent: rgba(255,255,255,.07);

    --bs-card-bg:           #161a24;
    --bs-card-border-color: #232838;
    --bs-card-cap-bg:       #11141c;

    --bs-input-bg:           #161a24;
    --bs-input-border-color: #2e3347;
    --bs-input-color:        #dde2ee;

    --bs-modal-bg:           #161a24;
    --bs-modal-border-color: #232838;
    --bs-modal-content-bg:   #161a24;

    --bs-dropdown-bg:              #1a1e2a;
    --bs-dropdown-border-color:    #232838;
    --bs-dropdown-link-hover-bg:   #232838;
    --bs-dropdown-link-active-bg:  #2e3a6e;
    --bs-dropdown-link-color:      #dde2ee;

    --bs-table-border-color:  #232838;
    --bs-table-hover-bg:      #1e2232;
    --bs-table-striped-bg:    rgba(255,255,255,.015);
    --bs-table-color:         #dde2ee;

    --bs-nav-tabs-border-color:              #232838;
    --bs-nav-tabs-link-active-bg:            #0d0f14;
    --bs-nav-tabs-link-active-border-color:  #232838 #232838 #0d0f14;

    --bs-list-group-border-color:     #232838;
    --bs-list-group-action-hover-bg:  #232838;
    --bs-list-group-bg:               #161a24;
    --bs-list-group-color:            #dde2ee;
}

[data-bs-theme="dark"] body { background-color: #0d0f14; }

[data-bs-theme="dark"] .card-header { background: #11141c; border-bottom-color: #232838; }
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: #232838; }
[data-bs-theme="dark"] .modal-body { background-color: #161a24; color: #ffffff; }
[data-bs-theme="dark"] .modal-content { background-color: #161a24; }
[data-bs-theme="dark"] .table th { color: #e5e7eb; }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { background: #232838; color: #ffffff !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { border-color: #232838 #232838 #0d0f14; color: #ffffff !important; font-weight: 600; }
[data-bs-theme="dark"] .dropdown-item { color: #ffffff; }
[data-bs-theme="dark"] .dropdown-divider { border-color: #232838; }
[data-bs-theme="dark"] hr { border-color: #232838; }
[data-bs-theme="dark"] .text-muted { color: #d1d5db !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #161a24; border-color: #2e3347; color: #ffffff; }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
[data-bs-theme="dark"] .btn-secondary { --bs-btn-bg: #232838; --bs-btn-border-color: #2e3347; --bs-btn-color: #dde2ee; --bs-btn-hover-bg: #2e3347; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-border-color: #2e3347; --bs-btn-color: #e5e7eb; --bs-btn-hover-bg: #232838; --bs-btn-hover-color: #ffffff; }
[data-bs-theme="dark"] .md-body blockquote { border-color: #2e3347; color: #b4bcc8; }
[data-bs-theme="dark"] .md-body code { background: #1a1e2a; }
[data-bs-theme="dark"] .md-body pre { background: #1a1e2a; color: #dde2ee; }
[data-bs-theme="dark"] .md-body table th { background: #11141c; color: #edf0f8; }
[data-bs-theme="dark"] .md-body table td { border-color: #232838; }
[data-bs-theme="dark"] .md-body table th { border-color: #232838; }
[data-bs-theme="dark"] .md-body table tr:nth-child(even) td { background: #13161f; }
[data-bs-theme="dark"] .md-toolbar .btn-link { color: #e5e7eb; }
[data-bs-theme="dark"] .md-toolbar .btn-link:hover { color: #edf0f8; background: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .md-editor textarea { background: #161a24; color: #ffffff; border-color: #2e3347; caret-color: #ffffff; }
[data-bs-theme="dark"] .md-editor .md-toolbar { background: #11141c; border-color: #232838; }
[data-bs-theme="dark"] .md-editor { border-color: #2e3347; }
/* Dark mode link colors - improved visibility */
[data-bs-theme="dark"] { --bs-link-color: #93c5fd; --bs-link-hover-color: #bfdbfe; }
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) { color: #93c5fd; }
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #bfdbfe; }
/* Dark mode btn-link contrast */
[data-bs-theme="dark"] .btn-link { color: #93c5fd; }
[data-bs-theme="dark"] .btn-link:hover { color: #bfdbfe; }
[data-bs-theme="dark"] .btn-link.text-muted { color: #e5e7eb !important; }
[data-bs-theme="dark"] .btn-link.text-muted:hover { color: #ffffff !important; }
/* Dark mode form labels */
[data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] label { color: #ffffff; }
/* Dark mode bg-light replacement */
[data-bs-theme="dark"] .bg-light { background-color: #11141c !important; }
[data-bs-theme="dark"] .bg-white { background-color: #161a24 !important; }
[data-bs-theme="dark"] .notif-action-btn:hover { background: #232838; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #161a24; --bs-table-color: #8892a4; }
[data-bs-theme="dark"] .filter-preloader,
[data-bs-theme="dark"] #filterPreloader { background: #0d0f14; }
[data-bs-theme="dark"] .saved-filter-chip { background: #1a1e2a !important; border-color: #2e3347 !important; color: #dde2ee; }
[data-bs-theme="dark"] .table-sub-issue { background: #13161f !important; }
[data-bs-theme="dark"] .table-sub-issue td { color: #e5e7eb !important; }
[data-bs-theme="dark"] .issue-row:hover { background: #1e2232 !important; }

/* Ask row hover styling - improved contrast */
.ask-row:hover { background: #f4f5f7 !important; transition: background 0.1s !important; }
[data-bs-theme="dark"] .ask-row:hover { background: #2a3441 !important; }

/* Task row hover styling - improved contrast */
.task-row:hover { background: #f4f5f7 !important; transition: background 0.1s !important; }
[data-bs-theme="dark"] .task-row:hover { background: #2a3441 !important; }

/* Ask body background styling */
.ask-body-bg {
    background: #f8f9fa;
    border-color: #dee2e6;
}
[data-bs-theme="dark"] .ask-body-bg {
    background: #232838 !important;
    border-color: #2e3347 !important;
}
/* Dark mode toggle — inherits sidebar nav-link styles */
.sidebar #darkModeToggle { border: none; background: none; text-align: left; }

/* ── Base typography ─────────────────────────────────────────────────────── */
body { font-family: var(--bs-font-sans-serif); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: none !important;
}
.btn-primary {
    --bs-btn-bg: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
}
.btn-secondary {
    --bs-btn-bg: #f4f4f5;
    --bs-btn-border-color: #d4d4d8;
    --bs-btn-color: #18181b;
    --bs-btn-hover-bg: #e9e9eb;
    --bs-btn-hover-border-color: #c9c9cf;
    --bs-btn-hover-color: #18181b;
    --bs-btn-active-bg: #dfdfe3;
    --bs-btn-active-color: #18181b;
}
.btn-outline-secondary {
    --bs-btn-border-color: #d4d4d8;
    --bs-btn-color: #52525b;
    --bs-btn-hover-bg: #f4f4f5;
    --bs-btn-hover-border-color: #d4d4d8;
    --bs-btn-hover-color: #18181b;
    --bs-btn-active-bg: #e9e9eb;
}
.btn-outline-primary {
    --bs-btn-border-color: #c7d2fe;
    --bs-btn-color: #4f46e5;
    --bs-btn-hover-bg: #ede9fe;
    --bs-btn-hover-border-color: #a5b4fc;
    --bs-btn-hover-color: #4338ca;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    border-color: var(--bs-card-border-color, #e4e4e7);
    border-radius: 10px;
    box-shadow: none;
}
.card > .table-responsive { overflow: hidden; }
.card > .table-responsive:last-child,
.card > .table-responsive:only-child { border-radius: 0 0 10px 10px; }
.card-header {
    background: var(--bs-card-cap-bg, #ffffff);
    border-bottom-color: var(--bs-border-color, #f0f0f1);
    font-weight: 600;
    font-size: .8125rem;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    font-size: .875rem;
    border-color: #d4d4d8;
}
.form-control:focus, .form-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.form-label { font-size: .8125rem; font-weight: 500; color: #3f3f46; margin-bottom: .35rem; }
.form-text  { font-size: .75rem; color: #71717a; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { font-size: .8125rem; }
.table th { font-weight: 600; color: #52525b; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg, #f9f9fb); }

/* ── Nav tabs ────────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom-color: #e4e4e7; gap: .1rem; }
.nav-tabs .nav-link { font-size: .8125rem; font-weight: 500; color: #71717a; border-color: transparent; padding: .5rem .85rem; }
.nav-tabs .nav-link:hover { color: #18181b; border-color: transparent; background: #f4f4f5; border-radius: 6px 6px 0 0; }
.nav-tabs .nav-link.active { color: #18181b; font-weight: 600; border-color: #e4e4e7 #e4e4e7 #fff; }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown-menu { font-size: .8125rem; border-color: #e4e4e7; box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: .3rem; }
.dropdown-item { border-radius: 4px; padding: .35rem .65rem; color: #18181b; }
.dropdown-item:hover { background: #f4f4f5; }
.dropdown-item.active, .dropdown-item:active { background: #ede9fe; color: #4f46e5; }
.dropdown-divider { border-color: #f0f0f1; margin: .3rem 0; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content { border-color: #e4e4e7; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.modal-header  { border-bottom-color: #f0f0f1; padding: 1rem 1.25rem .75rem; }
.modal-footer  { border-top-color: #f0f0f1; padding: .75rem 1.25rem 1rem; }
.modal-title   { font-size: .9375rem; font-weight: 600; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { font-size: .7rem; font-weight: 500; letter-spacing: .02em; }

/* ── Priority border indicators (update to indigo primary) ──────────────── */
.priority-medium { border-left: 3px solid #ffc107; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.text-muted { color: #71717a !important; }
hr { border-color: #f0f0f1; opacity: 1; }
.list-group-item { font-size: .8125rem; }
.small, small { font-size: .8rem; }

/* ── Custom color utilities ──────────────────────────────────────────────── */
.bg-orange        { background-color: #fd7e14 !important; }
.text-bg-orange   { background-color: #fd7e14 !important; color: #fff !important; }
.badge.bg-warning { color: #212529 !important; }
.bg-purple        { background-color: #6f42c1 !important; }
.text-bg-purple   { background-color: #6f42c1 !important; color: #fff !important; }

/* Subtle variants for custom colors (status badges) */
.bg-orange-subtle { background-color: #ffe5cc !important; }
.text-orange      { color: #c45e00 !important; }
.bg-purple-subtle { background-color: #e8d5f5 !important; }
.text-purple      { color: #5a2d9e !important; }

/* ── Unified priority colors ─────────────────────────────────────────────── */
/* critical = danger (red), high = orange, medium = primary (blue), low = secondary (gray) */
/* Priority row/card left-border indicators */
.priority-critical { border-left: 3px solid #dc3545; }
.priority-high     { border-left: 3px solid #fd7e14; }
.priority-medium   { border-left: 3px solid #ffc107; }
.priority-low      { border-left: 3px solid #6c757d; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: .01em;
}

/* ── Notification action buttons ─────────────────────────────────────────── */
/* ── Comment reactions ───────────────────────────────────────────────────── */
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: none;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.6;
}
.reaction-btn:hover { background: var(--bs-tertiary-bg, #f4f4f5); border-color: var(--bs-border-color); }
.reaction-btn.reacted { background: #ede9fe; border-color: #c4b5fd; color: #6366f1; font-weight: 500; }
[data-bs-theme="dark"] .reaction-btn.reacted { background: #2e2a5a; border-color: #6366f1; color: #a5b4fc; }
.reaction-btn .reaction-count { min-width: 8px; }

.notif-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .1s;
    flex-shrink: 0;
}
.notif-action-btn:hover,
.notif-action-btn:focus,
.notif-action-btn:active,
.notif-action-btn:focus-visible { background: #f0f0f0; outline: none !important; box-shadow: none !important; border: none !important; }

/* ── Markdown Editor ─────────────────────────────────────────────────────── */
.md-editor textarea:focus { outline: none; box-shadow: none; }
.md-toolbar .btn-link { text-decoration: none; color: #6c757d; }
.md-toolbar .btn-link:hover { color: #212529; background: rgba(0,0,0,.06); border-radius: 4px; }
.md-toolbar .md-preview-toggle.active { color: #4f46e5; }

/* Task list checkboxes — rendered as plain divs, no bullets */
.task-list-item { display: flex; align-items: baseline; gap: .4em; margin-bottom: .2rem; }
.task-list-item input.task-cb { flex-shrink: 0; margin-top: .15em; cursor: pointer; }
.task-list-item:has(input.task-cb:checked),
.task-list-item.task-done { color: #9ca3af; text-decoration: line-through; }

/* @mention links */
a.mention-link { color: #4f46e5; font-weight: 500; text-decoration: none; }
a.mention-link:hover { text-decoration: underline; }

/* ── Markdown rendered body ──────────────────────────────────────────────── */
.md-body { line-height: 1.6; word-break: break-word; }

/* Scale headings down to sensible sizes relative to body text */
.md-body h1 { font-size: 1.3rem;  font-weight: 700; margin: 1rem 0 .4rem; }
.md-body h2 { font-size: 1.15rem; font-weight: 600; margin: .9rem 0 .35rem; }
.md-body h3 { font-size: 1.05rem; font-weight: 600; margin: .8rem 0 .3rem; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 1rem; font-weight: 600; margin: .7rem 0 .25rem; }

.md-body p  { margin: 0 0 .6rem; }
.md-body ul, .md-body ol { padding-left: 1.4em; margin: 0 0 .6rem; }
.md-body li { margin-bottom: .15rem; }
.md-body blockquote { border-left: 3px solid #dee2e6; padding: .25rem .75rem; margin: 0 0 .6rem; color: #6c757d; }

/* Tables */
.md-body table { border-collapse: collapse; width: 100%; margin: 0 0 .6rem; font-size: .875rem; }
.md-body table th, .md-body table td { border: 1px solid #dee2e6; padding: .35rem .6rem; text-align: left; }
.md-body table th { background: #f8f9fa; font-weight: 600; }
.md-body table tr:nth-child(even) td { background: #fafafa; }

/* Code */
.md-body code { background: #f1f3f5; border-radius: 3px; padding: .1em .35em; font-size: .85em; }
.md-body pre  { background: #f1f3f5; border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; margin: 0 0 .6rem; }
.md-body pre code { background: none; padding: 0; font-size: .82em; }

/* Images */
.md-body img { max-width: 100%; border-radius: 4px; }

/* First/last child spacing */
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child  { margin-bottom: 0; }