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

    /* Neutral surfaces */
    --t4y-surface:        #fff;
    --t4y-surface-alt:    #faf9ff;
    --t4y-surface-raised: #f8f7ff;
    --t4y-surface-hover:  #f8f5ff;
    --t4y-surface-muted:  #f1f5f9;
    --t4y-surface-code:   #f0f0f0;

    /* Text */
    --t4y-text:           #1a1a2e;
    --t4y-text-heading:   #1e1047;
    --t4y-text-secondary: #64748b;
    --t4y-text-muted:     #6c757d;
    --t4y-text-faint:     #9ca3af;
    --t4y-text-ghost:     #94a3b8;

    /* Borders */
    --t4y-border:         #e2e8f0;
    --t4y-border-light:   #ede9fe;
    --t4y-border-subtle:  #e9ecef;
    --t4y-border-dashed:  #ced4da;
    --t4y-border-row:     #f1f5f9;

    /* Misc */
    --t4y-avatar-overflow-bg: #e5e7eb;
    --t4y-avatar-overflow-fg: #6b7280;
    --t4y-kanban-col-bg:      rgba(124,58,237,0.05);
    --t4y-kanban-col-border:  rgba(124,58,237,0.1);
    --t4y-col-sidebar-bg:     rgba(0,0,0,.06);
    --t4y-chat-received-bg:   #f5f3ff;
    --t4y-chat-received-fg:   #1a1a2e;
    --t4y-chat-contact-border:#f5f3ff;
    --t4y-chat-input-bg:      #fff;
    --t4y-notif-link-border:  #f0eeff;
}

/* ─── Global ──────────────────────────────────────────────────────────────── */
body { background-color: var(--t4y-bg); display: flex; flex-direction: column; min-height: 100vh; }

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

/* ─── Bootstrap component overrides ──────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                 var(--t4y-purple);
    --bs-btn-border-color:       var(--t4y-purple);
    --bs-btn-hover-bg:           var(--t4y-purple-dark);
    --bs-btn-hover-border-color: var(--t4y-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(--t4y-purple);
    --bs-btn-border-color:       var(--t4y-purple);
    --bs-btn-hover-bg:           var(--t4y-purple);
    --bs-btn-hover-border-color: var(--t4y-purple);
    --bs-btn-active-bg:          var(--t4y-purple);
}
.btn-secondary {
    --bs-btn-bg:                 var(--t4y-purple-soft);
    --bs-btn-border-color:       #ddd6fe;
    --bs-btn-color:              var(--t4y-purple-deep);
    --bs-btn-hover-bg:           #ddd6fe;
    --bs-btn-hover-border-color: #c4b5fd;
    --bs-btn-hover-color:        var(--t4y-purple-deep);
    --bs-btn-active-bg:          #c4b5fd;
    --bs-btn-active-border-color:#a78bfa;
    --bs-btn-active-color:       var(--t4y-purple-deep);
    --bs-btn-focus-shadow-rgb:   124, 58, 237;
}
.btn-outline-secondary {
    --bs-btn-color:              #64748b;
    --bs-btn-border-color:       #cbd5e1;
    --bs-btn-hover-bg:           var(--t4y-purple-soft);
    --bs-btn-hover-border-color: var(--t4y-purple);
    --bs-btn-hover-color:        var(--t4y-purple-deep);
    --bs-btn-active-bg:          var(--t4y-purple-soft);
    --bs-btn-active-border-color:var(--t4y-purple);
    --bs-btn-active-color:       var(--t4y-purple-deep);
    --bs-btn-focus-shadow-rgb:   124, 58, 237;
}
.text-primary   { color: var(--t4y-purple) !important; }
.bg-primary     { background-color: var(--t4y-purple) !important; }
.border-primary { border-color: var(--t4y-purple) !important; }

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

/* ─── Card ──────────────────────────────────────── */
.card-header { background-color: var(--t4y-surface-raised); }


/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.navbar-t4y {
    background: linear-gradient(135deg, var(--t4y-purple-navy) 0%, var(--t4y-purple-deep) 100%);
    box-shadow: 0 2px 12px rgba(30,16,71,.35);
}
.navbar-brand {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 1.15rem;
}
.navbar-brand .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    margin-right: .45rem;
    overflow: hidden;
}

