/* ─── Brand / Root ────────────────────────────────────────────────────────────
   Custom properties are defined here so every component can reference them.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --tdl-purple:      #7c3aed;
    --tdl-purple-dark: #6d28d9;
    --tdl-purple-deep: #4c1d95;
    --tdl-purple-navy: #1e1047;
    --tdl-purple-soft: #ede9fe;
    --tdl-bg:          #f5f3ff;
}

/* ─── Global ──────────────────────────────────────────────────────────────── */
body { background-color: var(--tdl-bg); }

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
    color: var(--tdl-purple);
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
    color: var(--tdl-purple-dark);
}

/* ─── Bootstrap component overrides ──────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                 var(--tdl-purple);
    --bs-btn-border-color:       var(--tdl-purple);
    --bs-btn-hover-bg:           var(--tdl-purple-dark);
    --bs-btn-hover-border-color: var(--tdl-purple-dark);
    --bs-btn-active-bg:          #5b21b6;
    --bs-btn-active-border-color:#5b21b6;
    --bs-btn-focus-shadow-rgb:   124, 58, 237;
}
.btn-outline-primary {
    --bs-btn-color:              var(--tdl-purple);
    --bs-btn-border-color:       var(--tdl-purple);
    --bs-btn-hover-bg:           var(--tdl-purple);
    --bs-btn-hover-border-color: var(--tdl-purple);
    --bs-btn-active-bg:          var(--tdl-purple);
}
.text-primary   { color: var(--tdl-purple) !important; }
.bg-primary     { background-color: var(--tdl-purple) !important; }
.border-primary { border-color: var(--tdl-purple) !important; }

.form-control:focus,
.form-select:focus {
    border-color: var(--tdl-purple);
    box-shadow: 0 0 0 .25rem rgba(124,58,237,.2);
}
.nav-tabs .nav-link.active {
    color: var(--tdl-purple);
    border-bottom-color: var(--tdl-purple);
}
.badge.bg-primary { background-color: var(--tdl-purple) !important; }

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.navbar-todolisto {
    background: linear-gradient(135deg, var(--tdl-purple-navy) 0%, var(--tdl-purple-deep) 100%);
    box-shadow: 0 2px 12px rgba(30,16,71,.35);
}
.navbar-brand {
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 1.15rem;
}
.navbar-brand .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,.18);
    border-radius: 8px;
    margin-right: .45rem;
    font-size: .85rem;
}
#project-switcher {
    background-color: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    min-width: 160px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
#project-switcher option { background: #2d1b69; color: #fff; }
#project-switcher:focus  { box-shadow: 0 0 0 .2rem rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }

/* ─── Kanban board ────────────────────────────────────────────────────────── */
.kanban-col     { min-height: 400px; background: rgba(124,58,237,0.05); border: 1px solid rgba(124,58,237,0.1); border-radius: 12px; }
.kanban-board   { overflow-x: auto; }
.kanban-inner   { min-width: 900px; }
.kanban-col-wrapper { min-width: 220px; max-width: 260px; }
.kanban-col-header  { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6c757d; }
.kanban-col-title   { display: flex; align-items: center; gap: 5px; }
.kanban-col-count   { font-size: 0.65rem; font-weight: 800; padding: 0.15em 0.5em; border-radius: 99px; background: rgba(124,58,237,0.12); color: var(--tdl-purple); }
.col-status-dot     { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.add-ticket-btn     { border: 2px dashed #ced4da; background: transparent; color: #6c757d; }
.add-ticket-btn:hover { border-color: var(--tdl-purple); color: var(--tdl-purple); }

/* ─── Ticket card ─────────────────────────────────────────────────────────── */
.ticket-card        { cursor: grab; transition: box-shadow .15s; position: relative; border: 1px solid #ede9fe !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; }
.ticket-card:active { cursor: grabbing; }
.ticket-card:hover  { box-shadow: 0 4px 14px rgba(124,58,237,.18) !important; }
.ticket-card[data-type="feature"] { --card-accent: var(--tdl-purple); }
.ticket-card[data-type="bug"]     { --card-accent: #ef4444; }
.ticket-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    border-radius: 8px 0 0 8px;
    background: var(--card-accent, var(--tdl-purple));
}
.ticket-card .card-body { padding-left: 0.75rem; }

.ticket-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}
.ticket-ref { font-size: .68rem; }

/* ─── Tags ────────────────────────────────────────────────────────────────── */
.tag-pill {
    font-size: .6rem;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    display: inline-block;
}

/* ─── Tag filter bar (board page) ────────────────────────────────────────── */
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.tag-filter-pill {
    font-size: .72rem;
    font-weight: 500;
    padding: .22rem .7rem;
    border-radius: 999px;
    color: #fff;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s, box-shadow .15s, border-color .15s;
    line-height: 1.4;
}

.tag-filter-pill:hover {
    opacity: .75;
}

.tag-filter-pill.active {
    opacity: 1;
    border-color: rgba(255,255,255,.55);
    box-shadow: 0 0 0 3px rgba(0,0,0,.18);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer-version:hover { color: var(--tdl-purple) !important; }

/* ─── List view ──────────────────────────────────────────────────────────── */
#list-view {
    overflow-x: auto;
}

.ticket-list-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 700px;
}

.ticket-list-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    font-weight: 600;
    padding: .5rem .75rem;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.ticket-row {
    cursor: pointer;
    transition: background .1s;
}

.ticket-row:hover td {
    background: #f8f5ff;
}

.ticket-row td {
    padding: .45rem .75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

/* ─── Priority pill (ticket card) ────────────────────────────────────────── */
.priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    color: #fff;
    font-size: .55rem;
    line-height: 1;
}
.mt-px { margin-top: 1px; }

/* ─── Deadline badge (ticket card) ───────────────────────────────────────── */
.ticket-deadline {
    font-size: .6rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.ticket-deadline.deadline-overdue {
    color: #ef4444;
    font-weight: 600;
}

/* ─── Sortable ────────────────────────────────────────────────────────────── */
.sortable-ghost { opacity: .4; }

/* ─── Column visibility sidebar ──────────────────────────────────────────── */
.col-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(0,0,0,.06);
    border-radius: 10px;
    position: sticky;
    top: 76px;
    width: 42px;
    overflow: visible;
    flex-shrink: 0;
    align-self: flex-start;
    z-index: 10;
}
.col-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: opacity .2s;
    flex-shrink: 0;
}
.col-toggle-btn .btn-label {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: inherit;
    border-radius: 0 8px 8px 0;
    padding: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    transition: max-width .25s ease, padding .25s ease;
}
.col-toggle-btn:hover .btn-label {
    max-width: 150px;
    padding: 0 10px;
}
.col-toggle-btn.inactive       { opacity: .3; }
.col-toggle-btn.inactive:hover { opacity: .6; }

