/* LANTERN reference: lupdYtaEcKujzV9UYEruLp, dashboard 1:3317.
   Shared presentation only; existing data, routes and controls stay in place.
   Reuse the project's lantern artwork and icon library. */




/* Shared row actions: opaque fills keep icons readable over glass and striped rows. */
html body .project-table-actions {
    gap: 8px;
}

html body .project-table-actions .btn {
    --row-action-bg: #245c78;
    --row-action-border: #91cce8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--row-action-border);
    border-radius: 8px;
    background: var(--row-action-bg);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    font-size: 17px;
    line-height: 1;
    transition: filter .15s ease, box-shadow .15s ease;
}

html body .project-table-actions .btn-outline-success {
    --row-action-bg: #206044;
    --row-action-border: #8edbb3;
}

html body .project-table-actions .btn-outline-warning {
    --row-action-bg: #76500d;
    --row-action-border: #efd080;
}

html body .project-table-actions .btn-outline-danger {
    --row-action-bg: #923b46;
    --row-action-border: #f4a5af;
}

html body .project-table-actions .btn:not(:disabled):not(.disabled):hover {
    background: var(--row-action-bg);
    color: #fff;
    filter: brightness(1.18);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

html body .project-table-actions .btn:focus-visible {
    outline: 3px solid var(--body-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--surface-bg-strong);
}

html body .project-table-actions .btn:not(:disabled):not(.disabled):active {
    filter: brightness(.9);
    box-shadow: none;
}

html body .project-table-actions .btn:is(:disabled, .disabled) {
    opacity: .45;
    box-shadow: none;
}

@media (pointer: coarse) {
    html body .project-table-actions .btn {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .project-table-actions .btn {
        transition: none;
    }
}

body {
    background-attachment: fixed;
    background-position: center 16%;
}

body.bg-light {
    background: var(--body-bg) center 16% / cover fixed !important;
}

/* One viewport shell; only the assignment grid scrolls on larger screens. */
html:has(.birdseye-page), html body:has(.birdseye-page) {
    height: 100%; min-height: 0; overflow: hidden;
}
html body .main-content:has(.birdseye-page) {
    display: flex; flex-direction: column; box-sizing: border-box;
    height: 100dvh; min-height: 0; max-height: 100dvh;
    width: 100%; margin: 0; padding: 8px 18px;
}
html body .main-content:has(.birdseye-page) .top-navbar { flex-shrink: 0; margin: 8px auto; }
html body .main-content:has(.birdseye-page) .page-content { flex: 1 1 0; min-height: 0; min-width: 0; padding: 8px 10px 0; display: flex; }
html body .main-content:has(.birdseye-page) #app { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; }
html body .birdseye-page { flex: 1 1 0; min-width: 0; min-height: 0; padding: 0; gap: 8px; }
html body .birdseye-page > .mb-3 { margin-bottom: 0 !important; flex-shrink: 0; }
html body .birdseye-page .birdseye-panel { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding: 12px; margin: 0 !important; }
html body .birdseye-panel > :not(.birdseye-scroll) { flex-shrink: 0; }
html body .birdseye-page .birdseye-scroll { flex: 1 1 0; min-height: 0; max-height: none; overscroll-behavior: contain; }
html body .main-content:has(.birdseye-page) .lantern-footer { position: relative; flex-shrink: 0; left: auto; right: auto; bottom: auto; transform: none; margin: 8px auto 0; }
html body .birdseye-table td { min-width: 210px; white-space: normal; }
html body .birdseye-table td > small { margin: 4px 0; }
html body .birdseye-table td > a { display: inline-block; text-decoration: underline; text-underline-offset: 3px; }
html body .birdseye-page .birdseye-panel:not(.is-fullscreen) {
    flex: 0 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 58dvh;
}
html body .birdseye-page .birdseye-panel:not(.is-fullscreen) .birdseye-scroll {
    flex: 0 1 auto;
    height: min(42dvh, 480px);
    min-height: 180px;
    max-height: 480px;
}
html body .birdseye-panel.is-fullscreen {
    position: fixed;
    z-index: 2400;
    inset: 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: none;
    margin: 0 !important;
    padding: 16px;
    background: var(--surface-bg-strong);
    box-shadow: 0 20px 80px rgba(0, 0, 0, .48);
}
html body .birdseye-panel.is-fullscreen .birdseye-scroll { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }
body:has(.birdseye-panel.is-fullscreen) { overflow: hidden; }
html body .birdseye-page-toolbar { flex-shrink: 0; }
html body .birdseye-page-actions { display: flex; align-items: center; gap: 8px; }
html body .birdseye-page-actions .btn { min-height: 46px; }
@media (max-width: 640px) {
    html body .birdseye-page-actions { gap: 6px; }
    html body .birdseye-page-actions .btn { min-height: 40px; padding-inline: 9px; }
}

/* Task history: compact event list with expandable, clearly labeled changes. */
html body .task-history { min-width: 0; }
html body .task-history > h3 { margin-bottom: 10px; color: var(--body-color); }
html body .task-history-table { overflow: hidden; border: 1px solid var(--surface-border); border-radius: 12px; background: var(--surface-bg-strong); }
html body .task-history-row + .task-history-row { border-top: 1px solid var(--surface-border); }
html body .task-history-summary {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    width: 100%; padding: 12px 14px; border: 0; background: transparent; color: var(--body-color); text-align: left;
}
html body .task-history-summary:hover, html body .task-history-row.is-expanded .task-history-summary { background: var(--surface-hover); }
html body .task-history-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
html body .task-history-event-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--lantern-inset); color: var(--primary); }
html body .task-history-event-copy { display: grid; min-width: 0; gap: 4px; }
html body .task-history-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
html body .task-history-meta strong { color: var(--body-color); font-size: 13px; }
html body .task-history-meta time { color: var(--text-muted); font-size: 12px; }
html body .task-history-description { color: var(--body-color); font-size: 14px; overflow-wrap: anywhere; }
html body .task-history-change-count { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
html body .task-history-changes { display: grid; gap: 0; margin: 0 14px 12px 48px; border: 1px solid var(--surface-border); border-radius: 9px; overflow: hidden; }
html body .task-history-changes > div { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 12px; padding: 8px 10px; background: var(--lantern-inset); }
html body .task-history-changes > div + div { border-top: 1px solid var(--surface-border); }
html body .task-history-changes dt { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: capitalize; }
html body .task-history-changes dd { margin: 0; color: var(--body-color); font-size: 13px; overflow-wrap: anywhere; }
html body .task-history-no-changes { margin: 0 14px 12px 48px; color: var(--text-muted); font-size: 13px; }
html body .task-history-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; color: var(--text-muted); font-size: 13px; }
@media (max-width: 575.98px) {
    html body .task-history-summary { grid-template-columns: 24px minmax(0, 1fr); }
    html body .task-history-change-count { grid-column: 2; }
    html body .task-history-changes { margin-left: 14px; }
    html body .task-history-changes > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (max-width: 640px), (max-height: 600px) {
    html body .main-content:has(.birdseye-page) { overflow-y: auto; padding: 6px; }
    html body .main-content:has(.birdseye-page) .page-content { flex: 1 0 auto; }
    html body .birdseye-page .birdseye-scroll { flex: none; height: 55dvh; min-height: 220px; }
    html body .birdseye-search { max-width: none; width: 100%; }
}

html body .main-content {
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    background: var(--workspace-bg) center 16% / cover fixed;
    min-height: calc(100vh - 48px);
}

/* Keep scrollable page content clear of the fixed workspace dock. */
html body .page-content {
    padding-bottom: 110px;
}

/* Common surfaces used by projects, tasks, reports, teams and administration. */
html body :is(.glass-card, .dashboard-card, .workspace-stat, .project-stat-card,
    .project-detail-hero, .project-detail-stat, .workspace-mobile-card,
    .settings-action-card, .user-work-panel, .user-detail-chart-card,
    .user-detail-task-list, .project-task-detail-panel, .project-detail-task-card) {
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-panel);
    color: var(--body-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html body :is(.workspace-page-header h1, .project-detail-hero h1) {
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 500;
    letter-spacing: -.025em;
}

html body :is(.workspace-page-header p, .project-detail-hero p,
    .project-detail-stat span, .project-detail-stat small) {
    color: var(--text-muted);
}

html body .text-muted,
html body .text-secondary {
    color: var(--text-muted) !important;
}

html body .lantern-project-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

html body .lantern-project-stats>div {
    width: auto;
    padding: 0;
    margin: 0;
}

html body .project-stat-card {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    min-height: 138px;
    padding: 12px;
    gap: 10px;
}

html body .project-stat-card p {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    color: var(--body-color);
    font-size: 12px;
    font-weight: 400;
}

html body .project-stat-card .stat-icon {
    grid-column: 2;
    grid-row: 1;
    width: 24px;
    height: 24px;
    font-size: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--lantern-inset);
    color: var(--body-color);
}

html body .project-stat-card h2 {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 400;
    margin: 0;
    color: var(--body-color);
    overflow-wrap: anywhere;
}

html body .project-stat-card:hover {
    transform: translateY(-2px);
}

html body :is(.btn-primary-custom, .btn-secondary.results-pill) {
    background: var(--action-bg);
    color: var(--action-text);
    border: 1px solid rgba(167, 245, 228, .6);
    border-radius: 8px;
}

.workspace-page {
    gap: 18px;
}

.workspace-stat strong,
.project-stat-card h2,
.project-detail-stat strong {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

html body :is(.workspace-list-row, .project-task-row, .user-task-row,
    .workspace-filter-panel, .project-detail-tabs, .workspace-department) {
    border-color: var(--surface-border);
    border-radius: 6px;
    background: var(--lantern-inset);
    color: var(--body-color);
}

html body :is(.form-control, .form-select) {
    border-color: var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--body-color);
}

html body :is(.form-control, .form-select):focus {
    background-color: var(--input-focus-bg);
    border-color: var(--primary-light);
    color: var(--body-color);
    box-shadow: 0 0 0 3px rgba(91, 210, 211, .18);
}

html body .form-control::placeholder {
    color: var(--text-muted);
    opacity: .85;
}

html body select option {
    background: var(--surface-bg-strong);
    color: var(--body-color);
}

html body :is(.btn-primary-custom, .btn-outline-custom) {
    border-radius: 6px;
    box-shadow: none;
}

html body .btn-outline-custom {
    background: var(--lantern-inset);
    border-color: var(--surface-border);
    color: var(--body-color);
}

html body :is(.modal-content, .workspace-modal-content, .profile-menu,
    .notification-panel, .tenant-search-panel, .workspace-picker-popover) {
    background: var(--surface-bg-strong);
    color: var(--body-color);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
}

html body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--body-color);
    --bs-table-hover-color: var(--body-color);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-border-color: var(--surface-border);
    color: var(--body-color);
}

html body .table thead th {
    background: var(--lantern-inset);
    color: var(--text-light);
    font-weight: 500;
}

html body :is(.project-progress-cell, .task-progress-cell) progress::-webkit-progress-value {
    background: var(--lantern-progress);
}

html body :is(.project-progress-cell, .task-progress-cell) progress::-moz-progress-bar {
    background: var(--lantern-progress);
}

html body .workspace-meter-fill:not(.critical):not(.high) {
    background: var(--lantern-progress);
}

/* Floating header and footer retain the search, view switch and all menus. */
html body .top-navbar.glass-card {
    width: min(520px, calc(100vw - 32px));
    margin: 12px auto 22px;
    border-radius: 12px;
    overflow: visible;
    background: var(--lantern-panel);
}

html body .top-navbar:not(:has(.lantern-top-brand)) {
    width: min(860px, 100%);
}

html body .top-navbar:not(:has(.lantern-top-brand)) .search-wrapper {
    width: clamp(200px, 30vw, 360px);
}

html body .mobile-menu-toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
}

@media (min-width: 992px) {
    html body .mobile-menu-toggle {
        display: none !important;
    }
}

html body .sidebar.show {
    left: 0;
    width: min(300px, 88vw);
    padding: 24px 18px;
    opacity: 1;
    pointer-events: auto;
    z-index: 10000;
    background: var(--surface-bg-strong);
}

html body :is(.lantern-footer-dock, .lantern-footer-links) {
    border-radius: 10px;
    background: var(--lantern-panel);
    border-color: var(--surface-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(0, 0, 0, .14);
}

html body .lantern-footer-links {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 5px;
}

html body .lantern-footer-links a {
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-panel);
    color: var(--body-color);
}

html body .lantern-footer-links a:hover {
    background: var(--surface-hover);
}

html body :is(.lantern-clock, .lantern-top-actions .btn-outline-custom) {
    color: var(--body-color);
}

html body .lantern-top-actions .btn-outline-custom {
    border-radius: 6px;
    background: var(--lantern-inset);
}

