.task-nav-link{display:inline-flex;align-items:center;gap:.4rem}.task-count{background:var(--btn-primary-bg,#5142ed);color:#fff;min-width:1.2rem;padding:.1rem .35rem;border-radius:1rem;font-size:.75rem;text-align:center}.task-unread-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#38bdf8;margin-right:.45rem;box-shadow:0 0 0 2px #38bdf826;vertical-align:middle}.tasks-page{min-width:0;--task-red:#fda4af;--task-orange:#fdba74;--task-yellow:#fde68a;--task-green:#86efac;--task-blue:#93c5fd;--task-panel:#0b1425;--task-old:#fda4af;--task-new:#86efac}.tasks-page .card{margin-bottom:1rem}.task-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.task-heading h1,.task-heading h2{margin:0;overflow-wrap:anywhere;min-width:0;flex:1}.task-heading h1{font-size:1.7rem}.task-heading h2,.tasks-page h2{font-size:1.2rem}.task-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.task-actions form{margin:0}.tasks-page label{display:flex;flex-direction:column;gap:.4rem;min-width:0;margin-bottom:1rem}.tasks-page input:not([type=hidden]),.tasks-page textarea,.tasks-page select{box-sizing:border-box;width:100%;background:var(--bg-input,#0f172a);border:1px solid var(--border-strong,#334155);border-radius:8px;color:var(--text-main,#e2e8f0);font:inherit;padding:.55rem .7rem;min-height:42px}.tasks-page input::placeholder{color:var(--text-muted,#94a3b8)}.tasks-page textarea{resize:vertical}.task-filters{display:grid;grid-template-columns:2fr repeat(4,minmax(120px,1fr));gap:.85rem;align-items:end}.task-filters label{margin:0}.task-filters .task-actions{grid-column:1/-1}.task-table-wrap{overflow-x:auto;padding:0!important}.task-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:1000px}.task-table th,.task-table td{padding:.8rem!important;text-align:left;vertical-align:top;overflow-wrap:anywhere;border-bottom:1px solid var(--border-main,#263248)}.task-table th{background:var(--bg-surface-alt,#101b31);color:var(--text-muted,#94a3b8)}.task-table th:first-child{width:26%}.task-table th:nth-child(2){width:16%}.task-table th:nth-child(3){width:20%}.task-table th:nth-child(4),.task-table th:nth-child(5){width:10%}.task-table th:nth-child(6),.task-table th:nth-child(7){width:9%}.task-title-cell a{font-weight:650}.task-date{font-size:.84rem}.task-date small{display:block;color:var(--text-muted,#94a3b8);margin-top:.2rem}.task-badge{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:1rem;padding:.2rem .6rem;font-weight:650;font-size:.8rem;white-space:nowrap}.task-priority-critical{color:var(--task-red)}.task-priority-high{color:var(--task-orange)}.task-priority-medium,.task-status-hold{color:var(--task-yellow)}.task-priority-low,.task-status-completed{color:var(--task-green)}.task-status-new,.task-status-in_progress{color:var(--task-blue)}.task-empty,.task-load-state{text-align:center;padding:1.2rem;color:var(--text-muted,#94a3b8)}.task-dialog{width:min(680px,calc(100vw - 28px));max-height:90vh;box-sizing:border-box;border:1px solid var(--border-strong,#334155);border-radius:18px;padding:1.4rem;background:var(--bg-surface,#080f20);color:var(--text-main,#e2e8f0);overflow:auto}.task-dialog::backdrop{background:#020617cc}.task-dialog .task-heading{margin-bottom:1.1rem}.task-close{background:transparent;border:0;box-shadow:none;font-size:1.6rem;padding:.2rem .6rem;color:var(--text-main,#e2e8f0);cursor:pointer}.task-form-actions{justify-content:flex-end}.task-error{color:var(--task-red)!important;overflow-wrap:anywhere}.task-limit{font-size:.8rem;color:var(--text-muted,#94a3b8)}.task-field{margin-bottom:1rem}.task-recipient-picker{position:relative;border:1px solid var(--border-strong,#334155);border-radius:8px;background:var(--bg-input,#0f172a);padding:.35rem}.task-recipient-picker input:not([type=hidden]){border:0;background:transparent;box-shadow:none}.task-selected{display:flex;flex-wrap:wrap;gap:.35rem}.task-chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;overflow-wrap:anywhere;border:1px solid var(--border-strong,#334155);border-radius:1rem;padding:.25rem .6rem;background:var(--task-panel)}.task-chip button{border:0;background:transparent;color:inherit;padding:0 .15rem;font-size:1.05rem;box-shadow:none;cursor:pointer}.task-recipient-options{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:220px;overflow:auto;z-index:5;background:var(--bg-surface,#080f20);border:1px solid var(--border-strong,#334155);border-radius:8px;box-shadow:0 8px 22px #0004}.task-recipient-options>[role=option],.task-recipient-options>[data-no-matches]{padding:.7rem .8rem;overflow-wrap:anywhere;cursor:pointer}.task-recipient-options>[role=option]:hover,.task-recipient-options>[role=option].is-focused{background:var(--task-panel);color:var(--text-link,#93c5fd)}.task-update-fields{display:grid;grid-template-columns:1fr 2fr;gap:1rem}.task-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.task-meta{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin:1rem 0}.task-participants{display:grid;grid-template-columns:1fr 2fr;gap:1rem}.task-participants dt{color:var(--text-muted,#94a3b8);margin-bottom:.3rem}.task-participants dd{margin:0;overflow-wrap:anywhere}.task-event{padding:1.1rem 0;border-top:1px solid var(--border-main,#263248)}.task-event:first-child{margin-top:1rem}.task-event-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.3rem .8rem}.task-event-heading strong{overflow-wrap:anywhere;min-width:0}.task-event time,.task-event-kind{font-size:.8rem;color:var(--text-muted,#94a3b8)}.task-event-kind{margin:.4rem 0}.task-changes{margin:.65rem 0}.task-changes>div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:.5rem;margin:.5rem 0}.task-changes dt{color:var(--text-muted,#94a3b8)}.task-changes dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.task-before{color:var(--task-old)}.task-after{color:var(--task-new)}.task-change-arrow{margin:0 .6rem;color:var(--text-muted,#94a3b8)}.task-files{padding-left:1.2rem}.task-files li{margin:.4rem 0;overflow-wrap:anywhere}.tasks-page [hidden],.task-nav-link [hidden]{display:none!important}.tasks-page :focus-visible{outline:2px solid var(--text-link,#93c5fd);outline-offset:3px}body[data-theme=light] .tasks-page{--task-red:#b91c1c;--task-orange:#9a3412;--task-yellow:#854d0e;--task-green:#166534;--task-blue:#1d4ed8;--task-panel:#edf3fb;--task-old:#b91c1c;--task-new:#166534}@media(max-width:900px){.task-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.task-search{grid-column:1/-1}}@media(max-width:600px){.task-heading h1{font-size:1.4rem;flex-basis:100%}.task-update-fields,.task-participants{grid-template-columns:1fr}.task-heading .task-actions{width:100%}.task-dialog{padding:1rem}.task-changes>div{grid-template-columns:1fr;gap:.2rem}.task-filters{gap:.7rem}.tasks-page .card{padding:1rem}}

.tasks-page a:not(.btn-primary):not(.btn-secondary){color:var(--text-link,#93c5fd)}.tasks-page a:not(.btn-primary):not(.btn-secondary):hover{text-decoration:underline}.task-title-cell a{text-decoration:none}

/* Compact notification pill, matching the top-bar notification control. */
.topbar > nav > a.task-nav-link,
.mobile-nav-home-link.task-nav-link {
    justify-content: center;
    min-height: 0;
    padding: .35rem .7rem;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
}
.topbar > nav > a.task-nav-link:hover,
.mobile-nav-home-link.task-nav-link:hover,
.topbar > nav > a.task-nav-link:focus-visible,
.mobile-nav-home-link.task-nav-link:focus-visible {
    background: var(--bg-surface-alt);
    text-decoration: none;
}
.task-nav-link .task-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, .18);
    color: #bbf7d0;
    font-size: .72rem;
    font-weight: 700;
}
body[data-theme="light"] .task-nav-link .task-count {
    background: rgba(34, 197, 94, .14);
    color: #166534;
}

.task-title-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem;align-items:start}
.task-title-fields .task-field>label{margin-bottom:.4rem}
.tasks-page .task-title-fields .task-recipient-picker{padding:0}
.tasks-page .task-title-fields .task-recipient-picker input{min-height:40px}
@media(max-width:600px){.task-title-fields{grid-template-columns:1fr;gap:0}}


/* Use the dashboard's responsive card sizing on phones. */
@media (max-width: 1180px) {
    .tasks-page .card { padding: var(--card-padding-responsive); }
    .tasks-page .task-table-wrap { overflow: visible; padding: var(--card-padding-responsive) !important; }
    .tasks-page .task-table { min-width: 0; width: 100%; max-width: 100%; }
    .tasks-page .task-table td,
    .tasks-page .task-table th { padding: .42rem 0 !important; }
    .tasks-page .task-table tbody tr:last-child { margin-bottom: 0; }
    .tasks-page .task-table td > * { min-width: 0; max-width: 100%; }
    .tasks-page .task-filters { min-width: 0; }
}
@media (max-width: 720px) {
    .tasks-page .task-heading h1 { font-size: clamp(1.35rem, 7vw, 1.8rem); line-height: 1.1; }
    .tasks-page .task-heading h2,
    .tasks-page h2 { font-size: 1.1rem; }
}

/* Keep Tasks beside the notification bell when other navigation links move to the drawer. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
    .topbar > nav > a.task-nav-link {
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 2.75rem;
        padding: .35rem .75rem;
        font-size: 1rem;
        font-weight: 600;
    }
    .mobile-nav-home-link.task-nav-link {
        min-height: 2.75rem;
        font-size: 1rem;
        padding: .65rem .9rem;
    }
}
@media (max-width: 720px) {
    .topbar:has(> nav > .task-nav-link) .brand,
    .topbar:has(> nav > .task-nav-link) .user-tag { display: none; }
    .topbar:has(> nav > .task-nav-link) .topbar-left { flex: 0 0 auto; }
    .topbar:has(> nav > .task-nav-link) > nav { gap: .25rem; }
    .topbar:has(> nav > .task-nav-link) .topbar-bell-summary,
    .topbar:has(> nav > .task-nav-link) .topbar-user-summary {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        padding: .35rem;
    }
    .topbar:has(> nav > .task-nav-link) .topbar-bell-count {
        position: absolute;
        top: -.15rem;
        right: -.1rem;
        margin: 0;
        box-shadow: 0 0 0 2px var(--bg-topbar);
    }
    .topbar:has(> nav > .task-nav-link) .topbar-bell-dot { display: none; }
    .topbar > nav > a.task-nav-link { padding-inline: .55rem; }
}

/* Keep the Recipient filter identical to its neighbouring native dropdowns. */
.task-filters .task-recipient-filter{margin:0;min-width:0}
.task-recipient-filter>label{margin-bottom:.4rem}
.tasks-page .task-recipient-filter .task-recipient-picker{padding:0;border:0;background:transparent}
.task-recipient-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;padding:.35rem;background:var(--bg-surface,#080f20);border:1px solid var(--border-strong,#334155);border-radius:8px;box-shadow:0 8px 22px #0004}
.tasks-page .task-recipient-filter input[data-task-filter-search]{min-height:40px;border:1px solid var(--border-strong,#334155);background:var(--bg-input,#0f172a)}
.task-recipient-menu .task-recipient-options{position:static;max-height:220px;margin-top:.3rem;border:0;box-shadow:none}

.task-reply-tools{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin-top:.35rem;font-size:.78rem}.task-reply-edited{color:var(--text-muted,#94a3b8);font-style:italic}.tasks-page .task-reply-edit-link{display:inline;background:none;border:0;border-radius:0;box-shadow:none;padding:.15rem 0;min-height:0;min-width:0;width:auto;font:inherit;color:var(--text-link,#93c5fd);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.tasks-page .task-reply-edit-link:hover{color:var(--text-main,#e2e8f0)}.task-reply-history>summary{font-size:.8rem;color:var(--text-link,#93c5fd);cursor:pointer}.task-reply-history{margin:.35rem 0}

/* Recipient reminders stay red independently of ordinary unread activity. */
.task-unread-dot.task-reminder-dot{background:#ef4444;box-shadow:0 0 0 2px #ef444426}
.task-nav-link [data-task-nav-dot]{margin:0;flex:0 0 .55rem}
.task-nav-link.task-has-reminders .task-count{background:#ef444426;color:#fca5a5}
body[data-theme="light"] .task-nav-link.task-has-reminders .task-count{background:#dc26261a;color:#b91c1c}
.task-status-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .5rem}
.task-table th:first-child{width:24%}.task-table th:nth-child(2){width:14%}.task-table th:nth-child(3){width:20%}.task-table th:nth-child(4){width:8%}.task-table th:nth-child(5){width:16%}
[data-task-remind]{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin:0}
.task-remind-button{min-height:44px;padding:.3rem .55rem;border:1px solid var(--border-strong,#334155);border-radius:.4rem;background:var(--btn-secondary-bg,#1a2b40);color:var(--btn-secondary-text,#e2e8f0);font:inherit;font-size:.8rem;cursor:pointer}
.task-remind-button:disabled{opacity:.6;cursor:wait}
.task-remind-feedback{flex-basis:100%;font-size:.74rem;line-height:1.4;overflow-wrap:anywhere}
.task-remind-feedback:empty{display:none}
.task-remind-feedback[data-kind="error"],.task-reminder-error{color:#f87171}
.task-remind-feedback[data-kind="success"]{color:#4ade80}
body[data-theme="light"] .task-remind-feedback[data-kind="error"],body[data-theme="light"] .task-reminder-error{color:#b91c1c}
body[data-theme="light"] .task-remind-feedback[data-kind="success"]{color:#15803d}
.task-reminder-dialog{width:min(520px,calc(100vw - 28px));border-top:4px solid #ef4444}
.task-reminder-dialog h2{margin-top:0;font-size:1.25rem}
.task-reminder-title{font-weight:700;font-size:1.15rem;overflow-wrap:anywhere}
.task-reminder-sender{color:var(--text-muted,#94a3b8);overflow-wrap:anywhere}
.task-reminder-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.task-reminder-actions a,.task-reminder-actions button{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.task-reminder-dialog [hidden]{display:none!important}
.task-reminder-dialog :focus-visible{outline:2px solid var(--text-link,#93c5fd);outline-offset:3px}
@media(max-width:480px){.task-reminder-actions>*{flex:1 1 100%}.task-reminder-dialog{padding:1rem}}