/* ─── Beyond Management — Global Styles ─────────────────────────────── */

/* ── Typography ── */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-xs  { font-size: 0.75rem; }

/* ── Layout helpers ── */
.min-vh-75 { min-height: 75vh; }
.mw-300 { max-width: 300px; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

/* ── Bootstrap color overrides for badges/text ── */
.bg-teal   { background-color: #4DC1B6 !important; color: white; }
.bg-purple { background-color: #A491C5 !important; color: white; }
.bg-orange { background-color: #F59225 !important; color: white; }
.bg-pink   { background-color: #E93F96 !important; color: white; }
.bg-red    { background-color: #EB5464 !important; color: white; }
.bg-cyan   { background-color: #53C6D6 !important; color: white; }

/* ── Task status badges (sections table) ── */
.status-not-started { background-color: #6c757d !important; color: white; }
.status-todo { background-color: #e7c229 !important; color: #212529 !important; }
.status-in-progress { background-color: #53C6D6 !important; color: white; }
.status-to-check { background-color: #F59225 !important; color: white; }
.status-client-check { background-color: #A491C5 !important; color: white; }
.status-on-hold { background-color: #495057 !important; color: white; }
.status-completed   { background-color: #198754 !important; color: white !important; }
.bg-task-todo { background-color: #e7c229 !important; color: #212529 !important; }
.bg-task-completed { background-color: #198754 !important; color: #fff !important; }
.status-in-progress.badge { background-color: #53C6D6 !important; }

/* ── Task cards with left border ── */
.section-card { transition: box-shadow 0.2s ease; }
.section-card.not_started { border-left: 4px solid #6c757d !important; }
.section-card.todo { border-left: 4px solid #e7c229 !important; }
.section-card.in_progress { border-left: 4px solid #53C6D6 !important; }
.section-card.to_check { border-left: 4px solid #F59225 !important; }
.section-card.client_check { border-left: 4px solid #A491C5 !important; }
.section-card.on_hold { border-left: 4px solid #495057 !important; }
.section-card.completed   { border-left: 4px solid #198754 !important; }

/* ── Progress bars ── */
.progress { border-radius: 0 !important; background-color: #eee; }
.progress-bar { transition: width 0.6s ease; }

/* ── Form controls ── */
.form-control:focus,
.form-select:focus {
    border-color: #4DC1B6;
    box-shadow: 0 0 0 0.2rem rgba(77, 193, 182, 0.2);
}

.input-group-text {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* ── Table styles ── */
.table > :not(caption) > * > * { padding: 0.75rem 0.75rem; }
.table thead th {
    background-color: #fafafa;
    border-bottom: 2px solid #f0f0f0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ea3ab;
    font-weight: 600;
}
.table-hover tbody tr:hover {
    background-color: #f0fbfa;
}

/* ── Stat cards ── */
.welcome-card {
    border-top-style: solid;
    border-top-width: 4px;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

/* ── Alert tweaks ── */
.alert { border-radius: 0; border-left-width: 4px; }
.alert-success { border-left-color: #4DC1B6; }
.alert-danger  { border-left-color: #EB5464; }
.alert-warning { border-left-color: #F59225; }
.alert-info    { border-left-color: #53C6D6; }

/* ── Dropdown menu ── */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border-radius: 20px !important;
}
.dropdown-item:hover { background-color: #f0fbfa; color: #4DC1B6; }
.dropdown-item.active { background-color: #4DC1B6; }

/* ── FullCalendar overrides ── */
.fc-toolbar-title { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 1.1rem !important; }
.fc-col-header-cell { background-color: #fafafa; }
.fc-daygrid-day-number { color: #54565A; font-weight: 500; }
.fc-day-today .fc-daygrid-day-number { color: #4DC1B6; font-weight: 700; }
.fc-event-title { font-weight: 500; }

/* ── Workload bars ── */
.workload-bar-wrap { height: 6px; background: #eee; border-radius: 0; overflow: hidden; }
.workload-bar-fill { height: 100%; transition: width 0.4s ease; }

/* ── Avatar circles ── */
.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* ── Scrollable panel ── */
.panel-scroll { max-height: 400px; overflow-y: auto; }
.panel-scroll::-webkit-scrollbar { width: 4px; }
.panel-scroll::-webkit-scrollbar-track { background: #f0f0f0; }
.panel-scroll::-webkit-scrollbar-thumb { background: #4DC1B6; border-radius: 2px; }

/* ── Print styles ── */
@media print {
    .navbar, .app-sidebar, .app-sidebar-mobile-toggle, .app-sidebar-backdrop, .btn, .modal, .alert { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: white !important; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .none-mobile { display: none !important; }
    .main-content { padding: 1rem !important; }
    .stat-card { padding: 1rem !important; }
    .fc-toolbar { font-size: 0.8rem; }
}

/* ── Animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease forwards; }

/* ── Modal width ── */
.modal-dialog { max-width: 800px; }

/* Retroplanning: individual task edit popup */
#retroTaskModal .modal-dialog {
    width: 500px;
    max-width: calc(100% - 1.5rem);
}

/* ── Popups: unified 20px corner radius ── */
.modal-content {
    border-radius: 20px !important;
    overflow: hidden;
}

/*
 * Standard Bootstrap modals: pad header / body / footer here — not on .modal-content.
 * (Project add/edit task wrap .modal-body in a <form>; padding on .modal-content was
 * squeezing content and fighting Bootstrap defaults.)
 */
.modal-content:not(.board-detail-popup) > .modal-header.border-0 {
    padding: 1.25rem 1.5rem 0.75rem;
}
.modal-content:not(.board-detail-popup) > form > .modal-body:not(.p-0),
.modal-content:not(.board-detail-popup) > .modal-body:not(.p-0) {
    padding: 1rem 1.5rem 1.25rem;
}
.modal-content:not(.board-detail-popup) > form > .modal-footer.border-0,
.modal-content:not(.board-detail-popup) > .modal-footer.border-0 {
    padding: 0.75rem 1.5rem 1.25rem;
}

.modal-header.border-0.pb-1 {
    align-items: flex-start !important;
}

/*
 * #editTaskModal (project inline edit): never zero .modal-body horizontal padding — Bootstrap .row
 * negative margins extend into the parent’s padding; with px=0 on the body, fields eat the outer
 * .modal-content inset and look flush. Pad header / body / footer / orphan form blocks explicitly.
 */
#editTaskModal .modal-content > .modal-header.border-0 {
    padding-left: max(1.5rem, 20px) !important;
    padding-right: max(1.5rem, 20px) !important;
    padding-top: 1.25rem !important;
    padding-bottom: 0.75rem !important;
}
#editTaskModal .modal-content > form > .modal-body:not(.p-0) {
    padding-left: max(1.5rem, 20px) !important;
    padding-right: max(1.5rem, 20px) !important;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
}
#editTaskModal .modal-content > form > .modal-footer.border-0 {
    padding-left: max(1.5rem, 20px) !important;
    padding-right: max(1.5rem, 20px) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
}
#editTaskModal #editTaskForm > hr,
#editTaskModal #editTaskForm > div:not(.modal-body):not(.modal-footer) {
    padding-left: max(1.5rem, 20px);
    padding-right: max(1.5rem, 20px);
    box-sizing: border-box;
}

/*
 * “Edit task” iframe (#sectionEditModal): Bootstrap .modal-body sets --bs-modal-padding; override explicitly.
 */
#sectionEditModal .modal-body.board-section-edit-modal-body {
    padding: 12px 24px 20px !important;
}

/* Task edit when loaded inside iframe (?embed=1): no outer .row (avoids gutter negative margins eating px) */
.task-edit-embed-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 16px 24px 24px;
    margin: 0;
}
html.theme-dark body.beyond-layout-embed-task-edit {
    background: #0f1116 !important;
}
html.theme-dark .task-edit-embed-wrap .main-content,
html.theme-dark .task-edit-embed-wrap .card,
html.theme-dark .task-edit-embed-wrap .card-footer {
    background: #171a22 !important;
    color: #e5e7eb !important;
    border-color: #2b2f3a !important;
}
.popover {
    border-radius: 20px !important;
    overflow: hidden;
}
.tooltip .tooltip-inner {
    border-radius: 20px !important;
}
.toast {
    border-radius: 20px !important;
}
.fc .fc-popover {
    border-radius: 20px !important;
    overflow: hidden;
}
.gantt-tooltip {
    border-radius: 20px !important;
}

/* ── Badge sizes ── */
.badge-sm { font-size: 0.65rem; padding: 0.3em 0.6em; }

/* ── List group custom ── */
.list-group-item-action:hover { background-color: #f0fbfa !important; }

/* ── Page transitions ── */
.container { animation: fadeIn 0.25s ease; }

/* ── Fixed left app sidebar (icon rail) + notification panel vars ── */
:root {
    --app-sidebar-width: 72px;
    --app-sidebar-expanded-width: 220px;
    --app-sidebar-bg: #1a1a1c;
    --app-sidebar-icon: rgba(255, 255, 255, 0.5);
    --app-sidebar-icon-hover: rgba(255, 255, 255, 0.95);
    --app-sidebar-logo-bg: #f5f2eb;
    --app-sidebar-logo-fg: #2a2a2e;
    --notif-sidebar-width: 320px;
    --app-navbar-offset: 0px;
    --notif-sidebar-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --notif-sidebar-dur: 0.28s;
}

body {
    transition: padding-right var(--notif-sidebar-dur) var(--notif-sidebar-ease);
}

body.app-has-sidebar {
    padding-left: var(--app-sidebar-width);
    transition: padding-left 0.2s ease, padding-right var(--notif-sidebar-dur) var(--notif-sidebar-ease);
}

@media (max-width: 991.98px) {
    body.app-has-sidebar {
        padding-left: 0;
    }
}

.app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--app-sidebar-width);
    z-index: 1030;
    background: var(--app-sidebar-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
    transition: width 0.22s ease;
}

.app-sidebar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 12px 0 16px;
    box-sizing: border-box;
}

.app-sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--app-sidebar-logo-bg);
    color: var(--app-sidebar-logo-fg);
    text-decoration: none;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-sidebar__logo:hover {
    color: var(--app-sidebar-logo-fg);
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.app-sidebar__logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.app-sidebar__nav--bottom {
    margin-top: auto;
    padding-top: 12px;
}

.app-sidebar__spacer {
    flex: 1 1 auto;
    min-height: 12px;
}

.app-sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 16px);
    margin: 0 8px;
    height: 44px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--app-sidebar-icon);
    text-decoration: none;
    font-size: 1.05rem;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 17px;
    justify-content: flex-start;
    gap: 0;
    transition: color 0.15s ease, background 0.15s ease, width 0.2s ease, padding 0.2s ease, gap 0.2s ease;
}

.app-sidebar__link > i {
    width: 20px;
    min-width: 20px;
    text-align: center;
}

.app-sidebar__link-label {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, max-width 0.2s ease, transform 0.2s ease;
}

.app-sidebar__link:hover,
.app-sidebar__link:focus-visible {
    color: var(--app-sidebar-icon-hover);
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}

.app-sidebar__link.active {
    color: var(--app-sidebar-icon-hover);
    background: rgba(255, 255, 255, 0.1);
}

.app-sidebar__link--btn {
    cursor: pointer;
    padding-left: 17px;
}

.app-sidebar__link--danger:hover,
.app-sidebar__link--danger:focus-visible {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

.app-sidebar__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    transform: translate(25%, -25%);
    pointer-events: none;
}

@media (min-width: 992px) {
    .app-sidebar:hover {
        width: var(--app-sidebar-expanded-width);
        align-items: stretch;
    }
    .app-sidebar:hover .app-sidebar__inner {
        align-items: stretch;
    }
    .app-sidebar:hover .app-sidebar__nav {
        align-items: stretch;
    }
    .app-sidebar:hover .app-sidebar__view-picker {
        justify-content: flex-start;
        padding: 0;
        box-sizing: border-box;
    }
    .app-sidebar:hover .app-sidebar__link {
        justify-content: flex-start;
        gap: 10px;
    }
    .app-sidebar:hover .app-sidebar__link-label {
        opacity: 1;
        max-width: 140px;
        transform: translateX(0);
    }
    .app-sidebar:hover .app-sidebar__badge {
        right: 10px;
        transform: translate(0, -25%);
    }
}

.app-sidebar__view-picker {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.app-sidebar__view-picker-menu {
    min-width: 11rem;
    z-index: 1060;
}

.app-sidebar__view-picker-menu .dropdown-item.active,
.app-sidebar__view-picker-menu .dropdown-item:active {
    color: #fff;
    background-color: rgba(77, 193, 182, 0.35);
}

.app-sidebar-mobile-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 1040;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 11px;
    background: var(--app-sidebar-bg);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-sidebar-mobile-toggle:hover {
    color: #fff;
    background: #252528;
}

.app-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1025;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
}

body.app-mobile-sidebar-open .app-sidebar-backdrop {
    display: block;
}

@media (max-width: 991.98px) {
    /* Main nav rail: dock right, slide in from the right */
    .app-sidebar {
        left: auto;
        right: 0;
        width: var(--app-sidebar-expanded-width);
        border-right: none;
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .app-sidebar .app-sidebar__inner,
    .app-sidebar .app-sidebar__nav {
        align-items: stretch;
    }
    .app-sidebar .app-sidebar__link {
        width: calc(100% - 16px);
        margin: 0 8px;
        justify-content: flex-start;
        padding: 0 12px;
        gap: 10px;
    }
    .app-sidebar .app-sidebar__link-label {
        opacity: 1;
        max-width: 140px;
        transform: translateX(0);
    }

    body.app-mobile-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-sidebar-mobile-toggle {
        left: auto;
        right: 12px;
    }
}

@media (min-width: 992px) {
    .app-sidebar-backdrop {
        display: none !important;
    }
}

body.app-has-sidebar .container.mt-3:first-of-type,
body.app-has-sidebar > .container.py-4 {
    scroll-margin-top: 8px;
}

@media (max-width: 991.98px) {
    body.app-has-sidebar .container.mt-3:first-of-type {
        padding-top: 3.5rem;
    }
}

/* ── Task / board popups: taller comment box, user can drag to grow vertically ── */
.min-h-collab-chips {
    min-height: 2rem;
}

.board-detail-comment-input,
.section-popup-comment-input {
    font-size: 0.82rem;
    border-radius: 8px;
    resize: vertical;
    min-height: 7rem;
    max-height: min(50vh, 22rem);
    box-sizing: border-box;
}

/* ── Notifications: right sidebar (bell) — pushes page, no overlap ── */
body.notif-sidebar-open {
    padding-right: var(--notif-sidebar-width);
}
/* Bootstrap modal/offcanvas sets inline body padding-right; don't let it override the rail or add a gutter. */
body.notif-sidebar-open.modal-open {
    padding-right: var(--notif-sidebar-width) !important;
}
/* Mobile: no edge tab; drawer is full-width overlay, opened from nav bell only */
.notifications-sidebar-backdrop {
    display: none;
}
@media (max-width: 991.98px) {
    :root {
        --notif-sidebar-width: 100%;
    }
    .notifications-sidebar-tab {
        display: none !important;
    }
    body.notif-sidebar-open {
        padding-right: 0 !important;
    }
    body.notif-sidebar-open.modal-open {
        padding-right: 0 !important;
    }
    body.notif-sidebar-open .notifications-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1015;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, 0.42);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .notifications-sidebar {
        width: 100%;
        max-width: 100%;
        border-left: none;
        box-shadow: none;
        z-index: 1020;
    }
}
@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}
.notifications-sidebar {
    position: fixed;
    top: var(--app-navbar-offset);
    right: 0;
    bottom: 0;
    width: var(--notif-sidebar-width);
    z-index: 1020;
    background: #fff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--notif-sidebar-dur) var(--notif-sidebar-ease);
    border-left: 1px solid #e5e7eb;
}
body.notif-sidebar-open .notifications-sidebar {
    transform: translateX(0);
}

/* Tab on the inner (left) edge of the drawer — top-right of viewport, toggles panel */
.notifications-sidebar-tab {
    position: fixed;
    top: calc(var(--app-navbar-offset) + 12px);
    right: 0;
    z-index: 1025;
    width: 40px;
    height: 44px;
    margin-top: 0;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -2px 2px 10px rgba(15, 23, 42, 0.08);
    transition: right var(--notif-sidebar-dur) var(--notif-sidebar-ease),
        background 0.15s ease, color 0.15s ease;
    overflow: visible;
}
.notifications-sidebar-tab__badge {
    position: absolute;
    top: 2px;
    left: 2px;
    line-height: 1.1;
    font-weight: 700;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fafafa;
}
body.notif-sidebar-open .notifications-sidebar-tab__badge {
    box-shadow: 0 0 0 2px #fafafa;
}
.notifications-sidebar-tab:hover {
    background: #eef7f6;
    color: #4DC1B6;
}
body.notif-sidebar-open .notifications-sidebar-tab {
    right: var(--notif-sidebar-width);
}
.notifications-sidebar-tab i {
    font-size: 1.3rem; /* ~2× previous 0.65rem */
    line-height: 1;
}
.notifications-sidebar-tab--unread {
    color: #dc2626;
}
.notifications-sidebar-tab--unread i {
    color: #dc2626;
}
.notifications-sidebar-tab--unread:hover {
    color: #b91c1c;
}
.notifications-sidebar-tab--unread:hover i {
    color: #b91c1c;
}

.notifications-sidebar-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.notifications-sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}
.notifications-sidebar-all {
    color: #4DC1B6;
    font-weight: 600;
    text-decoration: none;
}
.notifications-sidebar-all:hover {
    color: #3da99f;
    text-decoration: underline;
}
.notifications-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.notifications-sidebar-footer {
    flex-shrink: 0;
    padding: 10px 16px 14px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.notifications-sidebar-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s ease;
}
.notifications-sidebar-item:hover {
    background: #f9fafb;
}
.notifications-sidebar-item.is-unread {
    background: #f0fbfa;
}
.notifications-sidebar-item.is-unread .notifications-sidebar-item-title {
    font-weight: 700;
}
.notifications-sidebar-item-inner {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.notifications-sidebar-item-title {
    font-size: 0.84rem;
    color: #1f2937;
    line-height: 1.35;
}
/* Task-comment notifications: whole row click (dwell → mark read → open task) */
.notifications-sidebar-item[data-comment-dwell="1"] {
    cursor: pointer;
}
.notif-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.notif-type-info { background: #53C6D6; }
.notif-type-comment { background: #53C6D6; }
/* Muted type dot once read */
.notifications-sidebar-item:not(.is-unread) .notif-type-info,
.notif-page-item:not(.notif-unread) .notif-type-info,
.notifications-sidebar-item:not(.is-unread) .notif-type-comment,
.notif-page-item:not(.notif-unread) .notif-type-comment {
    background: #9ca3af;
}
.notif-type-success { background: #4DC1B6; }
.notif-type-warning { background: #F59225; }
.notif-type-danger { background: #EB5464; }
.notif-type-task { background: #A491C5; }

.notif-page-item.notif-unread {
    background: #f8fffe;
    border-left: 3px solid #4DC1B6;
}
.notifications-sidebar-tab:focus {
    outline: none;
    box-shadow: -2px 2px 10px rgba(15, 23, 42, 0.08), 0 0 0 2px rgba(77, 193, 182, 0.45);
}

/* ── Board card detail modal (also used on project page — match board exactly) ── */
#cardDetailModal.modal {
    align-items: stretch;
    justify-content: flex-end;
}
#cardDetailModal .modal-dialog.board-detail-modal-dialog {
    position: fixed;
    right: 50px;
    left: auto;
    top: 50%;
    bottom: auto;
    margin: 0;
    width: min(500px, calc(100vw - 50px - 20px));
    max-width: min(500px, calc(100vw - 50px - 20px));
    max-height: calc(100vh - 2rem);
    transform: translate(100%, -50%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
#cardDetailModal.modal.show .modal-dialog.board-detail-modal-dialog {
    transform: translate(0, -50%);
}
@media (max-width: 575.98px) {
    #cardDetailModal .modal-dialog.board-detail-modal-dialog {
        right: 16px;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
    }
}

/* ── Upcoming task popups (same right-edge slide as board card detail) ── */
.upcoming-slide-drawer.modal {
    align-items: stretch;
    justify-content: flex-end;
}
.upcoming-slide-drawer .modal-dialog.upcoming-slide-drawer-dialog {
    position: fixed;
    right: 50px;
    left: auto;
    top: 50%;
    bottom: auto;
    margin: 0;
    width: min(500px, calc(100vw - 50px - 20px));
    max-width: min(500px, calc(100vw - 50px - 20px));
    max-height: calc(100vh - 2rem);
    transform: translate(100%, -50%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
.upcoming-slide-drawer.modal.show .modal-dialog.upcoming-slide-drawer-dialog {
    transform: translate(0, -50%);
}
@media (max-width: 575.98px) {
    .upcoming-slide-drawer .modal-dialog.upcoming-slide-drawer-dialog {
        right: 16px;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
    }
}

/* Upcoming comment file attach — no frame, no hover treatment */
.upcoming-comment-attach {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    font-weight: inherit;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.3;
}
.upcoming-comment-attach:hover,
.upcoming-comment-attach:focus,
.upcoming-comment-attach:focus-visible {
    border: none;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bs-secondary-color, #6c757d) !important;
    text-decoration: none;
    outline: none;
}

.board-detail-popup {
    overflow: visible;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.board-detail-popup-pad {
    padding: 16px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 28px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0,0,0,.06);
}
.board-modal-panel--hero {
    position: relative;
    padding: 20px 22px 18px;
    padding-right: 2.75rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: transparent;
    box-shadow: none;
}
.board-modal-below {
    padding: 16px 2px 0;
    margin-top: 0;
    background: transparent;
}
.board-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    opacity: 0.65;
}
.board-modal-close:hover { opacity: 1; }
.board-modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #111827;
    line-height: 1.3;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.board-modal-subtitle {
    font-size: .8125rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 14px 0;
}
.board-modal-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
    background: transparent;
}
.board-modal-footer-row .btn { border-radius: 8px; font-weight: 600; }
.board-modal-chip-outline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    color: #54565a;
    border: 1px solid #d1d5db;
    background: transparent;
    border-radius: 999px;
    padding: 5px 11px;
}
.board-detail-show-more {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 0;
    border: none;
    background: none;
    font-size: .78rem;
    font-weight: 600;
    color: #4DC1B6;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.board-detail-show-more:hover { color: #3da99f; }
.board-detail-collapsible { margin-top: 2px; }
#detailSectionAdminActions.board-detail-admin-section--off {
    display: none;
}
#sectionEditModal .modal-dialog.board-section-edit-dialog {
    max-width: min(920px, calc(100vw - 2rem));
    margin: 1rem auto;
}
#sectionEditIframe {
    display: block;
    width: 100%;
    height: min(78vh, 820px);
    background: #f5f5f5;
}
.detail-section-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b7280;
    margin-bottom: 4px;
}
.detail-value {
    font-size: .88rem;
    color: #374151;
    font-weight: 500;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-top: 4px;
}

/* ── Board-style Kanban (global board index + project show tasks) ── */
.board-columns {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: visible;
    padding: 12px 100px 28px;
    background: #dbe5df;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
@media (max-width: 767.98px) {
    .board-columns {
        padding-left: 50px;
        padding-right: 50px;
    }
}
.project-show-board-columns.board-columns {
    padding: 12px 8px 20px;
    background: transparent;
}
.board-list-view-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.board-list-table {
    font-size: 0.875rem;
    margin-bottom: 0;
}
.board-list-table thead th {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.board-list-table .board-list-task-name {
    font-weight: 600;
    color: #111827;
}
.badge-stage-sm {
    font-size: 0.7rem;
    font-weight: 600;
}
.board-list-row {
    cursor: pointer;
}
.board-list-row[data-hidden="true"] {
    display: none !important;
}
.kanban-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: 100%;
    border-radius: 10px;
    overflow: visible;
}
.col-cards {
    flex: 1;
    padding: 10px 10px 12px;
    min-height: 120px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    align-content: start;
    align-items: stretch;
}
.col-cards #empty-all,
.col-cards #projectCardsEmpty {
    grid-column: 1 / -1;
}
@media (max-width: 1199.98px) {
    .col-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
    .col-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .col-cards { grid-template-columns: minmax(0, 1fr); }
}
.kanban-card {
    --card-chip-fg: #374151;
    background: #fff;
    border-radius: 21px;
    padding: 12px;
    box-shadow: 0 4px 28px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 0;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
    position: relative;
    border: none;
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: min-content;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
}
.kanban-card:hover {
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(0,0,0,.05);
    transform: translateY(-2px);
}
.kanban-card[data-hidden="true"] { display: none !important; }
.card-pastel-0 .card-coloured { background: #E0F2FE; }
.card-pastel-1 .card-coloured { background: #FFEDD5; }
.card-pastel-2 .card-coloured { background: #EDE9FE; }
.card-pastel-3 .card-coloured { background: #DCFCE7; }
.card-pastel-0 .card-chip:not(.card-chip-overdue):not(.card-chip-standalone) { background: #BAE6FD; color: var(--card-chip-fg); }
.card-pastel-1 .card-chip:not(.card-chip-overdue):not(.card-chip-standalone) { background: #FFDBB5; color: var(--card-chip-fg); }
.card-pastel-2 .card-chip:not(.card-chip-overdue):not(.card-chip-standalone) { background: #DDD6FE; color: var(--card-chip-fg); }
.card-pastel-3 .card-chip:not(.card-chip-overdue):not(.card-chip-standalone) { background: #BBF7D0; color: var(--card-chip-fg); }
.card-coloured {
    border-radius: 14px;
    padding: 20px 22px 18px;
    min-height: min-content;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}
.card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #111827;
    line-height: 1.3;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}
.card-desc {
    font-size: .8125rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 14px 0;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-top: auto;
}
.card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 11px;
    border: none;
}
.card-chip-overdue { background: #fecaca !important; color: #991b1b !important; }
.card-chip-standalone { background: rgba(164, 145, 197, 0.35) !important; color: #5b4d6e !important; }
.card-last-comment {
    margin-top: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid rgba(0,0,0,.06);
    font-size: .68rem;
    line-height: 1.4;
    color: #4b5563;
}
.card-last-comment-label {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    margin-bottom: 4px;
}
.card-last-comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.card-last-comment-user {
    font-weight: 600;
    color: #374151;
}
.card-footer-bar {
    padding: 14px 8px 4px;
    align-self: stretch;
}
.card-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 2px 2px 2px 4px;
    margin: 0 -2px;
    transition: background .15s ease;
}
.card-footer-cta:hover {
    background: rgba(0,0,0,.03);
    color: inherit;
}
.card-footer-label {
    font-weight: 700;
    font-size: .9rem;
    color: #111827;
    letter-spacing: -0.01em;
}
.card-footer-arrow-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    font-size: .75rem;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.card-footer-cta:hover .card-footer-arrow-btn {
    background: #e5e7eb;
    color: #000;
}
.col-empty {
    text-align: center;
    padding: 32px 12px;
    color: #aaa;
    font-size: .78rem;
}
.project-show-board-area {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 0;
}
.project-show-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #eef3f0;
    border-bottom: 1px solid #cdd8d2;
}
.project-show-board-toolbar .form-select,
.project-show-board-toolbar .form-control {
    height: 32px;
    font-size: .82rem;
    border-color: #dee2e6;
}
.project-show-board-count {
    font-size: .72rem;
    color: #9ca3af;
    margin-left: auto;
    white-space: nowrap;
}

/* ── Global dark mode ── */
html.theme-dark body {
    background: #0f1116 !important;
    color: #e5e7eb !important;
}
html.theme-dark .main-content,
html.theme-dark .card,
html.theme-dark .pref-shell,
html.theme-dark .pref-card,
html.theme-dark .modal-content,
html.theme-dark .board-detail-popup-pad,
html.theme-dark .board-modal-panel--hero,
html.theme-dark .notifications-sidebar,
html.theme-dark .notifications-sidebar-footer,
html.theme-dark .project-show-board-toolbar {
    background: #171a22 !important;
    color: #e5e7eb !important;
    border-color: #2b2f3a !important;
}
html.theme-dark .pref-side,
html.theme-dark .notifications-sidebar-header,
html.theme-dark .table thead th {
    background: #12151d !important;
    border-color: #2b2f3a !important;
}
html.theme-dark .table,
html.theme-dark .table > :not(caption) > * > *,
html.theme-dark .list-group-item,
html.theme-dark .dropdown-menu,
html.theme-dark .dropdown-item,
html.theme-dark .form-text,
html.theme-dark .text-muted,
html.theme-dark .card-desc,
html.theme-dark .board-modal-subtitle,
html.theme-dark .detail-section-label,
html.theme-dark .detail-value,
html.theme-dark .notifications-sidebar-title,
html.theme-dark .notifications-sidebar-item-title,
html.theme-dark .card-last-comment,
html.theme-dark .card-last-comment-label,
html.theme-dark .card-last-comment-user,
html.theme-dark .project-show-board-count {
    color: #c7ccd6 !important;
}
html.theme-dark .table-hover tbody tr:hover,
html.theme-dark .dropdown-item:hover,
html.theme-dark .notifications-sidebar-item:hover {
    background: #1f2430 !important;
}
html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark .input-group-text,
html.theme-dark textarea,
html.theme-dark .btn-outline-secondary,
html.theme-dark .btn-light {
    background: #10131a !important;
    color: #e5e7eb !important;
    border-color: #323848 !important;
}
html.theme-dark .btn-close {
    filter: invert(1) grayscale(1);
}
html.theme-dark .alert {
    background: #171a22;
    color: #e5e7eb;
    border-color: #2b2f3a;
}
html.theme-dark .kanban-card,
html.theme-dark .card-coloured {
    background: #171a22 !important;
    color: #e5e7eb !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
html.theme-dark .card-title,
html.theme-dark .card-footer-label,
html.theme-dark .board-modal-title {
    color: #f3f4f6 !important;
}
html.theme-dark .card-footer-arrow-btn {
    background: #262b38 !important;
    color: #e5e7eb !important;
}
html.theme-dark .app-sidebar {
    background: #0d1017;
}