/* Dashboard proportions follow the reference while allowing real content to grow. */
html body .lantern-cockpit {
    width: min(100%, 1480px);
    min-height: 600px;
    padding: 12px 14px 48px;
    gap: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.lantern-cockpit::before {
    background: none;
}

html body :is(.lantern-panel, .lantern-mini-stat) {
    background: var(--lantern-panel);
    border-color: var(--surface-border);
    border-radius: 8px;
    color: var(--body-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

html body :is(.lantern-mini-stat span, .lantern-hold-panel span,
    .lantern-project-meter span, .lantern-panel h2, .lantern-calendar-link) {
    color: var(--body-color);
}

html body .lantern-mini-stat {
    min-height: 138px;
    padding: 12px 14px;
}

html body .lantern-mini-stat strong {
    font-size: clamp(32px, 3.4vw, 54px);
    font-weight: 400;
    color: var(--body-color);
}

html body .lantern-panel h2,
html body .lantern-mini-stat span {
    font-weight: 400;
}

html body .lantern-project-meter {
    grid-template-columns: 76px minmax(0, 1fr);
}

html body .lantern-main-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .lantern-main-stats .lantern-mini-stat-wide {
    grid-column: auto;
}

html body .lantern-hold-panel {
    min-height: 138px;
}

html body .lantern-cockpit-separator {
    width: 5px;
    margin: 0;
    background: rgba(217, 217, 217, .4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

html body .lantern-project-meter b,
html body .lantern-task-strip b {
    background: var(--lantern-progress);
    box-shadow: none;
}

html body .lantern-task-stack {
    position: relative;
    width: min(100%, 760px);
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    border-color: transparent;
    background: none !important;
    border: 0 !important;
}

html body .lantern-stack-card {
    background: var(--lantern-panel);
    border-color: var(--surface-border);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

html body .lantern-calendar-grid button {
    color: var(--body-color);
    background: var(--lantern-inset);
    border-color: var(--surface-border);
}

html body .lantern-calendar-grid button:is(.selected, :hover) {
    color: var(--body-color);
    background: var(--surface-hover);
}

html body .lantern-slide-controls button {
    min-width: 24px;
    min-height: 24px;
    color: var(--body-color);
}

html body .lantern-slide-controls .lantern-slide-dot {
    min-width: 10px;
    min-height: 10px;
}

.lantern-slide-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lantern-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}

.lantern-due-summary {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    font-size: 12px;
}

html body .lantern-log-panel {
    background: var(--lantern-panel);
    color: var(--body-color);
}

html body .lantern-log-panel h2 {
    color: var(--body-color);
}

.lantern-log-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.lantern-log-feed {
    overflow-y: auto;
}

/* Match the same quiet glass treatment on authentication screens. */
html body .auth-page {
    background: var(--workspace-bg) center 16% / cover;
}

html body .auth-page::before,
html body .auth-page::after {
    opacity: 0;
}

html body .auth-card {
    background: var(--lantern-panel);
    border-color: var(--surface-border);
    border-radius: 12px;
    color: var(--body-color);
}

html body .auth-card h2 {
    color: var(--body-color);
    font-weight: 500;
}

:is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 3px;
}

@media (min-width: 960px) {
    html body.lantern-dashboard-page {
        overflow: auto;
    }

    html body.lantern-dashboard-page .main-content {
        height: auto;
        min-height: calc(100vh - 48px);
        overflow: visible;
    }

    html body.lantern-dashboard-page :is(.page-content, #app, .lantern-dashboard) {
        height: auto;
        overflow: visible;
    }

    html body.lantern-dashboard-page .page-content {
        padding-bottom: 110px;
    }

    html body.lantern-dashboard-page .lantern-cockpit {
        height: auto;
        min-height: max(570px, calc(100vh - 190px));
        grid-template-columns: minmax(180px, 1fr) 5px minmax(290px, 1.52fr) 5px minmax(180px, 1fr);
    }

    html body .lantern-cockpit-separator {
        width: 5px;
        height: auto;
    }

    html body .lantern-mini-stat {
        min-height: 138px;
    }

    html body .lantern-cockpit {
        padding: 12px 14px 30px;
    }

    html body .lantern-footer {
        bottom: 36px;
        gap: clamp(14px, 3vw, 44px);
    }
}

@media (max-width: 959px) {
    html body .lantern-project-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .lantern-cockpit {
        min-height: 0;
        padding: 10px 0 30px;
    }

    html body .lantern-cockpit-separator {
        width: 100%;
        height: 4px;
    }

    html body .lantern-mini-stat {
        min-height: 110px;
    }

    html body .lantern-footer {
        width: calc(100vw - 24px);
        flex-direction: column;
        gap: 8px;
    }

    html body .lantern-footer-dock {
        width: min(520px, 100%);
    }

    html body .lantern-footer-links {
        justify-content: center;
    }

    html body .page-content {
        padding-bottom: 150px;
    }
}

@media (max-width: 640px) {
    html body .lantern-project-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .main-content {
        width: calc(100% - 16px);
        margin: 8px auto;
        padding: 8px;
    }

    html body .top-navbar.glass-card {
        gap: 8px;
        padding: 6px 8px;
    }

    .lantern-top-brand {
        width: 80px;
        flex-basis: 80px;
    }

    .lantern-clock {
        min-width: 60px;
        font-size: 11px;
    }

    html body .lantern-main-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lantern-footer-brand {
        width: 84px;
        flex-basis: 84px;
    }

    .lantern-footer-dock {
        gap: 6px;
    }

    .lantern-view-select {
        width: 108px;
        flex-basis: 108px;
    }

    html body .page-content {
        padding-bottom: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lantern-slide-track {
        transition: none;
    }

    .lantern-stack-stage *,
    .lantern-stack-stage {
        animation: none !important;
    }
}

/* PDF reference pages 10-17: setup navigation and composed page layouts. */
.lantern-project-overview {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.55fr) minmax(200px, 1fr);
    gap: var(--lantern-layout-gap);
    align-items: start;
}

.lantern-project-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.lantern-detail-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

html body .lantern-detail-kpis .project-detail-stat {
    min-height: 112px;
    padding: 12px;
    justify-content: space-between;
}

.lantern-detail-kpis strong {
    align-self: flex-end;
    font-size: 32px;
}

.lantern-project-sheet {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--surface-border);
    border-radius: var(--lantern-panel-radius);
    background: var(--lantern-panel);
    box-shadow: 0 8px 0 -2px rgba(217, 217, 217, .28), 0 17px 0 -5px rgba(217, 217, 217, .2), 0 27px 0 -9px rgba(217, 217, 217, .14);
}

.lantern-detail-block,
.lantern-reference-calendar {
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
    min-width: 0;
}

.lantern-project-rail>.lantern-detail-block,
.lantern-reference-calendar {
    background: var(--lantern-panel);
}

.lantern-project-overview h2,
.lantern-reference-calendar h2 {
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 10px;
}

.lantern-detail-block>small {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
}

.lantern-detail-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lantern-detail-dates small,
.lantern-detail-dates strong {
    display: block;
    font-size: 11px;
}

.lantern-detail-dates strong {
    font-weight: 400;
    margin-top: 6px;
}

.lantern-reference-progress {
    width: 100%;
    height: 10px;
    margin-top: 10px;
}

.lantern-reference-progress::-webkit-progress-bar,
.lantern-reference-tasks progress::-webkit-progress-bar {
    background: var(--lantern-inset);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-reference-progress::-webkit-progress-value,
.lantern-reference-tasks progress::-webkit-progress-value {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-reference-progress::-moz-progress-bar,
.lantern-reference-tasks progress::-moz-progress-bar {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-detail-log {
    padding: 14px;
    border-radius: 8px;
    background: rgba(245, 245, 245, .85);
    color: #292929;
}

.lantern-detail-log>div {
    padding: 10px 0;
    border-top: 1px dotted #a1a6a4;
    font-size: 11px;
}

.lantern-detail-log p {
    margin: 4px 0;
    font-size: 12px;
}

html body .lantern-detail-log .btn {
    color: #292929;
    border-color: #8b9692;
}

.lantern-reference-tasks>button:not(.btn) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    background: var(--lantern-inset);
    color: var(--body-color);
    text-align: left;
    font-size: 12px;
}

.lantern-reference-tasks progress {
    width: 100%;
    height: 8px;
}

.lantern-reference-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: 8px;
}

.lantern-reference-days :is(a, button) {
    display: grid;
    place-items: center;
    min-height: 28px;
    aspect-ratio: 1;
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    background: var(--lantern-inset);
    font-size: 10px;
    color: var(--body-color);
    text-decoration: none;
    position: relative;
}

/* Owner navigation remains discoverable even though the desktop sidebar is a drawer. */
html body .owner-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
    color: var(--body-color);
    font-size: 13px;
    font-weight: 600;
}

html body .owner-menu-toggle:hover,
html body .owner-menu-toggle:focus-visible {
    border-color: var(--primary-light);
    color: var(--primary-light);
}

html body .owner-brand-toggle {
    padding: 5px 10px;
}

html body .owner-brand-toggle img {
    display: block;
    width: auto;
    height: 26px;
    max-width: 156px;
    object-fit: contain;
}

@media (max-width: 640px) {
    html body .owner-menu-toggle span {
        display: none;
    }

    html body .owner-menu-toggle {
        width: 38px;
        justify-content: center;
        padding: 0;
    }

    html body .owner-brand-toggle {
        width: auto;
        padding: 5px 8px;
    }

    html body .owner-brand-toggle img {
        height: 22px;
        max-width: 130px;
    }
}

/* Keep the owner drawer and its brand mark constrained even when older
   global sidebar rules or cached styles are present. */
html body aside#sidebar.sidebar.show {
    box-sizing: border-box !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
}

html body aside#sidebar .sidebar-brand img {
    display: block !important;
    width: 170px !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.lantern-reference-days :is(a, button).today {
    background: var(--lantern-selected);
    border-color: var(--primary-light);
}

.lantern-reference-calendar .workspace-section-title {
    flex-wrap: wrap;
    gap: 6px;
}

.lantern-reference-calendar .workspace-section-title span {
    font-size: 10px;
}

html body .user-detail-modal .modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, .45fr);
    gap: 14px;
}

.user-detail-modal .user-detail-layout,
.user-detail-modal .user-detail-related-grid {
    display: contents;
}

.user-detail-modal .modal-body>*,
.user-detail-modal .user-detail-layout>section {
    grid-column: 1;
    margin-top: 0 !important;
    min-width: 0;
}

.user-detail-modal .user-detail-related-grid>section {
    grid-column: 1;
    min-width: 0;
}

.user-detail-modal .user-detail-related-grid>section:last-child {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: start;
    position: sticky;
    top: 0;
}

.user-detail-modal .user-detail-layout>section:first-child {
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
}

.user-detail-modal .user-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-detail-modal .user-contact-actions {
    gap: 6px;
    margin-top: 12px !important;
}

.user-detail-modal .user-contact-actions .btn {
    font-size: 12px;
    padding: 7px 10px;
}

.user-detail-modal .user-work-kpis>div {
    border-radius: 8px;
    background: var(--lantern-inset);
    border: 1px solid var(--surface-border);
}

.user-detail-modal .user-chart-row b {
    background: var(--lantern-progress);
}

.user-detail-modal .user-progress-ring-row {
    gap: 12px;
}

html body .lantern-task-detail {
    border-radius: var(--lantern-panel-radius);
}

.lantern-task-detail .task-detail-primary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lantern-task-detail .task-detail-primary>div {
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
}

.lantern-task-detail .task-detail-primary>div:nth-child(3) {
    order: -1;
}

.lantern-task-detail .task-detail-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lantern-task-detail .project-task-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lantern-team-editor .modal-body> :is(.row, .mb-3) {
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
}

.lantern-team-editor .form-control,
.lantern-team-editor .form-select {
    min-height: 38px;
}

@media (max-width: 1100px) {
    .lantern-project-overview {
        grid-template-columns: minmax(180px, .65fr) minmax(0, 1fr);
    }

    .lantern-project-overview>.lantern-project-rail:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .lantern-project-overview {
        display: flex;
        flex-direction: column;
    }

    .lantern-project-overview>* {
        width: 100%;
    }

    .lantern-project-overview>.lantern-project-rail:last-child {
        display: flex;
    }

    html body .user-detail-modal .modal-body {
        display: flex;
        flex-direction: column;
    }

    .user-detail-modal .user-detail-related-grid>section:last-child {
        position: static;
    }
}

.lantern-setup-page {
    display: grid;
    grid-template-columns: var(--lantern-setup-rail) minmax(0, 1fr);
    align-items: start;
    gap: var(--lantern-layout-gap);
    max-width: 1480px;
    margin: 12px auto 0;
}

.lantern-setup-page> :not(.lantern-setup-nav):not(.modal) {
    grid-column: 2;
    min-width: 0;
    margin-bottom: 0 !important;
}

.lantern-setup-nav {
    grid-column: 1;
    grid-row: 1 / span 12;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    position: sticky;
    top: 24px;
}

.lantern-setup-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 132px;
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    background: var(--lantern-panel);
    color: var(--body-color);
    text-decoration: none;
    backdrop-filter: blur(12px);
    font-size: 16px;
}

.lantern-setup-tile i {
    align-self: flex-end;
    display: grid;
    place-items: center;
    width: 46px;
    height: 52px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    font-size: 23px;
    background: var(--lantern-inset);
}

.lantern-setup-tile.active {
    background: var(--lantern-selected);
    box-shadow: inset 0 -3px 0 var(--primary-light);
}

.lantern-setup-tile:hover {
    color: var(--body-color);
    border-color: var(--primary-light);
}

.lantern-back-link {
    grid-column: 1 / -1;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    color: var(--text-muted);
    font-size: 12px;
}

.lantern-setup-page>.d-flex,
.lantern-setup-page>.workspace-page-header {
    flex-wrap: wrap;
    gap: 14px;
}

.lantern-setup-page h1,
.lantern-setup-page h2.fw-bold {
    font-size: 24px;
    font-weight: 400 !important;
}

.lantern-setup-page p.text-secondary {
    font-size: 12px;
    margin: 6px 0 0;
}

html body .lantern-setup-page :is(.workspace-stat, .lantern-team-stats .dashboard-card) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    padding: 14px;
    min-height: 126px;
    text-align: left;
    width: 100%;
}

.lantern-setup-page .workspace-stat strong,
.lantern-team-stats h2 {
    align-self: flex-end;
    font-size: 36px;
    font-weight: 400;
    margin: 0;
}

.lantern-setup-page .workspace-stat span,
.lantern-team-stats h6 {
    font-size: 13px;
    font-weight: 400;
}

.lantern-setup-page .workspace-stat small {
    font-size: 10px;
}

.lantern-setup-page .workspace-stat-icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
    background: var(--lantern-inset);
    border-radius: 5px;
}

.lantern-role-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 18px;
    background: var(--lantern-panel);
    border: 1px solid var(--surface-border);
    border-radius: var(--lantern-panel-radius);
}

.lantern-role-editor> :is(.col-lg-4, .col-lg-8) {
    width: 100%;
    padding: 0;
    margin: 0 !important;
}

html body .lantern-role-editor .glass-card {
    padding: 14px !important;
    background: var(--lantern-inset);
    box-shadow: none;
    backdrop-filter: none;
}

.lantern-role-editor h5 {
    font-size: 13px;
    font-weight: 400 !important;
    margin-bottom: 12px !important;
}

.lantern-role-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lantern-role-tab,
.lantern-permission-toggle {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--lantern-inset);
    color: var(--body-color);
    padding: 10px 12px;
    text-align: left;
}

.lantern-role-tab {
    flex: 1 1 110px;
}

.lantern-role-tab small,
.lantern-permission-toggle small {
    display: block;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.lantern-role-tab.active,
.lantern-permission-toggle.active {
    background: var(--lantern-selected);
    border-color: var(--primary-light);
}

.lantern-permission-group {
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-permission-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 100%;
    font-size: 12px;
}

.lantern-permission-toggle:disabled {
    cursor: default;
}

.lantern-users-page .lantern-setup-nav {
    grid-row: 1 / span 2;
}

.lantern-users-page> :is(.glass-card, .responsive-card-list, .workspace-pagination-footer) {
    grid-column: 1 / -1;
}

html body .lantern-users-page .user-directory-table {
    border-radius: var(--lantern-panel-radius);
    padding: 14px !important;
}

.lantern-users-page .table tbody td {
    border-bottom: 1px solid var(--surface-border);
}

.lantern-team-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.lantern-team-stats>div {
    width: auto;
    padding: 0;
    margin: 0;
}

.lantern-team-cards {
    margin: 0;
    gap: 16px;
}

.lantern-team-cards>.col-md-6 {
    width: calc(50% - 8px);
    margin: 0;
    padding: 0;
}

.lantern-team-cards>.col-12 {
    padding: 0;
    margin: 0;
}

html body .lantern-team-card {
    border-radius: var(--lantern-panel-radius);
    padding: 18px;
}

.lantern-team-card h5 {
    font-size: 20px;
    font-weight: 400;
}

.lantern-team-card>.mb-2,
.lantern-team-card>.mb-3 {
    padding: 12px;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--lantern-inset);
}