/* ─── Markdown rendered output ───────────────────────────────────────────── */
.markdown-body                   { line-height: 1.5; }
.markdown-body > *:last-child    { margin-bottom: 0; }
.markdown-body p                 { margin-bottom: .35rem; }
.markdown-body ul,
.markdown-body ol                { margin-bottom: .35rem; padding-left: 1.25rem; }
.markdown-body code              { background: #f0f0f0; padding: .1em .3em; border-radius: 3px; font-size: .85em; }
.markdown-body pre               { background: #f0f0f0; padding: .5rem; border-radius: 4px; overflow-x: auto; margin-bottom: .35rem; }
.markdown-body pre code          { background: none; padding: 0; }
.markdown-body blockquote        { border-left: 3px solid #ced4da; padding-left: .75rem; color: #6c757d; margin: .25rem 0; }

/* ─── EasyMDE ─────────────────────────────────────────────────────────────── */
.EasyMDEContainer .editor-toolbar { border-radius: 4px 4px 0 0; }
.EasyMDEContainer .CodeMirror     { border-radius: 0 0 4px 4px; }

/* ─── Avatar ──────────────────────────────────────────────────────────────── */
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
}
img.avatar     { object-fit: cover; border-radius: 50%; }
.avatar-sm     { width: 22px; height: 22px; font-size: 10px; }
.avatar-md     { width: 24px; height: 24px; font-size: 10px; }
.avatar-nav    { width: 26px; height: 26px; font-size: 10px; }

/* Avatar row — flex container with a small gap between avatars */
.avatar-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* "+N" overflow bubble used on dashboard project cards */
.avatar-overflow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
}

/* ─── Dashboard ───────────────────────────────────────────────────────────── */
.card-accent-primary { border-top: 3px solid var(--tdl-purple); }
.prefix-badge        { background: var(--tdl-purple-soft); color: var(--tdl-purple-dark); font-size: .7rem; }
.chart-wrap          { position: relative; height: 190px; margin: .5rem 0 .75rem; }
.project-search-group { width: 220px; }
.board-search-group   { width: 200px; }

/* ─── Settings ────────────────────────────────────────────────────────────── */
.prefix-input    { max-width: 120px; text-transform: uppercase; }
.tag-name-input  { width: 140px; }
.tag-color-input { width: 50px; }

/* ─── Modal improvements ──────────────────────────────────────────────────── */
/* Styled header matching the navbar gradient */
#ticketModal .modal-header,
#addTicketModal .modal-header,
#newProjectModal .modal-header {
    background: linear-gradient(135deg, var(--tdl-purple-navy) 0%, var(--tdl-purple-deep) 100%);
    padding: .55rem 1rem;
    border-bottom: none;
}
#addTicketModal .modal-header .modal-title,
#newProjectModal .modal-header .modal-title { color: #fff; }
#ticketModal .modal-header #modal-ticket-ref {
    background: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.8);
}
#ticketModal .modal-header #modal-ticket-title {
    color: #fff;
    background: transparent;
}
#ticketModal .modal-header #modal-ticket-title::placeholder { color: rgba(255,255,255,.4); }

