/* ==========================================================================
   Theme: Asana-inspired minimal. Dark shell (top bar + sidebar), white canvas.
   ========================================================================== */
:root {
    --app-topbar-height: 48px;
    --app-topbar-bg: #2e2e30;
    --app-sidebar-width: 184px;
    --app-sidebar-bg: #1e1f21;
    --app-sidebar-text: #f5f4f3;
    --app-sidebar-muted: #a2a0a2;
    --app-sidebar-hover: rgba(255, 255, 255, .08);
    --app-sidebar-active: rgba(255, 255, 255, .16);
    --app-gutter: 1.5rem;

    --bs-body-font-size: .9375rem;
    --bs-body-color: #1e1f21;
    --bs-secondary-color: #6d6e6f;
    --bs-border-color: #e8e8e8;
    --bs-tertiary-bg: #f5f4f3;

    --bs-primary: #4573d2;
    --bs-primary-rgb: 69, 115, 210;
    --bs-primary-text-emphasis: #2f55a4;
    --bs-primary-bg-subtle: #e8effb;
    --bs-primary-border-subtle: #b9ccf0;
    --bs-link-color: #4573d2;
    --bs-link-color-rgb: 69, 115, 210;
    --bs-link-hover-color: #2f55a4;
    --bs-link-hover-color-rgb: 47, 85, 164;
    --bs-focus-ring-color: rgba(69, 115, 210, .25);
}

@media (max-width: 991.98px) {
    :root {
        --app-gutter: 1rem;
    }
}

.btn-primary {
    --bs-btn-bg: #4573d2;
    --bs-btn-border-color: #4573d2;
    --bs-btn-hover-bg: #3a64bd;
    --bs-btn-hover-border-color: #3a64bd;
    --bs-btn-active-bg: #3159ab;
    --bs-btn-active-border-color: #3159ab;
    --bs-btn-disabled-bg: #4573d2;
    --bs-btn-disabled-border-color: #4573d2;
    --bs-btn-focus-shadow-rgb: 69, 115, 210;
}

.btn-outline-primary {
    --bs-btn-color: #4573d2;
    --bs-btn-border-color: #4573d2;
    --bs-btn-hover-bg: #4573d2;
    --bs-btn-hover-border-color: #4573d2;
    --bs-btn-active-bg: #4573d2;
    --bs-btn-active-border-color: #4573d2;
}

.btn-outline-secondary {
    --bs-btn-color: #1e1f21;
    --bs-btn-border-color: #cfcbcb;
    --bs-btn-hover-color: #1e1f21;
    --bs-btn-hover-bg: #f5f4f3;
    --bs-btn-hover-border-color: #afabac;
    --bs-btn-active-color: #1e1f21;
    --bs-btn-active-bg: #eeecec;
    --bs-btn-active-border-color: #afabac;
}

.btn {
    --bs-btn-font-weight: 500;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: #4573d2;
    border-color: #4573d2;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle);
    --bs-nav-pills-link-active-color: var(--bs-primary-text-emphasis);
}

.progress {
    --bs-progress-bar-bg: #4573d2;
}

.pagination {
    --bs-pagination-active-bg: #4573d2;
    --bs-pagination-active-border-color: #4573d2;
    --bs-pagination-color: #4573d2;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle);
    --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-font-size: .9rem;
}

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-cap-bg: transparent;
}

.table {
    --bs-table-border-color: var(--bs-border-color);
}

.min-w-0 {
    min-width: 0;
}

/* ---- Shell ------------------------------------------------------------- */
.app-body {
    background-color: var(--bs-body-bg);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--app-topbar-height);
    padding: 0 .75rem;
    background-color: var(--app-topbar-bg);
    color: #fff;
}

.app-topbar-start,
.app-topbar-end {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.app-topbar-end {
    justify-content: flex-end;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: #e0e0e0;
    font-size: 1.35rem;
}

.topbar-icon-btn:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.topbar-create-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2rem;
    padding: 0 .85rem 0 .3rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: none;
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
}

.topbar-create-btn:hover {
    background-color: rgba(255, 255, 255, .1);
}

.topbar-create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: #f06a6a;
    font-size: .85rem;
}

.app-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 560px;
    min-width: 0;
}

.app-topbar-search > .bi-search {
    position: absolute;
    left: .75rem;
    color: #a2a0a2;
    pointer-events: none;
}

.app-topbar-search input {
    width: 100%;
    height: 2rem;
    padding: 0 4.25rem 0 2.1rem;
    border: 1px solid #565557;
    border-radius: 999px;
    background-color: #424244;
    color: #fff;
    font-size: .9rem;
}

.app-topbar-search input::placeholder {
    color: #c5c3c4;
}

.app-topbar-search input:focus {
    outline: none;
    border-color: #8a8889;
    background-color: #fff;
    color: #1e1f21;
}

.app-topbar-search kbd {
    position: absolute;
    right: .5rem;
    padding: .1rem .4rem;
    border: 1px solid #6d6e6f;
    background: none;
    color: #c5c3c4;
    font-size: .7rem;
}

.app-topbar-search input:focus ~ kbd {
    display: none !important;
}

.topbar-avatar-btn {
    padding: 0;
    border: 0;
    background: none;
}

.app-shell {
    display: flex;
    min-height: calc(100vh - var(--app-topbar-height));
}

.offcanvas-lg.app-sidebar {
    --bs-offcanvas-width: var(--app-sidebar-width);
    --bs-offcanvas-bg: var(--app-sidebar-bg);
    background-color: var(--app-sidebar-bg) !important;
    color: var(--app-sidebar-text);
}

@media (min-width: 992px) {
    .offcanvas-lg.app-sidebar {
        position: sticky;
        top: var(--app-topbar-height);
        display: block;
        flex-shrink: 0;
        width: var(--app-sidebar-width);
        height: calc(100vh - var(--app-topbar-height));
        overflow-y: auto;
        border-right: 1px solid #424244;
    }

    .sidebar-collapsed .offcanvas-lg.app-sidebar {
        display: none;
    }
}

.app-sidebar-nav {
    padding: .25rem .45rem 1.5rem;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    min-height: 32px;
    padding: .25rem .55rem;
    border-radius: .4rem;
    color: var(--app-sidebar-text);
    font-size: .875rem;
}

.app-sidebar .nav-link > .bi {
    font-size: .95rem;
    color: var(--app-sidebar-muted);
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus-visible {
    color: #fff;
    background-color: var(--app-sidebar-hover);
}

.app-sidebar .nav-link.active {
    color: #fff;
    background-color: var(--app-sidebar-active);
}

.app-sidebar .nav-link.active > .bi {
    color: #fff;
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    padding: .85rem .1rem .2rem .15rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--app-sidebar-muted);
}

.sidebar-heading-action {
    display: inline-flex;
    padding: .1rem .25rem;
    border-radius: .25rem;
    color: var(--app-sidebar-muted);
}

.sidebar-heading-action:hover {
    background-color: var(--app-sidebar-hover);
    color: #fff;
}

.sidebar-divider {
    margin: .5rem .6rem 0;
    border-color: #424244;
    opacity: 1;
}

.app-sidebar .sidebar-muted {
    color: var(--app-sidebar-muted);
    font-size: .85rem;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--app-gutter);
}

.app-main-flush {
    padding: 0;
}

.app-main-flush > .alert {
    margin: var(--app-gutter) var(--app-gutter) 0;
}

/* Page header: full-width title bar with a bottom rule */
.app-page-header {
    margin: calc(var(--app-gutter) * -1) calc(var(--app-gutter) * -1) var(--app-gutter);
    padding: 1.1rem var(--app-gutter);
    border-bottom: 1px solid var(--bs-border-color);
}

.app-page-header h1 {
    font-size: 1.35rem;
    font-weight: 500;
}

.app-main > .alert + .app-page-header {
    margin-top: 0;
}

/* Filter pills (Owner / Members / Status) */
.filter-pill {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .8rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-color: #1e1f21;
    --bs-btn-border-color: #cfcbcb;
    --bs-btn-hover-bg: #f5f4f3;
    --bs-btn-hover-border-color: #afabac;
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-primary-border-subtle);
    border-radius: 999px;
}

.search-input-pill {
    position: relative;
}