.lantern-team-card>.d-flex:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lantern-team-card .progress {
    height: 9px;
    border: 1px solid var(--surface-border);
    background: var(--lantern-inset);
}

.lantern-team-card .progress-bar {
    background: var(--lantern-progress);
}

.lantern-setup-page .modal-content {
    border-radius: var(--lantern-panel-radius);
}

.lantern-setup-page .modal-header,
.lantern-setup-page .modal-footer {
    border-color: var(--surface-border);
}

html body .lantern-profile-page {
    width: min(840px, 100%);
    margin: 28px auto 70px;
    padding: 26px;
    background: var(--lantern-panel);
    border: 1px solid var(--surface-border);
    border-radius: var(--lantern-panel-radius);
}

.lantern-profile-page .workspace-page-header {
    align-items: start;
}

.lantern-profile-page .workspace-page-header p {
    max-width: 450px;
    font-size: 12px;
}

.lantern-profile-layout {
    flex-direction: row-reverse;
    --bs-gutter-x: 24px;
}

html body .lantern-profile-layout .dashboard-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}

.lantern-profile-layout .profile-avatar-large,
.lantern-profile-layout .profile-avatar-placeholder {
    width: 94px;
    height: 94px;
    margin: 0 auto 16px;
    border: 1px solid var(--surface-border);
}

.lantern-profile-layout .profile-summary h2 {
    font-size: 16px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.lantern-profile-layout .profile-summary>span {
    font-size: 12px;
}

.lantern-profile-page .form-control {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
}

.lantern-profile-page .form-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.lantern-profile-page .workspace-section-title {
    flex-wrap: wrap;
    gap: 8px;
}

.lantern-profile-page .workspace-section-title h2 {
    font-size: 16px;
}

.lantern-profile-page .workspace-section-title span {
    font-size: 10px;
}

.lantern-rooms-page>.row.g-4 {
    margin: 0;
    gap: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, .6fr);
}

.lantern-rooms-page>.row.g-4>div {
    min-width: 0;
    width: auto;
    padding: 0;
    margin: 0;
}

.lantern-rooms-page>.row.g-4>div:first-child {
    grid-row: 1 / span 2;
}

html body .lantern-rooms-page .dashboard-card {
    border-radius: var(--lantern-panel-radius);
}

.lantern-rooms-page .workspace-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1100px) {
    .lantern-setup-page {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .lantern-setup-nav {
        gap: 8px;
    }

    .lantern-setup-tile {
        min-height: 112px;
        padding: 10px;
        font-size: 14px;
    }

    .lantern-setup-page .workspace-stats-grid,
    .lantern-team-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lantern-profile-identity {
        width: 30%;
    }

    .lantern-profile-fields {
        width: 70%;
    }
}

@media (max-width: 767px) {
    .lantern-setup-page {
        display: flex;
        flex-direction: column;
    }

    .lantern-setup-page>* {
        width: 100%;
    }

    .lantern-setup-nav {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lantern-setup-tile {
        min-height: 76px;
        font-size: 12px;
        padding: 8px;
        gap: 10px;
    }

    .lantern-setup-tile i {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .lantern-back-link {
        padding: 4px 0;
    }

    .lantern-team-cards>.col-md-6 {
        width: 100%;
    }

    .lantern-profile-layout {
        flex-direction: column;
        gap: 22px;
    }

    .lantern-profile-identity,
    .lantern-profile-fields {
        width: 100%;
    }

    html body .lantern-profile-page {
        padding: 18px;
        margin-top: 8px;
    }

    .lantern-rooms-page>.row.g-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .lantern-rooms-page>.row.g-4>div:first-child {
        grid-row: auto;
    }
}

/* Reference page 15: team workspace, work summaries and assignment rail. */
.lantern-team-assignment {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lantern-team-assignment-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body .lantern-team-assignment-stats .dashboard-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 126px;
    padding: 14px;
}

.lantern-team-assignment-stats span {
    font-size: 13px;
}

.lantern-team-assignment-stats strong {
    align-self: flex-end;
    font-size: 36px;
    font-weight: 400;
}

.lantern-team-assignment h3 {
    font-size: 15px;
    font-weight: 400;
}

.lantern-available-member {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px solid var(--surface-border);
    font-size: 13px;
}

.lantern-available-member small {
    color: var(--text-muted);
}

html body .lantern-team-card {
    padding: 16px;
    border-radius: 22px;
    cursor: pointer;
}

.lantern-team-card>.d-flex:first-child {
    flex-wrap: wrap;
    gap: 8px;
}

.lantern-team-card h5 {
    font-size: 17px;
    overflow-wrap: anywhere;
}

.lantern-team-card .lantern-team-description {
    margin: 12px 0;
    font-size: 12px;
}

/* Teams and chat visual refinement */
html body .lantern-teams-page .lantern-team-stats .dashboard-card {
    width: 100%;
    min-height: 112px;
    padding: 18px 20px;
    text-align: left;
    border-radius: 16px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html body .lantern-teams-page .lantern-team-stats .dashboard-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

html body .lantern-teams-page .lantern-team-stats h6 {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
}

html body .lantern-teams-page .lantern-team-stats h2 {
    margin: 0;
    color: var(--body-color);
    font-size: 30px;
    font-weight: 700;
}

html body .lantern-teams-page .lantern-team-search {
    padding: 18px;
    border-radius: 16px;
}

html body .lantern-teams-page .lantern-team-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 18px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html body .lantern-teams-page .lantern-team-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

html body .lantern-teams-page .lantern-team-card img {
    border: 2px solid var(--surface-border) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14) !important;
}

html body .lantern-teams-page .lantern-team-card .lantern-team-description {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

html body .lantern-teams-page .lantern-team-card .lantern-team-metrics>div {
    border-radius: 12px;
}

html body .team-chat-workspace {
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

html body .team-chat-workspace .team-chat-rail {
    background: var(--surface-bg-strong);
}

html body .team-chat-workspace .team-chat-main {
    background: var(--body-bg);
}

html body .team-chat-workspace .team-chat-thread {
    min-height: 68px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

html body .team-chat-workspace .team-chat-thread:hover {
    transform: translateX(2px);
}

html body .team-chat-workspace .team-chat-thread.active {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--surface-border));
}

html body .team-chat-workspace .team-chat-main-header {
    min-height: 78px;
    border-bottom: 1px solid var(--surface-border);
}

html body .team-chat-workspace .team-chat-panel {
    background-image: radial-gradient(color-mix(in srgb, var(--primary) 8%, transparent) .7px, transparent .7px);
    background-size: 18px 18px;
}

html body .team-chat-workspace .chat-bubble {
    border-radius: 5px 16px 16px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .07);
}

html body .team-chat-workspace .chat-message.mine .chat-bubble {
    border-radius: 16px 5px 16px 16px;
}

html body .team-chat-workspace .team-chat-composer {
    border-top: 1px solid var(--surface-border);
    background: var(--surface-bg-strong);
}

html body .team-chat-workspace .team-chat-composer .form-control {
    min-height: 46px;
    border-radius: 12px;
}

@media (max-width: 767px) {
    html body .lantern-teams-page .lantern-team-stats .dashboard-card {
        min-height: 96px;
        padding: 14px;
    }

    html body .lantern-teams-page .lantern-team-stats h2 {
        font-size: 25px;
    }

    html body .team-chat-workspace {
        border-radius: 14px;
    }
}

/* WhatsApp-style mobile chat navigation and full-height conversation. */
.mobile-chat-back {
    display: none;
}

@media (max-width: 767.98px) {
    html body .team-chat-page.teams-style-chat-page {
        position: fixed;
        z-index: 20;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 100dvh;
        padding: 0;
        overflow: hidden;
        background: var(--body-bg);
    }

    html body .team-chat-page.teams-style-chat-page .workspace-page-header {
        display: none;
    }

    html body .team-chat-page.teams-style-chat-page .workspace-inline-alert {
        flex: 0 0 auto;
        margin: 8px 10px;
    }

    html body .teams-style-chat-page .teams-chat-shell {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html body .teams-style-chat-page .teams-chat-shell .team-chat-rail,
    html body .teams-style-chat-page .teams-chat-shell .team-chat-main {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        border: 0;
        border-radius: 0;
        transition: transform .2s ease;
    }

    html body .teams-style-chat-page .teams-chat-shell .team-chat-rail {
        z-index: 2;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
        transform: translateX(0);
    }

    html body .teams-style-chat-page .teams-chat-shell .team-chat-main {
        z-index: 3;
        grid-template-rows: auto minmax(0, 1fr) auto;
        transform: translateX(100%);
    }

    html body .teams-style-chat-page .teams-chat-shell.mobile-conversation-open .team-chat-rail {
        transform: translateX(-100%);
    }

    html body .teams-style-chat-page .teams-chat-shell.mobile-conversation-open .team-chat-main {
        transform: translateX(0);
    }

    html body .teams-style-chat-page .team-chat-rail-header {
        padding: 8px 4px 12px;
        font-size: 21px;
    }

    html body .teams-style-chat-page .team-chat-thread {
        min-height: 72px;
        padding: 10px;
        border-bottom: 1px solid var(--surface-border);
        border-radius: 0;
    }

    html body .teams-style-chat-page .team-chat-thread:hover {
        transform: none;
    }

    html body .teams-style-chat-page .team-chat-main-header {
        min-height: calc(62px + env(safe-area-inset-top));
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
        gap: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    html body .teams-style-chat-page .mobile-chat-back {
        display: inline-flex;
        flex: 0 0 36px;
        width: 36px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--body-color);
        font-size: 20px;
    }

    html body .teams-style-chat-page .team-chat-main-header .chat-profile-trigger {
        flex: 1 1 auto;
    }

    html body .teams-style-chat-page .team-chat-main-header .chat-details-button {
        width: 36px;
        height: 36px;
    }

    html body .teams-style-chat-page .team-chat-panel {
        min-height: 0;
        max-height: none;
        padding: 14px 12px max(14px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    html body .teams-style-chat-page .chat-message {
        margin-bottom: 10px;
    }

    html body .teams-style-chat-page .chat-bubble {
        max-width: 88%;
        padding: 9px 12px;
    }

    html body .teams-style-chat-page .team-chat-composer {
        padding: 9px 10px max(10px, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }

    html body .teams-style-chat-page .chat-composer-hint {
        display: none;
    }

    html body .team-detail-page .team-chat-workspace {
        position: relative;
        display: block;
        height: min(72dvh, 720px);
        min-height: 460px;
        overflow: hidden;
        border-radius: 14px;
    }

    html body .team-detail-page .team-chat-workspace .team-chat-rail,
    html body .team-detail-page .team-chat-workspace .team-chat-main {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        border: 0;
        border-radius: 0;
        transition: transform .2s ease;
    }

    html body .team-detail-page .team-chat-workspace .team-chat-rail {
        z-index: 2;
        transform: translateX(0);
    }

    html body .team-detail-page .team-chat-workspace .team-chat-main {
        z-index: 3;
        grid-template-rows: auto minmax(0, 1fr) auto;
        transform: translateX(100%);
    }

    html body .team-detail-page .team-chat-workspace.mobile-conversation-open .team-chat-rail {
        transform: translateX(-100%);
    }

    html body .team-detail-page .team-chat-workspace.mobile-conversation-open .team-chat-main {
        transform: translateX(0);
    }

    html body .team-detail-page .mobile-chat-back {
        display: inline-flex;
        flex: 0 0 36px;
        width: 36px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--body-color);
        font-size: 20px;
    }

    html body .team-detail-page .team-chat-main-header {
        gap: 8px;
    }

    html body .team-detail-page .team-chat-panel {
        min-height: 0;
        max-height: none;
        overscroll-behavior: contain;
    }
}

.lantern-team-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}

.lantern-team-metrics>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--lantern-inset);
}

.lantern-team-metrics span,
.lantern-team-lead small {
    font-size: 11px;
}

.lantern-team-metrics strong {
    align-self: flex-end;
    font-size: 26px;
    font-weight: 400;
}

.lantern-team-lead {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
}

.lantern-team-lead strong {
    font-size: 13px;
    font-weight: 400;
}

.lantern-team-work {
    padding: 12px;
    margin: 10px 0;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
}

.lantern-team-work h6 {
    font-size: 12px;
    font-weight: 400;
}

.lantern-team-progress {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 20px;
    gap: 6px;
    align-items: center;
    margin: 6px 0;
    font-size: 10px;
}

.lantern-team-progress progress {
    width: 100%;
    height: 10px;
    appearance: none;
}

.lantern-team-progress progress::-webkit-progress-bar {
    background: var(--lantern-inset);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-team-progress progress::-webkit-progress-value {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-team-progress progress::-moz-progress-bar {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-team-projects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--surface-border);
}

.lantern-team-projects>small {
    width: 100%;
    font-size: 11px;
}

.lantern-team-projects a {
    padding: 5px 7px;
    font-size: 11px;
    color: var(--body-color);
    border: 1px solid var(--surface-border);
    border-radius: 5px;
    background: var(--lantern-inset);
    text-decoration: none;
}

.lantern-team-projects a:hover {
    border-color: var(--primary-light);
}

@media (min-width: 1400px) {
    .lantern-teams-page {
        grid-template-columns: 210px minmax(0, 1fr) 250px;
    }

    html body .lantern-setup-page.lantern-teams-page>.lantern-team-assignment {
        grid-column: 3;
        grid-row: 2 / span 4;
        padding-left: 18px;
        border-left: 4px double var(--surface-border);
        position: sticky;
        top: 24px;
    }

    .lantern-teams-page .lantern-team-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Reference page 17: room details, snapshot and facilities grouped into one sheet. */
html body .lantern-room-editor {
    border-radius: var(--lantern-panel-radius);
}

.lantern-room-editor .modal-body>.row {
    margin: 0;
    padding: 4px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--lantern-inset);
}

.lantern-room-editor .form-label,
.lantern-room-editor h6 {
    font-size: 12px;
    font-weight: 400;
}

.lantern-room-editor .form-control {
    min-height: 38px;
    font-size: 13px;
}

.lantern-room-snapshot {
    padding: 12px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-room-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 140px;
    padding: 18px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
}

.lantern-room-preview>i {
    font-size: 38px;
    color: var(--primary-light);
}

.lantern-room-preview>div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow-wrap: anywhere;
    min-width: 100px;
}

.lantern-room-preview strong {
    font-weight: 400;
}

.lantern-room-preview span {
    font-size: 12px;
}

.lantern-room-seats {
    padding: 8px 12px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-room-facilities {
    padding-bottom: 12px;
}

/* Reference page 1: yesterday, today and upcoming/completed work. */
.lantern-task-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.lantern-task-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--lantern-layout-gap);
    align-items: start;
}

.lantern-task-column {
    min-width: 0;
    border: 1px solid var(--surface-border);
    border-radius: var(--lantern-panel-radius);
    background: var(--lantern-panel);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.lantern-task-column>header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 18px;
    border-bottom: 1px solid var(--surface-border);
}

.lantern-task-column h2 {
    font-size: 17px;
    font-weight: 400;
    margin: 0;
}

.lantern-task-column header>span {
    font-size: 14px;
}

.lantern-task-column header small {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--text-muted);
}

.lantern-task-column-items {
    padding: 12px;
    min-height: 360px;
    max-height: 620px;
    overflow-y: auto;
}

.lantern-task-board-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-inset);
    color: var(--body-color);
    text-align: left;
}