/* ─── Kanban board ────────────────────────────────────────────────────────── */
.kanban-col     { background: var(--t4y-kanban-col-bg); border: 1px solid var(--t4y-kanban-col-border); border-radius: 12px; height: 100%; }
.kanban-board   { overflow-x: auto; height: calc(100vh - var(--kanban-top-offset, 180px)); }
.kanban-inner   { min-width: 900px; height: 100%; }
.kanban-col-wrapper { min-width: 220px; max-width: 260px; height: 100%; }
.ticket-list    { overflow-y: auto; min-height: 0; }
.kanban-col-header  { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t4y-text-muted); }
.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(--t4y-purple); }
.col-status-dot     { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.add-ticket-btn     { border: 2px dashed rgba(124,58,237,0.2); background: transparent; color: var(--t4y-purple); opacity: .6; }
.add-ticket-btn:hover { border-color: var(--t4y-purple); color: var(--t4y-purple); opacity: 1; }

/* Collapsed column */
.kanban-col-wrapper.collapsed { min-width: 42px !important; max-width: 42px !important; flex: 0 0 42px !important; }
.kanban-col-wrapper.collapsed .kanban-col {
    min-height: 0; padding: 0.5rem 0 !important; align-items: center; cursor: pointer;
}
.kanban-col-wrapper.collapsed .kanban-col-header {
    flex-direction: column; align-items: center; gap: 10px; margin: 0 !important;
}
.kanban-col-wrapper.collapsed .kanban-col-header .kanban-col-title {
    writing-mode: vertical-rl; white-space: nowrap; gap: 6px;
}
.kanban-col-wrapper.collapsed .kanban-col-header .col-status-dot { rotate: none; }
.kanban-col-wrapper.collapsed .kanban-col-header > .d-flex {
    flex-direction: column; align-items: center; gap: 8px !important;
}
.kanban-col-wrapper.collapsed .kanban-col-header .kanban-col-count {
    width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1;
    writing-mode: horizontal-tb;
}
.kanban-col-wrapper.collapsed .kanban-col-header .col-collapse-btn i { rotate: 90deg; }
.kanban-col-wrapper.collapsed .kanban-col-header .col-minimize-btn,
.kanban-col-wrapper.collapsed .kanban-col-header .kanban-cleanup-btn { display: none !important; }
.kanban-col-wrapper.collapsed .ticket-list,
.kanban-col-wrapper.collapsed .velocity-badge,
.kanban-col-wrapper.collapsed .d-flex.gap-1.mt-2 { display: none !important; }

/* ─── Ticket card ─────────────────────────────────────────────────────────── */
.ticket-card        { cursor: grab; transition: box-shadow .15s; position: relative; border: 1px solid var(--t4y-border-light) !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; background-color: #f8f5fe !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(--t4y-purple); }
.ticket-card[data-type="bug"]     { --card-accent: #ef4444; background-color: color-mix(in srgb, #ef4444 5%, var(--t4y-surface)) !important; }
.ticket-card[data-type="release"] {
    --card-accent: var(--t4y-purple-deep);
    background: linear-gradient(135deg, #1e1047, #4c1d95) !important;
    border-color: #4c1d95 !important;
    color: #fff;
}
.ticket-card[data-type="release"] .ticket-title  { color: #fff; }
.ticket-card[data-type="release"] .ticket-ref-badge { background: rgba(255,255,255,.15); color: rgba(255,255,255,.5) !important; }
.ticket-card[data-type="release"] .ticket-deadline { color: rgba(255,255,255,.75); }
.ticket-card[data-type="release"]:hover { box-shadow: 0 4px 18px rgba(76,29,149,.5) !important; }
.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(--t4y-purple));
}
.ticket-card .card-body { padding-left: 0.75rem; display: flex; flex-direction: column; gap: 6px; }

/* Ticket card header row (priority + ref left, timer + caret right) */
.ticket-header-row { min-height: 20px; }
.ticket-collapse-btn { color: var(--t4y-purple); font-size: .7rem; line-height: 1; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; transition: transform .15s; }
.ticket-collapse-btn:hover { background: rgba(124,58,237,.08); }
.ticket-card[data-type="release"] .ticket-collapse-btn { color: rgba(255,255,255,.7); }
.ticket-card[data-type="release"] .ticket-collapse-btn:hover { background: rgba(255,255,255,.1); }
.ticket-collapsible { transition: max-height .2s ease, opacity .15s ease; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.ticket-collapsible.collapsed { max-height: 0 !important; opacity: 0; margin: 0 !important; padding: 0 !important; }

/* Checklist progress bar on ticket cards */
.ticket-checklist-bar { height: 10px; background: rgba(0,0,0,.08); border-radius: 5px; overflow: hidden; }
.ticket-checklist-bar-fill { height: 100%; background: #7c3aed; border-radius: 5px; transition: width .25s ease; }
.ticket-checklist-bar-fill.bar-complete { background: #22c55e; }
.ticket-card[data-type="release"] .ticket-checklist-bar { background: rgba(255,255,255,.15); }
.ticket-card[data-type="release"] .ticket-checklist-bar-fill { background: rgba(255,255,255,.7); }
.ticket-card[data-type="release"] .ticket-checklist-bar-fill.bar-complete { background: #86efac; }

/* Checklist items in add/edit ticket modals */
.pending-checklist-item,
.checklist-item { font-size: .85rem; }

/* ─── Minimized column cards ─────────────────────────────────────────────── */
.kanban-col-wrapper.minimized .ticket-card .card-body { padding: 4px 8px 4px 0.75rem !important; }
.kanban-col-wrapper.minimized .ticket-card .ticket-title { margin-bottom: 0; font-size: 0.72rem; }
.kanban-col-wrapper.minimized .ticket-card .ticket-header-row { margin-bottom: 0 !important; }
.kanban-col-wrapper.minimized .ticket-card .ticket-collapsible,
.kanban-col-wrapper.minimized .ticket-card .ticket-collapse-btn,
.kanban-col-wrapper.minimized .ticket-card .ticket-timer-running-badge,
.kanban-col-wrapper.minimized .ticket-card .ticket-project-badge { display: none !important; }
.kanban-col-wrapper.minimized .ticket-card .ticket-ref-badge { font-size: .55rem; }

.ticket-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #271062;
    margin-bottom: 0;
    line-height: 1.3;
}
/* Timer pulse animation */
@keyframes timer-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.15); }
}
.timer-pulse { animation: timer-pulse 1.2s ease-in-out infinite; display: inline-block; }

/* Time tracking cards */
.tt-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    background: #fff;
    border: 1px solid var(--t4y-border-light);
    border-radius: 10px;
    margin-bottom: .5rem;
}
.tt-card-running {
    border-color: rgba(124,58,237,.3);
    background: rgba(124,58,237,.03);
}
.tt-card-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    transition: transform .1s;
}
.tt-card-btn:hover { transform: scale(1.1); }
.tt-btn-stop   { background: #fee2e2; color: #dc2626; }
.tt-btn-start  { background: #dcfce7; color: #16a34a; }
.tt-btn-pause  { background: #fef3c7; color: #d97706; }
.tt-btn-resume { background: #dcfce7; color: #16a34a; }
.tt-card-paused {
    border-color: rgba(217,119,6,.3);
    background: rgba(217,119,6,.03);
}
.tt-btn-add   { background: #dcfce7; color: #16a34a; }
.tt-card-text { flex: 1; font-size: .82rem; font-weight: 600; color: var(--t4y-text); }
.tt-card-time {
    font-size: .82rem;
    font-weight: 700;
    color: var(--t4y-purple);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tt-card-manual:hover { border-color: rgba(124,58,237,.25); }
.tt-summary-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t4y-text-muted);
}
.tt-entry { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--t4y-border-light, rgba(0,0,0,.08)); }
.tt-entry:last-child { border-bottom: none; }
.tt-entry-name { font-size: .85rem; min-width: 60px; }
.tt-entry-date { font-size: .82rem; color: var(--t4y-text-muted); font-style: italic; flex: 1; }
.tt-entry-duration { font-size: .85rem; font-weight: 700; color: var(--t4y-purple); white-space: nowrap; }
.tt-entry .btn-link { font-size: .75rem; padding: 0; line-height: 1; }
.tt-entry .btn-action-xs { font-size: .65rem; line-height: 1; padding: 1px 4px !important; }

.ticket-ref-badge { font-size: .58rem; font-weight: 700; background: rgba(124,58,237,.12); color: #271062 !important; border-radius: 4px; padding: 1px 5px; line-height: 1.4; white-space: nowrap; flex-shrink: 0; }
.ticket-timer-running-badge { font-size: .58rem; font-weight: 700; line-height: 1.4; padding: 1px 5px; white-space: nowrap; border-radius: 4px; }
.ticket-timer-running-badge i { font-size: .58rem; }
.ticket-project-badge { font-size: .62rem; color: var(--t4y-text-muted); background: var(--t4y-surface-muted); border-radius: 3px; padding: 0 4px; display: inline-block; margin-bottom: 2px; font-weight: 500; }
.all-boards-readonly .ticket-card { cursor: pointer; }
.all-boards-readonly .ticket-card:active { cursor: pointer; }

/* List view - status cell matches kanban column header style */
.ticket-status-cell {
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t4y-text-muted);
}
.ticket-status-cell .col-status-dot { margin-right: 4px; vertical-align: middle; }

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

/* ─── Tag filter bar (board page) ────────────────────────────────────────── */
.tag-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    align-items: center;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: thin;
}
.tag-filter-bar::-webkit-scrollbar { height: 3px; }
.tag-filter-bar::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.2); border-radius: 99px; }

.tag-filter-pill {
    font-size: .6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff; /* fallback; overridden by inline style for contrast */
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s, box-shadow .15s, border-color .15s;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.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);
}

.status-filter-bar { flex-shrink: 0; }
.status-filter-pill {
    font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--t4y-border-light);
    background: var(--t4y-surface); color: var(--t4y-text-muted);
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    transition: opacity .15s, border-color .15s; white-space: nowrap;
}
.status-filter-pill:hover { border-color: var(--t4y-purple); }
.status-filter-pill.inactive { opacity: .35; }
.status-filter-pill.inactive:hover { opacity: .6; }

/* ─── Contact page ───────────────────────────────────────────────────────── */
.contact-hero-card {
    background: linear-gradient(135deg, #1e1047, #4c1d95);
}
.contact-hero-icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}
.contact-detail-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.contact-detail-row:last-child { margin-bottom: 0; }
.contact-detail-icon {
    width: 36px;
    height: 36px;
    background: var(--t4y-purple-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t4y-purple);
    flex-shrink: 0;
    font-size: .95rem;
}
.contact-detail-label {
    font-size: .72rem;
    color: var(--t4y-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: 2px;
}
.contact-detail-value {
    font-size: .9rem;
    color: var(--t4y-text-heading);
    line-height: 1.5;
    text-decoration: none;
}
a.contact-detail-value { color: var(--t4y-purple); }
a.contact-detail-value:hover { text-decoration: underline; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.landing-footer {
    background: var(--t4y-purple-navy);
    margin-top: auto;
}
.footer-top {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 3rem 2.5rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.footer-col-brand {
    flex: 1 1 280px;
    min-width: 220px;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 0 0 auto;
    min-width: 120px;
}
.footer-col-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 0.6rem;
    min-width: 280px;
}
.footer-col-features .footer-col-title {
    grid-column: 1 / -1;
}
.footer-col-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.25rem;
}
.footer-col a {
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.13s;
}
.footer-col a:hover { color: rgba(255,255,255,0.85); }
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
    color: #fff;
    text-decoration: none;
}
.footer-tagline {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.35);
    margin: 0.5rem 0 1rem;
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-compact .footer-bottom {
    border-top: none;
    padding: 1.25rem 2.5rem;
}
.footer-copy {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
}
.footer-copy a {
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.13s;
}
.footer-copy a:hover { color: rgba(255,255,255,0.7); }