/* Extra breathing room between sections in add/edit ticket modals */
#addTicketModal .modal-body .mb-3,
#addTicketModal .modal-body .row.mb-3,
#ticketModal .modal-body .mb-3 {
    margin-bottom: 1.35rem !important;
}

.modal-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9ca3af;
    margin-bottom: .4rem;
}

/* Prominent title input for add-ticket modal */
.add-title-input {
    font-size: 1rem;
    font-weight: 600;
    background: #f8f7ff;
    border-color: transparent;
    border-radius: 8px;
    padding: .65rem .85rem;
}
.add-title-input:focus {
    background: #fff;
    border-color: var(--tdl-purple);
    box-shadow: 0 0 0 .25rem rgba(124,58,237,.15);
}

/* Tag toggle chips in add/edit modals (hide native checkbox, style label as pill) */
#add-tags-list .form-check,
#modal-tags-list .form-check {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 3px;
}
#add-tags-list .form-check-input,
#modal-tags-list .form-check-input {
    display: none;
}
#add-tags-list .form-check-label .tag-pill,
#modal-tags-list .form-check-label .tag-pill {
    opacity: .4;
    cursor: pointer;
    transition: opacity .15s, box-shadow .15s;
}
#add-tags-list .form-check-input:checked + .form-check-label .tag-pill,
#modal-tags-list .form-check-input:checked + .form-check-label .tag-pill {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.22);
}

/* Edit modal right-side properties panel */
.modal-sidebar {
    background: #faf9ff;
    border-left: 1px solid #ede9fe;
    border-radius: 0 0 8px 0;
    padding: 1.25rem 1rem 1rem;
}

#ticketModal .modal-footer,
#addTicketModal .modal-footer,
#newProjectModal .modal-footer {
    background: #faf9ff;
    border-top: 1px solid #ede9fe;
}

#ticketModal .modal-body,
#addTicketModal .modal-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ─── Notification bell ───────────────────────────────────────────────────── */
.notif-bell-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    line-height: 1;
}
.notif-bell-btn:hover .fa-bell,
.notif-bell-btn:focus .fa-bell { color: #fff !important; }
.notif-dropdown { border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.notif-header   { background: #f8f7ff; }
.notif-item     { list-style: none; }
.notif-link     { color: #1e1047 !important; border-bottom: 1px solid #f0eeff; transition: background .12s; }
.notif-link:hover { background: #f5f3ff; }

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.min-w-0        { min-width: 0; }
.fs-xs          { font-size: .75rem; }
.input-title    { font-size: 1.1rem; }
.progress-xs    { height: 5px; }
.progress-smooth { transition: width .3s; }

/* ─── Board JS inline helpers ─────────────────────────────────────────────── */

/* Attachment list items */
.att-icon { font-size: .9rem; flex-shrink: 0; width: 14px; text-align: center; }
.att-name { max-width: 200px; }
.att-size { font-size: .7rem; white-space: nowrap; }

/* Common micro action button (×) */
.btn-action-xs { font-size: .7rem; }

/* Timestamps and labels */
.activity-ts { font-size: .75rem; }
.reaction-ts { font-size: .7rem; }
.role-label  { font-size: .75rem; }
.icon-md     { font-size: 1rem; }
.icon-xs     { font-size: .75rem; }

/* Blocker / blocking badge sizes */
.badge-ref    { font-size: .65rem; flex-shrink: 0; }
.badge-status { font-size: .6rem;  flex-shrink: 0; opacity: .85; }

/* Strikethrough style for done tickets in blocker lists */
.done-item { text-decoration: line-through; opacity: .6; }