.lantern-task-board-card:hover,
.lantern-task-board-card:focus-visible {
    border-color: var(--primary-light);
    background: var(--lantern-selected);
}

.lantern-task-board-card strong {
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.lantern-task-board-project {
    font-size: 11px;
    color: var(--text-muted);
}

.lantern-task-board-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    text-transform: capitalize;
}

.lantern-task-board-card progress {
    width: 100%;
    height: 9px;
    appearance: none;
}

.lantern-task-board-card progress::-webkit-progress-bar {
    background: var(--lantern-inset);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-task-board-card progress::-webkit-progress-value {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-task-board-card progress::-moz-progress-bar {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-task-board-empty {
    padding: 24px 8px;
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .lantern-task-board {
        grid-template-columns: minmax(0, 1fr);
    }

    .lantern-task-column-items {
        min-height: 100px;
        max-height: none;
    }

    .lantern-tasks-page>.row.g-3 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lantern-tasks-page>.row.g-3>div {
        width: 100%;
    }
}

/* Interactive surfaces share the same affordances for pointer and keyboard use. */
html body :is(button.workspace-stat, button.project-detail-stat, button.dashboard-card, .lantern-interactive-tile) {
    cursor: pointer;
    color: var(--body-color);
    text-align: left;
    font-family: inherit;
}

html body :is(a.lantern-mini-stat, a.lantern-panel, .lantern-project-meter, button.workspace-stat, button.project-detail-stat, button.dashboard-card, .lantern-interactive-tile):hover {
    border-color: var(--primary-light);
    box-shadow: inset 0 0 0 1px var(--primary-light);
}

html body :is(.lantern-interactive-tile, .workspace-stat, .lantern-mini-stat, .lantern-project-meter, .lantern-team-card, .lantern-setup-tile, .lantern-task-board-card, .dashboard-card, .lantern-reference-days a):focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 4px;
}

html body .lantern-interactive-tile[aria-pressed="true"] {
    background: var(--lantern-selected);
    border-color: var(--primary-light);
}

a.lantern-project-meter {
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 4px;
}

:is(#project-detail-sections, #project-members, #room-directory, #room-bookings, #team-results, #team-assignment-members) {
    scroll-margin-top: 24px;
}

/* One project per card; carousel controls follow the vertical stack direction. */
.lantern-vertical-carousel {
    position: relative;
    min-height: 330px;
}

.lantern-vertical-carousel .lantern-slide-head {
    padding-right: 40px;
}

.lantern-vertical-carousel .lantern-slide-controls {
    z-index: 10;
    position: absolute;
    right: 12px;
    top: 54px;
    bottom: 18px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow-y: auto;
    padding: 4px;
}

.lantern-vertical-carousel .lantern-slide-controls button {
    flex-shrink: 0;
}

.lantern-vertical-carousel .lantern-task-stack-list {
    padding-right: 44px;
}

.lantern-project-carousel .lantern-stack-stage {
    min-height: 260px;
}

html body .lantern-project-carousel .lantern-stack-card {
    padding: 0;
    min-height: 210px;
}

.lantern-project-stack-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 210px;
    padding: 16px;
    color: var(--body-color);
    text-decoration: none;
    border-radius: 5px;
}

.lantern-project-stack-card:hover {
    color: var(--body-color);
    background: var(--surface-hover);
}

.lantern-project-stack-card:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 3px;
}

.lantern-project-stack-card>strong {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.lantern-project-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    font-size: 11px;
}

.lantern-project-card-team {
    font-size: 12px;
}

.lantern-project-stack-card progress {
    width: 100%;
    height: 11px;
    appearance: none;
}

.lantern-project-stack-card progress::-webkit-progress-bar {
    background: var(--lantern-inset);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.lantern-project-stack-card progress::-webkit-progress-value {
    background: var(--lantern-progress);
    border-radius: 8px;
}

.lantern-project-stack-card progress::-moz-progress-bar {
    background: var(--lantern-progress);
    border-radius: 8px;
}

html body .lantern-project-meter {
    grid-template-columns: 88px minmax(0, 1fr) auto;
}

.lantern-project-meter>small {
    font-size: 11px;
    min-width: 32px;
    text-align: right;
}

.lantern-activity-entry button.lantern-log-row {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px dotted #a1a6a4;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 8px 0;
}

.lantern-activity-entry button:hover {
    background: rgba(255, 255, 255, .25);
}

.lantern-activity-entry button:focus-visible {
    outline: 2px solid #267568;
    outline-offset: 2px;
}

.lantern-activity-detail {
    padding: 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, .35);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.lantern-activity-detail p {
    margin-bottom: 6px;
}

a.lantern-due-summary {
    text-decoration: none;
    color: var(--body-color);
}

.lantern-filter-context {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-panel);
    font-size: 13px;
}

.lantern-filter-context a {
    color: var(--body-color);
}

/* Task carousel uses one informational card for each task. */
.lantern-task-stack-card {
    min-height: 250px;
}

.lantern-slide-tasks .lantern-stack-stage {
    min-height: 300px;
}

.lantern-task-stack-card .lantern-project-card-meta {
    overflow-wrap: anywhere;
}

.lantern-setup-stack-card {
    min-height: 250px;
}

.lantern-slide-setup .lantern-stack-stage {
    min-height: 300px;
}

.lantern-setup-card-count {
    font-size: 32px;
    line-height: 1;
    font-weight: 400;
}

.lantern-setup-card-description {
    font-size: 12px;
    line-height: 1.5;
}

/* Audit: explicit loading feedback and comfortable touch targets. */
.lantern-load-message {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--lantern-panel);
}

.lantern-load-message[role="alert"] {
    border-color: #e4b8a6;
}

/* Theme parity: shared controls and pages outside the tenant dashboard. */
html body :is(.btn-primary-custom, .btn-secondary.results-pill):hover {
    background: var(--action-hover);
    color: var(--action-text);
}

html body .swal2-popup {
    background: var(--surface-bg-strong);
    color: var(--body-color);
}

html body .swal2-title {
    color: var(--body-color);
}

html body .swal2-html-container {
    color: var(--text-muted);
}

.auth-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1100;
    min-width: 44px;
    min-height: 44px;
    background: var(--surface-bg-strong) !important;
}

html body :is(.auth-card .form-label, .auth-card .small, .auth-card .text-muted,
    .auth-password-toggle, .setup-panel p, .setup-hint, .setup-checklist li) {
    color: var(--text-muted) !important;
}

html body :is(.auth-link, .auth-link:hover) {
    color: var(--primary);
}

html body :is(.auth-primary-btn, .setup-submit) {
    background: var(--action-bg);
    color: var(--action-text);
}

html body :is(.setup-card, .expired-card, .topbar) {
    background: var(--lantern-panel);
    color: var(--body-color);
    border-color: var(--surface-border);
}

html body :is(.setup-shell, .license-expired-page) {
    background: var(--workspace-bg) center / cover fixed;
    color: var(--body-color);
}

html body :is(.setup-panel, .license-box) {
    background: var(--surface-bg-strong);
    color: var(--body-color);
}

html body .setup-form .form-label {
    color: var(--body-color);
}

html[data-theme="light"] .btn-close-white,
html[data-theme="light"] .modal .btn-close {
    filter: none;
}

html[data-theme="light"] .text-light:not(.badge):not(.bg-secondary):not(.bg-dark) {
    color: var(--body-color) !important;
}

html[data-theme="light"] :is(.timesheet-hours, .timesheet-empty i) {
    color: var(--primary);
}

html[data-theme="light"] .timesheet-status.submitted {
    color: #754405;
}

html[data-theme="light"] .timesheet-status.approved {
    color: #065f46;
}

html[data-theme="light"] .timesheet-status.rejected {
    color: #991b1b;
}

.lantern-reference-days button.selected {
    outline: 2px solid var(--primary-light);
    outline-offset: 1px;
}

.lantern-reference-days button small {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 11px;
    padding: 0 2px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 8px;
    line-height: 11px;
}

.lantern-calendar-controls {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin: -28px 0 5px;
}

.lantern-calendar-controls button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    background: var(--lantern-inset);
    color: var(--body-color);
}

.lantern-calendar-markers {
    position: absolute;
    bottom: 2px;
    left: 50%;
    display: flex;
    gap: 2px;
    transform: translateX(-50%);
}

.lantern-calendar-markers b,
.lantern-calendar-marker {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #52d5e1;
}

.lantern-calendar-marker.milestone,
.lantern-calendar-markers b.milestone {
    background: #f2c94c;
}

.lantern-calendar-marker.meeting,
.lantern-calendar-markers b.meeting {
    background: #c68cff;
}

.lantern-calendar-marker.timesheet,
.lantern-calendar-markers b.timesheet {
    background: #72dca2;
}

.lantern-reference-calendar-summary {
    display: grid;
    gap: 4px;
    min-height: 54px;
    padding: 8px 0;
    border-bottom: 1px solid var(--surface-border);
    font-size: 10px;
}

.lantern-reference-calendar-summary strong {
    font-size: 11px;
}

.lantern-reference-calendar-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lantern-reference-calendar-summary li {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.lantern-reference-calendar-summary .lantern-calendar-marker {
    position: static;
    flex: 0 0 auto;
    transform: none;
}

.lantern-reference-calendar .lantern-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 0 3px;
    font-size: 9px;
}

.lantern-reference-calendar .lantern-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Native select menus otherwise retain dark-mode option colors in Chromium. */
html[data-theme="light"] .lantern-view-select {
    color-scheme: light !important;
    background: #176f68 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .lantern-view-select option {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #10232b !important;
}

html[data-theme="light"] .lantern-view-select option:checked {
    background: #dff3ee !important;
    color: #10232b !important;
}

/* Project-list labels used fixed pale blue values intended for dark surfaces. */
html[data-theme="light"] :is(.project-filter-field > span, .project-filter-status,
    .project-filter-summary, .project-filter-summary span, .project-table thead th,
    .project-table th, .task-table th) {
    color: #36515c !important;
}

html[data-theme="light"] :is(.project-table td, .task-table td) :is(.text-secondary,
    .text-muted, small) {
    color: #4b6470 !important;
}

/* Notification copy was still using its dark-surface palette on a light panel. */
html[data-theme="light"] .notification-panel {
    background: #ffffff !important;
    color: #10232b !important;
}

html[data-theme="light"] :is(.notification-header, .notification-title) {
    color: #10232b !important;
}

html[data-theme="light"] .notification-action-btn {
    border-color: #b9cbd2;
    background: #f5fafb;
    color: #173847;
}

html[data-theme="light"] .push-status-panel {
    border-color: #c7e4e3;
    background: #eaf8f7;
    color: #174f52;
}

html[data-theme="light"] .push-status-panel i {
    color: #087f83;
}

html[data-theme="light"] .push-status-panel button {
    color: #ffffff;
    background: #176f68;
}

html[data-theme="light"] .notification-copy small {
    color: #456372;
}

html[data-theme="light"] .notification-copy span,
html[data-theme="light"] .notification-empty {
    color: #5d737c;
}

html[data-theme="light"] .auth-alert.error {
    color: #8b2020;
    background: #fbe7e7;
}

html[data-theme="light"] .auth-alert.success {
    color: #065f46;
    background: #ddf5ea;
}

@media (pointer: coarse) {
    html body .lantern-vertical-carousel .lantern-slide-controls button {
        min-width: 32px;
        min-height: 32px;
    }

    html body .lantern-vertical-carousel .lantern-slide-controls .lantern-slide-dot {
        background-clip: content-box;
        padding: 10px;
        border-color: transparent;
    }
}

/* Nested glass must not accumulate white layers behind light text. */
html body .project-task-detail-panel {
    background: var(--surface-bg-strong);
    color: var(--body-color);
}

html body .project-task-detail-grid div {
    background: var(--lantern-inset);
    border-color: var(--surface-border);
}

html body :is(.project-task-detail-head h3, .project-task-detail-grid strong,
    .project-task-subtasks strong) {
    color: var(--body-color);
}

html body :is(.project-description, .project-task-detail-panel p,
    .project-task-detail-grid span, .project-task-detail-progress span,
    .project-task-subtasks span, .project-task-subtasks small,
    .project-task-detail-foot, .project-back-link, .project-detail-tabs button) {
    color: var(--text-muted);
}

html body .project-task-subtasks div.done :is(strong, i) {
    color: var(--status-success-text);
}

html body .project-task-subtasks div:not(.d-flex) {
    border-color: var(--surface-border);
}

html body .project-detail-tabs button:is(.active, :hover) {
    color: var(--body-color);
    background: var(--lantern-selected);
}

/* Project sections sit beside the work, directly under the project heading. */
html body .project-detail-page {
    gap: 16px;
}

html body .project-detail-page .project-detail-hero {
    padding: 18px 20px;
    margin-bottom: 0;
}

html body .project-detail-page .project-detail-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px;
    margin: -8px 0 0;
    background: var(--surface-bg-strong);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

html body .project-detail-page .project-detail-tabs button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 7px;
    white-space: nowrap;
}

html body .project-detail-page .project-detail-tabs button.active {
    background: var(--action-bg);
    color: var(--action-text);
}