/* Footer app buttons */
.footer-apps {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.footer-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.footer-app-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.footer-app-btn i {
    font-size: 0.9rem;
}

/* Footer social icons */
.footer-socials {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.4rem;
}
.footer-socials a {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.4);
    transition: color 0.15s;
}
.footer-socials a:hover {
    color: rgba(255,255,255,0.85);
}

/* App coming-soon modal */
.app-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.app-modal-overlay.show {
    display: flex;
}
.app-modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 2.5rem 2rem 2rem;
    max-width: 380px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: appModalIn 0.2s ease-out;
}
@keyframes appModalIn {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.app-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.app-modal-close:hover { color: #333; }
.app-modal-icon {
    font-size: 2.5rem;
    color: var(--t4y-purple);
    margin-bottom: 0.75rem;
}
.app-modal-box h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #1a1a2e;
}
.app-modal-box p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.app-modal-ok {
    display: inline-block;
    padding: 0.5rem 2rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: var(--t4y-purple);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.app-modal-ok:hover { background: var(--t4y-purple-dark); }

/* Dark theme overrides for modal */
[data-theme="dark"] .app-modal-box { background: #1e1e2e; }
[data-theme="dark"] .app-modal-box h3 { color: #e0e0e0; }
[data-theme="dark"] .app-modal-box p { color: #aaa; }
[data-theme="dark"] .app-modal-close { color: #666; }
[data-theme="dark"] .app-modal-close:hover { color: #ccc; }

/* ─── 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: var(--t4y-surface);
    z-index: 2;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t4y-text-ghost);
    font-weight: 600;
    padding: .5rem .75rem;
    border-bottom: 2px solid var(--t4y-border-subtle);
    white-space: nowrap;
}

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

.ticket-row:hover td {
    background: var(--t4y-surface-hover);
}

.ticket-row td {
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--t4y-border-row);
    vertical-align: middle;
}

/* ─── Priority pill (ticket card) ────────────────────────────────────────── */
.priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 1px 5px;
    color: #fff;
    font-size: .58rem;
    line-height: 1.4;
}
.priority-pill i { font-size: inherit; line-height: inherit; width: auto; height: auto; }

/* ─── Deadline badge (ticket card) ───────────────────────────────────────── */
.ticket-deadline {
    font-size: .6rem;
    color: #271062;
    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: var(--t4y-col-sidebar-bg);
    border-radius: 10px;
    position: sticky;
    top: 76px;
    width: 54px;
    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: var(--t4y-surface-code); padding: .1em .3em; border-radius: 3px; font-size: .85em; }
.markdown-body pre               { background: var(--t4y-surface-code); 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 var(--t4y-border-dashed); padding-left: .75rem; color: var(--t4y-text-muted); margin: .25rem 0; }
.markdown-body img               { max-width: 100%; height: auto; border-radius: 4px; margin: .35rem 0; }

/* ─── Tiptap WYSIWYG ─────────────────────────────────────────────────────── */
.tiptap-wrapper          { border: 1px solid var(--t4y-border); border-radius: 6px; overflow: hidden; }
.tiptap-toolbar          { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px; background: var(--t4y-surface-alt); border-bottom: 1px solid var(--t4y-border); }
.tiptap-toolbar-btn      { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--t4y-text-secondary); border-radius: 4px; cursor: pointer; font-size: .8rem; padding: 0; }
.tiptap-toolbar-btn:hover { background: var(--t4y-surface-hover); color: var(--t4y-text); }
.tiptap-toolbar-btn.is-active { background: rgba(124,58,237,.15); color: #7c3aed; }
.tiptap-toolbar-sep      { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--t4y-border); }
.tiptap-content          { padding: .5rem .75rem; background: var(--t4y-surface); line-height: 1.55; }
.tiptap-content .ProseMirror       { outline: none; min-height: inherit; }
.tiptap-content .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left; color: var(--t4y-text-ghost); pointer-events: none; height: 0;
}
.tiptap-content .ProseMirror p     { margin-bottom: .35rem; }
.tiptap-content .ProseMirror ul,
.tiptap-content .ProseMirror ol    { margin-bottom: .35rem; padding-left: 1.25rem; }
.tiptap-content .ProseMirror code  { background: var(--t4y-surface-code); padding: .1em .3em; border-radius: 3px; font-size: .85em; }
.tiptap-content .ProseMirror pre   { background: var(--t4y-surface-code); padding: .5rem; border-radius: 4px; overflow-x: auto; margin-bottom: .35rem; }
.tiptap-content .ProseMirror pre code { background: none; padding: 0; }
.tiptap-content .ProseMirror blockquote { border-left: 3px solid var(--t4y-border-dashed); padding-left: .75rem; color: var(--t4y-text-muted); margin: .25rem 0; }
.tiptap-content .ProseMirror h1    { font-size: 1.4em; font-weight: 700; margin: .5rem 0 .25rem; }
.tiptap-content .ProseMirror h2    { font-size: 1.2em; font-weight: 700; margin: .5rem 0 .25rem; }
.tiptap-content .ProseMirror h3    { font-size: 1.05em; font-weight: 600; margin: .4rem 0 .2rem; }
.tiptap-content .ProseMirror hr    { border: none; border-top: 1px solid var(--t4y-border); margin: .75rem 0; }
.tiptap-content .ProseMirror a     { color: #7c3aed; text-decoration: underline; }
.tiptap-content .ProseMirror img   { max-width: 100%; height: auto; border-radius: 4px; margin: .35rem 0; }
.tiptap-content .ProseMirror img.ProseMirror-selectednode { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* ─── 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: #374151;
}
img.avatar     { object-fit: cover; border-radius: 50%; color: initial; }
.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 - overlapping stack, leftmost on top */
.avatar-group {
    display: flex;
    align-items: center;
    flex-direction: row;
}
.avatar-group > * {
    margin-left: -6px;
    border: 2px solid var(--t4y-surface, #fff);
    border-radius: 50%;
    position: relative;
    transition: margin-left .15s ease, transform .15s ease;
}
.avatar-group > *:first-child { margin-left: 0; }
.avatar-group > *:nth-child(1) { z-index: 5; }
.avatar-group > *:nth-child(2) { z-index: 4; }
.avatar-group > *:nth-child(3) { z-index: 3; }
.avatar-group > *:nth-child(4) { z-index: 2; }
.avatar-group > *:nth-child(n+5) { z-index: 1; }
.avatar-group > *:hover { z-index: 10; transform: scale(1.15); margin-left: 0; }
.avatar-group > *:hover + * { margin-left: 0; }

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

/* ─── Dashboard ───────────────────────────────────────────────────────────── */
.card-accent-primary { border-top: 3px solid var(--t4y-purple); }
.prefix-badge        { background: var(--t4y-purple-soft); color: var(--t4y-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; }
.bg-purple { background: var(--t4y-purple); color: #fff; }
.widget-col .card-header { border-bottom: 1px solid var(--t4y-border-light, rgba(0,0,0,.08)); }
.widget-col .card { border-top: 3px solid var(--t4y-purple); }

/* ─── Activity Heatmap ───────────────────────────────────────────────────── */
.heatmap-wrap { overflow-x: auto; }
.heatmap-months { display: flex; gap: 1px; padding-left: 0; margin-bottom: 2px; }
.heatmap-month-label { width: 11px; font-size: .55rem; color: var(--t4y-text-muted, #6c757d); text-align: left; flex-shrink: 0; white-space: nowrap; overflow: visible; }
.heatmap-grid { display: flex; flex-direction: column; gap: 1px; }
.heatmap-row { display: flex; gap: 1px; align-items: center; }
.heatmap-day-label { width: 24px; font-size: .55rem; color: var(--t4y-text-muted, #6c757d); text-align: right; padding-right: 4px; flex-shrink: 0; }
.heatmap-months .heatmap-day-label { width: 24px; flex-shrink: 0; }
.heatmap-cell { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.heatmap-empty { background: transparent; }
.heatmap-l0 { background: var(--t4y-heatmap-0, #ebedf0); }
.heatmap-l1 { background: var(--t4y-heatmap-1, #c4b5fd); }
.heatmap-l2 { background: var(--t4y-heatmap-2, #a78bfa); }
.heatmap-l3 { background: var(--t4y-heatmap-3, #8b5cf6); }
.heatmap-l4 { background: var(--t4y-heatmap-4, #7c3aed); }
.heatmap-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.heatmap-legend { display: flex; align-items: center; gap: 2px; }
.heatmap-legend .heatmap-cell { cursor: default; }

/* ─── 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 */
.modal-header {
    background: linear-gradient(135deg, var(--t4y-purple-navy) 0%, var(--t4y-purple-deep) 100%);
    padding: .55rem 1rem;
    border-bottom: none;
}

.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,
#ticketModal .modal-header .ro-value {
    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: var(--t4y-text-faint);
    margin-bottom: .4rem;
}

/* AI inline panels */
.ai-inline-panel {
    padding: 10px;
    background: var(--t4y-surface-raised);
    border-radius: 8px;
    border: 1px solid rgba(124,58,237,.15);
}
.ai-inline-panel .ai-split-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    background: var(--t4y-surface);
    border-radius: 6px;
    margin-bottom: 4px;
}
.ai-inline-panel .ai-split-item label {
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.ai-inline-panel .ai-split-item .ai-split-desc {
    font-size: .72rem;
    color: var(--bs-secondary-color);
}
.ai-writer-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
}
.ai-writer-btn:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important; }
.ai-writer-btn:disabled { opacity: .5; }

/* Prominent title input for add-ticket modal */
.add-title-input {
    font-size: 1rem;
    font-weight: 600;
    background: var(--t4y-surface-raised);
    border-color: transparent;
    border-radius: 8px;
    padding: .65rem .85rem;
}
.add-title-input:focus {
    background: var(--t4y-surface);
    border-color: var(--t4y-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);
}

/* Scrollable reactions/comments in ticket modal */
.reactions-scroll {
    max-height: 400px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Edit modal right-side properties panel */
.modal-sidebar {
    background: var(--t4y-surface-alt);
    border-left: 1px solid var(--t4y-border-light);
    border-radius: 0 0 8px 0;
    padding: 1.25rem 1rem 1rem;
}

.modal-footer {
    background: var(--t4y-surface-alt);
    border-top: 1px solid var(--t4y-border-light);
}

.modal-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ─── Shared panel layout (profile, docs, etc.) ──────────────────────────── */
.profile-wrap,
.settings-wrap,
.docs-wrap {
    background: var(--t4y-surface);
    border: 1px solid var(--t4y-border);
    border-top: none;
    min-height: calc(100vh - 10rem);
    margin-bottom: -1.5rem;
}

/* ─── Profile page layout ─────────────────────────────────────────────────── */
.profile-wrap {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.profile-wrap .profile-col-sidebar {
    width: 196px;
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-right: 1px solid var(--t4y-border);
}
.profile-wrap .profile-col-content {
    flex: 1;
    min-width: 0;
    padding: 0 2rem 2rem 2rem;
}
@media (max-width: 767px) {
    .profile-wrap { flex-direction: column; }
    .profile-wrap .profile-col-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--t4y-border); padding: 0.5rem 0.25rem; }
    .profile-wrap .profile-col-content { padding: 1rem 1rem 2rem; }
}

/* ─── Profile sidebar ─────────────────────────────────────────────────────── */
.profile-sidebar {}
.profile-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--t4y-border);
    margin-bottom: 0.35rem;
}
.profile-sidebar-user .profile-sidebar-name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-sidebar-user .profile-sidebar-email {
    font-size: 0.75rem;
    color: var(--t4y-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-nav-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t4y-text-faint);
    padding: 0.6rem 0.5rem 0.2rem;
}
.profile-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.6rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: var(--t4y-text-secondary);
    text-decoration: none;
    transition: color .12s, background .12s;
    border-left: 2px solid transparent;
    margin-bottom: 0.05rem;
    white-space: nowrap;
}
.profile-nav-item:hover { color: var(--t4y-purple); background: rgba(124,58,237,.06); }
.profile-nav-item.active { color: var(--t4y-purple); background: rgba(124,58,237,.08); border-left-color: var(--t4y-purple); font-weight: 600; }
.profile-nav-item .fa-fw { width: 1.1em; flex-shrink: 0; }

/* ─── Page hero (settings / profile) ─────────────────────────────────────── */
.page-hero {
    background: linear-gradient(160deg, #1e1047 0%, #3b1f8c 55%, #1e1047 100%);
    margin: -0.5rem -0.75rem 0;
    padding: 2.25rem 0 1.875rem;
}
.page-hero-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-bottom: 0.4rem;
}
.page-hero h1 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 0.4rem;
}
.page-hero p {
    color: rgba(255,255,255,.55);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}
.page-hero .btn-back {
    font-size: 0.78rem;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    margin-bottom: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color .12s;
}
.page-hero .btn-back:hover { color: rgba(255,255,255,.85); }

/* ─── Settings page layout ────────────────────────────────────────────────── */
.settings-wrap {
    display: flex;
    align-items: stretch;
}
.settings-sidebar {
    width: 196px;
    flex-shrink: 0;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 0.5rem 0;
}
.settings-nav-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t4y-text-faint);
    padding: 0.75rem 0.6rem 0.2rem;
}
.settings-nav-label:first-child { padding-top: 0.5rem; }
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--t4y-text-secondary);
    text-decoration: none;
    padding: 0.28rem 0.6rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.05rem;
    transition: color .12s, background .12s;
    border: none;
    border-left: 2px solid transparent;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.settings-nav-item:hover { color: var(--t4y-purple); background: rgba(124,58,237,.06); }
.settings-nav-item.active { color: var(--t4y-purple); background: rgba(124,58,237,.08); border-left-color: var(--t4y-purple); font-weight: 600; }
.settings-nav-item .fa-fw { width: 1.1em; flex-shrink: 0; }

/* Sub-navigation (indented links below a nav item) */
.settings-nav-sub {
    display: none;
    flex-direction: column;
    padding: 0.15rem 0 0.15rem 0;
}
.settings-nav-sub.show { display: flex; }
.settings-nav-sub-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--t4y-text-secondary);
    text-decoration: none;
    padding: 0.22rem 0.6rem 0.22rem 2rem;
    border-radius: 0 6px 6px 0;
    border-left: 2px solid transparent;
    transition: color .12s, background .12s;
}
.settings-nav-sub-item:hover { color: var(--t4y-purple); background: rgba(124,58,237,.06); }
.settings-nav-sub-item.active { color: var(--t4y-purple); font-weight: 600; background: rgba(124,58,237,.08); border-left-color: var(--t4y-purple); }

.settings-content {
    flex: 1;
    min-width: 0;
    padding: 0 2rem 2rem 2rem;
    border-left: 1px solid var(--t4y-border);
}
@media (max-width: 767px) {
    .settings-wrap { flex-direction: column; }
    .settings-sidebar {
        width: 100%; border-bottom: 1px solid var(--t4y-border);
        position: static; display: flex; flex-wrap: wrap; gap: 0.15rem;
        padding: 0.5rem 0.25rem;
    }
    .settings-nav-label { width: 100%; padding: 0.4rem 0.4rem 0.1rem; }
    .settings-nav-item { border-radius: 6px; border-left: 2px solid transparent; width: auto; }
    .settings-nav-sub { flex-direction: row; flex-wrap: wrap; gap: 0.15rem; padding-left: 0; }
    .settings-nav-sub-item { padding-left: 0.6rem; border-radius: 6px; border-left: 2px solid transparent; }
    .settings-content { padding: 1rem 1rem 2rem; border-left: none; }
    .page-hero { margin: -0.5rem -0.75rem 0; }
}

/* ─── Parameter / settings table ─────────────────────────────────────────── */
.ptable {
    width: 100%;
    font-size: .82rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--t4y-border);
    border-radius: 8px;
    overflow: hidden;
    margin: .75rem 0 0;
}
.ptable th {
    background: var(--t4y-surface-raised);
    font-weight: 600;
    color: var(--t4y-text-secondary);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .5rem .9rem;
    text-align: left;
}
.ptable td { padding: .6rem .9rem; border-top: 1px solid var(--t4y-border); vertical-align: middle; }
.ptable tr:first-child td { border-top: none; }
.ptable tbody tr:hover td { background: var(--t4y-surface-raised); }
.ptable tbody tr.table-warning td { background: #fff3cd; }
.ptable tbody tr.table-warning:hover td { background: #fde68a; }
.ptable th.role-highlight,
.ptable td.role-highlight { background: rgba(124,58,237,.08); }

/* ─── Default form control sizing (sm) ───────────────────────────────────── */
.form-control:not(.form-control-lg),
.form-select:not(.form-select-lg) {
    font-size: .875rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* ─── Flat page sections ──────────────────────────────────────────────────── */
.page-section {
    padding: 2rem 0;
    border-bottom: 1px solid var(--t4y-border);
}
.page-section:last-child { border-bottom: none; }
.page-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--t4y-text);
    margin-bottom: 1rem;
}

/* ─── Notification bell ───────────────────────────────────────────────────── */
.notif-bell-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    line-height: 1;
}
.notif-bell-btn:hover .fa-bell,
.notif-bell-btn:hover .fa-stopwatch,
.notif-bell-btn:focus .fa-bell,
.notif-bell-btn:focus .fa-stopwatch { color: #fff !important; }
.notif-dropdown { border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.notif-header   { background: var(--t4y-surface-raised); }
.notif-item     { list-style: none; }
.notif-item.notif-unread .notif-link { background: rgba(124,58,237,.06); }
.notif-link     { color: var(--t4y-text-heading) !important; border-bottom: 1px solid var(--t4y-notif-link-border); transition: background .12s; }
.notif-link:hover { background: #f5f3ff; }
.notif-dot       { width: 8px; height: 8px; border-radius: 50%; background: var(--t4y-purple); margin-top: 8px; flex-shrink: 0; }
.notif-dot-spacer { width: 8px; margin-top: 8px; flex-shrink: 0; }

/* ─── Timer popup ─────────────────────────────────────────────────────────── */
.timer-dropdown { border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); background: var(--t4y-surface); border: 1px solid var(--t4y-border); }
.timer-dropdown-header { background: var(--t4y-surface-raised); border-radius: 10px 10px 0 0; }
.timer-popup-item { transition: background .12s; color: var(--t4y-text) !important; margin-bottom: 2px; }
.timer-popup-item:hover { background: var(--t4y-surface-hover); }
.timer-popup-running .timer-popup-icon-wrap { color: #16a34a; font-size: 1.1rem; }
.timer-popup-paused .timer-popup-icon-wrap  { color: #d97706; font-size: 1.1rem; }
.timer-popup-status { font-size: .6rem; padding: .15em .45em; }
.timer-popup-title { font-size: .82rem; font-weight: 500; color: var(--t4y-text); }
.timer-popup-project { font-size: .7rem; color: var(--t4y-text-muted); }
.timer-popup-elapsed { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t4y-purple); white-space: nowrap; }

/* ─── 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; }
.activity-chevron { transition: transform .2s; font-size: .6rem; }
[aria-expanded="true"] .activity-chevron { transform: rotate(90deg); }
.reaction-ts { font-size: .7rem; }
.role-label  { font-size: .75rem; }
.icon-md     { font-size: 1rem; }
.icon-xs     { font-size: .75rem; }

/* Blocker / sub-task badge sizes */
.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; }

/* ─── Chat ───────────────────────────────────────────────────────────────── */
#chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--t4y-purple) 0%, var(--t4y-purple-deep) 100%);
    box-shadow: 0 4px 20px rgba(124,58,237,.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    z-index: 1055;
    border: none;
    transition: transform .15s, box-shadow .15s;
}
#chat-bubble:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 28px rgba(124,58,237,.55);
}
#chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
    line-height: 1;
}
#chat-panel {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 360px;
    height: 520px;
    background: var(--t4y-surface);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(30,16,71,.22), 0 4px 16px rgba(0,0,0,.07);
    z-index: 1054;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .15s;
}
#chat-panel.chat-hidden {
    transform: scale(.82) translateY(16px);
    opacity: 0;
    pointer-events: none;
}
.chat-panel-header {
    background: linear-gradient(135deg, var(--t4y-purple-navy) 0%, var(--t4y-purple-deep) 100%);
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.chat-panel-title {
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: -.02em;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-hdr-btn {
    background: rgba(255,255,255,.12);
    border: none;
    color: rgba(255,255,255,.8);
    width: 28px;
    height: 28px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.chat-hdr-btn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Contact list */
#chat-contacts { flex: 1; overflow-y: auto; }
.chat-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.chat-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
}
.chat-status-dot.online  { background: #10b981; }
.chat-status-dot.offline { background: #cbd5e1; }
.chat-status-dot.inline  {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    border-color: transparent;
}
.chat-contact-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--t4y-chat-contact-border);
    transition: background .1s;
}
.chat-contact-item:hover { background: var(--t4y-surface-alt); }
.chat-contact-item:last-child { border-bottom: none; }
.chat-contact-info { flex: 1; min-width: 0; }
.chat-contact-name {
    font-weight: 600;
    font-size: .85rem;
    color: var(--t4y-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-contact-preview {
    font-size: .75rem;
    color: var(--t4y-text-ghost);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .12rem;
}
.chat-contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    flex-shrink: 0;
}
.chat-contact-time { font-size: .68rem; color: var(--t4y-text-ghost); }
.chat-unread-badge {
    background: var(--t4y-purple);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.chat-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--t4y-text-ghost);
}
.chat-empty i { font-size: 1.8rem; display: block; margin-bottom: .65rem; color: #ddd6fe; }
.chat-empty p { font-size: .82rem; margin: 0; line-height: 1.5; }
.chat-loading { padding: 2rem; text-align: center; color: var(--t4y-text-ghost); font-size: .85rem; }
.chat-loading-older { text-align: center; padding: .5rem 0; color: var(--t4y-text-ghost); font-size: .75rem; }

/* Thread */
#chat-thread { display: none; flex-direction: column; flex: 1; overflow: hidden; }
#chat-thread.chat-thread-active { display: flex; }
#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    scroll-behavior: smooth;
}
.chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.chat-msg.sent     { align-self: flex-end; align-items: flex-end; }
.chat-msg.received { align-self: flex-start; align-items: flex-start; }
.chat-bubble-msg {
    padding: .55rem .85rem;
    border-radius: 14px;
    font-size: .84rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-msg.sent     .chat-bubble-msg { background: var(--t4y-purple); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.received .chat-bubble-msg { background: var(--t4y-chat-received-bg); color: var(--t4y-chat-received-fg); border-bottom-left-radius: 4px; }
.chat-bubble-msg a { text-decoration: underline; }
.chat-msg.sent     .chat-bubble-msg a { color: rgba(255,255,255,.9) !important; }
.chat-msg.received .chat-bubble-msg a { color: var(--t4y-purple-dark) !important; }
.chat-msg-time { font-size: .65rem; color: var(--t4y-text-ghost); margin-top: .18rem; padding: 0 .2rem; }
.chat-date-sep {
    text-align: center;
    font-size: .68rem;
    color: var(--t4y-text-ghost);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .6rem 0 .2rem;
}
.chat-input-area {
    padding: .65rem .9rem;
    border-top: 1px solid var(--t4y-border-light);
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    background: var(--t4y-chat-input-bg);
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    border: 1.5px solid var(--t4y-border);
    border-radius: 20px;
    padding: .45rem .9rem;
    font-size: .84rem;
    outline: none;
    resize: none;
    height: 38px;
    max-height: 100px;
    line-height: 1.45;
    transition: border-color .15s;
    font-family: inherit;
    overflow-y: auto;
}
.chat-input:focus { border-color: var(--t4y-purple); }
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--t4y-purple);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
    transition: background .13s, transform .1s;
    margin-bottom: 1px;
}
.chat-send-btn:hover    { background: var(--t4y-purple-dark); transform: scale(1.07); }
.chat-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; transform: none; }
.chat-image-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; border: none; color: var(--t4y-purple);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0; transition: background .13s;
    margin-bottom: 1px;
}
.chat-image-btn:hover { background: rgba(124,58,237,.1); }
.chat-bubble-img {
    max-width: 220px; max-height: 200px; border-radius: 8px;
    display: block; margin-bottom: 2px; cursor: pointer;
}
.chat-typing {
    padding: 4px 12px;
    font-size: .75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-typing-dots {
    display: inline-flex;
    gap: 3px;
}
.chat-typing-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: #94a3b8;
    animation: typingBounce 1.2s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.chat-bot-upload-label { flex: 1; display: flex; cursor: pointer; }
.chat-bot-upload-btn {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    width: 100%; padding: .5rem; border-radius: 8px;
    background: var(--t4y-purple); color: #fff; font-size: .82rem; font-weight: 500;
    transition: background .13s, transform .1s; cursor: pointer;
}
.chat-bot-upload-btn:hover { background: var(--t4y-purple-dark); transform: scale(1.02); }

/* ─── Impersonation Banner ───────────────────────────────────────────────── */
.impersonation-bar {
    background: linear-gradient(90deg, #dc3545, #b02a37);
    color: #fff;
    padding: .5rem 0;
    font-size: .85rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(220, 53, 69, .25);
}
.impersonation-bar .btn-light {
    font-size: .75rem;
    padding: .15rem .6rem;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
.breadcrumb-bar {
    background: var(--t4y-surface-raised);
    border-bottom: 1px solid var(--t4y-border-light);
    padding: .5rem 0;
}
.breadcrumb {
    font-size: .8rem;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}
.breadcrumb-item a {
    color: #6b7280;
    text-decoration: none;
    transition: color .15s;
}
.breadcrumb-item a:hover { color: var(--t4y-purple); }
.breadcrumb-item.active { color: var(--t4y-purple-deep); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: #c4b5fd; }

/* Project switcher dropdown in breadcrumb */
.project-bc-dropdown > a.dropdown-toggle { cursor: pointer; }
.project-bc-dropdown > a.dropdown-toggle::after { font-size: .55rem; vertical-align: .15em; margin-left: .3em; }
.project-bc-dropdown.active > a.dropdown-toggle { color: var(--t4y-purple-deep); font-weight: 500; }
.project-bc-dropdown .dropdown-menu { font-size: .8rem; max-height: 300px; overflow-y: auto; }
.project-bc-dropdown .dropdown-item.active { background: var(--t4y-purple); color: #fff; }

/* ─── Integration logo buttons ───────────────────────────────────────────── */
.btn-integration-logo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.btn-integration-logo img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ─── Full-page Ticket View ─────────────────────────────────────────────── */
.ticket-page-wrap {
    display: flex;
    align-items: stretch;
    background: var(--t4y-surface);
    border: 1px solid var(--t4y-border);
    border-top: none;
    min-height: calc(100vh - 10rem);
    margin-bottom: -1.5rem;
}
.ticket-page-content {
    flex: 1;
    min-width: 0;
    padding: 2rem;
}
.ticket-page-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--t4y-surface-alt);
    border-left: 1px solid var(--t4y-border);
    padding: 1.25rem 1rem 1rem;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}
@media (max-width: 991.98px) {
    .ticket-page-wrap { flex-direction: column; }
    .ticket-page-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--t4y-border);
    }
    .ticket-page-content { padding: 1rem; }
}

/* ---- Gantt timeline ---------------------------------------------------- */
.gantt-chart-container {
    min-height: 320px;
    overflow-x: auto;
    background: var(--t4y-surface);
    border: 1px solid var(--t4y-border);
    border-radius: 10px;
}
.gantt-chart-container .gantt-container { font-family: inherit; }

/* Status bar colors */
.gantt-backlog .bar       { fill: #94a3b8 !important; }
.gantt-backlog .bar-progress { fill: #64748b !important; }
.gantt-todo .bar          { fill: #22d3ee !important; }
.gantt-todo .bar-progress { fill: #06b6d4 !important; }
.gantt-in_progress .bar          { fill: #facc15 !important; }
.gantt-in_progress .bar-progress { fill: #eab308 !important; }
.gantt-review .bar          { fill: #a78bfa !important; }
.gantt-review .bar-progress { fill: #8b5cf6 !important; }
.gantt-done .bar          { fill: #4ade80 !important; }
.gantt-done .bar-progress { fill: #22c55e !important; }

/* Status filter pills */
.gantt-status-pill {
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .65rem;
    border-radius: 999px;
    color: #fff;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .35;
    transition: opacity .15s, border-color .15s;
}
.gantt-status-pill:hover { opacity: .65; }
.gantt-status-pill.active {
    opacity: 1;
    border-color: rgba(255,255,255,.55);
    box-shadow: 0 0 0 2px rgba(0,0,0,.12);
}

/* Estimation badge */
.est-badge { font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:3px; line-height:1.3; }
.est-sp  { background:rgba(124,58,237,.12); color:#7c3aed; }
.est-hrs { background:rgba(13,110,253,.12); color:#0d6efd; }

/* Velocity badge */
.velocity-badge { font-size:.6rem; font-weight:700; padding:1px 6px; border-radius:3px; background:rgba(124,58,237,.10); color:#7c3aed; white-space:nowrap; cursor:default; }
.velocity-badge i { margin-right:2px; }

/* Timeline stats */
.timeline-stats { display:flex; align-items:center; gap:16px; padding:6px 12px; border-radius:8px; background:rgba(124,58,237,.05); border:1px solid rgba(124,58,237,.12); font-size:.72rem; font-weight:600; color:var(--t4y-text-secondary); }
.timeline-stat-value { font-weight:700; color:#7c3aed; }

/* Week separator */
.week-separator { display:flex; align-items:center; gap:8px; padding:6px 0; margin:4px 0; pointer-events:none; }
.week-separator::before, .week-separator::after { content:''; flex:1; height:1px; background:rgba(124,58,237,.25); }
.week-separator-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7c3aed; white-space:nowrap; }

/* =========================================================================
   DARK MODE
   ========================================================================= */
[data-theme="dark"] {
    --t4y-bg:               #0f0d19;
    --t4y-purple-soft:      #2d2050;

    --t4y-surface:          #1a1726;
    --t4y-surface-alt:      #1f1b2e;
    --t4y-surface-raised:   #241f35;
    --t4y-surface-hover:    #2a2440;
    --t4y-surface-muted:    #2a2440;
    --t4y-surface-code:     #241f35;

    --t4y-text:             #e8e6f0;
    --t4y-text-heading:     #f0eef8;
    --t4y-text-secondary:   #a09bb5;
    --t4y-text-muted:       #8a849e;
    --t4y-text-faint:       #6e6888;
    --t4y-text-ghost:       #5c5675;

    --t4y-border:           #302c42;
    --t4y-border-light:     #362f50;
    --t4y-border-subtle:    #302c42;
    --t4y-border-dashed:    #3d3658;
    --t4y-border-row:       #241f35;

    --t4y-avatar-overflow-bg: #2a2440;
    --t4y-avatar-overflow-fg: #8a849e;
    --t4y-kanban-col-bg:      rgba(124,58,237,0.08);
    --t4y-kanban-col-border:  rgba(124,58,237,0.18);
    --t4y-col-sidebar-bg:     rgba(255,255,255,.06);
    --t4y-chat-received-bg:   #241f35;
    --t4y-chat-received-fg:   #e8e6f0;
    --t4y-chat-contact-border:#241f35;
    --t4y-chat-input-bg:      #1a1726;
    --t4y-notif-link-border:  #302c42;
}

/* --- Bootstrap component overrides for dark mode --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border);
    color: var(--t4y-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--t4y-text-ghost); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--t4y-surface-alt);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--t4y-surface-alt);
    border-color: var(--t4y-border);
}
[data-theme="dark"] .dropdown-item {
    color: var(--t4y-text);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--t4y-surface-hover);
    color: var(--t4y-text);
}

[data-theme="dark"] .modal-content {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border);
}
[data-theme="dark"] .modal-body { color: var(--t4y-text); }

[data-theme="dark"] .offcanvas {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border);
    color: var(--t4y-text);
}
[data-theme="dark"] .offcanvas-header { border-bottom-color: var(--t4y-border); }
[data-theme="dark"] .offcanvas-title { color: var(--t4y-text-heading); }

[data-theme="dark"] .card {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border) !important;
    color: var(--t4y-text);
}
[data-theme="dark"] .card-footer { border-color: var(--t4y-border); }
[data-theme="dark"] .card-title a.text-dark { color: var(--t4y-text) !important; }

[data-theme="dark"] .badge.bg-light {
    background-color: var(--t4y-surface-muted) !important;
    color: var(--t4y-text-secondary) !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25,135,84,.15);
    border-color: rgba(25,135,84,.3);
    color: #75d5a0;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(220,53,69,.15);
    border-color: rgba(220,53,69,.3);
    color: #f5a0a8;
}
[data-theme="dark"] .alert-warning {
    background-color: rgba(255,193,7,.12);
    border-color: rgba(255,193,7,.25);
    color: #ffe08a;
}

[data-theme="dark"] .progress {
    background-color: var(--t4y-surface-muted);
}

[data-theme="dark"] .table { color: var(--t4y-text); }
[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--t4y-border);
    color: var(--t4y-text);
}

[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .btn-close-white { filter: none; }

[data-theme="dark"] .text-muted { color: var(--t4y-text-muted) !important; }
[data-theme="dark"] .text-dark  { color: var(--t4y-text) !important; }
[data-theme="dark"] .bg-white   { background-color: var(--t4y-surface) !important; }
[data-theme="dark"] .bg-light   { background-color: var(--t4y-surface-raised) !important; }
[data-theme="dark"] .border     { border-color: var(--t4y-border) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--t4y-border) !important; }

[data-theme="dark"] .input-group-text {
    background-color: var(--t4y-surface-raised);
    border-color: var(--t4y-border);
    color: var(--t4y-text-muted);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border-dashed);
}
[data-theme="dark"] .form-check-input:checked {
    background-color: var(--t4y-purple);
    border-color: var(--t4y-purple);
}

[data-theme="dark"] .notif-dropdown {
    background-color: var(--t4y-surface-alt);
    border-color: var(--t4y-border);
}
[data-theme="dark"] .notif-header,
[data-theme="dark"] .timer-dropdown-header { color: var(--t4y-text); }
[data-theme="dark"] .notif-item.notif-unread .notif-link { background: rgba(124,58,237,.12); }
[data-theme="dark"] .notif-item.notif-unread .notif-text { color: var(--t4y-text) !important; }
[data-theme="dark"] .notif-link:hover { background: var(--t4y-surface-hover); }

[data-theme="dark"] .btn-secondary {
    --bs-btn-bg:           var(--t4y-purple-soft);
    --bs-btn-border-color: #3d2d6b;
    --bs-btn-color:        #c4b5fd;
    --bs-btn-hover-bg:     #3d2d6b;
    --bs-btn-hover-border-color: #4c3d7a;
    --bs-btn-hover-color:  #ddd6fe;
}

[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:        var(--t4y-text-secondary);
    --bs-btn-border-color: var(--t4y-border-dashed);
}

[data-theme="dark"] .add-ticket-btn {
    border-color: rgba(124,58,237,0.3);
    color: var(--t4y-purple);
}

[data-theme="dark"] .ticket-card[data-type="feature"] .ticket-title,
[data-theme="dark"] .ticket-card[data-type="bug"] .ticket-title { color: var(--t4y-text); }
[data-theme="dark"] .ticket-card { background-color: var(--t4y-surface-raised) !important; border-color: var(--t4y-border) !important; }
[data-theme="dark"] .ticket-ref-badge { color: #c4b5fd !important; }
[data-theme="dark"] .ticket-card[data-type="bug"] { background-color: color-mix(in srgb, #ef4444 8%, var(--t4y-surface-raised)) !important; }

/* Time tracking cards & buttons */
[data-theme="dark"] .tt-card { background: var(--t4y-surface-raised); border-color: var(--t4y-border); }
[data-theme="dark"] .tt-btn-stop   { background: rgba(220,38,38,.15); color: #f87171; }
[data-theme="dark"] .tt-btn-start  { background: rgba(22,163,74,.15); color: #4ade80; }
[data-theme="dark"] .tt-btn-pause  { background: rgba(217,119,6,.15); color: #fbbf24; }
[data-theme="dark"] .tt-btn-resume { background: rgba(22,163,74,.15); color: #4ade80; }
[data-theme="dark"] .tt-btn-add    { background: rgba(22,163,74,.15); color: #4ade80; }

[data-theme="dark"] .ptable tbody tr.table-warning td { background: rgba(255,193,7,.1); }
[data-theme="dark"] .ptable tbody tr.table-warning:hover td { background: rgba(255,193,7,.18); }
[data-theme="dark"] .ptable th.role-highlight,
[data-theme="dark"] .ptable td.role-highlight { background: rgba(124,58,237,.15); }

/* --- Third-party: Tiptap --- */
[data-theme="dark"] .tiptap-wrapper      { border-color: var(--t4y-border); }
[data-theme="dark"] .tiptap-toolbar      { background: var(--t4y-surface-raised); border-color: var(--t4y-border); }
[data-theme="dark"] .tiptap-toolbar-btn  { color: var(--t4y-text-secondary); }
[data-theme="dark"] .tiptap-toolbar-btn:hover { background: var(--t4y-surface-hover); color: var(--t4y-text); }
[data-theme="dark"] .tiptap-toolbar-btn.is-active { background: rgba(124,58,237,.25); color: #a78bfa; }
[data-theme="dark"] .tiptap-content      { background: var(--t4y-surface); color: var(--t4y-text); }

/* --- Third-party: Frappe Gantt SVG --- */
[data-theme="dark"] .gantt .grid-header { fill: var(--t4y-surface-raised) !important; stroke: var(--t4y-border); }
[data-theme="dark"] .gantt .grid-row    { fill: var(--t4y-surface) !important; }
[data-theme="dark"] .gantt .grid-row:nth-child(even) { fill: var(--t4y-surface-alt) !important; }
[data-theme="dark"] .gantt .row-line     { stroke: var(--t4y-border); }
[data-theme="dark"] .gantt .tick          { stroke: var(--t4y-border); }
[data-theme="dark"] .gantt .today-highlight { fill: rgba(124,58,237,.12) !important; }
[data-theme="dark"] .gantt .lower-text   { fill: var(--t4y-text-secondary); }
[data-theme="dark"] .gantt .upper-text   { fill: var(--t4y-text-secondary); }
[data-theme="dark"] .gantt .bar-label.big { fill: var(--t4y-text-secondary); }
[data-theme="dark"] .gantt .arrow         { stroke: var(--t4y-text-ghost); }
[data-theme="dark"] .gantt .handle        { fill: var(--t4y-border-dashed); }

/* --- Third-party: Chat badge border in dark mode --- */
[data-theme="dark"] #chat-badge { border-color: var(--t4y-surface); }
[data-theme="dark"] .chat-status-dot { border-color: var(--t4y-surface); }

/* --- Nav tabs in dark mode --- */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--t4y-border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--t4y-text-secondary); }
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border) var(--t4y-border) var(--t4y-surface);
    color: var(--t4y-purple);
}

/* --- Breadcrumb item colors --- */
[data-theme="dark"] .breadcrumb-item a { color: var(--t4y-text-muted); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--t4y-text); }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--t4y-text-ghost); }

/* --- Body, headings and labels --- */
[data-theme="dark"] body { color: var(--t4y-text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--t4y-text-heading); }
[data-theme="dark"] label { color: var(--t4y-text); }
[data-theme="dark"] .form-label { color: var(--t4y-text); }
[data-theme="dark"] .form-check-label { color: var(--t4y-text); }
[data-theme="dark"] small { color: var(--t4y-text-muted); }
[data-theme="dark"] p { color: var(--t4y-text); }
[data-theme="dark"] .fw-bold { color: var(--t4y-text); }
[data-theme="dark"] .card-text { color: var(--t4y-text-secondary) !important; }

/* --- User dropdown --- */
.user-dropdown { min-width: 180px; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.user-dropdown .dropdown-item { font-size: .85rem; padding: .45rem .9rem; }
.user-dropdown .dropdown-item i { font-size: .85rem; }
.user-dropdown .dropdown-divider { margin: .25rem 0; }
[data-theme="dark"] .user-dropdown .dropdown-divider { border-color: var(--t4y-border); }
#theme-toggle { cursor: pointer; }

/* --- Select2 overrides (match form-select-sm) --- */
.select2-container--default .select2-selection--single {
    height: 31px;
    padding: 2px 6px;
    font-size: .875rem;
    font-family: inherit;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.select2-container--default .select2-results__option {
    font-size: .875rem;
    font-family: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px;
    padding-left: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--t4y-purple, #7c3aed);
}
.select2-dropdown { border-color: #ced4da; border-radius: .25rem; z-index: 1060; }
.select2-search--dropdown .select2-search__field {
    font-size: .875rem;
    font-family: inherit;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: .2rem;
}

/* --- Select2 dark mode --- */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border);
    color: var(--t4y-text);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--t4y-text);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--t4y-text-muted);
}
[data-theme="dark"] .select2-dropdown {
    background-color: var(--t4y-surface);
    border-color: var(--t4y-border);
    color: var(--t4y-text);
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--t4y-surface-alt, #2a2a3d);
    border-color: var(--t4y-border);
    color: var(--t4y-text);
}
[data-theme="dark"] .select2-results__option { color: var(--t4y-text); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--t4y-purple, #7c3aed);
    color: #fff;
}

/* Mention highlights */
.mention { color: #7c3aed; font-weight: 600; }
.mention-dropdown {
    position: fixed; z-index: 1070; background: #fff; border: 1px solid #ddd;
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1); max-height: 200px;
    overflow-y: auto; min-width: 180px;
}
.mention-dropdown-item {
    padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: .875rem;
}
.mention-dropdown-item:hover,
.mention-dropdown-item.active { background: #f3f0ff; }
[data-theme="dark"] .mention { color: #a78bfa; }
[data-theme="dark"] .mention-dropdown {
    background: var(--t4y-surface-alt, #2a2a3d);
    border-color: var(--t4y-border);
}
[data-theme="dark"] .mention-dropdown-item:hover,
[data-theme="dark"] .mention-dropdown-item.active {
    background: rgba(124, 58, 237, .15);
}

/* Ticket reference links (#PREFIX-N) */
.ticket-ref-link { color: #7c3aed; font-weight: 600; text-decoration: none; }
.ticket-ref-link:hover { text-decoration: underline; }
[data-theme="dark"] .ticket-ref-link { color: #a78bfa; }

/* Ticket ref items in dropdown */
.ticket-ref-label { font-weight: 600; min-width: 64px; display: inline-block; font-family: var(--bs-font-monospace); font-size: .8rem; }
.ticket-ref-title { color: var(--t4y-text-secondary); font-size: .825rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Emoji picker (TiptapEditor toolbar) ──────────────────────────────────── */
[data-theme="dark"] .tiptap-emoji-picker { background: var(--t4y-surface-raised, #2a2a3e); border-color: var(--t4y-border, #383850); }

/* ─── Sub-task badges on ticket cards ──────────────────────────────────────── */
.ticket-subtask-badge,
.ticket-time-badge { font-size: .7rem; padding: 1px 6px; }

/* ─── Time tracking timer ──────────────────────────────────────────────────── */
#timer-stop-btn { font-variant-numeric: tabular-nums; }

/* ─── Documentation ──────────────────────────────────────────────────────── */

/* Sidebar nav tree */
.doc-sidebar { min-width: 220px; }
.doc-nav-tree { padding: 4px 0; }
.doc-nav-item { display: flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: .85rem; color: var(--t4y-text-primary, #1e1047); text-decoration: none; border-radius: 4px; white-space: nowrap; overflow: hidden; }
.doc-nav-item:hover { background: rgba(124, 58, 237, .06); color: var(--t4y-purple); }
.doc-nav-item.active { background: rgba(124, 58, 237, .1); color: var(--t4y-purple); font-weight: 600; }
.doc-nav-caret { width: 12px; text-align: center; font-size: .7rem; color: var(--t4y-text-secondary, #6c757d); flex-shrink: 0; }
.doc-nav-article { padding-left: 28px; }
.doc-nav-children { }
[data-theme="dark"] .doc-nav-item:hover { background: rgba(124, 58, 237, .15); }
[data-theme="dark"] .doc-nav-item.active { background: rgba(124, 58, 237, .2); }

.doc-article-body h2 { font-size: 1.5rem; font-weight: 700; }

.doc-markdown-content { line-height: 1.7; }
.doc-markdown-content h1 { font-size: 1.6rem; font-weight: 700; margin: 1.5em 0 .5em; border-bottom: 1px solid var(--t4y-border, #e5e7eb); padding-bottom: .3em; }
.doc-markdown-content h2 { font-size: 1.35rem; font-weight: 700; margin: 1.3em 0 .4em; }
.doc-markdown-content h3 { font-size: 1.15rem; font-weight: 600; margin: 1.2em 0 .3em; }
.doc-markdown-content pre { background: #f6f5ff; border-radius: 6px; padding: 12px 16px; overflow-x: auto; font-size: .85rem; }
.doc-markdown-content code { font-size: .85em; background: #f6f5ff; padding: 2px 5px; border-radius: 3px; }
.doc-markdown-content pre code { background: none; padding: 0; }
.doc-markdown-content blockquote { border-left: 3px solid var(--t4y-purple, #7c3aed); padding-left: 1em; color: var(--t4y-text-secondary, #6c757d); margin: 1em 0; }
.doc-markdown-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.doc-markdown-content th, .doc-markdown-content td { border: 1px solid var(--t4y-border, #e5e7eb); padding: 8px 12px; text-align: left; }
.doc-markdown-content th { background: #f8f7ff; font-weight: 600; }
.doc-markdown-content img { max-width: 100%; height: auto; border-radius: 6px; }
.doc-markdown-content ul, .doc-markdown-content ol { padding-left: 1.5em; }
.doc-markdown-content a { color: var(--t4y-purple, #7c3aed); }

[data-theme="dark"] .doc-markdown-content pre { background: #1e1e2e; }
[data-theme="dark"] .doc-markdown-content code { background: #1e1e2e; }
[data-theme="dark"] .doc-markdown-content th { background: var(--t4y-surface-raised, #2a2a3e); }
[data-theme="dark"] .doc-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); }

.doc-attachment-pill { display: inline-flex; align-items: center; background: #f8f7ff; border: 1px solid var(--t4y-border, #e5e7eb); border-radius: 6px; padding: 4px 10px; font-size: .85rem; }
[data-theme="dark"] .doc-attachment-pill { background: var(--t4y-surface-raised, #2a2a3e); }

.doc-comment-edit-area .tiptap-wrapper { border-color: var(--t4y-purple, #7c3aed); }