.search-input-pill > .bi-search {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.search-input-pill .form-control {
    padding-left: 2.4rem;
    border-radius: 999px;
}

/* Flat data tables (Browse projects, My tasks, Users…) */
.table-minimal {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.table-minimal > thead th {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom-color: var(--bs-border-color);
    font-size: .8rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.table-minimal > tbody td {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.table-minimal > tbody tr:hover > * {
    --bs-table-bg-state: #f9f8f8;
}

.project-icon-xs {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: .3rem !important;
    font-size: .75rem !important;
}

.project-icon-sm {
    width: 1.6rem !important;
    height: 1.6rem !important;
    border-radius: .4rem !important;
    font-size: .95rem !important;
}

.text-joined {
    color: #58a182;
}

/* Home */
.home {
    max-width: 1200px;
    margin: 0 auto;
}

.home-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: .5rem 0 1.25rem;
}

.home-date {
    font-size: .875rem;
    font-weight: 600;
}

.home-greeting {
    margin: .15rem 0 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -.01em;
}

.home-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding-bottom: .35rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.home-stats-period {
    padding: .15rem .35rem;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.home-stats-period:hover,
.home-stats-period[aria-expanded="true"] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.home-card {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
}

.home-card-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.5rem .5rem;
}

.home-card-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
}

.home-card-avatar {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .75rem;
}

.home-tabs {
    gap: .25rem;
    padding: .25rem 1.5rem .6rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.home-tabs .nav-link {
    padding: .3rem .55rem;
    border-radius: .375rem;
    color: var(--bs-secondary-color);
    font-size: .9rem;
    font-weight: 600;
}

.home-tabs .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.home-tabs .nav-link.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.home-tasks-body {
    min-height: 420px;
    padding: .75rem 1.5rem 1.25rem;
}

.home-create-task {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
    padding: .35rem .5rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 500;
}

.home-create-task:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.home-task-table {
    table-layout: fixed;
    border-top: 1px solid var(--bs-border-color);
}

.home-task-table td {
    padding: .6rem .35rem;
    vertical-align: middle;
    border-color: var(--bs-border-color);
}

.home-task-table tr.task-row:hover > * {
    --bs-table-bg-state: var(--bs-tertiary-bg);
}

.home-task-table tr.task-row.is-open > * {
    --bs-table-bg-state: var(--bs-primary-bg-subtle);
}

.home-task-check {
    width: 2rem;
}

.home-task-project {
    width: 220px;
    text-align: end;
}

.home-task-due {
    width: 110px;
    font-size: .85rem;
    text-align: end;
    white-space: nowrap;
}

/* About 9 rows are visible; the rest scroll inside the card. */
.home-task-scroll {
    --home-row-height: 2.75rem;
    max-height: calc(var(--home-row-height) * 9 + 1px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b9b7b8 transparent;
}

.home-task-scroll:focus-visible {
    outline: 2px solid var(--bs-focus-ring-color);
    outline-offset: 2px;
}

.home-task-scroll .task-row > td {
    height: var(--home-row-height);
}

.home-see-all {
    display: inline-block;
    margin-top: .6rem;
    padding: .25rem .5rem;
    border-radius: .375rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}

.home-see-all:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.home-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 4rem 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.home-empty > .bi {
    font-size: 2.25rem;
    color: var(--bs-border-color);
}

@media (max-width: 575.98px) {
    .home-card-head,
    .home-tabs,
    .home-tasks-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-task-due {
        width: 84px;
    }
}
.project-tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: .5rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.project-tile:hover {
    background-color: var(--bs-tertiary-bg);
}

.project-tile-new .project-icon {
    border: 1px dashed #afabac;
    background: none;
    color: var(--bs-secondary-color);
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow: hidden;
}

.metric-strip > a {
    padding: .9rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-right: 1px solid var(--bs-border-color);
}

.metric-strip > a:hover {
    background-color: var(--bs-tertiary-bg);
}

.metric-strip .metric-value {
    font-size: 1.35rem;
    font-weight: 500;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #f1bd6c;
    color: #1e1f21;
    font-size: .75rem;
    font-weight: 600;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .75rem;
    font-weight: 600;
}

/* Kanban board: columns scroll horizontally on small screens */
.task-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    align-items: flex-start;
}

.task-board-column {
    flex: 1 0 270px;
    max-width: 340px;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    transition: background-color .15s, border-color .15s;
}

.task-board-column.is-drag-over {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}

.task-board-list {
    min-height: 4rem;
}

.task-card[draggable="true"] {
    cursor: grab;
}

.task-card.is-dragging {
    opacity: .5;
}

.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.nav-tabs-scroll .nav-link {
    white-space: nowrap;
}

/* Project page (list-style layout) */
.project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background-color: var(--project-color);
    color: #fff;
    font-size: 1.1rem;
}

.project-tabs .nav-link {
    margin-bottom: .5rem;
    padding: .3rem .7rem;
    border-radius: .375rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
    font-size: .925rem;
}

.project-tabs .nav-link:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.project-tabs .nav-link.active {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.btn-toolbar-item {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-border-color: transparent;
}

.avatar-sm {
    width: 1.6rem;
    height: 1.6rem;
    font-size: .65rem;
}

.avatar-empty {
    background-color: transparent;
    border: 1px dashed var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.avatar-stack {
    display: inline-flex;
}

.avatar-stack .avatar {
    border: 2px solid var(--bs-body-bg);
}

.avatar-stack .avatar + .avatar {
    margin-left: -.45rem;
}

.task-list-table {
    min-width: 760px;
    font-size: .9rem;
}

.task-list-table > :not(caption) > * > * {
    padding: .3rem .75rem;
}

.task-list-table thead th {
    font-size: .8rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color);
}

.task-list-table th + th,
.task-list-table td + td {
    border-left: 1px solid var(--bs-border-color);
}

.task-list-table tr.task-row:hover > * {
    --bs-table-bg-state: var(--bs-tertiary-bg);
}

.task-list-table .task-group-row > th {
    padding-top: 1rem;
    border-left: 0;
}

.task-group-chevron {
    transition: transform .15s;
}

[aria-expanded="false"] > .task-group-chevron {
    transform: rotate(-90deg);
}

.task-check {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
}

button.task-check:hover,
.task-row.is-done .task-check {
    color: var(--bs-success);
}

.task-name {
    min-width: 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.task-name:hover {
    text-decoration: underline;
}

.task-row.is-done .task-name {
    color: var(--bs-secondary-color);
}

.task-row.is-leaving {
    opacity: 0;
    transition: opacity .3s ease-out;
}

.task-row.is-new > * {
    animation: task-row-flash 2.5s ease-out;
}

@keyframes task-row-flash {
    from { --bs-table-bg-state: var(--bs-warning-bg-subtle); }
}

.task-inline-input {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.task-inline-input:hover {
    border-color: var(--bs-border-color);
}

.task-inline-input:focus {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-body-bg);
}

.form-select.task-inline-input:not(:hover):not(:focus) {
    background-image: none;
}

.task-add-row .task-add-assignee {
    opacity: .75;
}

.task-add-row .task-inline-input::placeholder {
    color: var(--bs-secondary-color);
}

/* Task detail: side panel on wide screens, full-height sheet on smaller ones */
.task-panel-host {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.app-page-padding {
    padding: var(--app-gutter);
}

.project-tile.is-open {
    background-color: var(--bs-primary-bg-subtle);
}

.task-panel-loading {
    padding: 2rem;
    color: var(--bs-secondary-color);
}

.task-list-table tr.task-row.is-open > * {
    --bs-table-bg-state: var(--bs-primary-bg-subtle);
}

.task-open-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    opacity: 0;
}

.task-row:hover .task-open-link,
.task-row.is-open .task-open-link {
    opacity: 1;
}

.task-panel {
    display: flex;
    flex-direction: column;
}

.task-panel .task-detail {
    min-height: 100%;
}

@media (min-width: 1200px) {
    .task-panel-host.has-panel {
        grid-template-columns: minmax(0, 1fr) minmax(460px, 44%);
    }

    .task-panel {
        position: sticky;
        top: var(--app-topbar-height);
        align-self: start;
        height: calc(100vh - var(--app-topbar-height));
        overflow-y: auto;
    }
}

@media (max-width: 1199.98px) {
    .task-panel {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1045;
        width: min(100%, 580px);
        overflow-y: auto;
        box-shadow: var(--bs-box-shadow-lg);
    }

    .task-panel-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1044;
        background-color: rgba(0, 0, 0, .35);
    }
}

.task-detail-bar {
    position: sticky;
    top: 0;
    z-index: 2;
}

.task-detail-composer {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.task-page {
    max-width: 860px;
}

.task-title-input {
    font-size: 1.4rem;
    font-weight: 600;
}

.task-fields {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    row-gap: .35rem;
    column-gap: .75rem;
}

.task-field-label {
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.task-subtask {
    padding: .3rem .25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.task-subtask-list .task-subtask:first-child {
    border-top: 1px solid var(--bs-border-color);
}

.task-subtask.is-done .task-name {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

.task-subtask.is-done .task-check {
    color: var(--bs-success);
}

.task-feed-tabs .nav-link {
    padding: .25rem .7rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.task-feed-tabs .nav-link.active {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.task-comment-body {
    font-size: .925rem;
    overflow-wrap: anywhere;
}

.task-composer-box:focus-within {
    border-color: var(--bs-primary-border-subtle) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

@media (max-width: 575.98px) {
    .task-fields {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .task-subtask-add {
        flex-wrap: wrap;
    }
}

/* My tasks table (Asana-style columns) */
.my-tasks-table {
    min-width: 1100px;
}

.project-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .5rem;
    border-radius: .375rem;
    background-color: color-mix(in srgb, var(--project-color) 14%, transparent);
    color: var(--bs-body-color);
    font-size: .8rem;
    text-decoration: none;
    white-space: nowrap;
}

.project-pill > .bi {
    flex-shrink: 0;
    font-size: .5rem;
    color: var(--project-color);
}

a.project-pill:hover {
    background-color: color-mix(in srgb, var(--project-color) 24%, transparent);
    color: var(--bs-body-color);
}

.priority-pill {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: .375rem;
    font-size: .8rem;
    font-weight: 500;
    color: #1e1f21;
}

.priority-pill.priority-low { background-color: #e0e0e0; }
.priority-pill.priority-medium { background-color: #f8df72; }
.priority-pill.priority-high { background-color: #f9aaa1; }
.priority-pill.priority-urgent { background-color: #e8384f; color: #fff; }

.my-tasks-table .date-picker-trigger {
    padding-left: .35rem;
}

/* Status picker (list views) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .15rem .55rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background-color: color-mix(in srgb, var(--status-color) 12%, transparent);
    color: var(--bs-body-color);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill > .bi {
    color: var(--status-color);
    font-size: .8rem;
}

.status-pill:not(.is-static):hover,
.status-pill[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--status-color) 45%, transparent);
}

.status-pill.is-static {
    opacity: 1;
    cursor: default;
}

.status-picker-menu {
    width: 240px;
}

.status-picker-search {
    margin: -.5rem -.5rem .35rem;
    padding: .5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.status-picker-group[hidden] + .status-picker-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Status as a form field (edit forms, filters) */
.status-field-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    text-align: start;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.status-field-toggle > .bi {
    flex-shrink: 0;
    color: var(--status-color);
}

.status-picker-group + .status-picker-group {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--bs-border-color);
}

.status-picker-heading {
    padding: .25rem .5rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.status-picker-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .35rem .5rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-picker-option:hover,
.status-picker-option:focus-visible {
    background-color: var(--bs-tertiary-bg);
}

.status-picker-option[aria-checked="true"] {
    background-color: var(--bs-tertiary-bg);
    font-weight: 700;
}

.status-picker-check {
    visibility: hidden;
}

.status-picker-option[aria-checked="true"] .status-picker-check {
    visibility: visible;
}

/* Date picker (start/due + repeat) */
.date-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .2rem .5rem .2rem .25rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .875rem;
}

.date-picker-trigger:hover,
.date-picker-trigger[aria-expanded="true"] {
    border-color: var(--bs-border-color);
}

.date-picker-menu {
    width: 300px;
}

.date-box {
    flex: 1 1 0;
    min-width: 0;
    padding: .35rem .6rem;
    border: 1px solid #cfcbcb;
    border-radius: .375rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    text-align: left;
    white-space: nowrap;
}

.date-box[data-date-box="start"]:not(.has-value):not(.is-active) {
    border-color: transparent;
    font-weight: 500;
    color: var(--bs-body-color);
}

.date-box.has-value {
    color: var(--bs-body-color);
}

.date-box.is-active {
    border: 2px solid #4573d2;
    padding: calc(.35rem - 1px) calc(.6rem - 1px);
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: .15rem;
    text-align: center;
}

.date-picker-weekday {
    padding-bottom: .25rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.date-picker-day {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--bs-body-color);
    font-size: .85rem;
}

.date-picker-day:hover {
    background-color: var(--bs-tertiary-bg);
}

.date-picker-day.is-outside {
    color: #7c8db5;
}

.date-picker-day.is-today {
    box-shadow: inset 0 0 0 1px #4573d2;
    font-weight: 700;
}

.date-picker-day.in-range {
    border-radius: 0;
    background-color: var(--bs-primary-bg-subtle);
}

.date-picker-day.is-start {
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 0 0 2px #4573d2;
}

.date-picker-day.is-due {
    background-color: #4573d2;
    color: #fff;
    font-weight: 600;
}

.date-picker-day-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.date-picker-day-toggle .form-check-input {
    margin: 0;
}

/* "New task" composer (bottom-right) */
.task-composer {
    position: fixed;
    right: 1.25rem;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 1.5rem));
    height: min(500px, calc(100vh - var(--app-topbar-height) - 1.5rem));
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-radius: .75rem .75rem 0 0;
    background-color: var(--bs-body-bg);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .18);
}

.task-composer.is-minimized {
    height: auto;
    width: min(320px, calc(100vw - 1.5rem));
}

.task-composer.is-minimized .task-composer-form {
    display: none;
}

.task-composer.is-minimized .task-composer-header {
    cursor: pointer;
    border-bottom: 0;
}

.task-composer-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.task-composer-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.task-composer-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.5rem;
    overflow-y: auto;
}

.task-composer-title {
    width: 100%;
    margin-bottom: .75rem;
    border: 0;
    background: none;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.task-composer-title:focus {
    outline: none;
}

.task-composer-title::placeholder {
    color: #6d6e6f;
}

.composer-pill {
    width: auto;
    max-width: 200px;
    border-color: #cfcbcb;
    border-radius: 999px;
}

.composer-pill[data-composer-project] {
    border-style: dashed;
}

.avatar-xs {
    width: 1.3rem !important;
    height: 1.3rem !important;
    font-size: .55rem !important;
}

.composer-chip {
    display: inline-flex;
    align-items: center;
    max-width: 240px;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
}

.composer-chip.is-empty {
    border: 1px dashed #cfcbcb;
    background: none;
}

.composer-chip-main {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .15rem .4rem .15rem .2rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--bs-body-color);
}

.composer-chip-main:hover:not(:disabled) {
    background-color: #eceae9;
}

.composer-chip-main:disabled {
    opacity: 1;
    cursor: default;
}

.composer-chip.is-empty .composer-chip-main {
    padding-right: .6rem;
    color: var(--bs-secondary-color);
}

.composer-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: .15rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--bs-secondary-color);
}

.composer-chip-remove:hover {
    background-color: #dcdad9;
    color: var(--bs-body-color);
}

.composer-assignee-menu {
    width: 260px;
}

.composer-assignee-options {
    max-height: 220px;
    overflow-y: auto;
}

.composer-assignee-options [aria-selected="true"] {
    background-color: var(--bs-primary-bg-subtle);
}

.task-composer-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 575.98px) {
    .task-composer {
        right: 0;
        width: 100vw;
        border-radius: .75rem .75rem 0 0;
    }
}

/* Controls only needed without JavaScript (e.g. "Apply" when filters auto-apply) */
.js .js-hidden {
    display: none !important;
}

[data-live-view].is-loading table,
[data-live-view].is-loading .empty-state {
    opacity: .55;
    transition: opacity .15s;
}

/* Task filter menu (Asana-style quick filters) */
.filter-menu {
    width: min(460px, calc(100vw - 2rem));
}

.filter-chip {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: .85rem;
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: #cfcbcb;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: #afabac;
    --bs-btn-active-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-border-color: var(--bs-primary-border-subtle);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
}

.filter-chip > .bi {
    color: var(--bs-secondary-color);
}

.filter-chip.active > .bi {
    color: inherit;
}

.filter-chip-group > .filter-chip:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filter-chip-group > .dropdown-toggle-split {
    --bs-btn-padding-x: .5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Sidebar pins */
.sidebar-pin-icon {
    font-size: .9rem !important;
}

/* Nested subtasks in the list view */
.task-expand,
.task-expand-spacer {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
}

.task-expand {
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.task-expand:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.task-expand > .bi {
    transition: transform .15s;
}

.task-expand[aria-expanded="true"] > .bi {
    transform: rotate(90deg);
}

.task-list-table tr.is-subtask > td.task-name-cell {
    padding-left: 2.25rem;
}

.task-list-table .task-status-cell {
    white-space: nowrap;
}

.task-list-table tr.is-subtask .task-name {
    font-size: .875rem;
}

/* Overview tab: content + grey status column */
.overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.overview-main {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem var(--app-gutter);
}

.overview-aside {
    padding: 1.5rem;
    background-color: var(--bs-tertiary-bg);
}

@media (min-width: 1200px) {
    .overview-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
        min-height: calc(100vh - var(--app-topbar-height) - 100px);
    }
}

.project-timeline > li {
    position: relative;
    padding: 0 0 1.5rem 2.5rem;
}

.project-timeline > li::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: .25rem;
    left: .8rem;
    border-left: 1px dashed #cfcbcb;
}

.project-timeline > li:last-child::before {
    display: none;
}

.project-timeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid #cfcbcb;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

/* Dashboard charts (single series; tokens per the data-viz method) */
.project-dashboard {
    --viz-series-1: #4573d2;
    --viz-grid: #e1e0d9;
    --viz-baseline: #c3c2b7;
    --viz-muted: #898781;
}

.viz-card {
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
}

.viz-title {
    margin-bottom: .15rem;
    font-size: 1rem;
    font-weight: 500;
}

.viz-subtitle {
    margin-bottom: .75rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.viz-empty {
    margin: 1.5rem 0;
    text-align: center;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.viz-stat {
    color: var(--bs-body-color);
}

.viz-stat:hover {
    border-color: #cfcbcb;
}

.viz-stat-label {
    display: block;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.viz-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.viz-bars {
    margin-top: .75rem;
}

.viz-bar-row {
    display: grid;
    grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
    font-size: .85rem;
}

.viz-bar-label {
    color: var(--bs-secondary-color);
}

.viz-bar-track {
    display: block;
    height: 16px;
    border-left: 1px solid var(--viz-baseline);
}

.viz-bar {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background-color: var(--viz-series-1);
}

.viz-bar-row:hover .viz-bar {
    filter: brightness(.9);
}

.viz-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.viz-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.viz-grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.viz-baseline {
    stroke: var(--viz-baseline);
    stroke-width: 1;
}

.viz-axis-text {
    fill: var(--viz-muted);
    font-size: 11px;
}

.viz-column {
    fill: var(--viz-series-1);
}

.viz-hit {
    fill: transparent;
}

.viz-hit:hover {
    fill: rgba(69, 115, 210, .06);
}

.viz-table {
    margin-top: .75rem;
    font-size: .8rem;
}

.viz-table > summary {
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.viz-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    padding: .3rem .55rem;
    border-radius: .375rem;
    background-color: #1e1f21;
    color: #fff;
    font-size: .8rem;
    pointer-events: none;
    white-space: nowrap;
}

/* Calendar */
.calendar-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--bs-border-color);
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    min-width: 840px;
}

.calendar-weekday {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
}

.calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 150px;
    padding: .35rem .4rem .5rem;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.calendar-week .calendar-day {
    min-height: 60vh;
}

.calendar-day:nth-child(7n + 7) {
    border-right: 0;
}

.calendar-day.is-weekend {
    background-color: #fbfaf9;
}

.calendar-day.is-outside .calendar-date {
    color: #afabac;
}

.calendar-day.is-drag-over {
    background-color: var(--bs-primary-bg-subtle);
}

.calendar-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .35rem;
    border-radius: .375rem;
    font-size: .9rem;
}

.calendar-day.is-today .calendar-date {
    background-color: #4573d2;
    color: #fff;
    font-weight: 600;
}

.calendar-day-tasks {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.cal-chip {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    padding: .2rem .4rem;
    border-left: 3px solid var(--chip-accent, #afabac);
    border-radius: .3rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: .8rem;
    text-decoration: none;
}

.cal-chip:hover {
    background-color: #eceae9;
    color: var(--bs-body-color);
}

.cal-chip[draggable="true"] {
    cursor: grab;
}

.cal-chip.is-dragging {
    opacity: .5;
}

.cal-chip.is-done {
    color: var(--bs-secondary-color);
}

.cal-chip.is-done .cal-chip-check {
    color: var(--bs-success);
}

.cal-chip.is-overdue {
    color: var(--bs-danger-text-emphasis);
}

.cal-chip-avatar {
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: .5rem !important;
}

.cal-chip-check {
    color: var(--bs-secondary-color);
}

.calendar-more,
.calendar-add-btn {
    padding: .1rem .3rem;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    text-align: left;
}

.calendar-more:hover,
.calendar-add-btn:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.calendar-add-btn {
    margin-top: auto;
    align-self: flex-end;
    opacity: 0;
}

.calendar-day:hover .calendar-add-btn,
.calendar-add-btn:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .calendar-add-btn {
        opacity: 1;
    }
}

/* Page (rich text) */
.page-toolbar {
    position: sticky;
    top: var(--app-topbar-height);
    z-index: 5;
    background-color: var(--bs-body-bg);
}

.page-canvas {
    max-width: 780px;
    margin: 0 auto;
}

.page-title-input {
    width: 100%;
    margin-bottom: 1rem;
    border: 0;
    background: none;
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.page-title-input:focus {
    outline: none;
}

.page-title-input::placeholder {
    color: #afabac;
}

.page-body {
    position: relative;
    min-height: 40vh;
    font-size: 1rem;
    line-height: 1.65;
    outline: none;
    overflow-wrap: anywhere;
}

.page-body.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #afabac;
    pointer-events: none;
}

.page-body h1 { font-size: 1.75rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.page-body h2 { font-size: 1.35rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.page-body h3 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 .4rem; }
.page-body p { margin-bottom: .6rem; }
.page-body blockquote { margin: .75rem 0; padding-left: 1rem; border-left: 3px solid #cfcbcb; color: var(--bs-secondary-color); }
.page-body mark { padding: 0 .15rem; background-color: #fcf1c4; }
.page-body code { padding: .1rem .3rem; border-radius: .25rem; background-color: var(--bs-tertiary-bg); color: #b33a3a; }

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    font-size: 1.25rem;
}

/* ==========================================================================
   Login (guest layout): split screen, dark brand panel + clean form.
   ========================================================================== */
.auth-body {
    background-color: #f6f5f3;
}

.auth-shell {
    display: flex;
    min-height: 100vh;
}

.auth-brand {
    position: relative;
    flex: 0 0 52%;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3.5rem;
    overflow: hidden;
    background: linear-gradient(155deg, #1e1f21 0%, #2a2b3d 55%, #2f3a66 100%);
    color: #f5f4f3;
}

.auth-brand-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

.auth-brand-glow-1 {
    top: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
    background: #f06a6a;
    opacity: .35;
}

.auth-brand-glow-2 {
    bottom: -160px;
    left: -100px;
    width: 460px;
    height: 460px;
    background: #4573d2;
}

.auth-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.auth-logo-dark {
    color: var(--bs-body-color);
}

.auth-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background: linear-gradient(135deg, #f06a6a, #f8b44f);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 6px 18px rgba(240, 106, 106, .35);
}

.auth-brand-copy {
    position: relative;
    max-width: 520px;
}

.auth-brand-title {
    margin-bottom: .75rem;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.auth-brand-title span {
    background: linear-gradient(90deg, #f8b44f, #f06a6a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-brand-lead {
    margin-bottom: 2rem;
    color: #c9c7cc;
    font-size: 1.05rem;
}

.auth-preview {
    padding: .9rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.auth-preview-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .5rem .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .9rem;
}

.auth-preview-dot {
    width: .7rem;
    height: .7rem;
    border-radius: .2rem;
    background: var(--dot);
}

.auth-preview-progress {
    width: 90px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .15);
    overflow: hidden;
}

.auth-preview-progress > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #58a182, #8fd3b0);
}

.auth-preview-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .88rem;
    animation: auth-row-in .5s ease-out both;
    animation-delay: var(--delay);
}

.auth-preview-row:last-child {
    border-bottom: 0;
}

.auth-preview-row > .bi {
    color: #a2a0a2;
}

.auth-preview-name {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-preview-name.is-done {
    color: #a2a0a2;
    text-decoration: line-through;
}

.auth-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .5rem;
    border-radius: .375rem;
    background: color-mix(in srgb, var(--status) 22%, transparent);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.auth-preview-pill > .bi {
    color: var(--status);
}

.auth-features {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    color: #c9c7cc;
    font-size: .88rem;
}

.auth-features .bi {
    margin-right: .4rem;
    color: #f8b44f;
}

.auth-brand-foot {
    position: relative;
    margin: 0;
    color: #8c8a8f;
    font-size: .8rem;
}

.auth-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    animation: auth-row-in .45s ease-out both;
}

.auth-title {
    margin-bottom: .35rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.auth-subtitle {
    margin-bottom: 1.75rem;
    color: var(--bs-secondary-color);
}

.auth-form .form-label {
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
}

.auth-input {
    position: relative;
}

.auth-input > .bi {
    position: absolute;
    top: 50%;
    left: .95rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.auth-input .form-control {
    height: 3rem;
    padding-left: 2.6rem;
    padding-right: 2.9rem;
    border-radius: .6rem;
    background-color: #fff;
    background-image: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input .form-control:focus {
    border-color: #4573d2;
    box-shadow: 0 0 0 .25rem rgba(69, 115, 210, .18);
}

.auth-input .form-control.is-invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .18);
}

.auth-input-action {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: .45rem;
    background: none;
    color: var(--bs-secondary-color);
}

.auth-input-action:hover,
.auth-input-action:focus-visible {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    border-radius: .6rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(69, 115, 210, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

.auth-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(69, 115, 210, .34);
}

.auth-submit .bi {
    transition: transform .15s ease;
}

.auth-submit:hover .bi {
    transform: translateX(3px);
}

.auth-help {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: .85rem;
    text-align: center;
}

@keyframes auth-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-preview-row,
    .auth-card {
        animation: none;
    }
}
/* "Completed ✓ Task" notice (bottom left) */
.completion-toasts {
    z-index: 1090;
}

.completion-toast {
    --bs-toast-max-width: 380px;
    width: auto;
    min-width: 280px;
    border: 0;
    border-top: 3px solid #58a182;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0 8px 28px rgba(30, 31, 33, .18);
}

.completion-toast-body {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .75rem .6rem .75rem 1rem;
}

.completion-toast-text {
    flex-grow: 1;
    min-width: 0;
    margin-right: .75rem;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.completion-toast-text > .bi {
    margin: 0 .1rem;
    color: var(--bs-primary);
}

.completion-toast-link {
    color: var(--bs-primary);
    text-decoration: none;
}

.completion-toast-link:hover {
    text-decoration: underline;
}

.completion-toast-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.completion-toast-btn:hover,
.completion-toast-btn:focus-visible {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
/* Project name menu + "Set color & icon" */
.project-menu-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: .3rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.dropdown > .btn:hover .project-menu-caret,
.dropdown > .btn[aria-expanded="true"] .project-menu-caret {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.project-menu {
    min-width: 250px;
    padding: .35rem;
}

.project-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .65rem;
    border-radius: .375rem;
    font-size: .9rem;
}

.project-menu .dropdown-item > .bi:first-child {
    width: 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.project-menu .dropdown-item.text-danger > .bi {
    color: var(--bs-danger) !important;
}

.project-menu .dropdown-item.active > .bi:first-child {
    color: inherit;
}

.project-menu-swatch {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: .25rem;
}

.appearance-menu {
    width: 262px;
    padding: .9rem;
}

.appearance-heading {
    margin-bottom: .5rem;
    font-size: .85rem;
    font-weight: 600;
}

.appearance-colors {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .3rem;
    margin-bottom: 1rem;
}

.appearance-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background-color: var(--swatch);
    color: #1e1f21;
    font-size: .8rem;
}

.appearance-color > .bi {
    visibility: hidden;
}

.appearance-color:hover {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--swatch);
}

.appearance-color[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px #4573d2;
}

.appearance-color[aria-checked="true"] > .bi {
    visibility: visible;
}

.appearance-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    max-height: 232px;
    overflow-y: auto;
    padding: .15rem;
}

.appearance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: #6d6e6f;
    font-size: 1.45rem;
}

.appearance-icon:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.appearance-icon[aria-checked="true"] {
    background-color: var(--project-color);
    color: #fff;
}
/* Notices in the same card style: colored top line by kind */
.completion-toast.is-dark,
.completion-toast.is-primary {
    border-top-color: #4573d2;
}

.completion-toast.is-danger {
    border-top-color: var(--bs-danger);
}

.completion-toast.is-warning {
    border-top-color: #f1bd6c;
}

.completion-toast-message {
    flex-grow: 1;
    min-width: 0;
    margin-right: .5rem;
    color: var(--bs-body-color);
    font-size: .9rem;
}

.completion-toast-action {
    flex-shrink: 0;
    margin-right: .15rem;
    padding: .25rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.completion-toast-action:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.completion-toast-sub {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: -.45rem;
    padding: 0 1rem .7rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.completion-toast-sub > span {
    flex-grow: 1;
}
/* Home counters (today / overdue / in progress) */
.home-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.home-metric {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}


.home-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .6rem;
    background-color: color-mix(in srgb, var(--metric-color) 14%, transparent);
    color: var(--metric-color);
    font-size: 1.2rem;
}

.home-metric-label {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.home-metric-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .home-metrics {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}
/* Inline "Add task" row at the top of task tables */
.task-add-top-row > td {
    background-color: #f5f8fe !important;
    border-top: 1px solid #4573d2 !important;
    border-bottom: 1px solid #4573d2 !important;
}

.task-add-top-row .task-inline-input {
    font-size: .9rem;
}

.task-add-top-row .task-inline-input,
.task-add-top-row .task-inline-input:focus {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.task-add-project {
    max-width: 100%;
    border-color: transparent;
    background-color: transparent;
    font-size: .8rem;
}

.task-add-project:hover,
.task-add-project:focus {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}
/* Whole task rows open the task (see app.js); controls inside keep their own cursor. */
tr.task-row[data-open-row] {
    cursor: pointer;
}
/* Task detail: Status / Assignee / Date field cards */
.field-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .field-cards {
        grid-template-columns: 1fr;
    }
}

.field-card {
    position: relative;
    min-width: 0;
    padding: .5rem .8rem .55rem;
    border-radius: .5rem;
    background-color: #f0f3f8;
    transition: background-color .15s ease;
}

.field-card:hover,
.field-card:focus-within {
    background-color: #e6ebf3;
}

.field-card-label {
    display: block;
    margin-bottom: .15rem;
    color: #5f6b7a;
    font-size: .78rem;
    font-weight: 500;
}

.field-card-value {
    font-size: .95rem;
}

.field-card-value.is-empty {
    color: #8a94a3;
}

/* The control fills the card, so a click anywhere on it opens the menu. */
.field-card .dropdown {
    position: static;
}

.field-card .status-pill,
.field-card .date-picker-trigger {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-size: .95rem;
    text-align: start;
}

.field-card .status-pill::after,
.field-card .date-picker-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.field-card .date-picker-trigger.text-body-secondary {
    color: #8a94a3 !important;
}

.field-card-select {
    appearance: none;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-body-color);
    font-size: .95rem;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
}

.field-card-select:has(option[value=""]:checked) {
    color: #8a94a3;
}

/* Status card: tinted in the status color with an accent bar. */
.field-card.is-status {
    padding-left: 1.05rem;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--status-color) 20%, #fff);
}

.field-card.is-status:hover,
.field-card.is-status:focus-within {
    background-color: color-mix(in srgb, var(--status-color) 28%, #fff);
}

.field-card.is-status::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: var(--status-color);
}

.field-card.is-status .field-card-label {
    color: color-mix(in srgb, var(--status-color) 80%, #1e1f21);
}

.field-card .status-pill {
    gap: .45rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.field-card .status-pill > .bi:first-child {
    font-size: 1rem;
}

.status-pill-caret {
    color: var(--bs-body-color) !important;
    font-size: .7rem !important;
}
/* Task status icons (ClickUp-style): dashed "to do", partly filled "in progress"/"review", check "completed". */
.status-icon {
    --status-icon-color: #87909e;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: -2px;
}

.status-icon-todo {
    border: 1.5px dashed var(--status-icon-color);
}

.status-icon-in_progress,
.status-icon-review {
    padding: 1.5px;
    border: 1.5px solid var(--status-icon-color);
    background: conic-gradient(var(--status-icon-color) 0 var(--status-icon-fill), transparent 0) content-box;
}

.status-icon-in_progress {
    --status-icon-color: #7b68ee;
    --status-icon-fill: 30%;
}

.status-icon-review {
    --status-icon-color: #4466ff;
    --status-icon-fill: 70%;
}

.status-icon-completed {
    background-color: #2e9e5b;
}

.status-icon-completed::after {
    content: "";
    position: absolute;
    top: 2.6px;
    left: 4.7px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

.status-icon-cancelled {
    border: 1.5px solid var(--status-icon-color);
}

.status-icon-cancelled::before,
.status-icon-cancelled::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 1.5px;
    background-color: var(--status-icon-color);
    transform: translate(-50%, -50%) rotate(45deg);
}

.status-icon-cancelled::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.field-card .status-icon {
    width: 16px;
    height: 16px;
}

/* Status menu, ClickUp-style */
.status-picker-menu {
    width: 248px;
    padding: .5rem !important;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(30, 31, 33, .14) !important;
}

.status-picker-search {
    margin: 0 0 .4rem;
    padding: 0 0 .5rem;
}

.status-picker-search .form-control {
    height: 2rem;
    border-radius: .45rem;
    font-size: .85rem;
}

.status-picker-search .form-control:focus {
    border-color: #4573d2;
    box-shadow: 0 0 0 3px rgba(69, 115, 210, .18);
}

.status-picker-heading {
    padding: .35rem .5rem .3rem;
    color: #6d6e6f;
    font-size: .75rem;
    font-weight: 500;
}

.status-picker-option {
    gap: .6rem;
    padding: .4rem .5rem;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.status-picker-option:hover,
.status-picker-option:focus-visible {
    background-color: #f3f3f3;
}

.status-picker-option[aria-checked="true"] {
    background-color: #ececec;
    font-weight: 700;
}
/* Status column removed: the name is the first column (status icon in front of it). */
.task-list-table > :is(thead, tbody) > tr > :first-child {
    padding-left: 1rem;
}

@media (min-width: 992px) {
    .task-list-table > :is(thead, tbody) > tr > :first-child {
        padding-left: 1.5rem;
    }
}

.task-list-table tr.is-subtask > td.task-name-cell {
    padding-left: 2.75rem;
}

/* Status icon button that replaces the check circle */
.status-pill.status-icon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
}

.status-pill.status-icon-toggle .status-icon {
    width: 16px;
    height: 16px;
}

.status-pill.status-icon-toggle:not(.is-static):hover,
.status-pill.status-icon-toggle[aria-expanded="true"] {
    background-color: var(--bs-tertiary-bg);
    box-shadow: none;
}

.top-add-status {
    width: 16px;
    height: 16px;
    margin: 0 .2rem;
}
/* Composer "in Project" picker */
.composer-project {
    position: relative;
    flex: 1 1 140px;
    min-width: 120px;
}

.composer-project-input {
    width: 100%;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .875rem;
}

.composer-project-input::placeholder {
    color: #6d6e6f;
}

.composer-project-input:hover {
    border-color: var(--bs-border-color);
}

.composer-project-input:focus {
    border-color: #4573d2;
    outline: none;
    box-shadow: 0 0 0 3px rgba(69, 115, 210, .15);
}

.composer-project-list {
    position: fixed;
    z-index: 1080;
    width: 430px;
    max-width: calc(100vw - 1rem);
    max-height: 232px;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(30, 31, 33, .16);
}

.composer-project-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border-radius: .375rem;
    color: var(--bs-body-color);
    font-size: .9rem;
    cursor: pointer;
}

.composer-project-option.is-active {
    background-color: var(--bs-tertiary-bg);
}

.composer-project-option[aria-selected="true"] {
    font-weight: 600;
}

.composer-project-members {
    flex-shrink: 0;
    padding: .05rem .45rem;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.composer-project-option.is-active .composer-project-members {
    background-color: var(--bs-body-bg);
}

.composer-project-empty {
    padding: .5rem .65rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}
/* Global search dropdown (top bar), Asana-style */
.app-topbar-search-clear {
    position: absolute;
    right: .45rem;
    display: inline-flex;
    padding: .15rem;
    border: 0;
    background: none;
    color: #8a8889;
    font-size: .95rem;
    line-height: 1;
}

.app-topbar-search-clear:hover {
    color: #1e1f21;
}

.app-topbar-search input:not(:placeholder-shown) ~ kbd {
    display: none !important;
}

.global-search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 1050;
    width: max(100%, 560px);
    max-width: calc(100vw - 1rem);
    max-height: min(560px, calc(100vh - var(--app-topbar-height) - 1.5rem));
    overflow-y: auto;
    padding: .75rem 0 .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 12px 36px rgba(30, 31, 33, .2);
    transform: translateX(-50%);
}

.gs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0 .9rem .6rem;
}

.gs-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border: 1px solid #cfcbcb;
    border-radius: 999px;
    background: none;
    color: var(--bs-body-color);
    font-size: .875rem;
    text-decoration: none;
}

.gs-chip:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.gs-chip[aria-pressed="true"],
.gs-chip.is-active {
    border-color: #4573d2;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.gs-section + .gs-section {
    margin-top: .35rem;
}

.gs-heading {
    padding: .45rem 1rem .25rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 500;
}

.gs-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .5rem 1rem;
    color: var(--bs-body-color);
    font-size: .9rem;
    text-decoration: none;
}

.gs-item:hover,
.gs-item.is-active {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.gs-item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: #4573d2;
}

.gs-title {
    min-width: 0;
    font-weight: 600;
}

.gs-meta {
    flex-shrink: 1;
    min-width: 0;
    margin-left: auto;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 400;
}

.gs-title .gs-meta {
    margin-left: 0;
}

.gs-count {
    flex-shrink: 0;
    padding: .05rem .45rem;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.gs-more {
    display: block;
    padding: .35rem 1rem .5rem;
    color: var(--bs-link-color);
    font-size: .85rem;
    text-decoration: none;
}

.gs-more:hover,
.gs-more.is-active {
    background-color: var(--bs-tertiary-bg);
    text-decoration: underline;
}

.gs-all {
    margin-top: .35rem;
    border-top: 1px solid var(--bs-border-color);
    font-weight: 400;
}

.gs-all > .bi {
    color: var(--bs-secondary-color);
}

.gs-hint {
    margin: 0;
    padding: .5rem 1rem .75rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}
/* Tabs (project views, My tasks, Home, task activity): icon + label; the active tab is a white rounded box. */
.view-tabs {
    gap: .35rem;
}

.view-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    background: none;
    color: #6d6e6f;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}

.view-tabs .nav-link > .bi {
    color: #8a8889;
    font-size: .95rem;
}

.view-tabs .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.view-tabs .nav-link.active,
.view-tabs .nav-link.active:hover {
    border-color: #d5d9df;
    background-color: var(--bs-body-bg);
    color: #1e1f21;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.view-tabs .nav-link.active > .bi {
    color: #1e1f21;
}

.view-tabs .nav-link:focus-visible {
    border-color: #4573d2;
    box-shadow: 0 0 0 3px rgba(69, 115, 210, .2);
}

.task-feed-tabs.view-tabs .nav-link {
    padding: .25rem .65rem;
    font-size: .85rem;
}
/* Segmented tab bar: tabs inside a light grey rounded bar, the active one is a white pill. */
.view-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .15rem;
    max-width: 100%;
    padding: .25rem;
    overflow-x: auto;
    border-radius: .8rem;
    background-color: #eef1f6;
    scrollbar-width: none;
}

.view-tabs::-webkit-scrollbar {
    display: none;
}

.view-tabs .nav-link,
.project-tabs.view-tabs .nav-link {
    margin-bottom: 0;
    padding: .35rem .9rem;
    border: 0;
    border-radius: .6rem;
    color: #5f6b7a;
}

.view-tabs .nav-link > .bi {
    color: #7b8594;
}

.view-tabs .nav-link:hover {
    background-color: rgba(255, 255, 255, .65);
    color: #1e1f21;
}

.view-tabs .nav-link.active,
.view-tabs .nav-link.active:hover {
    border: 0;
    background-color: #fff;
    color: #1e1f21;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06);
}

/* Home card and task activity place the bar inside their own layout. */
.home-tabs.view-tabs {
    display: flex;
    width: fit-content;
    margin: .25rem 1.5rem .75rem;
    padding: .25rem;
    border-bottom: 0;
}

.home-tabs.view-tabs + .home-tasks-body {
    border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 575.98px) {
    .home-tabs.view-tabs {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

.task-feed-tabs.view-tabs .nav-link {
    padding: .25rem .75rem;
}
/* Task side panel: slides in from the right, slides out on close (see openTaskPanel / closeTaskPanel). */
.task-panel {
    --panel-slide-from: 56px;
}

@media (max-width: 1199.98px) {
    .task-panel {
        --panel-slide-from: 100%;
    }

    .task-panel-backdrop:not([hidden]) {
        animation: task-panel-fade-in .22s ease-out;
    }

    .task-panel-backdrop.is-closing {
        animation: task-panel-fade-out .2s ease-in forwards;
    }
}

.task-panel.is-entering {
    animation: task-panel-slide-in .26s cubic-bezier(.22, .61, .36, 1);
}

.task-panel.is-closing {
    animation: task-panel-slide-out .2s ease-in forwards;
    pointer-events: none;
}

@keyframes task-panel-slide-in {
    from {
        opacity: 0;
        transform: translateX(var(--panel-slide-from));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes task-panel-slide-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(var(--panel-slide-from));
    }
}

@keyframes task-panel-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes task-panel-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .task-panel.is-entering,
    .task-panel.is-closing,
    .task-panel-backdrop:not([hidden]),
    .task-panel-backdrop.is-closing {
        animation: none;
    }
}
/* ==========================================================================
   Task side panel as a full-height right column (Asana-style).
   The panel scrolls on its own; the list on the left scrolls with the page and never moves the panel.
   ========================================================================== */
.task-panel {
    overscroll-behavior: contain;
}

@media (min-width: 1200px) {
    :root {
        --task-panel-width: clamp(460px, 42vw, 760px);
    }

    /* The panel is no longer a grid column: it is pinned to the right edge at full height. */
    .task-panel-host.has-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .task-panel {
        position: fixed;
        top: var(--app-topbar-height);
        right: 0;
        bottom: 0;
        z-index: 1020;
        align-self: auto; /* the old grid-column rule used start, which shrank the fixed panel */
        width: var(--task-panel-width);
        height: calc(100vh - var(--app-topbar-height));
        overflow-y: auto;
        box-shadow: -8px 0 24px rgba(30, 31, 33, .08);
    }

    /* The panel floats over the page: nothing behind it shifts, resizes or scrolls. */
}

/* Smaller screens: the panel covers the list; lock the page behind it while it is open. */
@media (max-width: 1199.98px) {
    body:has(.task-panel-host.has-panel) {
        overflow: hidden;
    }

    .task-panel {
        overscroll-behavior: contain;
    }
}
/* New task footer: icon-only due date and priority */
.composer-icon-field {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.composer-hidden-date {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.composer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .45rem;
    border: 1px dashed #b9b7b8;
    border-radius: 999px;
    background: none;
    color: #6d6e6f;
    font-size: .85rem;
}

.composer-icon-btn:hover,
.composer-icon-btn[aria-expanded="true"] {
    border-style: solid;
    border-color: #8a8889;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.composer-icon-field.has-value .composer-icon-btn {
    padding-right: .7rem;
    border-style: solid;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.composer-icon-clear {
    display: inline-flex;
    margin-left: -.15rem;
    padding: .1rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
}

.composer-icon-clear:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.composer-flag {
    border-style: solid;
    border-color: transparent;
}

.composer-flag > .bi {
    color: var(--flag-color);
}

.composer-priority-menu {
    min-width: 170px;
}

.composer-priority-menu .dropdown-item[aria-checked="true"] {
    font-weight: 600;
}

.composer-priority-check {
    visibility: hidden;
}

.composer-priority-menu .dropdown-item[aria-checked="true"] .composer-priority-check {
    visibility: visible;
}
/* ==========================================================================
   Project templates: list cards, builder rows, "Start from" picker
   ========================================================================== */
.template-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.template-card:hover {
    border-color: #cfcbcb;
    box-shadow: 0 6px 18px rgba(30, 31, 33, .07);
}

.template-card-title {
    margin: 0 0 .1rem;
    font-size: 1rem;
    font-weight: 600;
}

.template-card-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.template-card-description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Builder */
.tpl-tasks {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tpl-task {
    padding: .4rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background-color: var(--bs-body-bg);
}

.tpl-task:focus-within {
    border-color: #b9ccf0;
    box-shadow: 0 0 0 3px rgba(69, 115, 210, .1);
}

.tpl-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.tpl-title {
    flex: 1 1 auto;
    min-width: 0;
    border-color: transparent;
    font-weight: 500;
}

.tpl-title:hover {
    border-color: var(--bs-border-color);
}

.tpl-priority {
    flex: 0 0 auto;
    width: 108px;
}

.tpl-day {
    flex: 0 0 auto;
    width: 108px;
}

.tpl-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.tpl-actions .btn {
    padding: .2rem .35rem;
}

.tpl-description {
    margin: .4rem 0 .2rem 1.6rem;
    width: calc(100% - 1.6rem);
}

.tpl-subtasks {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tpl-subtasks:has(> [data-tpl-subtask]) {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--bs-border-color);
}

.tpl-subtask {
    padding-left: 1.6rem;
}

.tpl-subtask .tpl-title {
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .tpl-row {
        flex-wrap: wrap;
    }

    .tpl-title {
        flex-basis: 100%;
    }
}

/* Color / icon pickers as radio buttons (template form) */
.appearance-color:has(input:checked) {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px #4573d2;
}

.appearance-color:has(input:checked) > .bi {
    visibility: visible;
}

.appearance-icon:has(input:checked) {
    background-color: var(--project-color);
    color: #fff;
}

.appearance-color:has(input:focus-visible),
.appearance-icon:has(input:focus-visible) {
    outline: 2px solid #4573d2;
    outline-offset: 2px;
}

.tpl-icons {
    max-height: 180px;
}

.appearance-color,
.appearance-icon {
    cursor: pointer;
}

/* Create project: "Start from" template picker */
.template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem;
}

.template-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.template-option:hover {
    background-color: var(--bs-tertiary-bg);
}

.template-option:has(input:checked) {
    border-color: #4573d2;
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 1px #4573d2;
}

.template-option:has(input:focus-visible) {
    outline: 2px solid #4573d2;
    outline-offset: 2px;
}

.template-option-blank {
    --project-color: #c7c4c4;
}
/* ==========================================================================
   "Create project" pop-up
   ========================================================================== */
.project-create-modal .modal-dialog {
    max-width: min(1100px, calc(100vw - 2rem));
}

.project-create-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: .9rem;
    box-shadow: 0 24px 60px rgba(30, 31, 33, .25);
}

.pc-close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 2;
}

.pc-host,
.pc-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.pc-loading {
    padding: 4rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.pc-body {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    padding: 0;
    overflow-y: auto;
}

.pc-left {
    padding: 1.5rem 1.5rem 1.25rem;
    border-right: 1px solid var(--bs-border-color);
}

.pc-right {
    padding: 1.5rem 1.75rem 1.25rem;
}

.pc-heading {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.pc-name {
    height: 2.75rem;
    border-width: 1.5px;
    border-radius: .55rem;
    font-size: 1rem;
}

.pc-name:focus {
    border-color: #4573d2;
    box-shadow: 0 0 0 3px rgba(69, 115, 210, .18);
}

.pc-type {
    margin: 1.25rem 0 1.25rem;
}

.pc-type .form-check-input:disabled,
.pc-type .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
}

.pc-type-help {
    margin: .25rem 0 0 1.5rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    line-height: 1.5;
}

.pc-label {
    display: block;
    margin-bottom: .3rem;
    color: #3d4450;
    font-size: .8rem;
}

.pc-field {
    border-color: transparent;
    border-radius: .5rem;
    background-color: #f0f3f8;
    font-size: .9rem;
}

.pc-field:focus {
    border-color: #4573d2;
    background-color: var(--bs-body-bg);
}

.pc-date {
    position: relative;
}

.pc-date > .bi {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.pc-date .form-control {
    padding-left: .75rem;
}

.pc-error {
    min-height: 0;
    margin-top: .25rem;
    color: var(--bs-danger);
    font-size: .8rem;
}

.pc-error:empty {
    display: none;
}

.pc-manager {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.pc-inline-label {
    color: #3d4450;
    font-size: .9rem;
}

.pc-person {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 260px;
    padding: .15rem .3rem .15rem .15rem;
    border-radius: 999px;
    background-color: #f0f3f8;
    font-size: .875rem;
}

.pc-person[hidden] {
    display: none;
}

.pc-person-remove,
.pc-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
}

.pc-person-remove {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
}

.pc-add {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px dashed #b9b7b8;
    border-radius: 50%;
}

.pc-person-remove:hover,
.pc-add:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.pc-manager-search {
    position: relative;
    flex: 0 1 260px;
}

/* Template cards (2 columns, preview on the left) */
.pc-templates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.pc-template {
    display: flex;
    align-items: stretch;
    min-height: 88px;
    overflow: hidden;
    border: 1px solid #dfe3ea;
    border-radius: .65rem;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pc-template:hover {
    border-color: #b9c3d3;
}

.pc-template:has(input:checked) {
    border-color: #4573d2;
    box-shadow: 0 0 0 1px #4573d2;
}

.pc-template:has(input:focus-visible) {
    outline: 2px solid #4573d2;
    outline-offset: 2px;
}

.pc-template-preview {
    position: relative;
    display: flex;
    flex: 0 0 120px;
    align-items: flex-start;
    padding: .7rem;
    background: color-mix(in srgb, var(--tpl-color) 22%, #fff);
    color: var(--tpl-color);
    font-size: 1.1rem;
}

.pc-template-preview.is-blank {
    align-items: center;
    justify-content: center;
    background-color: #f0f3f8;
    color: #8a94a3;
    font-size: 1.6rem;
}

.pc-preview-lines {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    left: .7rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.pc-preview-lines > span {
    display: block;
    height: .35rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--tpl-color) 55%, #fff);
}

.pc-preview-lines > span:nth-child(2) {
    width: 75%;
}

.pc-preview-lines > span:nth-child(3) {
    width: 55%;
}

.pc-template-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    min-width: 0;
    padding: .65rem .9rem;
}

.pc-template-name {
    overflow: hidden;
    font-size: .95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-template-description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pc-template-meta {
    color: #8a94a3;
    font-size: .75rem;
}

.pc-footer {
    justify-content: flex-start;
    gap: .5rem;
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.pc-footer .btn-primary {
    order: 1;
}

.pc-footer .btn-light {
    order: 2;
}

.pc-footer .pc-error {
    order: 3;
    margin: 0 0 0 auto;
}

@media (max-width: 991.98px) {
    .pc-body {
        grid-template-columns: 1fr;
    }

    .pc-left {
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 575.98px) {
    .pc-templates {
        grid-template-columns: 1fr;
    }
}
/* Server messages as notices */
.completion-toast.is-success {
    border-top-color: #58a182;
}

[data-flash-toast] .completion-toast-body {
    gap: .6rem;
}
/* "Create project" pop-up: "Assign all tasks to" */
.pc-assign {
    margin-top: -.5rem;
}

.pc-assign.is-disabled .pc-person,
.pc-assign.is-disabled .pc-add {
    opacity: .5;
}

.pc-person.is-empty {
    padding-right: .6rem;
    color: var(--bs-secondary-color);
}

.pc-note {
    color: var(--bs-secondary-color);
    font-size: .78rem;
}
/* Home "My tasks": subtasks indented under their parent */
.home-task-table tr.is-subtask .home-task-name {
    padding-left: 2rem;
}

.home-task-table tr.is-subtask .task-name {
    font-size: .875rem;
}
/* ==========================================================================
   Sidebar areas: narrow rail (Work / HR) next to the section's menu
   ========================================================================== */
:root {
    --app-rail-width: 64px;
}

.app-sidebar-inner {
    display: flex;
    min-height: 100%;
}

.offcanvas-lg.app-sidebar.has-rail {
    --bs-offcanvas-width: calc(var(--app-sidebar-width) + var(--app-rail-width));
}

@media (min-width: 992px) {
    .offcanvas-lg.app-sidebar.has-rail {
        width: calc(var(--app-sidebar-width) + var(--app-rail-width));
    }
}

.app-rail {
    display: flex;
    flex: 0 0 var(--app-rail-width);
    flex-direction: column;
    gap: .5rem;
    padding: .6rem .25rem;
    border-right: 1px solid #333436;
    background-color: #17181a;
}

.app-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-sidebar-muted);
    font-size: .66rem;
    line-height: 1.2;
}

/* The icon sits in a rounded tile, lit for the chosen area (like Asana). */
.app-rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    font-size: 1.15rem;
    transition: background-color .15s ease;
}

.app-rail-item:hover {
    color: #fff;
}

.app-rail-item:hover .app-rail-icon {
    background-color: var(--app-sidebar-hover);
}

.app-rail-item.active {
    color: #fff;
}

.app-rail-item.active .app-rail-icon {
    background-color: rgba(255, 255, 255, .2);
}

.app-rail-item:focus-visible {
    outline: 0;
}

.app-rail-item:focus-visible .app-rail-icon {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

.app-sidebar-panels {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.app-sidebar-nav {
    flex: 1 1 auto;
}

/* Only the chosen area's menu is shown. */
[data-sidebar-area="work"] [data-sidebar-panel]:not([data-sidebar-panel="work"]),
[data-sidebar-area="hr"] [data-sidebar-panel]:not([data-sidebar-panel="hr"]),
[data-sidebar-area="ai"] [data-sidebar-panel]:not([data-sidebar-panel="ai"]) {
    display: none;
}

/* Pages that are not built yet */
.app-sidebar .nav-link.is-planned {
    cursor: default;
    opacity: .65;
}

.app-sidebar .nav-link.is-planned:hover {
    background: none;
    color: var(--app-sidebar-text);
}

.sidebar-soon {
    margin-left: auto;
    padding: .05rem .35rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .12);
    color: var(--app-sidebar-muted);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Staff report: numbers that open their task list */
.report-count {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed #cfcbcb;
}

.report-count:hover {
    color: var(--bs-link-color);
    border-bottom-color: currentColor;
}
/* Staff report pop-up: about five rows, then it scrolls */
.report-tasks-list {
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.report-tasks-list .table > tbody > tr > td {
    padding-top: .55rem;
    padding-bottom: .55rem;
}
/* Subtask arrow: small solid triangle */
.task-expand > .bi {
    font-size: .7rem;
}
/* ---------------------------------------------------------------- *
 * Wizard (Add Employee): centred card with a numbered progress bar
 * ---------------------------------------------------------------- */
.wizard {
    max-width: 62rem;
    margin-inline: auto;
}

.wizard-body {
    padding: 1.75rem clamp(1rem, 4vw, 3rem);
}

.wizard-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: max-content;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

/* The connector line between one step and the next */
.wizard-step:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 1.5rem;
    height: 1px;
    background: var(--bs-border-color);
}

.wizard-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: #fff;
    font-size: .75rem;
    line-height: 1;
}

.wizard-step.is-current {
    color: var(--bs-body-color);
    font-weight: 600;
}

.wizard-step.is-current .wizard-step-dot {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.wizard-step.is-done {
    color: var(--bs-body-color);
}

.wizard-step.is-done .wizard-step-dot {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

@media (max-width: 575.98px) {
    .wizard-step:not(.is-current) .wizard-step-label {
        display: none;
    }
}
/* Settings gear beside a sidebar heading (Departments, Designations, Roles) */
button.sidebar-heading-action {
    border: 0;
    background: none;
    line-height: 1;
}

.sidebar-heading-action.is-active,
.sidebar-heading-action.show {
    background-color: var(--app-sidebar-hover);
    color: #fff;
}

.sidebar-heading-menu {
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-font-size: .875rem;
}
/* A wizard step you can open again (same look as the others, just clickable) */
.wizard-step-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}

a.wizard-step-link:hover .wizard-step-label,
a.wizard-step-link:focus-visible .wizard-step-label {
    text-decoration: underline;
}

a.wizard-step-link:hover .wizard-step-dot {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
/* Step 4: how the employee is paid */
.pay-method {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    border-bottom-color: var(--bs-border-color);
    cursor: pointer;
}

.pay-method.is-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.pay-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
}

.pay-method-text {
    min-width: 0;
}

.pay-method-name {
    display: block;
    font-weight: 500;
}

.pay-method-help {
    display: block;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.pay-method-check {
    margin-left: auto;
    font-size: 1.35rem;
    line-height: 1;
    color: #d8d6d6;
}

.pay-method.is-selected .pay-method-check {
    color: var(--bs-primary);
}

.pay-method.is-selected .pay-method-icon {
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.pay-method-fields {
    padding: .5rem 1rem 0 4.35rem;
}

@media (max-width: 575.98px) {
    .pay-method-fields {
        padding-left: 1rem;
    }
}
/* Employee profile picture and its "Set color & icon" button */
.avatar-tinted {
    background-color: var(--avatar-color, var(--bs-primary-bg-subtle));
    color: #1e1f21;
}

.appearance-trigger {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    max-width: 22rem;
    padding: .4rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: none;
    font-size: .9rem;
    text-align: left;
}

.appearance-trigger:hover {
    background-color: var(--bs-tertiary-bg);
}

.appearance-trigger .bi-chevron-right {
    color: var(--bs-secondary-color);
    font-size: .8rem;
}
/* Filter bar (Employees): search box, compact dropdowns, result count */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: #fff;
}

.filter-search {
    position: relative;
    flex: 1 1 18rem;
    min-width: 12rem;
}

.filter-search > .bi {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    font-size: .875rem;
    pointer-events: none;
}

.filter-search input {
    width: 100%;
    padding: .45rem .75rem .45rem 2.1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg);
    font-size: .9rem;
    color: var(--bs-body-color);
}

.filter-search input::placeholder {
    color: var(--bs-secondary-color);
}

.filter-search input:focus {
    outline: 0;
    border-color: var(--bs-primary);
    background-color: #fff;
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.filter-select {
    width: auto;
    min-width: 9rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
    border-radius: .5rem;
    font-size: .9rem;
}

.filter-meta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    padding-right: .35rem;
}

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    text-decoration: none;
}

.filter-clear:hover {
    color: var(--bs-body-color);
    text-decoration: underline;
}

.filter-clear > .bi {
    font-size: .7rem;
}

.filter-count {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    white-space: nowrap;
}

/* With JavaScript the dropdowns filter on their own, so the button is not needed. */
.js .filter-apply {
    display: none;
}

@media (max-width: 575.98px) {
    .filter-select {
        flex: 1 1 8rem;
        min-width: 0;
    }

    .filter-meta {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
}
/* HR dashboard: stat cards */
.hr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .75rem;
}

.hr-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: #fff;
    color: var(--bs-body-color);
    text-decoration: none;
}

a.hr-stat:hover {
    border-color: #cfcbcb;
    box-shadow: 0 2px 8px rgba(30, 31, 33, .06);
}

.hr-stat-icon {
    margin-bottom: .4rem;
    color: var(--bs-primary);
    font-size: 1.35rem;
    line-height: 1;
}

.hr-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.hr-stat-label {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.hr-stat-note {
    font-size: .75rem;
    color: var(--bs-tertiary-color);
}
/* Top bar: Check in / Check out */
.attendance-clock {
    margin: 0;
}

.attendance-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 32px;
    padding: 0 .8rem 0 .35rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.attendance-btn:hover {
    background-color: rgba(255, 255, 255, .1);
}

.attendance-btn:disabled {
    opacity: .7;
}

.attendance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #22a06b;
    color: #fff;
    font-size: .75rem;
}

.attendance-timer {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Checked in: green, with the timer running */
.attendance-btn.is-in {
    border-color: #22a06b;
    background-color: #22a06b;
}

.attendance-btn.is-in:hover {
    border-color: #1c8a5b;
    background-color: #1c8a5b;
}

.attendance-btn.is-in .attendance-icon {
    background-color: rgba(255, 255, 255, .22);
}

.attendance-btn.is-in .attendance-label {
    padding-left: .45rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
}

@media (max-width: 575.98px) {
    .attendance-btn .attendance-label {
        display: none;
    }

    .attendance-btn {
        padding-right: .5rem;
    }
}
/* Attendance page: week picker and the day-by-day table */
.att-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.att-employee {
    min-width: 14rem;
}

.att-week {
    display: inline-flex;
    align-items: center;
    padding: .15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: #fff;
}

.att-week-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    border-radius: .375rem;
    color: var(--bs-primary);
    text-decoration: none;
    cursor: pointer;
}

.att-week-btn:hover {
    background-color: var(--bs-tertiary-bg);
}

.att-calendar {
    color: var(--bs-secondary-color);
}

/* The real date field sits invisibly under the calendar icon. */
.att-calendar input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.att-range {
    font-weight: 600;
    white-space: nowrap;
}

.att-this-week {
    font-size: .875rem;
    text-decoration: none;
}

.att-this-week:hover {
    text-decoration: underline;
}

.att-card {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: #fff;
}

.att-table {
    --bs-table-bg: transparent;
    font-size: .9rem;
}

.att-table > :not(caption) > * > * {
    padding: .8rem 1rem;
    border-right: 1px solid #efeff3;
    border-bottom-color: #efeff3;
}

.att-table > :not(caption) > * > *:last-child {
    border-right: 0;
}

.att-table thead th {
    background-color: #e8e9f2;
    color: #4b4c55;
    font-weight: 500;
    white-space: nowrap;
}

.att-table tbody tr:nth-child(even) {
    background-color: #fbfbfc;
}

.att-table tbody tr.is-today {
    background-color: var(--bs-primary-bg-subtle);
}

.att-table tfoot td {
    border-bottom: 0;
    background-color: #fbfbfc;
}

.att-today {
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: .25rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    vertical-align: middle;
}

.att-status {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.att-dot {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: .25rem;
}

.att-status.is-present .att-dot {
    background-color: #9fdcb8;
}

.att-status.is-absent .att-dot {
    background-color: #f19a9a;
}

.att-status.is-weekend .att-dot {
    background-color: #fbe3a0;
}

.att-status.is-holiday .att-dot {
    background-color: #b3c7f2;
}

.att-holiday-name {
    color: var(--bs-secondary-color);
}

.att-missed {
    display: block;
    margin-top: .15rem;
    color: var(--bs-danger);
    font-size: .75rem;
}

.att-working {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #1c8a5b;
    font-size: .85rem;
    font-weight: 500;
}

.att-working-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, .2);
}
/* Leave page */
.leave-card {
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: #fff;
}

.leave-card-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.leave-card-icon {
    display: inline-flex;
    color: var(--bs-primary);
    font-size: 1.2rem;
}

.leave-submit {
    padding: .5rem 1.1rem;
    border: 0;
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 500;
}

.leave-submit:hover,
.leave-submit:focus-visible {
    background-color: #3a64bd;
    color: #fff;
}

.leave-quote {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: .75rem;
    background: linear-gradient(135deg, #eef3fc 0%, #dde7f8 100%);
}

.leave-quote-art {
    width: 8.5rem;
    max-width: 40%;
    flex: 0 0 auto;
}

.leave-quote-text {
    color: #243f73;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

.leave-quote-line {
    display: inline-block;
    width: 2rem;
    height: 2px;
    border-radius: 2px;
    background-color: var(--bs-primary);
}

.leave-policy {
    margin: 0;
    padding: 0;
    list-style: none;
}

.leave-policy li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .4rem 0;
    font-size: .9rem;
}

.leave-policy .bi {
    margin-top: .05rem;
    color: var(--bs-primary);
    font-size: 1.05rem;
}

.leave-view-all {
    color: var(--bs-primary);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.leave-view-all:hover {
    text-decoration: underline;
}

.leave-table {
    --bs-table-bg: transparent;
    font-size: .875rem;
}

.leave-table > :not(caption) > * > * {
    padding: .7rem .75rem;
    border-bottom-color: #efeff3;
}

.leave-table thead th {
    background-color: #f5f6f9;
    color: #4b4c55;
    font-weight: 500;
    white-space: nowrap;
}

.leave-reason {
    max-width: 14rem;
    color: var(--bs-secondary-color);
}

.leave-badge {
    min-width: 5.5rem;
    padding: .35rem .6rem;
    font-size: .75rem;
}

.leave-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #1f2937;
    font-size: 1.05rem;
}

.leave-action:hover {
    background-color: var(--bs-tertiary-bg);
}

.leave-action.is-danger {
    color: var(--bs-danger);
}

.leave-count {
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background-color: var(--bs-danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

.leave-details {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: .5rem 1rem;
    font-size: .9rem;
}

.leave-details dt {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.leave-details dd {
    margin: 0;
}

.leave-details [hidden] {
    display: none !important;
}

.leave-details-reason {
    white-space: pre-line;
}
.att-status.is-leave .att-dot {
    background-color: #cdb8f0;
}
/* Employee profile */
.emp-hero {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    background-color: #fff;
}

/* The banner takes the employee's profile colour. The card does not clip (the ⋯ menu must show), so the banner rounds its own corners. */
.emp-cover {
    height: 8.5rem;
    border-radius: calc(.85rem - 1px) calc(.85rem - 1px) 0 0;
    background-color: var(--avatar-color, #4573d2);
    background-image:
        radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .22) 0 3.5rem, transparent 3.6rem),
        radial-gradient(circle at 88% 120%, rgba(255, 255, 255, .16) 0 6rem, transparent 6.1rem),
        radial-gradient(circle at 70% -40%, rgba(0, 0, 0, .12) 0 7rem, transparent 7.1rem),
        linear-gradient(120deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 60%);
}

.emp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    padding: 0 1.25rem 1rem;
}

.avatar.avatar-xl {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 1rem;
    font-size: 2.4rem;
}

.avatar.avatar-xl .bi {
    font-size: 3rem;
}

.emp-photo {
    margin-top: -3.75rem;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(30, 31, 33, .12);
}

.emp-id {
    flex: 1 1 18rem;
    min-width: 0;
    padding-bottom: .35rem;
}

.emp-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .6rem;
}

.emp-code {
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.emp-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.emp-presence {
    font-size: .85rem;
    font-weight: 500;
}

.emp-presence::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .35rem;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: .08rem;
}

.emp-presence.is-in { color: #1c8a5b; }
.emp-presence.is-out { color: #6d6e6f; }
.emp-presence.is-late { color: #d1453b; }
.emp-presence.is-leave { color: #7a5bc4; }
.emp-presence.is-muted { color: #8a8b8d; }

.emp-sub {
    margin-top: .15rem;
    color: var(--bs-secondary-color);
}

.emp-head-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    padding-bottom: .35rem;
    margin-left: auto;
}

.emp-joined {
    display: flex;
    gap: .4rem;
    font-size: .875rem;
}

.emp-tabs {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.emp-tabs .view-tabs {
    flex-wrap: nowrap;
    width: max-content;
}

.emp-panel {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: #fff;
}

.emp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.1rem 1.5rem;
}

.emp-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.emp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    color: #5b6472;
    font-size: 1.05rem;
}

.emp-label {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.emp-value {
    font-weight: 500;
}

.emp-value.is-empty,
.emp-fields dd.is-empty,
.emp-address.is-empty {
    color: var(--bs-tertiary-color);
    font-weight: 400;
}

.emp-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.emp-section-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.emp-section-line {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-border-color);
}

.emp-section-edit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.emp-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.emp-fields dt {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 400;
}

.emp-fields dd {
    margin: .1rem 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.emp-address {
    font-weight: 500;
    white-space: pre-line;
}

.emp-task-list {
    margin: 0;
    padding: 0 0 .25rem;
    list-style: none;
}

.emp-task-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .6rem 1.25rem;
    border-top: 1px solid #f0f0f2;
}

.emp-task-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.emp-task-title:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.emp-task-list .project-pill {
    max-width: 14rem;
}

.emp-task-due {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .emp-head-side {
        align-items: flex-start;
        margin-left: 0;
    }
}
/* Leave: approvals filter and the status dropdown (HR / Admin) */
.leave-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .2rem;
    border-radius: .6rem;
    background-color: var(--bs-tertiary-bg);
}

.leave-filter-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: .45rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}

.leave-filter-item:hover {
    color: var(--bs-body-color);
}

.leave-filter-item.active {
    background-color: #fff;
    color: var(--bs-body-color);
    box-shadow: 0 1px 3px rgba(30, 31, 33, .12);
}

.leave-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    cursor: pointer;
}

.leave-status-btn .bi {
    font-size: .6rem;
}

.leave-status-btn:hover {
    filter: brightness(.96);
}

.leave-status-menu {
    --bs-dropdown-min-width: 9.5rem;
    --bs-dropdown-font-size: .875rem;
}

.leave-status-dot {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-radius: 50%;
}

.leave-status-menu .dropdown-item:disabled {
    color: var(--bs-body-color);
    font-weight: 600;
    opacity: 1;
}
/* Employee profile: Time Log tab (a card per day, app blue; a running session is green like the Check-in button) */
.tl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.tl-total {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    padding: .55rem 1.1rem .55rem .65rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: .75rem;
    background-color: var(--bs-primary-bg-subtle);
}

.tl-total-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 1.15rem;
}

.tl-total-label {
    display: block;
    color: var(--bs-primary-text-emphasis);
    font-size: .8rem;
    font-weight: 500;
}

.tl-total-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tl-day {
    margin-bottom: 1rem;
    border-radius: .85rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(30, 31, 33, .06), 0 0 0 1px rgba(30, 31, 33, .05);
}

.tl-day-heading {
    margin: 0;
    font-size: inherit;
}

.tl-day-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: .85rem;
    background: none;
    color: inherit;
    text-align: left;
}

.tl-day-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: .65rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.2rem;
}

.tl-day-title {
    flex: 1 1 auto;
    min-width: 0;
}

.tl-day-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.tl-today {
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .75rem;
    font-weight: 600;
}

.tl-day-meta {
    display: block;
    margin-top: .1rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 400;
}

.tl-day-meta strong {
    color: var(--bs-body-color);
}

.tl-day-chevron {
    color: var(--bs-secondary-color);
    transition: transform .2s ease;
}

.tl-day-head[aria-expanded="false"] .tl-day-chevron {
    transform: rotate(180deg);
}

.tl-day-head:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.tl-day-body {
    padding: 0 1.25rem 1rem;
}

.tl-table {
    --bs-table-bg: transparent;
    table-layout: fixed;
    font-size: .9rem;
}

.tl-table > :not(caption) > * > * {
    padding: .7rem 1rem;
    border-bottom-color: #eef0f3;
}

.tl-table thead th {
    background-color: #f3f5f9;
    color: var(--bs-body-color);
    font-weight: 600;
    border-bottom: 1px solid #e4e7ee;
}

.tl-table thead th:first-child {
    border-top-left-radius: .55rem;
}

.tl-table thead th:last-child {
    border-top-right-radius: .55rem;
}

.tl-table th:nth-child(1) {
    width: 4.5rem;
}

.tl-table th:nth-child(2) {
    width: 18%;
}

.tl-table th:nth-child(3) {
    width: 20%;
}

.tl-table th:nth-child(5) {
    width: 7.5rem;
}

.tl-table tbody td:first-child {
    color: var(--bs-secondary-color);
}

.tl-table tbody tr:last-child td {
    border-bottom: 0;
}

.tl-table tbody tr.is-running td {
    background-color: rgba(34, 160, 107, .1);
}

.tl-table tbody tr.is-running td:first-child {
    border-bottom-left-radius: .55rem;
}

.tl-table tbody tr.is-running td:last-child {
    border-bottom-right-radius: .55rem;
}

.tl-duration {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tl-working {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.tl-working-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, .2);
}

.tl-working-pill {
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: rgba(34, 160, 107, .15);
    color: #1c8a5b;
    font-size: .8125rem;
    font-weight: 600;
}

.tl-missed {
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-size: .8125rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .tl-total {
        margin-left: 0;
    }

    .tl-table th:nth-child(2) {
        width: auto;
    }
}
/* Employee profile: bigger segmented tabs */
.emp-tabs .view-tabs {
    gap: .4rem;
    padding: .3rem;
}

.emp-tabs .view-tabs .nav-link {
    gap: .55rem;
    padding: .55rem 1.2rem;
    font-size: 1rem;
    border-radius: .65rem;
}

.emp-tabs .view-tabs .nav-link > .bi {
    font-size: 1.1rem;
}
/* Approvals filter icons: grey, and in the status colour on the chosen filter */
.leave-filter-item .bi {
    font-size: .95rem;
    color: #8a8889;
}

.leave-filter-item.active.is-pending .bi { color: #d39b0b; }
.leave-filter-item.active.is-approved .bi { color: var(--bs-success); }
.leave-filter-item.active.is-rejected .bi { color: var(--bs-danger); }
.leave-filter-item.active.is-all .bi { color: var(--bs-primary); }
/* Sidebar: area title, foldable group headings, outlined menu button (Asana-style) */
.sidebar-area-title {
    padding: .55rem .6rem .15rem;
    color: var(--app-sidebar-muted);
    font-size: .75rem;
    font-weight: 500;
}

.sidebar-fold {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .15rem .3rem;
    border: 0;
    border-radius: .3rem;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.sidebar-fold > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-fold > .bi {
    font-size: .6rem;
    transition: transform .15s ease;
}

.sidebar-fold[aria-expanded="false"] > .bi {
    transform: rotate(-90deg);
}

.sidebar-fold:hover {
    color: #fff;
}

.sidebar-fold:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
}

.sidebar-divider {
    margin-top: .4rem;
}

.topbar-menu-btn {
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: .5rem;
    font-size: 1.15rem;
}

.topbar-menu-btn:hover {
    border-color: rgba(255, 255, 255, .7);
}
/* Check-out panel under the top-bar button */
.attendance-wrap {
    position: relative;
}

.check-out-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1060;
    width: min(21.5rem, calc(100vw - 1.5rem));
    border-radius: 1rem;
    background-color: #fff;
    color: var(--bs-body-color);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22), 0 0 0 1px rgba(15, 23, 42, .06);
}

/* Small arrow pointing at the button */
.check-out-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    right: var(--arrow-right, 2.5rem);
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background-color: #fff;
    transform: rotate(45deg);
    box-shadow: -1px -1px 0 rgba(15, 23, 42, .06);
}

.check-out-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem .8rem 1.1rem;
    border-bottom: 1px solid #eef0f3;
}

.check-out-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.check-out-title .bi {
    color: #e5484d;
    font-size: 1.25rem;
}

.check-out-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.check-out-close:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.check-out-body {
    padding: .9rem 1.1rem .4rem;
}

.check-out-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 600;
}

.check-out-label span {
    font-weight: 500;
}

.check-out-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
}

.check-out-reason {
    padding: .18rem .6rem;
    border: 1px solid #e3e5ea;
    border-radius: 999px;
    background-color: #f4f5f7;
    color: #3b3d42;
    font-size: .76rem;
    line-height: 1.4;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.check-out-reason:hover {
    border-color: #cfd3da;
    background-color: #eceef2;
}

.check-out-reason[aria-pressed="true"] {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 500;
}

.check-out-note {
    position: relative;
}

.check-out-note .bi {
    position: absolute;
    top: 50%;
    left: .8rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.check-out-note input {
    width: 100%;
    padding: .55rem .8rem .55rem 2.3rem;
    border: 1px solid #e3e5ea;
    border-radius: .6rem;
    font-size: .9rem;
}

.check-out-note input:focus {
    outline: 0;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.check-out-actions {
    display: flex;
    gap: .6rem;
    padding: .9rem 1.1rem 1.1rem;
}

.check-out-confirm {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: .6rem;
    font-weight: 600;
}

.check-out-cancel {
    padding: .6rem 1.2rem;
    border-radius: .6rem;
    background-color: #f1f2f4;
    font-weight: 500;
}
/* Time Log: the check-out reason under each session */
.tl-reason {
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}
.tl-reason-tag {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .8rem;
    font-weight: 500;
}

.tl-note {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
}
.check-out-panel:focus {
    outline: 0;
}
/* Payroll > Salaries */
.pay-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.pay-month {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 10rem;
    padding: 0 .5rem;
    font-weight: 600;
    white-space: nowrap;
}

.pay-month .bi {
    color: var(--bs-secondary-color);
}

.pay-days {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    padding: .5rem 1rem .5rem .6rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: .75rem;
    background-color: var(--bs-primary-bg-subtle);
}

.pay-days-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .5rem;
    border-radius: .6rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.pay-days-label {
    display: block;
    color: var(--bs-primary-text-emphasis);
    font-size: .85rem;
    font-weight: 600;
}

.pay-days-sum {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.pay-table th {
    white-space: nowrap;
}

.pay-person {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.pay-person:hover .pay-person-name {
    color: var(--bs-primary);
    text-decoration: underline;
}

.pay-person-name {
    display: block;
    font-weight: 600;
}

.pay-person-code {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

.pay-hours {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-over {
    color: #1c8a5b;
    font-weight: 600;
}

.pay-short {
    color: var(--bs-danger);
    font-weight: 600;
}

.pay-missing {
    font-size: .85rem;
    text-decoration: none;
}

.pay-missing:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .pay-days {
        margin-left: 0;
    }
}
/* Staff report: profile pictures in the table */
.avatar.report-avatar {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
}

.avatar.report-avatar .bi {
    font-size: .95rem;
}
/* Task details: "Sub Task : parent /" above a subtask's title */
.subtask-crumb {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.subtask-crumb-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .3rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.subtask-crumb-link {
    min-width: 0;
    overflow: hidden;
    color: var(--bs-primary);
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtask-crumb-link:hover,
.subtask-crumb-link:focus-visible {
    text-decoration: underline;
}

.subtask-crumb-sep {
    flex: 0 0 auto;
    color: var(--bs-tertiary-color);
}
/* ==========================================================================
   List view: "Add subtask" rows (Asana style)
   ========================================================================== */
.task-list-table tr.subtask-draft-row > td {
    background-color: var(--bs-primary-bg-subtle);
    --bs-table-bg-state: transparent;
}

.task-list-table tr.subtask-draft-row > td.task-name-cell {
    padding-top: .3rem;
    padding-bottom: .3rem;
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.subtask-draft {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.subtask-draft-check {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
}

.subtask-draft-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .2rem 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--bs-body-color);
    font-size: .875rem;
}

.subtask-draft-input::placeholder {
    color: var(--bs-secondary-color);
}

.subtask-draft-submit {
    display: inline-flex;
    flex-shrink: 0;
    padding: .2rem;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.subtask-draft-submit:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.composer-icon-btn.subtask-draft-pick {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .35rem;
    font-size: .8rem;
}

.subtask-draft-pick.has-value {
    padding: 0;
    border-color: transparent;
}

.subtask-draft-due.has-value .subtask-draft-pick {
    padding-right: .6rem;
}

.subtask-draft-menu {
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    padding: .35rem;
    font-size: .875rem;
}

.subtask-draft-menu .dropdown-item {
    border-radius: .375rem;
}

.task-list-table tr.subtask-add-link-row > td {
    padding-top: .35rem;
    padding-bottom: .5rem;
    border-bottom-width: 0;
}

.subtask-add-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.subtask-add-link:hover {
    color: var(--bs-body-color);
}

/* Hover button on a task row: add its first subtask */
.task-add-subtask-btn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    padding: .15rem .3rem;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    line-height: 1;
    opacity: 0;
}

.task-add-subtask-plus {
    margin-left: -.15rem;
    font-size: .75rem;
}

.task-row:hover .task-add-subtask-btn,
.task-add-subtask-btn:focus-visible {
    opacity: 1;
}

.task-add-subtask-btn:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

@media (hover: none) {
    .task-add-subtask-btn {
        opacity: 1;
    }
}
/* ==========================================================================
   Priority: coloured flag + menu (x-priority-picker), used everywhere
   ========================================================================== */
:root {
    --priority-low: #9aa0a6;
    --priority-medium: #4573d2;
    --priority-high: #f1a84b;
    --priority-urgent: #e8384f;
}

.priority-flag {
    color: var(--bs-secondary-color);
    line-height: 1;
}

.priority-flag-low { color: var(--priority-low); }
.priority-flag-medium { color: var(--priority-medium); }
.priority-flag-high { color: var(--priority-high); }
.priority-flag-urgent { color: var(--priority-urgent); }

.priority-picker {
    display: inline-block;
    max-width: 100%;
}

/* Chip: flag + name, a light pill on hover (lists, task details) */
.priority-picker-chip .priority-toggle,
.priority-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--bs-body-color);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.priority-picker-chip .priority-toggle:hover,
.priority-picker-chip .priority-toggle[aria-expanded="true"] {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.priority-picker-chip .priority-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}


.priority-chip-icon {
    padding: 0;
}

/* Field: looks like the other form selects */
.priority-picker-field {
    display: block;
}

.priority-picker-field .priority-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
}

/* Icon: dashed circle until a priority is picked */
.priority-picker-icon .priority-toggle.composer-icon-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .35rem;
    font-size: .8rem;
}

.priority-picker-icon.has-value .priority-toggle.composer-icon-btn {
    border-style: solid;
    border-color: var(--bs-border-color);
}

.priority-menu {
    min-width: 170px;
    padding: .35rem;
    font-size: .875rem;
}

.priority-menu .dropdown-item {
    border-radius: .375rem;
}

.priority-menu .dropdown-item[aria-checked="true"] {
    font-weight: 600;
}

.priority-menu-check {
    visibility: hidden;
    color: var(--bs-primary);
}

.priority-menu .dropdown-item[aria-checked="true"] .priority-menu-check {
    visibility: visible;
}

/* Template builder rows */
.tpl-row .priority-picker.tpl-priority {
    flex: 0 0 auto;
    width: 108px;
}

/* Calendar chips: a small flag after the name */
.cal-chip-flag {
    flex-shrink: 0;
    font-size: .7rem;
}

/* ==========================================================================
   Task details: Subtasks section (Asana style)
   ========================================================================== */
.subtask-section-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.subtask-progress {
    padding: .05rem .4rem;
    border-radius: .3rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
}

.subtask-head-add {
    display: inline-flex;
    padding: .2rem;
    border: 0;
    border-radius: .3rem;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.subtask-head-add:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.subtask-section .task-subtask {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.5rem;
    padding: .3rem .5rem;
    border: 0;
    border-radius: .375rem;
}

.subtask-section .task-subtask-list .task-subtask:first-child {
    border-top: 0;
}

.subtask-line:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.subtask-line .task-name {
    font-size: .875rem;
}

.subtask-due {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    white-space: nowrap;
}

.subtask-due.is-today {
    color: var(--bs-success);
}

.subtask-due.is-overdue {
    color: var(--bs-danger);
}

.subtask-line-open {
    display: inline-flex;
    flex-shrink: 0;
    padding: .15rem;
    border-radius: .25rem;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.subtask-line-open:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* The new-subtask row */
.subtask-section .subtask-panel-draft {
    margin: .15rem 0;
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.subtask-panel-draft[hidden] {
    display: none !important;
}

.subtask-panel-draft .subtask-draft {
    min-width: 0;
}

.subtask-panel-add-link {
    margin: .5rem 0 0 .5rem;
    text-decoration: none;
    font-size: .8125rem;
}

.subtask-panel-add-link:hover {
    text-decoration: underline;
}

.subtask-section.is-adding .subtask-panel-add-link {
    display: none;
}
/* ==========================================================================
   Task lists (project List tab + My tasks): simple Asana-style rows
   ========================================================================== */
.task-list-table {
    font-size: .875rem;
}

.task-list-table > :not(caption) > * > * {
    padding-top: .2rem;
    padding-bottom: .2rem;
    border-bottom-color: var(--bs-border-color-translucent);
}

.task-list-table tr.task-row > td {
    height: 36px;
}

.task-list-table thead th {
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.task-list-table th + th,
.task-list-table td + td {
    border-left-color: var(--bs-border-color-translucent);
}

.task-list-table .task-group-row > th + th,
.task-list-table .task-group-row > td + td {
    border-left: 0;
}

/* Name: subtask count right after the name */
.task-subtask-count {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .2rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    white-space: nowrap;
}

.task-subtask-count .bi {
    font-size: .8rem;
}

/* Assignee and due date: plain text that opens a menu on click */
.row-cell-button,
.row-cell-text {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    min-width: 0;
    padding: .15rem .3rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .8125rem;
    text-align: left;
}

.row-assignee {
    display: block;
    min-width: 0;
}

.row-cell-button:hover,
.row-cell-button[aria-expanded="true"] {
    border-color: var(--bs-border-color);
}

.task-list-table .avatar-empty {
    border-color: #a2a0a2;
}

.task-list-table .date-picker-trigger {
    padding: .15rem .3rem;
    font-size: .8125rem;
    font-weight: 400 !important;
}

.task-list-table .date-picker-trigger.text-body-secondary {
    color: var(--bs-body-color) !important;
}

.date-picker-trigger.is-due-today,
.is-due-today {
    color: var(--bs-success);
}

.date-empty-icon {
    display: none !important;
}

.date-picker-trigger:has([data-date-label]:empty) .date-empty-icon {
    display: inline-flex !important;
}

.date-picker-trigger:has([data-date-label]:empty) {
    padding-left: .3rem;
}

/* Priority flag a little smaller in rows */
.task-list-table .priority-picker-chip .priority-toggle,
.task-list-table .priority-chip {
    padding-top: .1rem;
    padding-bottom: .1rem;
    font-size: .8125rem;
}

/* Toolbar */
.list-add-btn .btn,
.btn.list-add-btn {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--bs-body-color);
    font-size: .8125rem;
}

.filter-toggle-chip {
    display: inline-flex;
    align-items: center;
    border-radius: .375rem;
    background-color: var(--bs-primary-bg-subtle);
}

.filter-toggle-chip > .btn-toolbar-item.active {
    background: none;
    color: var(--bs-primary-text-emphasis);
    padding-right: .25rem;
}

.filter-toggle-clear {
    display: inline-flex;
    align-items: center;
    padding: .2rem .45rem .2rem .15rem;
    color: var(--bs-primary-text-emphasis);
    font-size: .75rem;
    text-decoration: none;
}

.filter-toggle-clear:hover {
    color: var(--bs-primary);
}

/* "Add task" line under the list */
.task-list-table tr.list-add-line > td {
    padding-top: .45rem;
    padding-bottom: .45rem;
    border-bottom: 0;
}

.task-list-table tr.list-add-line > td:first-child {
    padding-left: 3.4rem;
}

.list-add-line-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.list-add-line-btn:hover {
    color: var(--bs-body-color);
}
/* Keep every row the same height, whether a cell is filled, empty or read-only */
.task-list-table .avatar-sm.avatar-empty {
    width: 1.35rem;
    height: 1.35rem;
    font-size: .6rem;
}

.task-list-table .date-picker-static {
    padding: .15rem .3rem;
    font-size: .8125rem;
    font-weight: 400 !important;
}

.task-list-table .date-picker-static.text-body-secondary {
    color: var(--bs-body-color) !important;
}
.row-cell-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

/* ==========================================================================
   HR Dashboard: Today's attendance (half width, ~10 rows then scroll)
   ========================================================================== */
.today-att-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.today-att-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.today-att-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 500;
}

.today-att-chip:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.today-att-chip.active {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.today-att-count {
    min-width: 1.2rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: .7rem;
    text-align: center;
}

.today-att-chip.active .today-att-count {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Header row + ten rows of ~52px, then the list scrolls */
.today-att-scroll {
    max-height: 560px;
    overflow: auto;
}

.today-att-table {
    min-width: 560px;
}

.today-att-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: .78rem;
}

.today-att-table > :not(caption) > * > * {
    padding: .55rem .8rem;
    vertical-align: middle;
}

.today-att-table tbody tr {
    height: 52px;
}

.today-att-table tbody tr.is-link {
    cursor: pointer;
}

.today-att-table tbody tr.is-link:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.today-att-person {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.today-att-name {
    display: block;
    overflow: hidden;
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.today-att-name:hover {
    color: var(--bs-primary);
}

.today-att-role {
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-att-out {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

/* Status as a soft pill */
.today-att-table .att-status {
    gap: .4rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
}

.today-att-table .att-status .att-dot {
    width: .45rem;
    height: .45rem;
}

.today-att-table .att-status.is-present {
    background-color: #e3f5ec;
    color: #1c7a50;
}

.today-att-table .att-status.is-present .att-dot {
    background-color: #22a06b;
}

.today-att-table .att-status.is-late {
    background-color: #fdf0dc;
    color: #a4610e;
}

.today-att-table .att-status.is-late .att-dot {
    background-color: #f1a84b;
}

.today-att-table .att-status.is-leave {
    background-color: #f0e9fb;
    color: #6b45b3;
}

.today-att-table .att-status.is-leave .att-dot {
    background-color: #9c7ae0;
}

.today-att-table .att-status.is-holiday {
    background-color: #e6edfb;
    color: #3558a8;
}

.today-att-table .att-status.is-holiday .att-dot {
    background-color: #6f93dd;
}

.today-att-table .att-status.is-weekend,
.today-att-table .att-status.is-not_in {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.today-att-table .att-status.is-weekend .att-dot,
.today-att-table .att-status.is-not_in .att-dot {
    background-color: #b5b3b8;
}
/* HR Dashboard: Late / On leave / Absent boxes (buttons that filter the list below) */
button.hr-stat {
    width: 100%;
    text-align: left;
}

button.hr-stat:hover,
a.hr-stat:focus-visible,
button.hr-stat:focus-visible {
    border-color: #cfcbcb;
    box-shadow: 0 2px 8px rgba(30, 31, 33, .06);
    outline: 0;
}

.hr-stat-late .hr-stat-icon {
    color: #e08a16;
}

.hr-stat-leave .hr-stat-icon {
    color: #8a63d2;
}

.hr-stat-not_in .hr-stat-icon {
    color: #d9534f;
}
/* HR Dashboard: Today's performance (the totals row stays visible while the list scrolls) */
.today-perf-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: #f6f6f9;
}

.today-perf-table .report-count {
    font-weight: 500;
}

/* HR Dashboard: every box filters "Today's attendance"; the chosen one has a blue border */
.hr-stat[data-today-stat] {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hr-stat[data-today-stat]:hover {
    border-color: #cfcbcb;
    box-shadow: 0 2px 8px rgba(30, 31, 33, .06);
}

.hr-stat[data-today-stat]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.hr-stat[data-today-stat].active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary), 0 2px 8px rgba(69, 115, 210, .12);
}

.hr-stat-link {
    align-self: flex-start;
    font-size: .75rem;
    text-decoration: none;
}

.hr-stat-link:hover {
    text-decoration: underline;
}

/* Two cards side by side, stacked when each would be narrower than ~36rem */
.hr-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 1fr));
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

/* Tighter tables so every column fits in half the width */
.today-att-table {
    min-width: 500px;
}

.today-att-table > :not(caption) > * > * {
    padding: .5rem .65rem;
}

.today-perf-table {
    min-width: 0;
}

.today-perf-table th:not(:first-child),
.today-perf-table td:not(:first-child) {
    width: 1%;
    white-space: nowrap;
}
/* ==========================================================================
   HR > Payroll > Payslips
   ========================================================================== */
.slip-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.slip-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.slip-summary-value {
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 600;
}

.slip-summary-item.is-total {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
}

.slip-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background-color: #fdf5e6;
    color: #8a5a0b;
    font-size: .85rem;
}

.slip-table tbody tr.is-link {
    cursor: pointer;
}

.slip-table tbody tr.is-link:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.slip-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}

.slip-status .att-dot {
    width: .45rem;
    height: .45rem;
    background-color: #b5b3b8;
}

.slip-status.is-paid {
    background-color: #e3f5ec;
    color: #1c7a50;
}

.slip-status.is-paid .att-dot {
    background-color: #22a06b;
}

.slip-status.is-none {
    background: none;
    padding-left: 0;
}

.slip-paid-on {
    margin-top: .15rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
}

/* The payslip page */
.slip-actions-bar {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

.slip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1200px) {
    .slip-layout {
        grid-template-columns: minmax(0, 820px) 320px;
    }
}

.slip-doc {
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: #fff;
    color: #1e1f21;
}

.slip-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #1e1f21;
}

.slip-company {
    font-size: 1.35rem;
    font-weight: 700;
}

.slip-title {
    color: #6d6e6f;
    font-size: .95rem;
}

.slip-muted {
    color: #6d6e6f;
    font-size: .78rem;
}

.slip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .5rem 2rem;
    padding: 1rem 0;
}

.slip-facts {
    margin: 0;
}

.slip-facts > div {
    display: flex;
    gap: .75rem;
    padding: .2rem 0;
    font-size: .875rem;
}

.slip-facts dt {
    flex: 0 0 8rem;
    color: #6d6e6f;
    font-weight: 400;
}

.slip-facts dd {
    margin: 0;
    font-weight: 500;
}

.slip-attendance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.slip-attendance > div {
    padding: .5rem .6rem;
    border-radius: .5rem;
    background-color: #f5f5f8;
    color: #6d6e6f;
    font-size: .72rem;
}

.slip-attendance span {
    display: block;
    color: #1e1f21;
    font-size: 1rem;
    font-weight: 600;
}

.slip-money {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.slip-table-money {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.slip-table-money th {
    padding: .5rem .6rem;
    background-color: #e8e9f2;
    color: #4b4c55;
    font-weight: 600;
}

.slip-table-money td {
    padding: .5rem .6rem;
    border-bottom: 1px solid #efeff3;
    vertical-align: top;
}

.slip-table-money tfoot td {
    border-bottom: 0;
    background-color: #f7f7fa;
    font-weight: 600;
}

.slip-net {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: .6rem;
    background-color: #eef3fc;
}

.slip-net-label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3558a8;
}

.slip-net-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e1f21;
}

.slip-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1.25rem;
    color: #8a8b8c;
    font-size: .72rem;
}

.slip-side {
    display: grid;
    gap: 1rem;
}

.slip-panel {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
}

.slip-panel-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    font-size: .95rem;
    font-weight: 600;
}

/* Printing a payslip: only the document */
@media print {
    .app-topbar,
    .app-sidebar,
    .slip-side,
    .completion-toasts {
        display: none !important;
    }

    .app-body,
    .app-main {
        background: #fff !important;
    }

    .app-shell,
    .app-main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .slip-layout {
        display: block;
    }

    .slip-doc {
        border: 0;
        padding: 0;
    }

    .slip-attendance > div,
    .slip-table-money th,
    .slip-table-money tfoot td,
    .slip-net {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* Salaries / Payslips: which days are counted */
.pay-counted {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

/* Salary Details: working hours (Time Out − Time In) */
.shift-length {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

[data-shift-length].has-value .shift-length {
    border-style: solid;
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

/* Payslip: working hours per day (shift − lunch break), like the Salary Details box */
.slip-attendance > .slip-tile-hours {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    border: 1px solid #c9d7f3;
    background-color: #eef3fc;
    color: #3558a8;
}

.slip-tile-hours strong {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #1e1f21;
    font-size: 1rem;
}

.slip-tile-hours strong .bi {
    color: #3558a8;
    font-size: .9rem;
}

.slip-tile-hours small {
    font-size: .7rem;
    line-height: 1.3;
}
/* Attendance: team day view */
.att-week-btn.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.att-back-team {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    text-decoration: none;
}

/* ==========================================================================
   Yes / No switch (employee form): green "Yes" when on, grey "No" when off
   ========================================================================== */
.yes-switch {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    user-select: none;
}

.yes-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.yes-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 3.6rem;
    height: 1.75rem;
    border-radius: 999px;
    background-color: #d1d3d8;
    transition: background-color .2s ease;
}

/* The word: "No" on the right while off, "Yes" on the left while on */
.yes-switch-track::before {
    content: attr(data-off);
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

/* The knob */
.yes-switch-track::after {
    content: "";
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s ease;
}

.yes-switch-input:checked + .yes-switch-track {
    background-color: #34c759;
}

.yes-switch-input:checked + .yes-switch-track::before {
    content: attr(data-on);
    right: auto;
    left: .6rem;
}

.yes-switch-input:checked + .yes-switch-track::after {
    transform: translateX(1.85rem);
}

.yes-switch-input:focus-visible + .yes-switch-track {
    box-shadow: 0 0 0 .2rem rgba(52, 199, 89, .3);
}

.yes-switch-input:disabled + .yes-switch-track {
    opacity: .5;
}

.yes-switch-label {
    font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
    .yes-switch-track,
    .yes-switch-track::after {
        transition: none;
    }
}


/* ---------------------------------------------------------------
 | AI Assistant: a scrolling conversation, the question box pinned below.
 | Chart colours: categorical slots 1-6 in fixed order, one blue scale for heatmaps
 | (validated palette, see the data-viz method).
 * --------------------------------------------------------------- */
.ai-page {
    --viz-series-1: #2a78d6;
    --viz-grid: #e1e0d9;
    --viz-baseline: #c3c2b7;
    --viz-muted: #898781;
    --ai-series-1: #2a78d6;
    --ai-series-2: #eb6834;
    --ai-series-3: #1baf7a;
    --ai-series-4: #eda100;
    --ai-series-5: #e87ba4;
    --ai-series-6: #008300;
    --ai-series-other: #b4b2a9;
    --ai-accent: var(--bs-primary);
    --ai-page-bg: #f6f7fb;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background-color: var(--ai-page-bg);
}

.ai-inner {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--app-gutter);
}

.ai-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 1rem var(--app-gutter) .5rem;
}

.ai-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.ai-spark,
.ai-empty-spark {
    color: var(--ai-accent);
}

.ai-lead {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.ai-new {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    flex-shrink: 0;
    padding: .5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background-color: var(--bs-body-bg);
    font-weight: 500;
}

.ai-new:hover {
    background-color: #f0f0ee;
}

.ai-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 1rem;
}

/* Start screen */
.ai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1.5rem, 8vh, 6rem) 0 1rem;
}

.ai-empty-spark {
    font-size: 1.9rem;
    line-height: 1;
}

.ai-empty-text {
    margin: .6rem 0 1.25rem;
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.ai-suggestions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    width: 100%;
    max-width: 930px;
}

.ai-suggestion {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.4rem;
    padding: .55rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .875rem;
    line-height: 1.3;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.ai-suggestion:hover,
.ai-suggestion:focus-visible {
    border-color: #9ec5f4;
    box-shadow: 0 2px 8px rgba(42, 120, 214, .08);
}

.ai-suggestion > .bi,
.ai-suggestion-123 {
    flex-shrink: 0;
    width: 1.2rem;
    color: #3d6fb4;
    font-size: 1rem;
    text-align: center;
}

.ai-suggestion-123 {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Conversation */
.ai-thread {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: .75rem;
}

.ai-question {
    display: flex;
    justify-content: flex-end;
}

.ai-question-bubble {
    max-width: min(640px, 85%);
    padding: .6rem .95rem;
    border-radius: 1rem 1rem .25rem 1rem;
    background-color: #2a78d6;
    color: #fff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-answer,
.ai-thinking {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.ai-answer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.ai-answer-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background-color: var(--bs-body-bg);
}

.ai-answer.is-unmatched .ai-answer-body {
    border-style: dashed;
}

.ai-answer-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.ai-answer-sub,
.ai-answer-source {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
}

.ai-answer-source {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background-color: #eef4fc;
    color: #1c5cab;
}

.ai-answer-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 0;
    color: var(--bs-secondary-color);
}

.ai-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: .9rem;
}

.ai-block {
    min-width: 0;
}

.ai-block.is-wide {
    grid-column: 1 / -1;
}

.ai-card {
    padding: .9rem 1rem;
}

.ai-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}

/* Number tiles */
.ai-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .65rem;
}

.ai-stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    background-color: #fbfbfa;
    color: var(--bs-body-color);
    text-decoration: none;
}

a.ai-stat:hover {
    border-color: #9ec5f4;
}

.ai-stat-label {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.ai-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ai-stat.is-danger .ai-stat-value {
    color: #c03a3a;
}

.ai-stat-hint {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Bars: room for longer values (rupees, hours) */
.ai-bars .viz-bar-row {
    grid-template-columns: minmax(90px, 32%) minmax(0, 1fr) auto;
}

.ai-bars .viz-bar-value {
    min-width: 2.5rem;
}

.ai-bars a.viz-bar-label {
    color: var(--bs-body-color);
    text-decoration: none;
}

.ai-bars a.viz-bar-label:hover {
    text-decoration: underline;
}

/* Series colours (columns, donut, legends) */
.ai-series-1 { fill: var(--ai-series-1); stroke: var(--ai-series-1); background-color: var(--ai-series-1); }
.ai-series-2 { fill: var(--ai-series-2); stroke: var(--ai-series-2); background-color: var(--ai-series-2); }
.ai-series-3 { fill: var(--ai-series-3); stroke: var(--ai-series-3); background-color: var(--ai-series-3); }
.ai-series-4 { fill: var(--ai-series-4); stroke: var(--ai-series-4); background-color: var(--ai-series-4); }
.ai-series-5 { fill: var(--ai-series-5); stroke: var(--ai-series-5); background-color: var(--ai-series-5); }
.ai-series-6 { fill: var(--ai-series-6); stroke: var(--ai-series-6); background-color: var(--ai-series-6); }
.ai-series-other { fill: var(--ai-series-other); stroke: var(--ai-series-other); background-color: var(--ai-series-other); }

.ai-columns path {
    stroke: none;
}

.ai-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.ai-legend li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ai-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
}

/* Donut */
.ai-donut {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: .4rem;
}

.ai-donut-svg {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
}

.ai-donut-track {
    fill: none;
    stroke: #f0efec;
    stroke-width: 22;
}

.ai-donut-part {
    fill: none !important;
    stroke-width: 22;
}

.ai-donut-part:hover {
    stroke-width: 26;
}

.ai-donut-total {
    fill: var(--bs-body-color);
    font-size: 20px;
    font-weight: 600;
}

.ai-donut-unit {
    fill: var(--viz-muted);
    font-size: 11px;
}

.ai-donut-legend {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
}

.ai-donut-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 3rem;
    align-items: center;
    gap: .5rem;
}

.ai-donut-label {
    color: var(--bs-secondary-color);
}

.ai-donut-value,
.ai-donut-share {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ai-donut-share {
    color: var(--bs-secondary-color);
}

/* Heatmap: sequential blue, light = few; grey = none */
.ai-heat-0 { background-color: #f4f4f2; }
.ai-heat-1 { background-color: #cde2fb; }
.ai-heat-2 { background-color: #9ec5f4; }
.ai-heat-3 { background-color: #6da7ec; }
.ai-heat-4 { background-color: #3987e5; color: #fff; }
.ai-heat-5 { background-color: #256abf; color: #fff; }
.ai-heat-6 { background-color: #184f95; color: #fff; }
.ai-heat-7 { background-color: #0d366b; color: #fff; }

.ai-heat-scale {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.ai-heat-scale span[class] {
    width: 14px;
    height: 10px;
    border-radius: 2px;
}

.ai-heat-scale span:first-child {
    margin-right: .3rem;
}

.ai-heat-scale span:last-child {
    margin-left: .3rem;
}

.ai-heat-wrap {
    max-height: 520px;
    overflow: auto;
}

.ai-heat {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: .8rem;
}

.ai-heat th {
    font-weight: 500;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.ai-heat thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .2rem .35rem;
    background-color: var(--bs-body-bg);
    text-align: center;
}

.ai-heat thead th.is-narrow span {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .7rem;
}

.ai-heat tbody th {
    position: sticky;
    left: 0;
    max-width: 180px;
    padding-right: .6rem;
    background-color: var(--bs-body-bg);
    text-align: left;
}

.ai-heat td {
    min-width: 2.4rem;
    height: 1.9rem;
    padding: 0 .35rem;
    border-radius: 3px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ai-heat td.ai-heat-total,
.ai-heat th.ai-heat-total {
    background-color: transparent;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-heat td[data-tip]:hover {
    outline: 2px solid #1e1f21;
}

/* Tables */
.ai-table-wrap {
    max-height: 460px;
}

.ai-table th {
    position: sticky;
    top: 0;
    background-color: var(--bs-body-bg);
    font-size: .78rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.ai-table td {
    font-size: .85rem;
}

.ai-table-main {
    max-width: 320px;
}

.ai-table-main a {
    color: var(--bs-body-color);
    font-weight: 500;
    text-decoration: none;
}

.ai-table-main a:hover {
    color: #1c5cab;
    text-decoration: underline;
}

.ai-table tr.is-danger td:last-child {
    color: #c03a3a;
    font-weight: 500;
}

.ai-table tr.is-warning td:last-child {
    color: #a35f00;
    font-weight: 500;
}

.ai-table tr.is-success td {
    background-color: #eef8ea;
}

.ai-table tr.is-muted td {
    color: var(--bs-secondary-color);
}

/* Findings and next steps */
.ai-section-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .4rem;
    font-size: .9rem;
    font-weight: 600;
}

.ai-findings {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: .7rem;
    background-color: #fbf8ec;
}

.ai-findings .bi {
    color: #b98900;
}

.ai-findings ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .88rem;
}

.ai-findings li + li {
    margin-top: .2rem;
}

.ai-next {
    margin-top: 1rem;
}

.ai-next-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.ai-next-link,
.ai-next-ask {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .82rem;
    text-decoration: none;
}

.ai-next-link {
    border-color: #b7d3f6;
    color: #1c5cab;
}

.ai-next-link:hover,
.ai-next-ask:hover {
    background-color: #eef4fc;
    border-color: #9ec5f4;
}

.ai-next-ask .bi {
    color: #3d6fb4;
}

/* Thinking... */
.ai-dots {
    display: inline-flex;
    gap: .3rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background-color: var(--bs-body-bg);
}

.ai-dots span {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: #9ec5f4;
    animation: ai-dot 1s infinite ease-in-out;
}

.ai-dots span:nth-child(2) { animation-delay: .15s; }
.ai-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes ai-dot {
    0%, 80%, 100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

/* Question box */
.ai-composer-wrap {
    flex-shrink: 0;
    padding: .5rem 0 1rem;
    background: linear-gradient(to bottom, rgba(246, 247, 251, 0), var(--ai-page-bg) 30%);
}

.ai-composer-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.ai-source-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .55rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .875rem;
}

.ai-source-btn:hover {
    border-color: #9ec5f4;
}

.ai-hint-icon {
    margin-left: .25rem;
    color: #eda100;
    cursor: help;
}

.ai-composer {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .6rem .6rem .6rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.ai-composer:focus-within {
    border-color: #86b6ef;
    box-shadow: 0 0 0 3px rgba(42, 120, 214, .12);
}

.ai-composer textarea {
    flex: 1 1 auto;
    min-height: 2.6rem;
    max-height: 9rem;
    padding: .4rem 0;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    font-size: .95rem;
}

.ai-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background-color: #2a78d6;
    color: #fff;
}

.ai-send:disabled {
    background-color: #9ec5f4;
}

@media (max-width: 991.98px) {
    .ai-suggestions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-blocks {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ai-inner,
    .ai-head {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ai-head {
        flex-wrap: wrap;
    }

    .ai-suggestions {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-answer-avatar {
        display: none;
    }

    .ai-donut {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-donut-svg {
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-dots span {
        animation: none;
    }
}


/* AI Work Assistant: fills the height below the top bar */
.ai-layout {
    display: flex;
    height: calc(100vh - var(--app-topbar-height));
}

/* AI Work Assistant: "/" list of projects or employees above the question box */
.ai-composer {
    position: relative;
}

.ai-mention {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: min(420px, 100%);
    max-height: 300px;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.ai-mention-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .4rem .55rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: .875rem;
    text-align: left;
}

.ai-mention-item.is-active,
.ai-mention-item:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.ai-mention-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .4rem;
    background-color: var(--mark, var(--bs-primary));
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
}

.ai-mention-mark.is-person {
    border-radius: 50%;
}

.ai-mention-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-mention-hint-text,
.ai-mention-sub {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.ai-mention-empty {
    padding: .5rem .6rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.ai-mention-hint kbd {
    padding: .05rem .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .3rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .72rem;
}

/* Employee page: a timer left running, with HR's "Stop timer" form */
.stop-timer {
    margin-bottom: 1rem;
    border: 1px solid #f1d38a;
    border-radius: .75rem;
    background-color: #fff8e6;
}

.stop-timer.is-missed {
    border-color: #f2b8b5;
    background-color: #fdeeee;
}

.stop-timer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
}

.stop-timer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: #fde7b0;
    color: #8a5a00;
}

.stop-timer.is-missed .stop-timer-icon {
    background-color: #f9d0cd;
    color: #b42318;
}

.stop-timer-text {
    display: flex;
    flex-direction: column;
    font-size: .875rem;
}

.stop-timer-text span {
    color: var(--bs-secondary-color);
}

.stop-timer-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.stop-timer-form {
    padding: 0 1rem 1rem;
}

.stop-timer-form.show,
.stop-timer-form.collapsing {
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-top: .9rem;
}

.tl-stopped-by {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-right: .35rem;
    padding: .05rem .45rem;
    border-radius: 1rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .75rem;
}

/* Rich text editor (x-rich-editor): toolbar like Asana / ClickUp, "/" menu */
.rte {
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background-color: var(--bs-body-bg);
}

.rte:focus-within {
    border-color: #b9ccf0;
    box-shadow: 0 0 0 3px rgba(69, 115, 210, .1);
}

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: .1rem;
    padding: .35rem .45rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--bs-border-color);
    scrollbar-width: thin;
}

.rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    flex-shrink: 0;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .35rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: #4a4b4d;
    font-size: 1rem;
    line-height: 1;
}

.rte-btn:hover,
.rte-btn[aria-expanded="true"] {
    background-color: #f0f0ee;
    color: var(--bs-body-color);
}

.rte-btn.is-on {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.rte-style {
    padding: 0 .5rem;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
}

.rte-caret {
    font-size: .7rem;
}

.rte-sep {
    flex-shrink: 0;
    width: 1px;
    height: 1.2rem;
    margin: 0 .3rem;
    background-color: var(--bs-border-color);
}

.rte-status {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 .35rem;
    font-size: .72rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.rte-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
}

.rte-menu .dropdown-item .bi {
    width: 1rem;
    color: var(--bs-secondary-color);
}

.rte-slash {
    position: fixed;
    z-index: 1090;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
}

.rte-body {
    position: relative;
    min-height: 7.5rem;
    max-height: 60vh;
    padding: .75rem .9rem;
    overflow-y: auto;
    outline: 0;
    font-size: .9375rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rte-body:empty::before,
.rte-body.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #a2a0a2;
    pointer-events: none;
}

/* The same look for the editor and for read-only descriptions */
.rte-body > :first-child,
.rte-view > :first-child {
    margin-top: 0;
}

.rte-body > :last-child,
.rte-view > :last-child {
    margin-bottom: 0;
}

.rte-body p,
.rte-view p {
    margin: 0 0 .35rem;
}

.rte-body h1, .rte-view h1 { margin: .6rem 0 .35rem; font-size: 1.35rem; font-weight: 600; }
.rte-body h2, .rte-view h2 { margin: .6rem 0 .35rem; font-size: 1.15rem; font-weight: 600; }
.rte-body h3, .rte-view h3 { margin: .5rem 0 .3rem; font-size: 1rem; font-weight: 600; }

.rte-body ul, .rte-body ol,
.rte-view ul, .rte-view ol {
    margin: 0 0 .4rem;
    padding-left: 1.4rem;
}

.rte-body blockquote,
.rte-view blockquote {
    margin: .4rem 0;
    padding: .1rem .8rem;
    border-left: 3px solid #d0cfca;
    color: var(--bs-secondary-color);
}

.rte-body pre,
.rte-view pre {
    margin: .4rem 0;
    padding: .6rem .75rem;
    border-radius: .4rem;
    background-color: #f5f4f2;
    font-size: .85rem;
    white-space: pre-wrap;
}

.rte-body code,
.rte-view code {
    padding: .05rem .3rem;
    border-radius: .25rem;
    background-color: #f1f0ee;
    color: #b0325a;
    font-size: .85em;
}

.rte-body pre code,
.rte-view pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.rte-body mark,
.rte-view mark {
    padding: 0 .1rem;
    border-radius: .15rem;
    background-color: #fff1a8;
}

.rte-body a,
.rte-view a {
    color: var(--bs-primary);
}

.rte-body hr,
.rte-view hr {
    margin: .6rem 0;
    opacity: .2;
}

/* Task details: "Add multiple" subtasks */
.subtask-add-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
}

.subtask-many-open {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.subtask-many:not([hidden]) {
    display: block;
    margin: .5rem 0;
    padding: .65rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background-color: #fbfbfa;
}

.subtask-many-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
}

.subtask-many textarea {
    min-height: 6rem;
    resize: vertical;
}

.subtask-many-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

/* Sidebar footer: Settings, pinned at the bottom, opens upwards */
.app-sidebar-foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: .45rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background-color: var(--app-sidebar-bg);
}

.sidebar-foot-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 32px;
    padding: .25rem .55rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--app-sidebar-muted);
    font-size: .875rem;
    text-align: left;
}

.sidebar-foot-btn:hover,
.sidebar-foot-btn[aria-expanded="true"] {
    background-color: var(--app-sidebar-hover);
    color: var(--app-sidebar-text);
}

.sidebar-foot-btn.is-active {
    background-color: var(--app-sidebar-active);
    color: var(--app-sidebar-text);
}

.sidebar-foot-menu {
    --bs-dropdown-min-width: 13rem;
    --bs-dropdown-font-size: .875rem;
    margin-bottom: .35rem !important;
}

.sidebar-foot-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sidebar-foot-menu .dropdown-item .bi {
    width: 1rem;
    color: var(--bs-secondary-color);
}

.sidebar-foot-menu .dropdown-item.active .bi {
    color: inherit;
}

/* Quick text ("/" shortcuts from Settings > Shortcut Text) */
.quick-menu {
    min-width: 260px;
    max-width: min(420px, 92vw);
    max-height: 300px;
    overflow-y: auto;
}

.quick-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .875rem;
}

.quick-item-tag {
    flex-shrink: 0;
    padding: 0 .35rem;
    border-radius: .25rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .78rem;
    font-weight: 600;
}

.quick-item-label {
    flex-shrink: 0;
    max-width: 10rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.quick-item-preview {
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dropdown-item.quick-item.active,
.rte-slash .dropdown-item.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
}

/* Settings > Shortcut Text */
.shortcut-tag {
    padding: .05rem .4rem;
    border: 0;
    border-radius: .3rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
}

.shortcut-tag:hover {
    text-decoration: underline;
}

.shortcut-text {
    max-width: 44rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}