html body .main-content:has(.project-detail-page) .lantern-footer {
    position: fixed;
    z-index: 120;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: auto;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

html body .main-content:has(.project-detail-page) .page-content {
    padding-bottom: 160px;
}

/* LANTERN planning workspace: fixed labels, quiet grid and solid color bars. */
html body .lantern-gantt {
    --gantt-task: #8dd8d0;
    --gantt-stage: #b8b5eb;
    --gantt-milestone: #e9d783;
    gap: 16px;
    color: var(--body-color);
}

html body .lantern-gantt .project-gantt-toolbar {
    padding: 18px;
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    background: var(--lantern-panel);
    backdrop-filter: blur(12px);
    gap: 16px;
}

html body .lantern-gantt .project-gantt-heading h3 {
    font-size: 21px;
    font-weight: 600;
    color: var(--body-color);
}

html body .lantern-gantt .project-gantt-heading>span {
    background: var(--lantern-inset);
    color: var(--primary);
    border-radius: 12px;
}

html body .lantern-gantt :is(.project-gantt-heading small, .project-gantt-row-label small, .project-gantt-scale span, .project-gantt-inspector small, .project-gantt-inspector p, .project-gantt-inspector-meta strong) {
    color: var(--text-muted);
}

html body .lantern-gantt :is(.project-gantt-zoom, .workspace-segmented) {
    padding: 4px;
    gap: 3px;
    border: 1px solid var(--surface-border);
    border-radius: 9px;
    background: var(--lantern-inset);
}

html body .lantern-gantt :is(.project-gantt-zoom button, .workspace-segmented button, .project-gantt-fullscreen-button, .workspace-chip-list button) {
    min-height: 36px;
    border-radius: 6px;
    background: transparent;
    color: var(--body-color);
    box-shadow: none;
}

html body .lantern-gantt .project-gantt-zoom-value {
    color: var(--body-color) !important;
}

html body .lantern-gantt :is(.workspace-segmented button.active, .workspace-chip-list button.active) {
    background: var(--action-bg);
    color: var(--action-text);
    border-color: var(--primary);
}

html body .lantern-gantt .project-gantt-toolbar-filters {
    padding-top: 14px;
    border-top: 1px solid var(--surface-border);
    gap: 10px;
}

html body .lantern-gantt .project-gantt-search {
    flex: 1 1 240px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
}

html body .lantern-gantt .project-gantt-search input {
    color: var(--body-color);
}

html body .lantern-gantt .project-gantt-search input::placeholder {
    color: var(--text-muted);
}

html body .lantern-gantt .project-gantt-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 1.5fr);
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

html body .lantern-gantt .project-gantt-summary>span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    color: var(--text-muted);
    background: var(--lantern-inset);
}

html body .lantern-gantt .project-gantt-summary strong {
    color: var(--body-color);
    font-size: 20px;
    font-weight: 600;
}

html body .lantern-gantt .project-gantt-summary>span:last-child strong {
    font-size: 13px;
}

html body .lantern-gantt .project-gantt-scroll {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    background: var(--lantern-inset);
    scrollbar-width: thin;
}

html body .lantern-gantt :is(.project-gantt-header, .project-gantt-label-head, .project-gantt-row-label, .project-gantt-group-label) {
    background: var(--surface-bg-strong);
    color: var(--body-color);
    border-color: var(--surface-border);
}

