/* ================================================================
   Doddington Carnival - Todo Board Styles (global, not scoped)
   ================================================================ */

/* ── Swimlane layout ──────────────────────────────────────────── */

.swimlane {
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.swimlane-header {
    display: flex;
    align-items: center;
    background: #E3AF1A;
    color: #fff;
    padding: 0.6rem 0.85rem;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.swimlane-title {
    font-weight: 700;
    font-size: 0.95rem;
    word-break: break-word;
}

.swimlane-desc {
    font-size: 0.8rem;
    color: #ddd;
    background: rgba(111,66,193,0.15);
    padding: 0.3rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Three-column grid inside each swimlane */
.swimlane-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    min-height: 60px;
}

.swimlane-col {
    padding: 0.6rem;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.swimlane-col:last-child {
    border-right: none;
}

/* Column header row (sits above all swimlanes, desktop only) */
.swimlane-col-headers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
    .swimlane-columns {
        display: block;
    }
    .swimlane-col {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
}

/* ── Kanban column headers ────────────────────────────────────── */

.kanban-col-header {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
}

.kanban-not-started { background: #6c757d; }
.kanban-in-progress { background: #fd7e14; }
.kanban-done        { background: #198754; }

/* ── Story card ───────────────────────────────────────────────── */

.story-card {
    background: #fff;
    border-radius: 7px;
    border-left: 3px solid #0d6efd;
    padding: 0.5rem 0.6rem;
    color: #212529;
}

.story-card-done {
    opacity: 0.75;
    border-left-color: #198754;
}

.story-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.story-title {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Task card ────────────────────────────────────────────────── */

.tasks-container {
    border-left: 2px solid #dee2e6;
    padding-left: 0.5rem;
    margin-top: 0.35rem;
}

.task-card {
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #198754;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.35rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.task-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.task-title {
    font-size: 0.83rem;
    word-break: break-word;
}

/* ── Sub-task card ────────────────────────────────────────────── */

.subtask-card {
    background: #fff8f0;
    border-radius: 5px;
    border-left: 3px solid #fd7e14;
    padding: 0.3rem 0.4rem;
    margin: 0.2rem 0 0 0.5rem;
}

/* ── Shared utilities ─────────────────────────────────────────── */

.card-actions {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
    align-items: center;
}

.btn-xs {
    padding: 0.15rem 0.35rem;
    font-size: 0.72rem;
    line-height: 1.3;
}

.expand-toggle {
    font-size: 0.75rem;
    color: #6c757d !important;
    text-decoration: none !important;
    padding: 0.2rem 0;
    margin-top: 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.meta-chip {
    background: #e9ecef;
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    color: #495057;
    white-space: nowrap;
}

.meta-chip.overdue {
    background: #f8d7da;
    color: #842029;
}

.perennial-badge {
    color: #d4b8ff;
    font-size: 0.8rem;
}

/* ── Ticket type badges ───────────────────────────────────────── */

.todo-type-badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.todo-type-epic    { background: #E3AF1A; }
.todo-type-story   { background: #0d6efd; }
.todo-type-task    { background: #198754; }
.todo-type-subtask { background: #fd7e14; }

/* ── Year badge ───────────────────────────────────────────────── */

.year-badge {
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 0.15em 0.7em;
    font-size: 0.75rem;
    font-weight: 400;
    vertical-align: middle;
}

/* ── Templates button ─────────────────────────────────────────── */

.btn-outline-purple {
    color: #E3AF1A;
    border-color: #E3AF1A;
}
.btn-outline-purple:hover {
    background: #E3AF1A;
    color: #fff;
}

/* ── Delete confirm inline ────────────────────────────────────── */

.delete-confirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #842029;
    background: #f8d7da;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    margin-top: 0.35rem;
}

/* ── Todo modal ───────────────────────────────────────────────── */

.todo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.todo-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 560px;
    margin: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.todo-modal-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.todo-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

.todo-modal-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ── Templates page ───────────────────────────────────────────── */

.template-card {
    background: #f8f0ff;
    border-left: 4px solid #E3AF1A;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.template-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.template-stories {
    border-left: 2px solid #dee2e6;
    padding-left: 0.75rem;
}

.template-story {
    font-size: 0.83rem;
    padding: 0.2rem 0;
}


/* ── Kanban board layout ──────────────────────────────────────── */

.kanban-board {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.kanban-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .kanban-board {
        display: block;
    }
    .kanban-col {
        width: 100%;
    }
}

.kanban-col-header {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
    color: #fff;
}

.kanban-not-started { background: #6c757d; }
.kanban-in-progress { background: #fd7e14; }
.kanban-done        { background: #198754; }

.kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Epic card ────────────────────────────────────────────────── */

.epic-card {
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid #E3AF1A;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.epic-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.epic-title {
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-word;
}

.epic-desc {
    font-size: 0.8rem;
    color: #555;
    margin: 0.35rem 0 0.1rem;
}

/* ── Story card ───────────────────────────────────────────────── */

.stories-container {
    border-left: 2px solid #dee2e6;
    padding-left: 0.6rem;
    margin-top: 0.5rem;
}

.story-card {
    background: #f8f9fa;
    border-radius: 7px;
    border-left: 3px solid #0d6efd;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    color: #212529;
}

.story-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.story-title {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Task card ────────────────────────────────────────────────── */

.task-card {
    background: #fff;
    border-radius: 6px;
    border-left: 3px solid #198754;
    padding: 0.4rem 0.5rem;
    margin: 0.35rem 0 0 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.task-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.task-title {
    font-size: 0.83rem;
    word-break: break-word;
}

/* ── Sub-task card ────────────────────────────────────────────── */

.subtask-card {
    background: #fff8f0;
    border-radius: 5px;
    border-left: 3px solid #fd7e14;
    padding: 0.3rem 0.4rem;
    margin: 0.25rem 0 0 0.75rem;
}

/* ── Shared utilities ─────────────────────────────────────────── */

.card-actions {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
    align-items: center;
}

.btn-xs {
    padding: 0.15rem 0.35rem;
    font-size: 0.72rem;
    line-height: 1.3;
}

.expand-toggle {
    font-size: 0.75rem;
    color: #6c757d !important;
    text-decoration: none !important;
    padding: 0.2rem 0;
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.meta-chip {
    background: #e9ecef;
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    color: #495057;
    white-space: nowrap;
}

.meta-chip.overdue {
    background: #f8d7da;
    color: #842029;
}

.perennial-badge {
    color: #E3AF1A;
    font-size: 0.8rem;
}

/* ── Ticket type badges ───────────────────────────────────────── */

.todo-type-badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.todo-type-epic    { background: #E3AF1A; }
.todo-type-story   { background: #0d6efd; }
.todo-type-task    { background: #198754; }
.todo-type-subtask { background: #fd7e14; }

/* ── Year badge ───────────────────────────────────────────────── */

.year-badge {
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 0.15em 0.7em;
    font-size: 0.75rem;
    font-weight: 400;
    vertical-align: middle;
}

/* ── Templates button ─────────────────────────────────────────── */

.btn-outline-purple {
    color: #E3AF1A;
    border-color: #E3AF1A;
}
.btn-outline-purple:hover {
    background: #E3AF1A;
    color: #fff;
}

/* ── Delete confirm inline ────────────────────────────────────── */

.delete-confirm {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #842029;
    background: #f8d7da;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    margin-top: 0.35rem;
}

/* ── Todo modal ───────────────────────────────────────────────── */

.todo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.todo-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 560px;
    margin: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.todo-modal-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.todo-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

.todo-modal-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ── Templates page ───────────────────────────────────────────── */

.template-card {
    background: #f8f0ff;
    border-left: 4px solid #E3AF1A;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.template-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.template-stories {
    border-left: 2px solid #dee2e6;
    padding-left: 0.75rem;
}

.template-story {
    font-size: 0.83rem;
    padding: 0.2rem 0;
}

/* -- Story notes ------------------------------------------------- */

.story-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
}

.story-note {
    background: #f8f9fa;
    border-left: 3px solid #E3AF1A;
    border-radius: 5px;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
}

.story-note-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
}

.story-note-text {
    color: #212529;
    white-space: pre-wrap;
    word-break: break-word;
}


/* -- Story detail page ------------------------------------------ */

.story-detail-card {
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: #212529;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.story-detail-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.story-detail-title {
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.story-detail-title:hover {
    text-decoration: underline dotted;
}

.story-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.editable-value {
    cursor: pointer;
    font-size: 0.875rem;
}

.editable-value:hover {
    text-decoration: underline dotted;
}

.editable-block {
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.editable-block:hover {
    background: #f0f0f0;
}

.section-label {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.story-detail-section {
    margin-top: 0.5rem;
}

.task-detail-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}

.subtask-row {
    padding-left: 1.5rem;
    font-size: 0.82rem;
    border-bottom-style: dashed;
}

.status-select {
    font-size: 0.8rem;
}


/* -- Person filter avatars --------------------------------------- */

.avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #103993;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    background: transparent;
    color: #103993;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.avatar-btn.active {
    background: #103993;
    color: #fff;
}

.avatar-btn:hover {
    opacity: 0.8;
}


/* -- Attachments ------------------------------------------------- */

.attachments-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attachment-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 90px;
}

.attachment-thumb-link {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.attachment-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-chip {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #212529;
    text-decoration: none;
    overflow: hidden;
    height: 90px;
    word-break: break-word;
}

.attachment-chip:hover {
    background: #f8f9fa;
}

.attachment-filename {
    font-size: 0.7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.attachment-meta {
    display: flex;
    align-items: center;
    font-size: 0.65rem;
    color: #6c757d;
    gap: 0.2rem;
}


/* -- Jira import page ------------------------------------------- */

.import-stat {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.import-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: #212529;
    line-height: 1;
}

.import-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
}

.import-log {
    background: #212529;
    color: #adb5bd;
    font-family: monospace;
    font-size: 0.75rem;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.6;
}