html body .lantern-gantt .project-gantt-label-head {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

html body .lantern-gantt .project-gantt-scale span {
    text-align: center;
    border-color: var(--surface-border);
    font-weight: 500;
}

html body .lantern-gantt .project-gantt-row {
    min-height: 64px;
    color: var(--body-color);
    border-color: var(--surface-border);
}

html body .lantern-gantt .project-gantt-track {
    min-height: 64px;
    background-image: linear-gradient(90deg, var(--surface-border) 1px, transparent 1px);
}

html body .lantern-gantt .project-gantt-row-label {
    border-right: 1px solid var(--surface-border);
    box-shadow: 5px 0 12px rgba(0, 0, 0, .06);
}

html body .lantern-gantt .project-gantt-row-label strong {
    font-size: 13px;
    font-weight: 600;
}

html body .lantern-gantt .project-gantt-row:is(:hover, .selected) {
    background: var(--surface-hover);
}

html body .lantern-gantt .project-gantt-row.selected .project-gantt-row-label {
    box-shadow: inset 3px 0 var(--primary);
}

html body .lantern-gantt .project-gantt-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

html body .lantern-gantt :is(.project-gantt-group-label, .project-gantt-group-track) {
    background: var(--surface-bg-strong);
    border-color: var(--surface-border);
    min-height: 36px;
}

html body .lantern-gantt .project-gantt-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

html body .lantern-gantt .project-gantt-bar {
    height: 26px;
    border-radius: 6px;
    background: var(--gantt-stage);
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

html body .lantern-gantt .project-gantt-bar.task {
    background: var(--gantt-task);
}

html body .lantern-gantt .project-gantt-bar:is(.done, .completed) {
    background: #a5d8b6;
}

html body .lantern-gantt .project-gantt-bar.blocked {
    background: #edb3ac;
}

html body .lantern-gantt .project-gantt-bar.late {
    border: 2px dashed #943e36;
}

html body .lantern-gantt .project-gantt-bar i {
    background: rgba(0, 0, 0, .14);
    border-radius: 0;
}

html body .lantern-gantt .project-gantt-bar b {
    color: #162c2a;
    font-size: 10px;
    text-shadow: none;
}

html body .lantern-gantt .project-gantt-bar.milestone {
    height: 18px;
    border-radius: 3px;
    background: var(--gantt-milestone);
}

html body .lantern-gantt .project-gantt-dot {
    background: var(--gantt-stage);
}

html body .lantern-gantt .project-gantt-dot.task {
    background: var(--gantt-task);
    border-radius: 3px;
}

html body .lantern-gantt .project-gantt-dot.milestone {
    background: var(--gantt-milestone);
    border-radius: 2px;
    transform: rotate(45deg);
}

html body .lantern-gantt .project-gantt-today {
    background: var(--primary);
    width: 1px;
    pointer-events: none;
}

html body .lantern-gantt .project-gantt-today>span {
    background: var(--action-bg);
    color: var(--action-text);
    border-radius: 4px;
}

html body .lantern-gantt .project-gantt-inspector {
    padding: 20px;
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    background: var(--surface-bg-strong);
    color: var(--body-color);
}

html body .lantern-gantt .project-gantt-inspector h6 {
    color: var(--body-color);
    font-size: 18px;
}

html body .lantern-gantt .project-gantt-inspector-meta span {
    background: var(--lantern-inset);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    color: var(--body-color);
}

html body .lantern-gantt.is-fullscreen {
    background: var(--body-bg);
    padding: 20px;
}

html body .lantern-gantt.is-fullscreen .project-gantt-scroll {
    max-height: none;
}

@media (max-width: 767px) {
    html body .lantern-gantt .project-gantt-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .lantern-gantt .project-gantt-toolbar {
        padding: 12px;
    }

    html body .lantern-gantt .project-gantt-toolbar-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    html body .lantern-gantt .project-gantt-zoom {
        flex-wrap: wrap;
    }

    html body .lantern-gantt .project-gantt-summary>span {
        padding: 10px;
    }

    html body .lantern-gantt.is-fullscreen {
        padding: 10px;
    }
}

/* Reserve a single vertical control rail; never overlay it on card content. */
html body .lantern-vertical-carousel .lantern-slide-controls {
    width: 40px;
    flex-wrap: nowrap;
    right: 8px;
    gap: 4px;
    overflow-x: hidden;
}

html body .lantern-vertical-carousel .lantern-stack-stage {
    width: calc(100% - 48px);
    margin-right: 48px;
}

html body .lantern-vertical-carousel .lantern-slide-controls button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

html body .lantern-vertical-carousel .lantern-slide-controls .lantern-slide-dot {
    padding: 11px;
    border: 0;
    background-clip: content-box;
    box-shadow: none;
}

@media (max-width: 640px) {
    html body .main-content {
        width: calc(100% - 12px);
        padding: 6px;
        margin: 6px auto;
    }

    html body .page-content {
        padding: 0 0 182px;
        min-width: 0;
    }

    /* Footer logo provides tenant navigation on phones. */
    html body .top-navbar .mobile-menu-toggle {
        display: none !important;
    }

    html body .lantern-cockpit {
        grid-template-columns: minmax(0, 1fr);
        padding: 8px 0 20px;
        min-height: 0;
    }

    html body :is(.lantern-cockpit-left, .lantern-cockpit-main, .lantern-cockpit-right) {
        min-width: 0;
        width: 100%;
    }

    html body :is(.lantern-mini-stat-row, .lantern-main-stats) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    html body .lantern-main-stats .lantern-mini-stat:last-child {
        grid-column: 1 / -1;
    }

    html body .lantern-mini-stat {
        min-height: 100px;
        padding: 12px;
    }

    html body .lantern-mini-stat span {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    html body .lantern-mini-stat strong {
        font-size: 32px;
    }

    html body .lantern-slide-panel {
        padding: 12px 8px 24px;
    }

    html body .lantern-slide-head h2 {
        font-size: 16px;
    }

    html body .lantern-project-stack-card {
        padding: 12px;
        gap: 10px;
    }

    html body .lantern-project-stack-card>strong {
        font-size: 17px;
    }

    html body .lantern-project-card-meta {
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    html body .lantern-stack-layer {
        max-width: calc(100% - 48px);
    }

    html body .lantern-footer {
        position: fixed;
        left: 50%;
        bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px));
        transform: translateX(-50%);
        width: calc(100vw - 12px);
        margin: 0;
        padding: 0;
        gap: 8px;
    }

    html body .lantern-footer-dock {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(128px, 1.3fr);
        width: 100%;
        padding: 8px;
        gap: 8px;
    }

    html body .lantern-footer-brand {
        width: 84px;
        height: 30px;
    }

    html body .lantern-footer-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    html body .lantern-footer-search .form-control {
        height: 40px;
        min-height: 40px;
    }

    html body .lantern-view-select {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: 38px;
        min-width: 0;
    }

    html body .lantern-footer-links {
        display: flex;
        width: 100%;
        gap: 5px;
        padding: 0 2px;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    html body .lantern-footer-links::-webkit-scrollbar {
        display: none;
    }

    html body .lantern-footer-links a {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    html body .lantern-footer-profile {
        flex: 0 0 44px;
    }

    html body .lantern-orb-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
    }

    body>#footerProfileMenu.lantern-footer-menu {
        left: 12px !important;
        right: 12px !important;
        bottom: 166px !important;
        width: auto !important;
        max-height: min(360px, calc(100dvh - 190px));
        z-index: 1001;
    }

    html body .top-navbar.glass-card {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: center;
        margin: 4px auto 12px;
    }
}

/* Footer search opens above the dock, within the visible viewport. */
html body :is(.lantern-footer-dock, .lantern-footer-profile) {
    position: relative;
}

html body button.lantern-footer-brand {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

html body .lantern-footer-menu {
    top: auto;
    bottom: calc(100% + 12px);
    right: 0;
    width: min(270px, calc(100vw - 40px));
    max-height: min(460px, 60dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    pointer-events: auto;
}

html body .lantern-navigation-menu {
    left: 0;
    right: auto;
}

html body .lantern-footer-menu a {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--body-color);
    font-size: 14px;
    box-shadow: none;
}

html body .lantern-footer-menu a:is(:hover, :focus-visible, .active) {
    background: var(--surface-hover);
}

html body .lantern-footer-search .tenant-search-panel {
    top: auto;
    bottom: calc(100% + 8px);
    max-height: min(420px, 65dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Larger centered cards with a compact, independently scrolling control rail. */
html body .lantern-vertical-carousel .lantern-stack-stage {
    width: calc(100% - 56px);
    margin: 0 auto;
    min-height: 0;
    padding-bottom: 56px;
}

html body .lantern-vertical-carousel .lantern-task-stack-list {
    padding-right: 0;
}

html body .lantern-vertical-carousel .lantern-slide-head {
    padding: 0 28px;
}

html body .lantern-project-carousel .lantern-stack-card {
    min-height: 300px;
}

html body .lantern-project-stack-card {
    min-height: 300px;
    padding: clamp(18px, 2vw, 28px);
    gap: 18px;
    justify-content: space-between;
}

html body .lantern-project-stack-card>strong {
    font-size: clamp(21px, 1.7vw, 28px);
}

html body .lantern-project-card-team {
    font-size: 14px;
}

html body .lantern-project-card-meta {
    font-size: 12px;
}

html body .lantern-vertical-carousel .lantern-stack-layers {
    top: auto;
    bottom: 0;
    height: 60px;
    left: 0;
    right: 0;
}

html body .lantern-vertical-carousel .lantern-stack-layer {
    max-width: none;
}

html body .lantern-vertical-carousel .lantern-slide-controls {
    right: 4px;
    top: 54px;
    bottom: 64px;
    width: 24px;
    padding: 2px;
    gap: 3px;
    scrollbar-width: none;
}

html body .lantern-vertical-carousel .lantern-slide-controls::-webkit-scrollbar {
    display: none;
}

html body .lantern-vertical-carousel .lantern-slide-controls button {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    font-size: 9px;
}

html body .lantern-vertical-carousel .lantern-slide-controls .lantern-slide-dot {
    padding: 7px;
}

@media (max-width: 640px) {
    html body .lantern-slide-panel {
        padding-left: 0;
        padding-right: 0;
    }

    html body .lantern-vertical-carousel .lantern-stack-stage {
        width: calc(100% - 48px);
    }

    html body .lantern-project-stack-card {
        padding: 16px;
        gap: 14px;
    }

    html body .lantern-project-stack-card>strong {
        font-size: 21px;
    }

    html body .lantern-vertical-carousel .lantern-slide-head {
        padding: 0 24px;
    }

    html body .lantern-vertical-carousel .lantern-slide-controls {
        right: 0;
    }
}

/* Compact dashboard calendar: markers denote event starts, matching the full calendar. */
html body .lantern-calendar-grid button {
    position: relative;
    grid-template-rows: 1fr 10px;
    gap: 2px;
    padding: 6px 2px 4px;
    min-height: 40px;
    font-size: 12px;
}

html body .lantern-calendar-grid button.today {
    border: 2px solid var(--primary-light);
    font-weight: 700;
}

html body .lantern-calendar-grid button.selected {
    background: var(--action-bg);
    color: var(--action-text);
    box-shadow: inset 0 0 0 1px var(--primary-light);
}

.lantern-calendar-markers,
.lantern-calendar-legend,
.lantern-calendar-legend>span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lantern-calendar-markers {
    justify-content: center;
    min-height: 8px;
}

.lantern-calendar-marker {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border: 1px solid rgba(0, 0, 0, .55);
    border-radius: 50%;
    background: #60d5ef;
}

.lantern-calendar-marker.milestone {
    background: #ffda79;
    border-radius: 1px;
}

.lantern-calendar-marker.meeting {
    background: #d4b2ff;
    border-radius: 2px;
    transform: rotate(45deg);
}

.lantern-calendar-legend {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--body-color);
}

.lantern-calendar-today-key {
    width: 9px;
    height: 9px;
    border: 2px solid var(--primary-light);
    border-radius: 2px;
}

.lantern-calendar-summary {
    border-top: 1px solid var(--surface-border);
    margin-top: 12px;
    padding-top: 12px;
    font-size: 12px;
}

.lantern-calendar-summary strong {
    font-size: 12px;
    font-weight: 600;
}

.lantern-calendar-summary ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.lantern-calendar-summary li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.lantern-calendar-summary li>span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lantern-calendar-summary p {
    margin: 8px 0 0;
    color: var(--text-muted);
}

/* Theme-aware dashboard details; legacy glass fills used fixed light colors. */
html body :is(.lantern-stack-layer, .lantern-task-strip, .lantern-log-row,
    .lantern-activity-detail) {
    background: var(--lantern-inset);
    border-color: var(--surface-border);
    color: var(--body-color);
}

html body :is(.lantern-log-row small, .lantern-task-strip small,
    .lantern-calendar-weekdays, .lantern-footer-search > i) {
    color: var(--text-muted);
}

html body :is(.lantern-log-row, .lantern-task-strip):hover {
    background: var(--surface-hover);
    color: var(--body-color);
}

html body .lantern-log-feed {
    background-image: none;
}

html body :is(.lantern-project-meter i, .lantern-task-strip i) {
    background: var(--lantern-inset);
    border-color: var(--surface-border);
}

html body .lantern-view-select {
    background: var(--action-bg);
    color: var(--action-text);
    border-color: var(--primary);
}

html body .lantern-view-select:hover {
    background: var(--action-hover);
}

html body .lantern-slide-controls button {
    background: var(--lantern-inset);
    border-color: var(--surface-border);
}

html body .lantern-slide-controls button:hover {
    background: var(--surface-hover);
}

html body .lantern-slide-controls .lantern-slide-dot {
    background-color: var(--text-muted);
}

html body .lantern-slide-controls .lantern-slide-dot.active {
    background-color: var(--primary);
}

/* Dedicated chat: quiet, theme-aware surfaces with independent scrolling. */
html body .teams-style-chat-page .teams-chat-shell {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    height: min(76dvh, 900px);
    min-height: 520px;
    max-height: none;
    margin: 0;
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

html body .team-chat-page.teams-style-chat-page {
    min-height: 0;
    align-content: start;
}

html body .team-chat-page.teams-style-chat-page .workspace-page-header {
    flex-shrink: 0;
    margin-bottom: 8px;
}

html body .teams-style-chat-page :is(.team-chat-rail, .team-chat-main) {
    background: var(--surface-bg-strong);
    color: var(--body-color);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .teams-style-chat-page .team-chat-rail {
    padding: 18px 12px;
    border-right: 1px solid var(--surface-border);
    gap: 14px;
}

html body .teams-style-chat-page .team-chat-rail-header {
    padding: 0 6px 4px;
    font-size: 16px;
}

html body .teams-style-chat-page :is(.team-chat-rail-header, .team-chat-thread, .team-chat-main-header h6, .team-chat-empty strong) {
    color: var(--body-color);
}

html body .teams-style-chat-page :is(.team-chat-thread-copy small, .team-chat-main-header small, .team-chat-search i, .team-chat-empty, .chat-bubble > small, .chat-composer-hint) {
    color: var(--text-muted);
}

html body .teams-style-chat-page .team-chat-switcher {
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--lantern-inset);
}

html body .teams-style-chat-page .team-chat-switcher button {
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

html body .teams-style-chat-page .team-chat-switcher button.active {
    background: var(--action-bg);
    color: var(--action-text);
}

html body .teams-style-chat-page .team-chat-thread {
    min-height: 76px;
    border-radius: 10px;
}

html body .teams-style-chat-page .team-chat-thread:hover {
    background: var(--surface-hover);
}

html body .teams-style-chat-page .team-chat-thread.active {
    background: var(--lantern-selected);
    border-color: var(--primary);
}

html body .teams-style-chat-page :is(.team-chat-main-header, .team-chat-composer) {
    background: var(--surface-bg-strong);
    border-color: var(--surface-border);
    padding: 16px 22px;
}

html body .teams-style-chat-page .team-chat-main-header h6 {
    font-size: 16px;
    font-weight: 600;
}

html body .teams-style-chat-page .chat-profile-trigger {
    overflow: hidden;
}

html body .teams-style-chat-page .team-chat-main-header small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
}

html body .teams-style-chat-page .team-chat-panel {
    min-height: 0;
    max-height: none;
    padding: 24px;
    background: var(--body-bg);
}

html body .teams-style-chat-page .chat-message {
    margin-bottom: 18px;
}

html body .teams-style-chat-page .chat-bubble {
    max-width: min(620px, 82%);
    padding: 12px 16px;
    border: 1px solid var(--surface-border);
    border-radius: 4px 14px 14px;
    background: var(--surface-bg-strong);
    color: var(--body-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    font-size: 14px;
    line-height: 1.6;
}

html body .teams-style-chat-page .chat-bubble::before {
    display: none;
}

html body .teams-style-chat-page .chat-sender {
    color: var(--primary);
    font-weight: 600;
}

html body .teams-style-chat-page .chat-message.mine .chat-bubble {
    background: var(--action-bg);
    color: var(--action-text);
    border-color: var(--action-bg);
    border-radius: 14px 4px 14px 14px;
}

html body .teams-style-chat-page .chat-message.mine :is(.chat-sender, .chat-bubble > small, .chat-mention-token) {
    color: var(--action-text);
}

html body .teams-style-chat-page :is(.chat-attachment.file, .chat-deleted) {
    color: inherit;
}

html body .teams-style-chat-page .chat-mention-token {
    color: var(--primary);
}

html body .teams-style-chat-page .chat-bubble>small {
    margin-top: 8px;
    font-size: 11px;
}

html body .teams-style-chat-page .team-chat-empty {
    min-height: 100%;
    padding: 24px;
}

html body .teams-style-chat-page .team-chat-empty i {
    padding: 18px;
    border-radius: 20px;
    background: var(--surface-hover);
    color: var(--primary);
}

html body .teams-style-chat-page .team-chat-composer textarea.form-control {
    border-radius: 10px;
    background: var(--input-bg);
    min-height: 46px;
}

html body .teams-style-chat-page :is(.chat-icon-btn, .chat-details-button, .chat-details-header button) {
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--lantern-inset);
    color: var(--body-color);
    flex-shrink: 0;
}

html body .teams-style-chat-page .chat-icon-btn.primary {
    background: var(--action-bg);
    color: var(--action-text);
    border-color: var(--action-bg);
}

html body .teams-style-chat-page .chat-icon-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* App-wide mobile layout safeguards. Keep these last so page rules cannot
   reintroduce fixed widths or undo the mobile chat navigation. */
html body :is(.main-content, .workspace-page, .container, .container-fluid, .row, [class*="col-"]) {
    min-width: 0;
}

html body :is(img, video, canvas, svg) {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    html body .project-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .project-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .team-chat-workspace {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    html {
        overflow-x: clip;
    }

    html body {
        width: 100%;
        overflow-x: clip;
    }

    html body .main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
    }

    html body .workspace-page {
        width: 100%;
        max-width: 100%;
        gap: 14px;
        padding-inline: 0;
    }

    html body .workspace-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px !important;
    }

    html body .workspace-page-header :is(h1, h2) {
        overflow-wrap: anywhere;
        font-size: clamp(23px, 6vw, 30px);
    }

    html body .workspace-page-header :is(.btn, button) {
        align-self: flex-start;
        max-width: 100%;
    }

    html body .project-detail-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    html body .project-detail-hero h1 {
        font-size: clamp(25px, 7vw, 34px);
        overflow-wrap: anywhere;
    }

    html body .project-detail-actions {
        justify-content: flex-start;
    }

    html body .project-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html body .project-detail-stat {
        min-height: 112px;
        padding: 14px;
    }

    html body .project-detail-stat strong,
    html body .project-detail-donut strong {
        font-size: 25px;
    }

    html body :is(.table-responsive, .table-scroll, .dataTables_wrapper, .kanban-board, .project-detail-tabs) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    html body :is(.table-responsive, .table-scroll) table {
        min-width: 640px;
    }

    html body .modal-dialog:not(.modal-fullscreen) {
        width: calc(100% - 20px);
        max-width: none;
        margin: 10px auto;
    }

    html body .modal-content {
        max-height: calc(100dvh - 20px);
        overflow: hidden;
    }

    html body .modal-body {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    html body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
        max-width: 100%;
    }

    html body :is(.btn, button) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    html body .lantern-team-cards > .col-md-6,
    html body .lantern-team-cards > .col-lg-4 {
        width: 100%;
    }

    /* WhatsApp-style list/detail transition: one view occupies the viewport. */
    html body .team-chat-page.teams-style-chat-page {
        position: fixed;
        z-index: 1040;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        background: var(--body-bg);
    }

    html body .team-chat-page.teams-style-chat-page .workspace-page-header {
        display: none;
    }

    html body .teams-style-chat-page .teams-chat-shell {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html body .teams-style-chat-page .teams-chat-shell .team-chat-rail,
    html body .teams-style-chat-page .teams-chat-shell .team-chat-main {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        border: 0;
        border-radius: 0;
        transition: transform .2s ease;
    }

    html body .teams-style-chat-page .teams-chat-shell .team-chat-rail {
        z-index: 2;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
        transform: translateX(0);
    }

    html body .teams-style-chat-page .teams-chat-shell .team-chat-main {
        z-index: 3;
        grid-template-rows: auto minmax(0, 1fr) auto;
        transform: translateX(100%);
    }

    html body .teams-style-chat-page .teams-chat-shell.mobile-conversation-open .team-chat-rail {
        transform: translateX(-100%);
    }

    html body .teams-style-chat-page .teams-chat-shell.mobile-conversation-open .team-chat-main {
        transform: translateX(0);
    }

    html body .teams-style-chat-page .team-chat-main-header {
        min-height: calc(62px + env(safe-area-inset-top));
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
        gap: 10px;
    }

    html body .teams-style-chat-page .mobile-chat-back {
        display: inline-flex;
        flex: 0 0 36px;
        width: 36px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--body-color);
        font-size: 20px;
    }

    html body .teams-style-chat-page .team-chat-panel {
        min-height: 0;
        max-height: none;
        padding: 14px 12px max(14px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    html body .teams-style-chat-page .team-chat-composer {
        padding: 9px 10px max(10px, env(safe-area-inset-bottom));
    }

    html body .teams-style-chat-page .chat-composer-hint {
        display: none;
    }

    html body .team-detail-page .team-chat-workspace {
        position: relative;
        display: block;
        height: min(72dvh, 720px);
        min-height: 460px;
        overflow: hidden;
        border-radius: 14px;
    }

    html body .team-detail-page .team-chat-workspace .team-chat-rail,
    html body .team-detail-page .team-chat-workspace .team-chat-main {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        border: 0;
        border-radius: 0;
        transition: transform .2s ease;
    }

    html body .team-detail-page .team-chat-workspace .team-chat-rail {
        z-index: 2;
        transform: translateX(0);
    }

    html body .team-detail-page .team-chat-workspace .team-chat-main {
        z-index: 3;
        grid-template-rows: auto minmax(0, 1fr) auto;
        transform: translateX(100%);
    }

    html body .team-detail-page .team-chat-workspace.mobile-conversation-open .team-chat-rail {
        transform: translateX(-100%);
    }

    html body .team-detail-page .team-chat-workspace.mobile-conversation-open .team-chat-main {
        transform: translateX(0);
    }

    html body .team-detail-page .mobile-chat-back {
        display: inline-flex;
        flex: 0 0 36px;
        width: 36px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--body-color);
        font-size: 20px;
    }
}

@media (max-width: 420px) {
    html body .main-content {
        padding: 9px;
    }

    html body .project-detail-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .project-detail-stat {
        min-height: 88px;
    }

    html body .project-detail-tabs button {
        padding-inline: 10px;
        font-size: 13px;
    }

    html body .modal-header,
    html body .modal-footer {
        padding: 12px;
    }
}

/* Mobile bird's-eye: show scannable user cards; keep the matrix for tablet/desktop. */
.birdseye-mobile-list {
    display: none;
}

.birdseye-mobile-exit {
    display: none;
}

@media (max-width: 640px) {
    html:has(.birdseye-page) {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    html body:has(.birdseye-page) {
        width: 100%;
        max-width: 100vw;
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    html body .main-content:has(.birdseye-page) {
        display: flex;
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        min-height: 100dvh;
        max-height: none;
        margin: 0;
        overflow-x: hidden;
        overflow-y: visible;
        padding: 8px;
    }

    html body .main-content:has(.birdseye-page) .page-content,
    html body .main-content:has(.birdseye-page) #app {
        display: flex;
        flex: 1 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 0;
        min-width: 0;
        overflow-x: hidden;
    }

    html body .birdseye-page {
        display: flex;
        flex: 1 0 auto;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        overflow-x: hidden;
        gap: 10px;
    }

    html body .birdseye-page-toolbar,
    html body .birdseye-page .birdseye-panel {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    html body .main-content:has(.birdseye-page) .top-navbar {
        box-sizing: border-box;
        width: min(520px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        margin: 8px auto 10px;
    }

    html body .birdseye-page-toolbar {
        align-items: center;
        gap: 8px;
    }

    html body .birdseye-page-actions {
        flex: 0 0 auto;
    }

    html body .birdseye-page-actions .btn {
        min-height: 40px;
        padding: 7px 9px;
        font-size: 13px;
    }

    html body .birdseye-page .birdseye-panel,
    html body .birdseye-page .birdseye-panel:not(.is-fullscreen) {
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
        padding: 14px;
        overflow-x: hidden;
    }

    html body .birdseye-toolbar {
        align-items: stretch !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
    }

    html body .birdseye-toolbar > :first-child {
        width: 100%;
    }

    html body .birdseye-toolbar .birdseye-title {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    html body .birdseye-toolbar .birdseye-title > div:first-child {
        min-width: 0;
    }

    html body .birdseye-toolbar h2 {
        font-size: 19px;
    }

    html body .birdseye-search {
        width: 100%;
        min-height: 44px;
    }

    html body .birdseye-actions {
        display: flex;
        flex: 0 0 auto;
        width: auto;
        align-items: center;
        gap: 6px;
    }

    html body .birdseye-actions .btn {
        display: inline-flex;
        width: auto;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        padding: 6px 9px;
        border-radius: 9px;
        background: var(--action-bg);
        border-color: var(--action-bg);
        color: var(--action-text);
        font-size: 12px;
        white-space: nowrap;
    }

    html body .birdseye-page .birdseye-scroll {
        display: none;
    }

    html body .birdseye-mobile-list {
        display: grid;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    html body .birdseye-mobile-user {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--surface-border);
        border-radius: 13px;
        background: var(--lantern-inset);
    }

    html body .birdseye-mobile-user > summary {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto 18px;
        align-items: center;
        gap: 10px;
        min-height: 60px;
        padding: 10px;
        cursor: pointer;
        list-style: none;
    }

    html body .birdseye-mobile-user[open] > summary {
        border-bottom: 1px solid var(--surface-border);
    }

    html body .birdseye-mobile-user > summary::-webkit-details-marker {
        display: none;
    }

    html body .birdseye-mobile-user > summary .birdseye-avatar {
        width: 40px;
        height: 40px;
    }

    html body .birdseye-mobile-user-name {
        min-width: 0;
        color: var(--body-color);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    html body .birdseye-mobile-task-count {
        color: var(--text-muted);
        font-size: 12px;
        text-align: right;
        white-space: nowrap;
    }

    html body .birdseye-mobile-user > summary > i {
        color: var(--text-muted);
        transition: transform .16s ease;
    }

    html body .birdseye-mobile-user[open] > summary > i {
        transform: rotate(180deg);
    }

    html body .birdseye-mobile-projects {
        display: grid;
        gap: 6px;
        padding: 0 9px 9px;
    }

    html body .birdseye-mobile-project {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
        padding: 10px;
        border: 1px solid var(--surface-border);
        border-radius: 10px;
        background: var(--surface-bg-strong);
        color: var(--body-color);
        text-decoration: none;
    }

    html body .birdseye-mobile-project-copy {
        display: grid;
        min-width: 0;
        gap: 2px;
    }

    html body .birdseye-mobile-project-copy strong,
    html body .birdseye-mobile-project-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html body .birdseye-mobile-project-copy small {
        color: var(--text-muted);
    }

    html body .birdseye-mobile-progress {
        align-self: center;
        padding: 4px 7px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    html body .birdseye-mobile-progress.complete { background: #bbf7d0; color: #14532d; }
    html body .birdseye-mobile-progress.active { background: #bfdbfe; color: #1e3a8a; }
    html body .birdseye-mobile-progress.pending { background: #fef08a; color: #713f12; }

    html body .birdseye-mobile-task-total {
        grid-column: 1 / -1;
        color: var(--text-muted);
        font-size: 12px;
    }

    html body .birdseye-mobile-restricted {
        margin: 0;
        padding: 0 12px 12px;
        color: var(--text-muted);
        font-size: 13px;
    }

    html body .birdseye-panel.is-fullscreen {
        position: fixed;
        z-index: 2400;
        inset: 6px;
        width: auto;
        height: auto;
        max-height: none;
        padding: 12px;
        overflow: auto;
    }

    html body .birdseye-panel.is-fullscreen .birdseye-mobile-list {
        padding-bottom: 10px;
    }

    html body .birdseye-panel.is-fullscreen .birdseye-scroll {
        display: block;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    html body .birdseye-panel.is-fullscreen .birdseye-mobile-list {
        display: none;
    }

    html body .birdseye-mobile-exit {
        display: inline-flex;
    }
}


/* Gantt on touch screens: controls wrap cleanly and the timeline remains a
   deliberate horizontal scroll area with its task labels pinned in view. */
@media (max-width: 767.98px) {
    html body .lantern-gantt {
        min-width: 0;
        width: 100%;
        gap: 10px;
    }

    html body .lantern-gantt .project-gantt-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
    }

    html body .lantern-gantt .project-gantt-heading {
        min-width: 0;
    }

    html body .lantern-gantt .project-gantt-toolbar-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        width: 100%;
    }

    html body .lantern-gantt .project-gantt-toolbar-controls > .workspace-segmented {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    html body .lantern-gantt .project-gantt-toolbar-controls > .workspace-segmented button {
        min-width: 0;
        min-height: 40px;
        padding: 6px;
    }

    html body .lantern-gantt .project-gantt-zoom {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px;
        padding: 4px;
    }

    html body .lantern-gantt .project-gantt-zoom button {
        min-width: 38px;
        min-height: 40px;
        padding: 7px;
    }

    html body .lantern-gantt .project-gantt-fullscreen-button {
        min-height: 42px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    html body .lantern-gantt .project-gantt-toolbar-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        padding-top: 10px;
    }

    html body .lantern-gantt .project-gantt-search,
    html body .lantern-gantt .project-gantt-group-select {
        width: 100%;
        max-width: none;
        min-height: 42px;
    }

    html body .lantern-gantt .workspace-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    html body .lantern-gantt .project-gantt-summary {
        display: flex;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    html body .lantern-gantt .project-gantt-summary > span {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 12px;
    }

    html body .lantern-gantt .project-gantt-scroll {
        width: 100%;
        max-height: min(58dvh, 560px);
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        border-radius: 12px;
    }

    html body .lantern-gantt .project-gantt-canvas {
        min-width: max-content;
    }

    html body .lantern-gantt .project-gantt-header,
    html body .lantern-gantt .project-gantt-row,
    html body .lantern-gantt .project-gantt-group-row {
        grid-template-columns: var(--gantt-label-width, 148px) var(--gantt-timeline-width, 1fr);
    }

    html body .lantern-gantt .project-gantt-label-head,
    html body .lantern-gantt .project-gantt-row-label,
    html body .lantern-gantt .project-gantt-group-label {
        position: sticky;
        left: 0;
        z-index: 6;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 14px;
        align-items: center;
        width: var(--gantt-label-width, 148px);
        min-height: 42px;
        padding: 9px;
        gap: 5px;
        cursor: pointer;
        text-align: left;
    }

    html body .lantern-gantt .project-gantt-group-label .project-gantt-group-name {
        min-width: 0;
        overflow: hidden;
        padding: 0;
        background: transparent;
        color: var(--body-color);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html body .lantern-gantt .project-gantt-group-label .project-gantt-group-count {
        min-width: 22px;
        padding: 3px 6px;
    }

    html body .lantern-gantt .project-gantt-group-label > i {
        color: var(--primary);
        text-align: center;
    }

    html body .lantern-gantt .project-gantt-row {
        min-height: 56px;
    }

    html body .lantern-gantt .project-gantt-row-label strong {
        max-width: 105px;
        font-size: 12px;
    }

    html body .lantern-gantt .project-gantt-row-label small {
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
    }

    html body .lantern-gantt .project-gantt-scale span {
        min-height: 42px;
        padding: 12px 6px;
        font-size: 10px;
    }

    html body .lantern-gantt .project-gantt-inspector.detailed {
        position: relative;
        inset: auto;
        width: 100%;
        max-height: none;
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        border-radius: 14px;
    }

    html body .lantern-gantt.is-fullscreen {
        position: fixed;
        z-index: 2400;
        inset: 0;
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
        overflow: auto;
    }

    html body .lantern-gantt.is-fullscreen .project-gantt-scroll {
        flex: 1 1 auto;
        min-height: 220px;
        max-height: none;
    }

    html body .lantern-gantt .project-gantt-shortcuts {
        display: none;
    }
}

html body .lantern-gantt .project-gantt-group-label {
    appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

html body .lantern-gantt .project-gantt-group-label .project-gantt-group-name {
    min-width: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

@media (max-width: 640px) {
    html body .main-content:has(.project-detail-page) .lantern-footer {
        width: calc(100vw - 12px);
        bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px));
        gap: 8px;
        flex-direction: column;
    }

    html body .main-content:has(.project-detail-page) .page-content {
        padding-bottom: 190px;
    }
}

html body .teams-style-chat-page .chat-composer-hint {
    display: block;
    padding: 8px 52px 0;
    font-size: 11px;
}

html body .teams-style-chat-page :is(.chat-details-panel, .chat-mention-list) {
    background: var(--surface-bg-strong);
    border-color: var(--surface-border);
    color: var(--body-color);
}

html body .teams-style-chat-page :is(.chat-details-header, .chat-details-hero h3, .chat-details-section p, .chat-details-list dd, .chat-mention-list button) {
    color: var(--body-color);
}

html body .teams-style-chat-page :is(.chat-details-hero > span, .chat-details-section small, .chat-details-list dt, .chat-mention-list small) {
    color: var(--text-muted);
}

html body .teams-style-chat-page :is(.chat-details-section h4, .team-chat-rail-header small) {
    color: var(--primary);
}

html body .teams-style-chat-page .chat-details-tags>span {
    color: var(--body-color);
    background: var(--surface-hover);
}

/* Team detail workspace shares chat components but keeps its own page flow. */
html body .team-detail-page .team-chat-workspace {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    height: clamp(520px, 68vh, 700px);
    min-height: 0;
    max-height: 700px;
    margin: 22px 0 28px;
}

html body .team-detail-page :is(.team-chat-rail, .team-chat-main) {
    min-width: 0;
    border-color: var(--surface-border);
    background: var(--surface-bg-strong);
    color: var(--body-color);
    box-shadow: var(--shadow-lg);
}

html body .team-detail-page .team-chat-rail {
    border-radius: 16px 0 0 16px;
    border-right: 1px solid var(--surface-border);
}

html body .team-detail-page .team-chat-main {
    border-radius: 0 16px 16px 0;
}

html body .team-detail-page :is(.team-chat-rail-header, .team-chat-thread, .team-chat-main-header h6, .team-chat-empty strong) {
    color: var(--body-color);
}

html body .team-detail-page :is(.team-chat-thread-copy small, .team-chat-main-header small, .team-chat-rail-label, .team-chat-empty, .chat-bubble > small) {
    color: var(--text-muted);
}

html body .team-detail-page .team-chat-thread {
    border-radius: 10px;
}

html body .team-detail-page .team-chat-thread:hover,
html body .team-detail-page .team-chat-thread.active {
    border-color: var(--surface-border);
    background: var(--surface-hover);
    color: var(--body-color);
}

html body .team-detail-page .team-chat-main-header,
html body .team-detail-page .team-chat-composer {
    border-color: var(--surface-border);
    background: var(--surface-bg-strong);
}

html body .team-detail-page .team-chat-panel {
    background: var(--body-bg);
}

html body .team-detail-page .chat-message .chat-bubble {
    border-color: var(--surface-border);
    background: var(--surface-bg-strong);
    color: var(--body-color);
}

html body .team-detail-page .chat-message .chat-sender {
    color: var(--primary);
}

html body .team-detail-page .chat-message.mine .chat-bubble {
    border-color: var(--action-bg);
    background: var(--action-bg);
    color: var(--action-text);
}

html body .team-detail-page .chat-message.mine :is(.chat-sender, .chat-bubble > small, .chat-mention-token) {
    color: var(--action-text);
}

html body .team-detail-page .chat-message .chat-bubble .chat-message-text {
    color: var(--body-color);
}

html body .team-detail-page .chat-message:not(.mine) .chat-mention-token {
    color: var(--primary);
}

html body .team-detail-page .chat-message.mine .chat-message-text,
html body .team-detail-page .chat-message.mine .chat-mention-token {
    color: #ffffff;
}

html body .team-detail-page .chat-message.mine .chat-bubble > small {
    color: rgba(255, 255, 255, .88);
}

html body .team-detail-page .team-chat-composer textarea.form-control {
    border-color: var(--surface-border);
    background: var(--input-bg);
    color: var(--body-color);
}

html body .team-detail-page .team-chat-composer textarea.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

html body .team-detail-page :is(.team-chat-avatar, .member-picker-avatar) {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

html body .team-detail-page .team-chat-avatar.large {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
}

html body .team-detail-page .member-picker-avatar {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

html body .team-detail-page .team-member-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
}

html body .team-detail-page .team-member-row > :first-child {
    min-width: 0;
}

html body .team-detail-page .team-member-row > :first-child > div {
    min-width: 0;
}

html body .team-detail-page .team-member-row > :first-child strong,
html body .team-detail-page .team-member-row > :first-child span {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    html body .team-detail-page .team-chat-workspace {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        max-height: none;
        gap: 12px;
    }

    html body .team-detail-page .team-chat-rail,
    html body .team-detail-page .team-chat-main {
        border: 1px solid var(--surface-border);
        border-radius: 16px;
    }

    html body .team-detail-page .team-chat-rail {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        max-height: 380px;
    }

    html body .team-detail-page .team-chat-member-list {
        max-height: 260px;
    }

    html body .team-detail-page .team-chat-main {
        min-height: 480px;
    }
}

@media (max-width: 767px) {
    html body .team-detail-page .team-chat-rail {
        max-height: 340px;
    }

    html body .team-detail-page .team-chat-main {
        min-height: 420px;
    }

    html body .team-detail-page .team-member-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    html body .teams-style-chat-page .teams-chat-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 260px minmax(420px, 1fr);
        height: auto;
        min-height: 0;
    }

    html body .teams-style-chat-page .team-chat-rail {
        border-right: 0;
        border-bottom: 1px solid var(--surface-border);
        padding: 12px;
        gap: 8px;
    }

    html body .teams-style-chat-page .team-chat-main {
        height: 65dvh;
        min-height: 420px;
    }

    html body .teams-style-chat-page :is(.team-chat-main-header, .team-chat-composer, .team-chat-panel) {
        padding: 12px;
    }

    html body .teams-style-chat-page .chat-bubble {
        max-width: 92%;
    }

    html body .teams-style-chat-page .chat-composer-hint {
        padding-left: 0;
    }
}

@media (min-width: 768px) and (max-height: 800px) {
    html body .teams-style-chat-page .teams-chat-shell {
        height: max(460px, calc(100dvh - 250px));
    }
}

@media (min-width: 768px) and (min-height: 950px) {
    html body .teams-style-chat-page .teams-chat-shell {
        height: min(80dvh, 980px);
    }
}

button#ownerMenuToggle img {
    width: 150px;
    background: none;
}

button#ownerMenuToggle {
    background: transparent;
    border: none;
}

/* Task assignment: keyboard and touch friendly multiple selection. */
.task-assignee-picker { min-width: 0; }
.task-assignee-picker legend { float: none; width: 100%; font-size: 1rem; display: flex; justify-content: space-between; gap: 8px; }
.task-assignee-picker legend small { font-size: .8rem; opacity: .8; }
.task-assignee-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.task-assignee-chips button { border: 1px solid #399f99; border-radius: 20px; padding: 4px 10px; background: rgba(42, 157, 148, .14); color: inherit; font-size: .85rem; overflow-wrap: anywhere; text-align: left; }
.task-assignee-options { max-height: 180px; overflow-y: auto; margin: 8px 0; border: 1px solid rgba(128, 128, 128, .4); border-radius: 8px; }
.task-assignee-options label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; margin: 0; overflow-wrap: anywhere; }
.task-assignee-options label:hover, .task-assignee-options label.is-selected { background: rgba(42, 157, 148, .16); }
.task-assignee-options input { width: 18px; height: 18px; flex-shrink: 0; accent-color: #218980; }
.task-assignee-avatar { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: rgba(128, 128, 128, .18); font-size: .7rem; font-weight: 600; }
.task-assignee-picker button:focus-visible, .task-assignee-options label:focus-within { outline: 2px solid #49bdb6; outline-offset: 2px; }

/* Native option menus need a matched foreground/background in each theme. */
html:not([data-theme="light"]) body select { color-scheme: dark; }
html:not([data-theme="light"]) body select :is(option, optgroup) {
    background-color: #182733; color: #f1f5f9;
}
html[data-theme="light"] body select { color-scheme: light !important; }
html[data-theme="light"] body select :is(option, optgroup) {
    background-color: #ffffff !important; color: #172b3a !important;
}
html[data-theme="light"] body select option:checked {
    background-color: #d8eeeb !important; color: #123e38 !important;
}
/* Opaque chat surfaces keep text readable regardless of the workspace image. */
html body .teams-style-chat-page {
    --body-bg: #14212b;
    --surface-bg-strong: #20323e;
    --body-color: #f1f5f9;
    --text-muted: #bacbd6;
    --surface-border: #637d8d;
    --surface-hover: #2b4352;
    --lantern-inset: #182a36;
    --lantern-selected: #2b4352;
    --input-bg: #14212b;
    --primary: #8ae4d5;
    --action-bg: #17675f;
    --action-text: #ffffff;
}
html[data-theme="light"] body .teams-style-chat-page {
    --body-bg: #eef3f7;
    --surface-bg-strong: #ffffff;
    --body-color: #172b3a;
    --text-muted: #476071;
    --surface-border: #8299a8;
    --surface-hover: #e6eff4;
    --lantern-inset: #f3f7fa;
    --lantern-selected: #d8eeeb;
    --input-bg: #ffffff;
    --primary: #09695e;
    --action-bg: #17675f;
    --action-text: #ffffff;
}
html body .teams-style-chat-page :is(.form-control, .form-select) {
    background-color: var(--input-bg); color: var(--body-color);
    border-color: var(--surface-border);
}
html body .teams-style-chat-page .form-control::placeholder {
    color: var(--text-muted); opacity: 1;
}
html body .teams-style-chat-page .chat-bubble a {
    color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
html body .teams-style-chat-page :is(button, a, input, textarea):focus-visible {
    outline: 3px solid var(--primary); outline-offset: 3px;
}
html body .teams-style-chat-page .chat-icon-btn:disabled {
    opacity: 1; background: var(--surface-hover); color: var(--text-muted);
    border-color: var(--surface-border); box-shadow: none;
}

/* Keep the dedicated chat page as a single full-screen conversation on phones.
   The pane must be a grid so its header, message history, and composer stack. */
@media (max-width: 767.98px) {
    html body .team-chat-page.teams-style-chat-page {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    html body .team-chat-page.teams-style-chat-page .teams-chat-shell {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-height: none;
        margin: 0;
        overflow: hidden;
    }

    html body .team-chat-page.teams-style-chat-page .teams-chat-shell > .team-chat-rail,
    html body .team-chat-page.teams-style-chat-page .teams-chat-shell > .team-chat-main {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        max-height: none;
        border-radius: 0;
    }

    html body .team-chat-page.teams-style-chat-page .teams-chat-shell > .team-chat-rail {
        display: flex;
        flex-direction: column;
    }

    html body .team-chat-page.teams-style-chat-page .teams-chat-shell > .team-chat-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        transform: translateX(100%);
    }

    html body .team-chat-page.teams-style-chat-page .teams-chat-shell.mobile-conversation-open > .team-chat-main {
        transform: translateX(0);
    }

    html body .team-chat-page.teams-style-chat-page .team-chat-main-header,
    html body .team-chat-page.teams-style-chat-page .team-chat-panel,
    html body .team-chat-page.teams-style-chat-page .team-chat-composer {
        width: 100%;
        min-width: 0;
    }

    html body .team-chat-page.teams-style-chat-page .team-chat-panel {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 14px 12px;
        -webkit-overflow-scrolling: touch;
    }

    html body .team-chat-page.teams-style-chat-page .chat-message {
        min-width: 0;
        max-width: 100%;
    }

    html body .team-chat-page.teams-style-chat-page .chat-bubble {
        width: fit-content;
        min-width: 0;
        max-width: min(88%, 34rem);
    }

    html body .team-chat-page.teams-style-chat-page .chat-message-text {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    html body .team-chat-page.teams-style-chat-page .team-chat-composer {
        position: relative;
        padding: 9px 10px max(10px, env(safe-area-inset-bottom));
    }

    html body .team-chat-page.teams-style-chat-page .team-chat-composer-row {
        grid-template-columns: 40px minmax(0, 1fr) 42px;
        gap: 6px;
        min-width: 0;
    }

    html body .team-chat-page.teams-style-chat-page .team-chat-composer-row textarea.form-control {
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    html body .team-chat-page.teams-style-chat-page .chat-details-panel {
        position: absolute;
        z-index: 8;
        inset: 0 0 0 auto;
        width: min(390px, 92vw);
        max-width: 100%;
        border-radius: 0;
    }

    /* The team detail view uses absolutely positioned mobile chat panes. Give
       their containing workspace a real height so the chat cannot collapse. */
    html body .team-detail-page .team-chat-workspace {
        position: relative;
        display: block;
        width: 100%;
        height: min(72dvh, 720px);
        min-height: 420px;
        max-height: none;
        margin: 16px 0 22px;
        overflow: hidden;
        border-radius: 14px;
    }

    html body .team-detail-page .team-chat-workspace > .team-chat-rail,
    html body .team-detail-page .team-chat-workspace > .team-chat-main {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        max-height: none;
        border-radius: 0;
    }

    html body .team-detail-page .team-chat-workspace > .team-chat-rail {
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    html body .team-detail-page .team-chat-workspace > .team-chat-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        transform: translateX(100%);
    }

    html body .team-detail-page .team-chat-workspace.mobile-conversation-open > .team-chat-main {
        transform: translateX(0);
    }

    html body .team-detail-page .team-chat-workspace.mobile-conversation-open > .team-chat-rail {
        transform: translateX(-100%);
    }

    html body .team-detail-page .team-chat-workspace .team-chat-panel {
        width: 100%;
        min-width: 0;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Message text follows the bubble color in both themes. In light mode,
   outgoing bubbles use pale green with dark text for readable contrast. */
html body .team-chat-workspace .chat-message .chat-bubble .chat-message-text {
    color: inherit;
}
html[data-theme="light"] body .team-chat-workspace .chat-message .chat-bubble {
    background: #ffffff;
    color: #172b3a;
    border-color: #8299a8;
}
html[data-theme="light"] body .team-chat-workspace .chat-message.mine .chat-bubble {
    background: #d8eeeb;
    color: #172b3a;
    border-color: #8299a8;
}
html[data-theme="light"] body .team-chat-workspace .chat-message :is(.chat-sender, .chat-mention-token) {
    color: #09695e;
}
html[data-theme="light"] body .team-chat-workspace .chat-message :is(.chat-bubble > small, .chat-deleted) {
    color: #476071;
}
html[data-theme="light"] body .team-chat-workspace .chat-attachment.file {
    color: #172b3a;
    background: #eef3f7;
    border-color: #8299a8;
}
html[data-theme="light"] body .team-chat-workspace .chat-bubble::before {
    background: #ffffff;
}
html[data-theme="light"] body .team-chat-workspace .chat-message.mine .chat-bubble::before {
    background: #d8eeeb;
}
.chat-message-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

/* Team conversations occupy the viewport while keeping a focused reading width. */
html body:has(.team-chat-fullscreen) {
    overflow: hidden;
}

html body:has(.team-chat-fullscreen) :is(.lantern-footer, .top-navbar) {
    display: none;
}

html body .team-detail-page.team-chat-fullscreen {
    position: fixed;
    z-index: 100;
    inset: 0 10vw;
    display: flex;
    flex-direction: column;
    width: 80vw;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 20px;
    gap: 16px;
    overflow: hidden;
    background: var(--surface-bg-strong);
    color: var(--body-color);
    border-inline: 1px solid var(--surface-border);
    box-shadow: 0 0 80px rgba(0, 0, 0, .3);
}

html body .team-chat-fullscreen > .workspace-page-header {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--surface-border);
    gap: 12px;
}

html body .team-chat-fullscreen .team-detail-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
    font-size: 20px;
}

html body .team-chat-fullscreen .workspace-page-header h1 {
    font-size: 21px;
    line-height: 1.25;
}

html body .team-chat-fullscreen .workspace-page-header p {
    margin: 4px 0 0;
    font-size: 12px;
}

.team-workspace-actions,
.team-workspace-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-workspace-tabs {
    padding: 4px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--body-bg);
}

.team-workspace-tabs button {
    min-height: 36px;
    padding: 6px 14px;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}

.team-workspace-tabs button[aria-pressed="true"] {
    color: var(--action-text);
    background: var(--action-bg);
}

.team-workspace-tabs button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

html body .team-chat-fullscreen > .team-chat-workspace {
    flex: 1 1 0;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: none;
}

html body .team-chat-fullscreen[data-view="details"] > .team-chat-workspace {
    display: none;
}

html body .team-chat-fullscreen .team-details-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0 4px 16px;
}

html body .team-chat-fullscreen .team-details-panel[hidden] {
    display: none;
}

html body .team-chat-fullscreen .team-details-panel > .workspace-stats-grid {
    margin-bottom: 20px;
}

html body .team-chat-fullscreen .team-chat-workspace > .team-chat-rail,
html body .team-chat-fullscreen .team-chat-workspace > .team-chat-main {
    min-height: 0;
    max-height: none;
    box-shadow: none;
}

html body .team-chat-fullscreen .team-chat-member-list {
    align-content: start;
    grid-auto-rows: max-content;
    max-height: none;
}

html body .team-chat-fullscreen .team-chat-main-header {
    min-height: 72px;
    padding: 12px 18px;
}

html body .team-chat-fullscreen .team-chat-main-header h6 {
    font-size: 16px;
    overflow-wrap: anywhere;
}

html body .team-chat-fullscreen .team-chat-panel {
    min-height: 0;
    max-height: none;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-image: none;
}

html body .team-chat-fullscreen .team-chat-composer {
    padding: 14px 18px;
}

@media (min-width: 768px) {
    html body .team-chat-fullscreen > .team-chat-workspace {
        display: grid;
        grid-template-columns: minmax(220px, 25%) minmax(0, 1fr);
        gap: 0;
    }

    html body .team-chat-fullscreen .team-chat-rail {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        border-radius: 12px 0 0 12px;
    }

    html body .team-chat-fullscreen .team-chat-main {
        border-radius: 0 12px 12px 0;
    }
}

@media (max-width: 767.98px) {
    html body .team-detail-page.team-chat-fullscreen {
        inset: 0;
        width: 100%;
        padding: max(12px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        gap: 10px;
        border: 0;
    }

    html body .team-chat-fullscreen > .workspace-page-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 0 !important;
    }

    html body .team-chat-fullscreen .workspace-page-header h1 {
        font-size: 18px;
    }

    html body .team-chat-fullscreen .workspace-page-header p {
        display: none;
    }

    .team-workspace-actions {
        width: 100%;
        justify-content: space-between;
    }

    html body .team-chat-fullscreen .team-chat-main-header {
        padding: 10px 12px;
    }

    html body .team-chat-fullscreen .team-chat-panel {
        padding: 16px 12px;
    }

    html body .team-chat-fullscreen .team-chat-composer {
        padding: 10px 12px;
    }
}

/* Keep workspace navigation compact under the shared mobile button rules. */
html body .team-chat-fullscreen .team-workspace-tabs {
    flex: 0 0 auto;
}

html body .team-chat-fullscreen .team-workspace-tabs button {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

html body .team-chat-fullscreen .team-workspace-actions > a {
    width: auto;
    flex: 0 0 auto;
    align-self: center;
}

@media (max-width: 767.98px) {
    html body .team-chat-fullscreen .team-chat-main-header {
        flex-wrap: nowrap;
    }

    html body .team-chat-fullscreen .team-chat-main-header > .d-flex {
        flex: 1 1 0;
        min-width: 0;
    }

    html body .team-chat-fullscreen .team-chat-main-header > .workspace-pill {
        display: none;
    }
}

/* Membership is available near the top of the project detail edit dialog. */
html body .project-detail-page .project-edit-member-section .member-picker-list {
    max-height: 210px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Mobile cards have text labels; give actions room instead of icon-only widths. */
html body .project-mobile-card .project-table-actions.project-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 8px;
}

html body .project-mobile-card .project-mobile-actions .btn {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    flex: initial;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

html body .project-mobile-card .project-mobile-actions .btn .bi {
    flex-shrink: 0;
    font-size: 15px;
}

/* Fullscreen always has a visible, touch-sized escape route, even after scrolling. */
html body .workspace-fullscreen-exit {
    position: fixed !important;
    inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) auto;
    z-index: 10000;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    min-width: 144px;
    padding: 10px 16px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #075985 !important;
    color: #fff !important;
    box-shadow: 0 3px 16px #0008;
    white-space: nowrap;
}

html body .meeting-minutes-panel { padding: 20px; border: 1px solid var(--surface-border); border-radius: 12px; background: var(--surface-bg-strong); color: var(--body-color); }
html body .meeting-minutes-panel .mom-meeting-summary { background: var(--lantern-inset); border-color: var(--surface-border) !important; }
.meeting-minutes-panel .mom-participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); padding: 0; list-style: none; gap: 8px; }
.meeting-minutes-panel .mom-participants li { display: flex; flex-direction: column; min-width: 0; padding: 8px; border: 1px solid var(--border-color, #64748b); border-radius: 8px; overflow-wrap: anywhere; }
.meeting-minutes-panel :is(button, input:not([type="checkbox"]), select) { min-height: 44px; }
.meeting-minutes-panel summary { cursor: pointer; min-height: 44px; }
.meeting-minutes-panel :is(textarea, .mom-meeting-summary) { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { html body .meeting-minutes-panel { padding: 12px; } }
html body :is(.birdseye-panel.is-fullscreen, .eagle-view-page.eagle-fullscreen, .lantern-gantt.is-fullscreen) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}