/* Generated page/theme styles. Tabulator must load before this file. */
/* public/css/pages.css */
/* Page Structure */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* Mail Page */
.mail-page {
    --mail-accent: #0a63c9;
    --mail-accent-deep: #084d9b;
    --mail-accent-soft: #e9f2ff;
    --mail-border-strong: #d8e1ef;
}

.mail-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.mail-page-intro {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mail-page-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-end;
    min-height: 1.65rem;
    max-width: 34rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(10, 99, 201, 0.14);
    background: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    text-align: right;
}

.mail-page-status:empty {
    display: none;
}

.mail-context-bar {
    margin-top: 0.15rem;
}

.mail-context-bar .project-detail-context-chip {
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(10, 99, 201, 0.14);
}

.mail-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.mail-page-action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.mail-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.mail-toolbar-pill,
.mail-toolbar-shortcuts {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--mail-border-strong);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: #355177;
    font-size: 0.75rem;
}

.mail-toolbar-pill {
    font-weight: 600;
}

.mail-toolbar-shortcuts {
    color: var(--text-gray);
}

.mail-grid {
    display: grid;
    grid-template-columns: 260px 380px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.mail-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mail-grid .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-height: calc(100vh - 220px);
    margin-bottom: 0;
    border-color: var(--mail-border-strong);
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.06);
}

.mail-section-card {
    margin-bottom: 0;
}

.mail-grid .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
}

.mail-detail .card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem 1rem 0.75rem;
}

.mail-detail .card-body {
    flex: 1 1 auto;
    min-height: 0;
    gap: 1rem;
    overflow: hidden;
    padding: 1.1rem 1.25rem 1.25rem;
}

.mail-list .card-footer,
.mail-detail .card-footer {
    padding: 0.9rem 1.25rem 1rem;
}

.mail-detail .card-footer {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fc 100%);
}

.mail-detail .form-textarea {
    min-height: 7.5rem;
    background: #fff;
    border-color: var(--mail-border-strong);
}

.mail-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mail-pane-title {
    font-size: 1rem;
    font-weight: 700;
    color: #18324f;
}

.mail-pane-meta {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-gray);
}

.mail-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--mail-accent-deep);
    font-size: 0.78rem;
    font-weight: 700;
}

.mail-list-header {
    align-items: center;
}

.mail-list-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mail-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mail-search-wrap .form-input {
    background: #f7faff;
    border-color: var(--mail-border-strong);
}

.mail-page .btn.btn-outline.active {
    background: var(--mail-accent);
    border-color: var(--mail-accent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mail-page .btn.btn-outline:not(:disabled):hover {
    background: var(--mail-accent);
    border-color: var(--mail-accent);
    color: #fff;
}

.mail-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-gray);
    font-weight: 600;
}

.mail-empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    min-height: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px dashed rgba(10, 99, 201, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
    box-sizing: border-box;
}

.mail-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.9rem;
    background: #eef4ff;
    color: var(--mail-accent-deep);
    font-size: 1rem;
}

.mail-empty-state-title {
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 600;
}

.mail-empty-state-description {
    max-width: 40ch;
    color: var(--text-gray);
    font-size: 0.85rem;
    line-height: 1.5;
}

.mail-folders {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: calc(100vh - 330px);
    overflow: auto;
    padding-right: 4px;
}

.mail-folder {
    border: 1px solid var(--mail-border-strong);
    background: #fff;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

.mail-folder:hover {
    border-color: #bfd0ea;
    background: #f9fbff;
}

.mail-folder.active {
    border-color: var(--mail-accent);
    background: linear-gradient(180deg, #f4f8ff 0%, #ebf2ff 100%);
    box-shadow: 0 8px 24px rgba(10, 99, 201, 0.12);
}

.mail-folder-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.mail-folder-glyph {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf3ff;
    color: var(--mail-accent-deep);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mail-folder.active .mail-folder-glyph {
    background: var(--mail-accent);
    color: #fff;
}

.mail-folder-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #18324f;
}

.mail-unread {
    background: var(--mail-accent);
    color: #fff;
    font-size: 11px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
}

.mail-messages {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 220px;
    max-height: calc(100vh - 330px);
    overflow: auto;
    padding-right: 4px;
}

.mail-message {
    border: 1px solid var(--mail-border-strong);
    background: #fff;
    padding: 0;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mail-message:hover {
    border-color: #c6d5ea;
    background: #f9fbff;
}

.mail-message.unread {
    border-color: #b9cff0;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    box-shadow: inset 3px 0 0 var(--mail-accent);
}

.mail-message.active {
    border-color: var(--mail-accent);
    background: #f7faff;
    box-shadow: 0 12px 26px rgba(10, 99, 201, 0.12);
    transform: translateY(-1px);
}

.mail-message-main {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
}

.mail-message-avatar {
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #edf4ff 0%, #dae8ff 100%);
    color: var(--mail-accent-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mail-message.active .mail-message-avatar {
    background: linear-gradient(180deg, var(--mail-accent) 0%, var(--mail-accent-deep) 100%);
    color: #fff;
}

.mail-message-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.mail-message-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 12px;
    color: var(--text-gray);
}

.mail-message-from {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 600;
    color: #18324f;
}

.mail-message-date {
    flex: 0 0 auto;
}

.mail-message-subject-row {
    margin-top: 0.1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.mail-message-subject {
    font-weight: 600;
    color: var(--text-dark);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-message-icons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    color: var(--text-gray);
    flex: 0 0 auto;
}

.mail-flag {
    color: #f5a623;
}

.mail-attachment-icon {
    color: var(--text-gray);
}

.mail-message-preview {
    margin-top: 0.22rem;
    font-size: 0.82rem;
    color: var(--text-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mail-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    width: 100%;
}

.mail-detail-heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 260px;
}

.mail-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1 1 360px;
}

.mail-action-bar .form-select {
    min-width: 160px;
    background: #f8fbff;
    border-color: var(--mail-border-strong);
}

.mail-action-bar .disabled {
    pointer-events: none;
    opacity: 0.6;
}

.mail-detail-header {
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--text-dark);
}

.mail-detail-context {
    font-size: 0.75rem;
    color: var(--text-gray);
}

.mail-detail-context:empty {
    display: none;
}

.mail-detail-meta {
    color: var(--text-gray);
    font-size: 12px;
    width: 100%;
}

.mail-detail-categories {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.mail-detail-categories .form-input {
    flex: 1 1 auto;
    min-width: 200px;
    background: #f8fbff;
    border-color: var(--mail-border-strong);
}

.mail-persona {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.65rem 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e4eaf4;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcff 0%, #f5f8fd 100%);
}

.mail-persona-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #e6efff 0%, #d4e3ff 100%);
    color: var(--mail-accent-deep);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.mail-persona-body {
    min-width: 0;
}

.mail-persona-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #18324f;
    line-height: 1.2;
}

.mail-persona-address {
    margin-top: 0.15rem;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-gray);
    overflow-wrap: anywhere;
}

.mail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.3rem 0.85rem;
    margin-top: 0.45rem;
}

.mail-meta-line {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem;
    font-size: 12px;
    margin: 0;
}

.mail-meta-label {
    font-weight: 600;
    color: var(--text-dark);
}

.mail-meta-value {
    min-width: 0;
    color: #425974;
    overflow-wrap: anywhere;
}

.mail-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.8rem;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.mail-thread-item {
    flex: 0 0 auto;
    border: 1px solid #e0e8f3;
    border-radius: 14px;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.mail-thread-item.active {
    border-color: var(--mail-accent);
    background: #f8fbff;
}

.mail-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 0;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.mail-thread-body {
    color: var(--text-dark);
    font-size: 14px;
    padding: 0.95rem;
}

.mail-thread-body-text {
    white-space: pre-wrap;
}

.mail-thread-body-html {
    display: block;
    width: 100%;
    min-height: 420px;
    height: 420px;
    border: none;
    background: #fff;
}

.mail-attachments {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mail-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 180px;
    overflow: auto;
    padding-right: 4px;
}

.mail-attachment {
    border: 1px solid #e0e8f3;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

.mail-attachment:hover {
    border-color: #bfd0ea;
    background: #f5f9ff;
}

.mail-attachment-name {
    font-size: 13px;
    color: var(--text-dark);
}

.mail-attachment-size {
    font-size: 12px;
    color: var(--text-gray);
}

.mail-attachment-preview {
    border: 1px solid #e0e8f3;
    border-radius: 14px;
    background: #fff;
    padding: 0.9rem;
    min-height: 160px;
}

.mail-attachment-preview img,
.mail-attachment-preview iframe {
    width: 100%;
    height: 360px;
    border: none;
}

.mail-attachment-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mail-compose-toolbar,
.mail-compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mail-compose-toolbar {
    margin-bottom: 0.25rem;
}

.mail-compose-modes {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

@media (max-width: 1400px) {
    .mail-grid {
        grid-template-columns: 240px 340px minmax(0, 1fr);
    }
}

@media (max-width: 1200px) {
    .mail-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .mail-detail {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .mail-page-header,
    .mail-detail-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mail-grid {
        grid-template-columns: 1fr;
    }

    .mail-grid .card {
        min-height: auto;
    }

    .mail-folders,
    .mail-messages,
    .mail-thread {
        max-height: none;
    }

    .mail-search-wrap,
    .mail-detail-categories {
        flex-direction: column;
        align-items: stretch;
    }

    .mail-list-actions,
    .mail-page-actions,
    .mail-page-action-row,
    .mail-compose-modes,
    .mail-action-bar {
        width: 100%;
    }

    .mail-page-actions,
    .mail-page-action-row,
    .mail-action-bar {
        justify-content: flex-start;
    }

    .mail-page-status {
        align-self: stretch;
        max-width: none;
        justify-content: flex-start;
        text-align: left;
    }

    .mail-attachment-preview img,
    .mail-attachment-preview iframe {
        height: 240px;
    }
}
html.calendar-lock-scroll,
body.calendar-lock-scroll {
    overflow: hidden;
}
html.calendar-lock-scroll .page-container,
body.calendar-lock-scroll .page-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
html.calendar-lock-scroll .page.calendar-page,
body.calendar-lock-scroll .page.calendar-page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
html.calendar-lock-scroll .page.calendar-page .card,
body.calendar-lock-scroll .page.calendar-page .card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
html.calendar-lock-scroll .page.calendar-page .card-body,
body.calendar-lock-scroll .page.calendar-page .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
html.calendar-lock-scroll .page.calendar-page .calendar-people-year,
body.calendar-lock-scroll .page.calendar-page .calendar-people-year,
html.calendar-lock-scroll .page.calendar-page .calendar-people-day,
body.calendar-lock-scroll .page.calendar-page .calendar-people-day {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
html.calendar-lock-scroll .page.calendar-page .calendar-year-viewport,
body.calendar-lock-scroll .page.calendar-page .calendar-year-viewport,
html.calendar-lock-scroll .page.calendar-page .calendar-day-body,
body.calendar-lock-scroll .page.calendar-page .calendar-day-body {
    flex: 1 1 auto;
    min-height: 0;
}

.page-header {
    margin-bottom: 1.25rem;
}

.page-header h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 0.25rem;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
}

/* CRM page specific tweaks */
.crm-card .table-responsive {
    /* Let the page handle vertical scrolling; keep horizontal if needed */
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
}

/* Keep table header visible while scrolling (optional, improves UX) */
.crm-card .table-responsive table thead th {
    position: sticky;
    top: 0;
    background: var(--card-bg, #fff);
    z-index: 1;
}

/* Dashboard Specific */
.page[data-page-id="dashboard"] .dashboard-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.page[data-page-id="dashboard"] .dashboard-page-heading {
    flex: 1 1 420px;
    min-width: 0;
}

.page[data-page-id="dashboard"] .dashboard-page-subtitle {
    max-width: 72ch;
    margin-top: 0.3rem;
    color: var(--text-gray);
    font-size: 0.94rem;
    line-height: 1.45;
}

.page[data-page-id="dashboard"] .dashboard-page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.page[data-page-id="dashboard"] .dashboard-page-header-actions .btn {
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
}

.page[data-page-id="dashboard"] .dashboard-context-bar {
    margin-top: -0.1rem;
    margin-bottom: 0.15rem;
}

.page[data-page-id="dashboard"] .dashboard-context-bar .project-detail-context-chip {
    border-color: rgba(14, 165, 233, 0.2);
}

.page[data-page-id="dashboard"] .dashboard-workspace {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page[data-page-id="dashboard"] .dashboard-layout-shell {
    display: none;
    border-color: rgba(14, 165, 233, 0.14);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, #ffffff 100%);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.35);
}

.page.customize-mode[data-page-id="dashboard"] .dashboard-layout-shell,
.page[data-page-id="dashboard"].customize-mode .dashboard-layout-shell {
    display: block;
}

.page[data-page-id="dashboard"] .dashboard-layout-shell .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.8rem 1rem;
}

.page[data-page-id="dashboard"] .dashboard-layout-hint {
    display: none;
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.4;
}

.page.customize-mode[data-page-id="dashboard"] .dashboard-layout-hint,
.page[data-page-id="dashboard"].customize-mode .dashboard-layout-hint {
    display: block;
}

.dashboard-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.85rem;
    grid-auto-rows: minmax(var(--row-unit, 12px), auto);
    position: relative;
    align-items: start;
}

.dashboard-grid > .card,
.dashboard-grid > .stats-grid {
    grid-column: span 12;
}

.dashboard-grid > .card {
    overflow: visible;
}

.page[data-page-id="dashboard"] .dashboard-grid > .card {
    border-color: rgba(14, 165, 233, 0.12);
    box-shadow: 0 16px 32px -30px rgba(15, 23, 42, 0.34);
}

.page[data-page-id="dashboard"] .dashboard-grid > .card .card-header {
    padding: 0.9rem 1rem;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.page[data-page-id="dashboard"] .dashboard-grid > .card .card-body {
    padding: 0.9rem 1rem;
}

.page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(14, 165, 233, 0.18);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
    box-shadow: 0 24px 44px -34px rgba(15, 23, 42, 0.42);
}

.page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 100%);
}

.page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card .card-header {
    padding-top: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.56) 100%);
}

.page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card .card-title {
    letter-spacing: -0.01em;
}

.page[data-page-id="dashboard"] .dashboard-card-subtitle {
    margin-top: 0.18rem;
    max-width: 46ch;
    color: var(--text-gray);
    font-size: 0.81rem;
    line-height: 1.45;
}

.page[data-page-id="dashboard"] .dashboard-widget-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.page[data-page-id="dashboard"] .dashboard-summary-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.32rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(248, 250, 252, 0.92);
    color: var(--text-dark);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
}

.page[data-page-id="dashboard"] .dashboard-summary-pill--strong {
    border-color: rgba(14, 165, 233, 0.24);
    background: rgba(224, 242, 254, 0.78);
    color: #0f3d63;
}

.page[data-page-id="dashboard"] .dashboard-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.page[data-page-id="dashboard"] .dashboard-feed-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, #ffffff 100%);
}

.page[data-page-id="dashboard"] .dashboard-feed-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.page[data-page-id="dashboard"] .dashboard-feed-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.35;
}

.page[data-page-id="dashboard"] .dashboard-feed-meta {
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

.page[data-page-id="dashboard"] .dashboard-feed-meta--muted {
    font-size: 0.73rem;
}

.page[data-page-id="dashboard"] .dashboard-research-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.05rem;
}

.page[data-page-id="dashboard"] .dashboard-feed-row[data-research-public-funded-project] {
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.page[data-page-id="dashboard"] .dashboard-feed-row[data-research-public-funded-project]:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, 0.28);
    box-shadow: 0 16px 36px -32px rgba(2, 132, 199, 0.55);
}

.page[data-page-id="dashboard"] .dashboard-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.page[data-page-id="dashboard"] .dashboard-row-actions .btn {
    min-height: 32px;
    border-radius: 999px;
    padding: 0.34rem 0.8rem;
}

.page[data-page-id="dashboard"] .dashboard-source-badge,
.page[data-page-id="dashboard"] .dashboard-missing-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.page[data-page-id="dashboard"] .dashboard-source-badge {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(241, 245, 249, 0.9);
    color: #334155;
}

.page[data-page-id="dashboard"] .dashboard-source-badge--time {
    background: rgba(219, 234, 254, 0.92);
    color: #1d4ed8;
}

.page[data-page-id="dashboard"] .dashboard-source-badge--absences {
    background: rgba(254, 240, 138, 0.5);
    color: #854d0e;
}

.page[data-page-id="dashboard"] .dashboard-source-badge--home_office {
    background: rgba(220, 252, 231, 0.82);
    color: #166534;
}

.page[data-page-id="dashboard"] .dashboard-source-badge--zeitkonto {
    background: rgba(243, 232, 255, 0.82);
    color: #6b21a8;
}

.page[data-page-id="dashboard"] .dashboard-missing-badge {
    border: 1px solid rgba(251, 146, 60, 0.25);
    background: rgba(255, 237, 213, 0.88);
    color: #9a3412;
}

.page[data-page-id="dashboard"] .dashboard-progress {
    overflow: hidden;
    height: 8px;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
}

.page[data-page-id="dashboard"] .dashboard-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 100%);
}

.page[data-page-id="dashboard"] .dashboard-empty-state {
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.38);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.7);
}

.page[data-page-id="dashboard"] .dashboard-empty-state-title {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.35;
}

.page[data-page-id="dashboard"] .dashboard-empty-state-copy {
    margin-top: 0.24rem;
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Size controls shown only in customize mode */
.resize-controls {
    display: none;
    gap: 6px;
    margin-left: 8px;
}
.resize-controls .resize-btn {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.resize-controls .resize-btn.active {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}
.page.customize-mode .resize-controls {
    display: inline-flex;
}

.grid-controls {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    display: none;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    z-index: auto;
}

.page.customize-mode .grid-controls {
    display: inline-flex;
}

.grid-controls .label {
    color: var(--text-gray);
    font-size: 11px;
    margin-right: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grid-btn {
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #fff;
    color: var(--text-dark);
    font-size: 11px;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
}

.grid-btn.active {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
    box-shadow: 0 10px 20px -18px rgba(14, 165, 233, 0.85);
}

.quick-action-card {
    background: white;
    padding: 1rem 0.9rem;
    border-radius: 14px;
    box-shadow: 0 16px 30px -28px rgba(15, 23, 42, 0.28);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-width: 0;
    flex: 1 1 150px;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-action-icon {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}

.quick-action-label {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.9rem;
}

/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.project-card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.project-card-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.project-number {
    font-size: 0.75rem;
    color: var(--text-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.project-comment-pill {
    margin-left: 6px;
}

.project-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
    color: var(--text-dark);
}

.project-client {
    color: var(--text-gray);
    font-size: 0.875rem;
}

.project-card-body {
    padding: 1rem 1.5rem;
}

.project-progress {
    margin-bottom: 1rem;
}

.project-progress-label {
    display: flex;
    justify-content: between;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.project-progress-percent {
    font-weight: 600;
    color: var(--primary-cyan);
}

.project-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.project-stat {
    text-align: center;
}

.project-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.project-stat-label {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-card-footer {
    padding: 1rem 1.5rem;
    background: var(--primary-silver);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-team {
    display: flex;
    gap: 0.25rem;
}

.team-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-cyan);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.team-avatar:not(:first-child) {
    margin-left: -8px;
}

/* Utilization: ensure avatars never stretch in overview tables */
.user-pill .avatar img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
}

/* Utility: allow long names/descriptions to wrap cleanly */
.break-words {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Offers Grid */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.offer-card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.offer-card-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.offer-number {
    font-size: 0.75rem;
    color: var(--text-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offer-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0.5rem 0;
    line-height: 1.4;
}

.offer-client {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

.offer-card-body {
    padding: 1rem 1.5rem;
}

.offer-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.offer-amount-label {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.offer-amount-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-cyan);
}

.offer-validity {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.offer-card-footer {
    padding: 1rem 1.5rem;
    background: var(--primary-silver);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-card-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.offer-card:hover .offer-card-actions {
    opacity: 1;
}

/* Offers workspace */
.page[data-page-id="offers"] .offers-page-subtitle {
    margin-top: 0.45rem;
    max-width: 760px;
    color: var(--text-gray);
    font-size: 0.97rem;
    line-height: 1.55;
}

.page[data-page-id="offers"] .offers-context-bar {
    margin-top: 0.9rem;
}

.page[data-page-id="offers"] .offers-context-bar .project-detail-context-chip {
    background: rgba(255, 255, 255, 0.82);
}

.page[data-page-id="offers"] .offers-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="offers"] .offers-section-card {
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="offers"] .offers-section-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="offers"] .offers-section-body--flush {
    padding-top: 0;
}

.page[data-page-id="offers"] .offers-header-actions,
.page[data-page-id="offers"] .offers-results-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.page[data-page-id="offers"] .offers-results-actions .form-select {
    min-width: 180px;
}

.page[data-page-id="offers"] .offers-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0;
}

.page[data-page-id="offers"] .offers-metrics-grid .stat-card {
    margin-bottom: 0;
    padding: 0.85rem 1rem;
    min-width: 0;
}

.page[data-page-id="offers"] .offers-metrics-grid .stat-header {
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.page[data-page-id="offers"] .offers-metrics-grid .stat-title {
    font-size: 0.76rem;
    line-height: 1.25;
}

.page[data-page-id="offers"] .offers-metrics-grid .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 1rem;
}

.page[data-page-id="offers"] .offers-metrics-grid .stat-value {
    margin-bottom: 0;
    font-size: 1.35rem;
    text-align: left;
}

.page[data-page-id="offers"] .offers-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.page[data-page-id="offers"] .offers-filter-span-2 {
    grid-column: span 2;
    min-width: 0;
}

.page[data-page-id="offers"] .offers-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0 0.2rem;
}

.page[data-page-id="offers"] .offers-table-frame {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.page[data-page-id="offers"] .offers-table-frame .tabulator {
    border: 0;
    border-radius: 0;
}

.page[data-page-id="offers"] .offers-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    color: var(--text-gray);
    text-align: center;
}

.page[data-page-id="offers"] .offers-empty-state-icon {
    font-size: 2.5rem;
    color: var(--text-dark);
}

.page[data-page-id="offers"] .offers-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="offers"] .offers-empty-state-description {
    max-width: 420px;
    line-height: 1.55;
}

.page[data-page-id="offers"] .offers-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@media (max-width: 960px) {
    .page[data-page-id="offers"] .offers-header-actions,
    .page[data-page-id="offers"] .offers-results-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .page[data-page-id="offers"] .offers-filter-span-2 {
        grid-column: span 1;
    }
}

/* Offer Detail Modal */
.page[data-page-id="offers"] #viewOfferModal .modal-content {
    max-width: 1100px;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-modal {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

.page[data-page-id="offers"] #viewOfferModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.92fr);
    gap: 1rem;
    align-items: start;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-card {
    min-width: 0;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-main,
.page[data-page-id="offers"] #viewOfferModal .offer-detail-sidebar,
.page[data-page-id="offers"] #offerDetails,
.page[data-page-id="offers"] #offerFinancial,
.page[data-page-id="offers"] #offerFollowUps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="offers"] #viewOfferModal .card {
    margin-bottom: 0;
}

.page[data-page-id="offers"] #offerActions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-panel {
    border-radius: 14px;
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-intro-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,252,0.98));
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-context-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-gray);
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-context-line {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions {
    width: 100%;
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions-status {
    flex: 1 1 360px;
}

.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode #offerDocStorageNote,
.page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode #offerDocTeamsStatus {
    max-width: 480px;
    line-height: 1.4;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-section {
    margin-bottom: 1.5rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-section:last-child {
    margin-bottom: 0;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-section-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary {
    background: var(--primary-silver);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-main {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-title {
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-secondary {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-amount {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-amount label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-gray);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-number {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-gray);
    font-weight: 600;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-description {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.5;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.35rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    margin-top: 1rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-meta label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-gray);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-meta span {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-section h4 {
    margin: 0 0 0.75rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-item label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-item span {
    font-size: 0.95rem;
    color: var(--text-dark);
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-emphasis {
    font-weight: 600;
}

.page[data-page-id="offers"] #viewOfferModal .offer-detail-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-cyan);
}

.page[data-page-id="offers"] #viewOfferModal .offer-followups-header {
    gap: 0.75rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followups-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followups-empty {
    margin: 0;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followup-row {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followup-row.is-overdue {
    background: #fff6f6;
    border-color: #f3c5c5;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followup-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followup-note {
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="offers"] #viewOfferModal .offer-followup-meta {
    font-size: 0.9rem;
}

.page[data-page-id="offers"] #viewOfferModal .offer-followup-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .page[data-page-id="offers"] #viewOfferModal .offer-detail-modal-body,
    .page[data-page-id="offers"] #viewOfferModal .offer-detail-section-group,
    .page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-meta {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="offers"] #viewOfferModal .offer-detail-summary-main {
        align-items: flex-start;
    }

    .page[data-page-id="offers"] #viewOfferModal .offer-followup-row {
        flex-direction: column;
    }

    .page[data-page-id="offers"] #viewOfferModal .offer-followup-actions .btn {
        width: 100%;
    }

    .page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions {
        align-items: stretch;
    }

    .page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions-status,
    .page[data-page-id="offers"] #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions .btn {
        width: 100%;
    }
}

/* Offer create modal */
.page[data-page-id="offers"] #createOfferModal .offer-create-modal {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

.page[data-page-id="offers"] #createOfferModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="offers"] #createOfferForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Offers: form modals */
#createOfferModal .offer-form-card,
#followUpModal .offer-form-card,
#createClientInlineModal .offer-form-card,
#offerClientViewModal .offer-form-card,
#offerDocModal .offer-form-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#followUpModal .offer-followup-modal {
    max-width: 560px;
    width: min(560px, 92vw);
}

#createClientInlineModal .offer-client-modal {
    max-width: 640px;
    width: min(640px, 94vw);
    max-height: 90vh;
}

#offerClientViewModal .offer-client-view-modal {
    max-width: 720px;
    width: min(720px, 94vw);
}

#followUpModal .modal-body,
#createClientInlineModal .modal-body,
#offerClientViewModal .modal-body,
#offerDocModal .modal-body {
    background: var(--primary-silver);
}

#followUpModal #followUpForm,
#createClientInlineModal #createClientInlineForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#offerDocModal .offer-doc-modal {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

#offerDocModal .offer-doc-panel {
    min-width: 0;
}

/* Offers: Teams file picker modal */
#teamsFilePickerModal .teams-picker-modal {
    max-width: 960px;
    width: min(960px, 96vw);
}

#teamsFilePickerModal .modal-body {
    background: var(--primary-silver);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#teamsFilePickerModal .teams-picker-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#teamsFilePickerModal .teams-picker-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#teamsFilePickerModal .teams-picker-spacer {
    flex: 1;
}

#teamsFilePickerModal .teams-picker-search {
    width: 220px;
    max-width: 45vw;
}

#teamsFilePickerModal .teams-picker-list {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
}

#teamsFilePickerModal .teams-picker-footer {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

#teamsFilePickerModal .teams-picker-selection {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-gray);
}

/* Dashboard + Time Tracking modals */
#newsCreateModal .dashboard-news-modal {
    max-width: 720px;
    width: min(720px, 94vw);
}

#newsPageModal .news-page-modal {
    max-width: 720px;
    width: min(720px, 94vw);
}

#timeEntryModal .time-entry-modal {
    max-width: 720px;
    width: min(720px, 94vw);
}

#expenseModal .dashboard-expense-modal {
    max-width: 640px;
    width: min(640px, 94vw);
}

#whatsNewModal .whatsnew-modal {
    max-width: 840px;
    width: min(840px, 96vw);
}

#timesheetExportModal .timesheet-export-modal {
    max-width: 760px;
    width: min(760px, 94vw);
}

#dayEntriesModal .day-entries-modal {
    max-width: 640px;
    width: min(640px, 92vw);
}

#newsCreateModal .modal-body,
#newsPageModal .modal-body,
#timeEntryModal .modal-body,
#expenseModal .modal-body,
#whatsNewModal .modal-body,
#timesheetExportModal .modal-body,
#dayEntriesModal .modal-body {
    background: var(--primary-silver);
}

#newsCreateModal #newsForm,
#newsPageModal #newsPageForm,
#timeEntryModal #timeEntryForm,
#expenseModal #expenseForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#timeEntryModal #timeEntryForm {
    gap: 0.5rem;
}

#timeEntryModal .form-group {
    margin-bottom: 0;
}

#timeEntryModal .time-entry-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

#timeEntryModal .time-entry-flags .form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

#createProjectModal .util-v3-project-modal {
    max-width: 1200px;
    width: min(1200px, 98vw);
}

#projectCreateClientModal .util-v3-client-modal {
    max-width: 640px;
    width: min(640px, 94vw);
}

#createProjectModal .modal-body,
#projectCreateClientModal .modal-body {
    background: var(--primary-silver);
}

#timesheetExportModal .timesheet-export-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#dayEntriesModal .day-entries-panel {
    min-height: 120px;
}

#whatsNewModal .whatsnew-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HR management modal */
#hr-edit-member-modal .hr-edit-member-modal {
    max-width: 1230px;
    width: min(1230px, 96vw);
}

#hr-edit-member-modal .modal-body {
    background: var(--primary-silver);
}

#hr-edit-member-modal #hrEditForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#hr-edit-member-modal .hr-edit-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#hr-edit-member-modal .hr-section + .hr-section {
    margin-top: 0.75rem;
}

#hr-edit-member-modal .hr-section summary {
    background: var(--primary-silver);
}

#hr-edit-member-modal .hr-section-body {
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#hr-edit-member-modal input[data-time-target-weekday],
#hr-edit-member-modal input[data-time-target-edit-weekday],
#hr-edit-member-modal input[data-time-target-edit-date],
#hr-edit-member-modal #hrTimeTargetNewDate {
    color: var(--text-dark);
    caret-color: var(--text-dark);
    background: #fff;
}

#hr-edit-member-modal .time-target-hours-input {
    width: 100%;
    min-width: 110px;
    text-align: right;
    -moz-appearance: textfield;
}

#hr-edit-member-modal .time-target-hours-input::-webkit-outer-spin-button,
#hr-edit-member-modal .time-target-hours-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Time Entry Grid */
.time-entry-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    /* Ensure grid doesn't overflow small containers */
    overflow-x: auto;
}

/* Ensure day cards have a reasonable min width when horizontally scrollable */
.time-entry-grid > .day-card { min-width: 140px; }

/* Time Tracking badges: keep compact */
.time-tracking-page .badge {
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Calendar */
.calendar-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
}

.calendar-weekday {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.25rem 0.5rem;
}

/* Make weekend headers visually distinct too */
.calendar-weekday.weekend {
    color: var(--text-dark);
    background: rgba(3, 105, 161, 0.06);
    border-radius: 6px;
}

.calendar-day {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    min-height: 100px;
    position: relative;
}

.calendar-day.weekend {
    /* Make weekends clearly visible with a gentle blue tint */
    background: linear-gradient(180deg, rgba(3, 105, 161, 0.06), rgba(3, 105, 161, 0.06));
}

.calendar-day.outside-month {
    background: #f9fafb;
    color: var(--text-gray);
}

.calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--primary-cyan);
}

.calendar-day-header-row {
    display: contents;
}

.calendar-day-number {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-event {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--primary-silver);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event.more {
    background: transparent;
    border: none;
    color: var(--text-gray);
    padding: 0;
}

/* Optional: visually mark holidays similar to weekends */
.calendar-day.holiday {
    opacity: 0.7;
}
.calendar-day.holiday.holiday-partial {
    opacity: 1;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.12) 0 45%, rgba(255, 255, 255, 0.96) 45% 100%);
}
.calendar-day.home-office {
    overflow: hidden;
}
.calendar-day.home-office::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background-image: radial-gradient(circle, rgba(3, 105, 161, 0.35) 1px, transparent 1.5px);
    background-size: 6px 6px;
    opacity: 0.45;
    pointer-events: none;
}
.calendar-day.home-office > * {
    position: relative;
    z-index: 1;
}
.calendar-surface-wrap {
    position: relative;
}
.calendar-surface-wrap--fullscreen {
    position: fixed;
    inset: 12px;
    background: var(--bg, #fff);
    z-index: 1200;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.calendar-surface-wrap--fullscreen #calendarFsExit {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1210;
    background: var(--bg, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.calendar-surface-wrap--fullscreen #calendarPeopleYear,
.calendar-surface-wrap--fullscreen #calendarPeopleDay,
.calendar-surface-wrap--fullscreen #calendarMonthView {
    flex: 1 1 auto;
    min-height: 0;
}
.calendar-surface-wrap--fullscreen #calendarMonthView {
    overflow: auto;
}
.calendar-surface-wrap--fullscreen #calendarLocaleBanner,
.calendar-surface-wrap--fullscreen #calendarLegend,
.calendar-surface-wrap--fullscreen #calendarTodayDetails {
    flex: 0 0 auto;
}

/* People–Year Calendar */
.calendar-people-year {
    position: relative;
    /* Keep header aligned with sticky user column */
    --year-sticky-width: 220px;
}
.calendar-page .card-header {
    padding: 1rem 1.25rem;
}
.calendar-year-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    /* Reserve the name column width so day headers align with rows */
    padding-left: var(--year-sticky-width);
}
.calendar-year-header .year-header-inner {
    position: relative;
    display: flex;
    min-height: 56px;
    padding-top: 20px;
    box-sizing: border-box;
}
.year-day-header {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: var(--text-gray);
    border-right: 1px solid var(--border-color);
}
.year-day-header .wday { font-size: 10px; line-height: 1; }
.year-day-header .dnum { font-size: 11px; font-weight: 600; line-height: 1; }
.year-day-header.weekend { background: rgba(3, 105, 161, 0.08); }
.year-day-header.today { box-shadow: inset 0 -2px 0 var(--primary-cyan); font-weight: 600; color: var(--text-dark); }
.year-day-header.month-start { border-left: 2px solid var(--border-color); }
/* Stick month names inside the header so they are visible */
.calendar-year-header { min-height: 56px; }
.calendar-year-header .month-label-range {
    position: absolute;
    top: 2px;
    height: 16px;
    overflow: hidden;
    pointer-events: none;
}
.calendar-year-header .month-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    font-size: 11px;
    color: var(--text-gray);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.page.operations-hub-page .operations-hub-period-summary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.page.operations-hub-page .operations-hub-period-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-dark);
    font-size: 0.85rem;
}

.page.operations-hub-page .operations-hub-period-summary-pill strong {
    color: var(--text-gray);
    font-weight: 600;
}

.calendar-year-viewport {
    position: relative;
    /* Enable both axes to allow horizontal movement and internal vertical virtualization */
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    /* Give the viewport its own vertical scroll so rows virtualize correctly */
    max-height: 60vh;
}
.calendar-year-grid {
    position: relative;
}
.year-row {
    position: absolute;
    left: 0; right: 0;
    border-bottom: 1px solid var(--border-color);
}
.year-row-sticky {
    position: sticky; /* keep names visible while horizontally scrolling */
    left: 0;
    top: auto;
    background: var(--bg, #fff);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 8px;
    z-index: 10; /* above cells */
    border-right: 1px solid var(--border-color);
    width: var(--year-sticky-width);
    min-width: var(--year-sticky-width);
}
.year-row-sticky .avatar {
    width: 18px; height: 18px; border-radius: 50%;
    background: #e6edf5; color: #234;
    font-size: 11px; display: inline-flex; align-items:center; justify-content:center; font-weight: 600;
}
.year-row-sticky .name { font-size: 12px; color: var(--text-dark); }
.year-row-cells { position: absolute; display: flex; gap: 0; height: 100%; top: 0; z-index: 1; }
.year-day-cell {
    position: absolute;
    top: 1px; bottom: 1px;
    border-right: 1px solid var(--border-color);
    background: #fff;
    overflow: hidden;
}
.year-day-cell.weekend { background: rgba(3, 105, 161, 0.06); }
.year-day-cell.today { box-shadow: inset 0 0 0 2px var(--primary-cyan); }
.year-day-cell.ok { background: linear-gradient(180deg, rgba(16,185,129,0.15), rgba(16,185,129,0.15)); }
.year-day-cell.under { background: linear-gradient(180deg, rgba(240,173,78,0.15), rgba(240,173,78,0.15)); }
.year-day-cell.none { background: #ffffff; }
.year-day-cell.holiday { background: linear-gradient(180deg, rgba(248, 113, 113, 0.14), rgba(248, 113, 113, 0.14)); }
.year-day-cell.holiday.holiday-partial {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0 50%, #ffffff 50% 100%);
}
.year-day-cell.absence { background: linear-gradient(180deg, rgba(240,173,78,0.12), rgba(240,173,78,0.12)); }
.year-day-cell.absence::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--warning, #f0ad4e);
}
.year-day-cell.absence.absence-partial {
    background: linear-gradient(135deg, rgba(240,173,78,0.12) 0 50%, #ffffff 50% 100%);
}
.year-day-cell.absence.absence-partial::after { border-top-color: transparent; }
.year-day-cell.zeitkonto {
    background: linear-gradient(180deg, rgba(124,58,237,0.16), rgba(124,58,237,0.16));
}
.year-day-cell.zeitkonto.zeitkonto-partial {
    background: linear-gradient(135deg, rgba(124,58,237,0.18) 0 50%, #ffffff 50% 100%);
}
.year-day-cell.home-office::before {
    content: '';
    position: absolute;
    inset: 1px;
    background-image: radial-gradient(circle, rgba(3, 105, 161, 0.4) 1px, transparent 1.5px);
    background-size: 6px 6px;
    opacity: 0.28;
    pointer-events: none;
}
.year-day-markers {
    position: absolute;
    inset: 1px;
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    pointer-events: none;
}
.year-day-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    max-width: 100%;
    height: 9px;
    padding: 0 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    font-size: 7px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.year-day-marker-absence.is-partial,
.year-day-marker-holiday.is-partial,
.year-day-marker-zeitkonto.is-partial {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    border: 1px dashed rgba(15, 23, 42, 0.3);
}
.year-day-marker-holiday {
    background: rgba(254, 226, 226, 0.98);
    color: #991b1b;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}
.year-day-marker-more {
    min-width: 14px;
}

/* Pinned current-user row at top */
.year-row-pinned {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--border-color);
}
.year-row-pinned .year-row-sticky {
    background: linear-gradient(90deg, rgba(0,178,204,0.12), rgba(255,255,255,0));
    border-right: 1px solid var(--border-color);
}
.year-row-pinned .year-row-sticky .name { font-weight: 600; }

/* People–Day view */
.calendar-people-day {
    --year-sticky-width: 220px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.calendar-day-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}
.calendar-day-header .day-header-sticky {
    width: var(--year-sticky-width);
    min-width: var(--year-sticky-width);
    padding: 6px 8px;
    border-right: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-gray);
    font-weight: 600;
}
.calendar-day-header .day-hours {
    display: flex;
    flex-direction: column;
    width: calc(var(--day-hour-width, 64px) * var(--day-hour-count, 9));
    flex: 0 0 auto;
    will-change: transform;
}
.calendar-day-header .day-labels {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}
.calendar-day-header .day-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 4px 0;
    color: var(--text-dark);
    border-right: 1px solid var(--border-color);
}
.calendar-day-header .day-label:last-child { border-right: 0; }
.calendar-day-header .day-hours-row { display: flex; }
.calendar-day-header .day-hour {
    width: var(--day-hour-width, 64px);
    text-align: center;
    padding: 6px 0;
    font-size: 11px;
    color: var(--text-gray);
    border-right: 1px solid var(--border-color);
    box-sizing: border-box;
}
.calendar-day-body {
    max-height: 70vh;
    overflow: auto;
}
.calendar-day-row {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    min-height: 30px;
}
.calendar-day-row:last-child {
    border-bottom: none;
}
.calendar-day-row .day-row-sticky {
    left: 0;
    width: var(--year-sticky-width);
    min-width: var(--year-sticky-width);
    border-right: 1px solid var(--border-color);
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    z-index: 3;
    position: sticky;
    box-sizing: border-box;
    min-height: 30px;
}
.calendar-day-row.current-user .day-row-sticky {
    background: linear-gradient(90deg, rgba(0,178,204,0.12), rgba(255,255,255,0));
}
.calendar-day-row .day-row-sticky .avatar {
    width: 18px; height: 18px; border-radius: 50%;
    background: #e6edf5; color: #234;
    font-size: 11px; display: inline-flex; align-items:center; justify-content:center; font-weight: 600;
}
.calendar-day-row .day-row-sticky .name { font-size: 12px; color: var(--text-dark); }
.calendar-day-row .day-row-notes {
    position: absolute;
    right: 6px;
    top: 6px;
    display: inline-flex;
    gap: 4px;
    font-size: 10px;
    color: var(--text-gray);
}
.calendar-day-row .day-row-note {
    background: #f3f4f6;
    border: 1px solid var(--border-color);
    padding: 1px 4px;
    border-radius: 999px;
}
.calendar-day-timeline {
    position: relative;
    height: 30px;
    width: calc(var(--day-hour-width, 64px) * var(--day-hour-count, 9));
    flex: 0 0 auto;
    background-image: repeating-linear-gradient(
        to right,
        rgba(15, 23, 42, 0.08),
        rgba(15, 23, 42, 0.08) 1px,
        transparent 1px,
        transparent var(--day-hour-width, 64px)
    );
    box-sizing: border-box;
}
.calendar-day-timeline .day-separator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    pointer-events: none;
}
.calendar-day-timeline.home-office::before {
    content: '';
    position: absolute;
    inset: 2px;
    background-image: radial-gradient(circle, rgba(3, 105, 161, 0.4) 1px, transparent 1.5px);
    background-size: 6px 6px;
    opacity: 0.35;
    pointer-events: none;
}
.calendar-day-block {
    position: absolute;
    top: 4px;
    height: 22px;
    z-index: 2;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px 2px 4px;
    color: #111827;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.calendar-day-block-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    flex: 0 0 auto;
}
.calendar-day-block-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-day-block.entry {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.35);
    z-index: 4;
}
.calendar-day-block.holiday {
    top: 2px;
    height: 26px;
    z-index: 1;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #7f1d1d;
}
.calendar-day-block.holiday.is-partial {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0 50%, rgba(255, 255, 255, 0.94) 50% 100%);
}
.calendar-day-block.absence {
    background: rgba(240, 173, 78, 0.2);
    border: 1px solid rgba(240, 173, 78, 0.45);
    z-index: 3;
}
.calendar-day-block.absence.is-partial {
    background: linear-gradient(135deg, rgba(240, 173, 78, 0.22) 0 55%, #ffffff 55% 100%);
}
.calendar-day-block.absence.summary {
    background: rgba(240, 173, 78, 0.08);
    border-style: dashed;
}
.calendar-day-block.home-office {
    background-image: radial-gradient(circle, rgba(3, 105, 161, 0.35) 1px, transparent 1.5px);
    background-size: 6px 6px;
    border: 1px dashed rgba(3, 105, 161, 0.35);
    background-color: rgba(255, 255, 255, 0.92);
    color: #111827;
    z-index: 3;
}
.calendar-day-block.zeitkonto {
    background: rgba(124, 58, 237, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.4);
    z-index: 3;
}
.calendar-day-block.zeitkonto.zeitkonto-partial {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0 50%, #ffffff 50% 100%);
}

/* Legend chips */
.calendar-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark);
}
.calendar-legend-note {
    color: var(--text-gray);
}
.legend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    vertical-align: middle;
    border: 1px solid var(--border-color);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    color: #0f172a;
}
.legend-chip.legend-ok { background: rgba(16,185,129,0.25); }
.legend-chip.legend-under { background: rgba(240,173,78,0.25); }
.legend-chip.legend-none { background: #ffffff; }
.legend-chip.legend-absence {
    background: linear-gradient(135deg, rgba(240, 173, 78, 0.18) 0 55%, #ffffff 55% 100%);
    border-color: rgba(240, 173, 78, 0.4);
}
.legend-chip.legend-holiday {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0 55%, #ffffff 55% 100%);
    border-color: rgba(239, 68, 68, 0.35);
}
.legend-chip.legend-zeitkonto { background: rgba(124,58,237,0.3); }
.legend-chip.legend-home-office {
    background-color: #ffffff;
    background-image: radial-gradient(circle, rgba(3, 105, 161, 0.45) 1px, transparent 1.5px);
    background-size: 6px 6px;
    border-style: dashed;
}
.legend-chip.legend-weekend { background: rgba(3, 105, 161, 0.06); }

.calendar-day-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 4px;
}
.calendar-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 6px 1px 3px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 10px;
    line-height: 1.2;
}
.calendar-inline-status-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 14px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 9px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    flex: 0 0 auto;
}
.calendar-inline-status-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-inline-status-absence {
    background: rgba(240, 173, 78, 0.12);
    border-color: rgba(240, 173, 78, 0.4);
}
.calendar-inline-status-holiday {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #7f1d1d;
}
.calendar-inline-status-holiday.is-partial {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.16) 0 50%, rgba(255, 255, 255, 0.95) 50% 100%);
}
.calendar-inline-status-home-office {
    background-color: rgba(255, 255, 255, 0.92);
    background-image: radial-gradient(circle, rgba(3, 105, 161, 0.28) 1px, transparent 1.5px);
    background-size: 6px 6px;
    border-style: dashed;
}

/* Time Tracking Grid */
.day-card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.day-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.day-card.complete {
    border-color: var(--success-color);
    background: linear-gradient(135deg, #fff 0%, #f0fff4 100%);
}

.day-card.incomplete {
    border-color: var(--warning-color);
    background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
}

.day-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.day-date {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.hours-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 0.25rem;
}

.day-card.complete .hours-display {
    color: var(--success-color);
}

.day-card.incomplete .hours-display {
    color: var(--warning-color);
}

.hours-label {
    font-size: 0.75rem;
    color: var(--text-gray);
}
.absence-sum {
    color: var(--warning-color);
}

.week-summary {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--primary-silver);
    border-radius: 8px;
}

/* Time Entry Table Styles */
.table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    /* Add a bit of right padding so rightmost actions aren't flush/cut off */
    padding-right: 16px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin: 0;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table th {
    background: var(--primary-silver);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table tr:hover {
    background: var(--hover-color);
}

.table tr:last-child td {
    border-bottom: none;
}

/* Team page table: tighter density without hiding data */
.page.team-page .team-table {
    font-size: 0.8125rem;
    line-height: 1.3;
}

.page.team-page .team-table th,
.page.team-page .team-table td {
    padding: 0.5rem 0.5rem;
}

.page.team-page .team-table th {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.page.team-page .team-table-container {
    margin-top: 0.25rem;
    padding-right: 8px;
}

/* Team modals: new UX sizing and spacing */
.page.team-page #assign-roles-modal .team-assign-modal {
    max-width: 520px;
    width: min(520px, 94vw);
}

.page.team-page #invite-user-modal .team-invite-modal {
    max-width: 660px;
    width: min(660px, 94vw);
}

.page.team-page #view-team-member-modal .team-view-modal {
    max-width: 520px;
    width: min(520px, 94vw);
}

.page.team-page #edit-team-member-modal .team-edit-modal {
    max-width: 640px;
    width: min(640px, 94vw);
}

.page.team-page #assign-roles-modal .modal-body,
.page.team-page #invite-user-modal .modal-body,
.page.team-page #view-team-member-modal .modal-body,
.page.team-page #edit-team-member-modal .modal-body {
    background: var(--primary-silver);
}

.page.team-page #invite-user-form,
.page.team-page #editTeamMemberForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Time Entry Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1600;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 1.5rem 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--hover-color);
    color: var(--text-dark);
}

.modal-body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-compact .btn:not(.btn-sm):not(.btn-xs) {
    padding: 0.6rem 1.1rem;
    font-size: 0.8125rem;
}

.modal-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Larger modal variant for complex forms (e.g., reimbursements) */
.modal .modal-content.modal-lg {
    max-width: 920px;
    width: 95%;
}

/* Allow more vertical space for larger modals; ensure footer stays visible */
.modal .modal-content.modal-lg .modal-body {
    max-height: calc(90vh - 140px);
}

/* Utilization → Planning: fullscreen card */
.card.card--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    background: var(--bg, #fff);
    z-index: 1200; /* above header and standard UI, below bug-report overlay */
    display: flex;
    flex-direction: column;
}
.card.card--fullscreen .card-body {
    flex: 1;
    min-height: 0;
    overflow: hidden; /* inner grid will scroll */
}
.card.card--fullscreen #planGridContainer {
    height: 100%;
    min-height: 0;
    flex: 1;
    overflow: auto;
}
.card.card--fullscreen #planGridContainer > div {
    min-height: 100%;
    max-height: none !important;
}

.plan-grid-wrapper {
    position: relative;
}

.card.card--fullscreen .plan-grid-wrapper {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.plan-grid-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 50;
    pointer-events: none;
    color: var(--text, #333);
    font-weight: 500;
    font-size: 0.95rem;
}

.plan-grid-wrapper.is-loading .plan-grid-loading {
    pointer-events: all;
}

.plan-grid-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary, #1f8ceb);
    animation: plan-grid-spin 0.8s linear infinite;
}

@keyframes plan-grid-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Form Styles */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
    background: white;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

/* Progress Bar */
.progress {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-cyan) 0%, var(--secondary-color) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* CRM Specific */
/* Ensure both the wrapper and inner container lay out chips horizontally */
.client-filters,
#clientTypeFilters {
    display: flex;
    gap: 0.75rem;
    /* Tighter spacing so filters sit closer to controls */
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.filter-chip {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: white;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.filter-chip:hover, .filter-chip.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: white;
}

/* CRM workspace */
.page[data-page-id="crm"] .crm-page-subtitle {
    max-width: 72ch;
    margin-top: 0.35rem;
    color: var(--text-gray);
    font-size: 0.96rem;
    line-height: 1.45;
}

.page[data-page-id="crm"] .crm-context-bar {
    margin-bottom: 0.15rem;
}

.page[data-page-id="crm"] .crm-context-bar .project-detail-context-chip {
    border-color: rgba(14, 165, 233, 0.2);
}

.page[data-page-id="crm"] .crm-workspace {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.page[data-page-id="crm"] .crm-filters-card,
.page[data-page-id="crm"] .crm-results-card,
.page[data-page-id="crm"] .crm-products-admin-card {
    border-color: rgba(14, 165, 233, 0.12);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.45);
}

.page[data-page-id="crm"] .crm-filters-body,
.page[data-page-id="crm"] .crm-results-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.page[data-page-id="crm"] .crm-filter-chip-row,
.page[data-page-id="crm"] .client-filters,
.page[data-page-id="crm"] #clientTypeFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page[data-page-id="crm"] .crm-search-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 0.9rem;
    align-items: end;
}

.page[data-page-id="crm"] .crm-search-field {
    min-width: 0;
}

.page[data-page-id="crm"] .crm-search-field .form-input,
.page[data-page-id="crm"] .crm-search-field .form-select {
    width: 100%;
}

.page[data-page-id="crm"] .crm-search-field .form-label,
.page[data-page-id="crm"] .crm-results-actions .form-label {
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="crm"] .crm-header-actions,
.page[data-page-id="crm"] .crm-toolbar-actions,
.page[data-page-id="crm"] .crm-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.page[data-page-id="crm"] .crm-toolbar-row {
    display: flex;
    justify-content: flex-start;
}

.page[data-page-id="crm"] .crm-selection-indicator {
    color: var(--text-gray);
    font-size: 0.82rem;
}

.page[data-page-id="crm"] .crm-results-actions {
    justify-content: flex-end;
}

.page[data-page-id="crm"] .crm-results-per-page {
    min-width: 140px;
}

.page[data-page-id="crm"] .crm-table-frame,
.page[data-page-id="crm"] .crm-products-admin-table-frame {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
}

.page[data-page-id="crm"] #clientsTabulator,
.page[data-page-id="crm"] .crm-table-frame .tabulator,
.page[data-page-id="crm"] .crm-products-admin-table-frame .tabulator {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.page[data-page-id="crm"] .crm-table-frame .table,
.page[data-page-id="crm"] .crm-products-admin-table-frame .table {
    margin-bottom: 0;
}

.page[data-page-id="crm"] .crm-table-frame .table thead th,
.page[data-page-id="crm"] .crm-products-admin-table-frame .table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.page[data-page-id="crm"] .crm-table-actions,
.page[data-page-id="crm"] .crm-products-admin-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
    white-space: nowrap;
}

.page[data-page-id="crm"] .crm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 220px;
    padding: 2.6rem 1rem;
    text-align: center;
}

.page[data-page-id="crm"] .crm-empty-state-icon {
    font-size: 2.3rem;
    line-height: 1;
}

.page[data-page-id="crm"] .crm-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="crm"] .crm-empty-state-description {
    max-width: 48ch;
    color: var(--text-gray);
    line-height: 1.5;
}

/* CRM: client detail modal */
.page[data-page-id="crm"] #clientDetailModal .modal-content {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

.page[data-page-id="crm"] #clientDetailModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--primary-silver);
}

#contactModal .modal-body,
#contactActivityModal .modal-body,
#createClientModal .modal-body,
#manageProductsModal .modal-body,
#clientProductModal .modal-body,
#outlookLinkClientModal .modal-body,
#clientReportModal .modal-body {
    background: var(--primary-silver);
}

#createClientModal .modal-footer {
    padding: 0.75rem 1.5rem;
}

.page[data-page-id="crm"] #clientDetailContent {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page[data-page-id="crm"] #clientDetailModal .card {
    margin: 0 !important;
}

.page[data-page-id="crm"] #clientDetailModal .card-header {
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="crm"] #clientDetailModal .contacts-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.page[data-page-id="crm"] #clientDetailModal .contact-card {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page[data-page-id="crm"] #manageProductsModal .modal-content {
    max-width: 980px;
    width: min(980px, 96vw);
}

.page[data-page-id="crm"] .crm-products-admin-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="crm"] .crm-products-admin-subtitle {
    max-width: 72ch;
    color: var(--text-gray);
    line-height: 1.45;
}

.page[data-page-id="crm"] .crm-products-admin-context-bar {
    margin-top: 0.65rem;
}

.page[data-page-id="crm"] .crm-products-tabs-shell {
    margin-bottom: 0;
}

.page[data-page-id="crm"] .crm-products-tabs-shell .card-body {
    padding: 0.9rem 1rem;
}

.page[data-page-id="crm"] .crm-products-tab-button {
    flex: 0 0 auto;
}

.page[data-page-id="crm"] .crm-products-admin-panel {
    gap: 1rem;
}

.page[data-page-id="crm"] .crm-products-admin-grid {
    gap: 0.9rem;
}

.page[data-page-id="crm"] .crm-products-admin-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page-id="crm"] .crm-products-admin-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.5rem;
}

.page[data-page-id="crm"] .crm-products-admin-field-gap {
    margin-top: 0.5rem;
}

.page[data-page-id="crm"] .crm-products-admin-field--narrow {
    max-width: 240px;
}

.page[data-page-id="crm"] .crm-products-admin-submit {
    margin-top: 0.5rem;
}

@media (max-width: 1024px) {
    .page[data-page-id="crm"] .crm-search-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .page[data-page-id="crm"] .crm-header-actions,
    .page[data-page-id="crm"] .crm-toolbar-actions,
    .page[data-page-id="crm"] .crm-results-actions {
        justify-content: flex-start;
    }

    .page[data-page-id="crm"] .crm-results-actions {
        width: 100%;
    }

    .page[data-page-id="crm"] .crm-products-admin-grid--two,
    .page[data-page-id="crm"] .crm-products-admin-grid--three {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page[data-page-id="crm"] .client-filters,
    .page[data-page-id="crm"] #clientTypeFilters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page[data-page-id="crm"] .filter-chip {
        white-space: nowrap;
    }
}

.crm-client-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 1.5rem;
    align-items: flex-start;
    width: 100%;
}

.crm-client-detail-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
  .crm-client-detail-layout {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
      gap: 1.25rem;
  }
}

@media (max-width: 920px) {
  .crm-client-detail-layout {
      grid-template-columns: minmax(0, 1fr);
  }
}

.client-activity-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.client-activity-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.client-activity-type {
    width: 180px;
    max-width: 100%;
}

.client-activity-controls .btn {
    flex: 0 0 auto;
}

.client-activity-note {
    width: 100%;
    resize: vertical;
    min-height: 96px;
}

/* Time Tracking */
.time-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 2rem 0;
}

.time-day {
    background: white;
    padding: 1rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.time-day-header {
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.time-day.weekend {
    background: var(--primary-silver);
}

.time-entry {
    background: rgba(0, 178, 204, 0.1);
    border-left: 3px solid var(--primary-cyan);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.time-entry:hover {
    background: rgba(0, 178, 204, 0.2);
}

.time-entry-project {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.time-entry-hours {
    color: var(--text-gray);
}

/* Financial Pages */
.financial-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.invoice-actions {
    display: flex;
    gap: 0.5rem;
}

/* Admin Pages */
.admin-section {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.admin-section-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.admin-section-body {
    padding: 2rem;
}

/* Statistics Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Compact stats grid variant (Offers) */
.stats-grid--compact {
    /* Keep four tiles on one row on desktop */
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 1rem;
}

.stats-grid--compact .stat-card {
    padding: 1rem;
}

.stats-grid--compact .stat-header { margin-bottom: 0.5rem; }
.stats-grid--compact .stat-icon { width: 28px; height: 28px; font-size: 1rem; }
.stats-grid--compact .stat-value { font-size: 1.75rem; }

.page[data-page-id="costs"] .costs-page-subtitle {
    max-width: 72ch;
    margin-top: 0.35rem;
    color: var(--text-gray);
    font-size: 0.96rem;
    line-height: 1.45;
}

.page[data-page-id="costs"] .costs-context-bar {
    margin-bottom: 0.15rem;
}

.page[data-page-id="costs"] .costs-context-bar .project-detail-context-chip {
    border-color: rgba(14, 165, 233, 0.2);
}

.page[data-page-id="costs"] .costs-workspace-tabs-shell {
    margin-bottom: 1rem;
}

.page[data-page-id="costs"] .costs-workspace-tabs-shell .card-body {
    padding: 0.95rem 1rem;
}

.page[data-page-id="costs"] .costs-tab-button {
    flex: 0 0 auto;
}

.page[data-page-id="costs"] .costs-workspace {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.page[data-page-id="costs"] .costs-overview-card,
.page[data-page-id="costs"] .costs-filter-card,
.page[data-page-id="costs"] .costs-results-card {
    border-color: rgba(14, 165, 233, 0.12);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.45);
}

.page[data-page-id="costs"] .costs-overview-card .card-body {
    padding-top: 0.75rem;
}

.page[data-page-id="costs"] .costs-overview-card .stats-grid--costs {
    margin-bottom: 0;
}

.page[data-page-id="costs"] .costs-tab-panel {
    gap: 1.15rem;
}

.page[data-page-id="costs"] .costs-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    align-items: end;
}

.page[data-page-id="costs"] .costs-filter-field {
    min-width: 0;
}

.page[data-page-id="costs"] .costs-filter-field--search {
    grid-column: span 2;
}

.page[data-page-id="costs"] .costs-filter-field .form-label {
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="costs"] .costs-filter-field .form-input,
.page[data-page-id="costs"] .costs-filter-field .form-select,
.page[data-page-id="costs"] .costs-results-group-select {
    width: 100%;
}

.page[data-page-id="costs"] .costs-results-group-select {
    min-width: 180px;
}

.page[data-page-id="costs"] .costs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 220px;
    padding: 2.75rem 1rem;
    text-align: center;
}

.page[data-page-id="costs"] .costs-empty-state-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.page[data-page-id="costs"] .costs-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="costs"] .costs-empty-state-description {
    max-width: 48ch;
    color: var(--text-gray);
    line-height: 1.5;
}

.page[data-page-id="costs"] .costs-expenses-table {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: auto;
}

/* Costs page: tighter stat tiles */
.page[data-page-id="costs"] .stats-grid.stats-grid--costs {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page[data-page-id="costs"] .stats-grid--costs .stat-card {
    padding: 1rem 1.25rem;
    min-width: 0;
}

.page[data-page-id="costs"] .stats-grid--costs .stat-header {
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.page[data-page-id="costs"] .stats-grid--costs .stat-title {
    white-space: normal;
    line-height: 1.2;
}

.page[data-page-id="costs"] .stats-grid--costs .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    border-radius: 10px;
}

.page[data-page-id="costs"] .stats-grid--costs .stat-value {
    font-size: 1.6rem;
    margin-bottom: 0;
    text-align: left;
}

/* Costs page: compact project costs table */
.page[data-page-id="costs"] .costs-table {
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="costs"] .costs-table th,
.page[data-page-id="costs"] .costs-table td {
    padding: 0.5rem 0.5rem;
}

.page[data-page-id="costs"] .costs-table th {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.page[data-page-id="costs"] .costs-table .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="costs"] .costs-table .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.page[data-page-id="costs"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="costs"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="costs"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="costs"] .tabulator .tabulator-tableholder {
    background: #fff;
}

.page[data-page-id="costs"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="costs"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="costs"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="costs"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="costs"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="costs"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="costs"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="costs"] .tabulator .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="costs"] .tabulator .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Billing workspaces */
.page[data-page-id="invoices"] .billing-page-subtitle,
.page[data-page-id="bills"] .billing-page-subtitle {
    margin-top: 0.45rem;
    max-width: 760px;
    color: var(--text-gray);
    font-size: 0.97rem;
    line-height: 1.55;
}

.page[data-page-id="invoices"] .billing-context-bar,
.page[data-page-id="bills"] .billing-context-bar {
    margin-top: 0.9rem;
}

.page[data-page-id="invoices"] .billing-context-bar .project-detail-context-chip,
.page[data-page-id="bills"] .billing-context-bar .project-detail-context-chip {
    background: rgba(255, 255, 255, 0.82);
}

.page[data-page-id="invoices"] .billing-workspace-tabs-shell,
.page[data-page-id="bills"] .billing-workspace-tabs-shell {
    margin-bottom: 1rem;
}

.page[data-page-id="invoices"] .billing-workspace-tabs-shell .card-body,
.page[data-page-id="bills"] .billing-workspace-tabs-shell .card-body {
    padding: 0.85rem 1rem;
}

.page[data-page-id="invoices"] .billing-tab-button,
.page[data-page-id="bills"] .billing-tab-button {
    text-decoration: none;
}

.page[data-page-id="invoices"] .billing-workspace,
.page[data-page-id="bills"] .billing-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="invoices"] .billing-section-card,
.page[data-page-id="bills"] .billing-section-card {
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="invoices"] .billing-section-body,
.page[data-page-id="bills"] .billing-section-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="invoices"] .billing-section-body--flush,
.page[data-page-id="bills"] .billing-section-body--flush {
    padding-top: 0;
}

.page[data-page-id="invoices"] .billing-header-actions,
.page[data-page-id="bills"] .billing-header-actions,
.page[data-page-id="invoices"] .billing-results-actions,
.page[data-page-id="bills"] .billing-results-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.page[data-page-id="invoices"] .billing-results-actions .form-select,
.page[data-page-id="bills"] .billing-results-actions .form-select {
    min-width: 180px;
}

.page[data-page-id="invoices"] .billing-metrics-grid,
.page[data-page-id="bills"] .billing-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0;
}

.page[data-page-id="invoices"] .billing-metrics-grid .stat-card,
.page[data-page-id="bills"] .billing-metrics-grid .stat-card {
    margin-bottom: 0;
    padding: 0.85rem 1rem;
    min-width: 0;
}

.page[data-page-id="invoices"] .billing-metrics-grid .stat-header,
.page[data-page-id="bills"] .billing-metrics-grid .stat-header {
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.page[data-page-id="invoices"] .billing-metrics-grid .stat-title,
.page[data-page-id="bills"] .billing-metrics-grid .stat-title {
    font-size: 0.76rem;
    line-height: 1.25;
}

.page[data-page-id="invoices"] .billing-metrics-grid .stat-icon,
.page[data-page-id="bills"] .billing-metrics-grid .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 1rem;
}

.page[data-page-id="invoices"] .billing-metrics-grid .stat-value,
.page[data-page-id="bills"] .billing-metrics-grid .stat-value {
    margin-bottom: 0;
    font-size: 1.35rem;
    text-align: left;
}

.page[data-page-id="invoices"] .billing-filters-grid,
.page[data-page-id="bills"] .billing-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.page[data-page-id="invoices"] .billing-filter-span-2,
.page[data-page-id="bills"] .billing-filter-span-2 {
    grid-column: span 2;
    min-width: 0;
}

.page[data-page-id="invoices"] .billing-table-frame,
.page[data-page-id="bills"] .billing-table-frame {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.page[data-page-id="invoices"] .billing-table-frame .tabulator,
.page[data-page-id="bills"] .billing-table-frame .tabulator {
    border: 0;
    border-radius: 0;
}

.page[data-page-id="invoices"] .billing-empty-state,
.page[data-page-id="bills"] .billing-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    color: var(--text-gray);
    text-align: center;
}

.page[data-page-id="invoices"] .billing-empty-state-icon,
.page[data-page-id="bills"] .billing-empty-state-icon {
    font-size: 2.5rem;
    color: var(--text-dark);
}

.page[data-page-id="invoices"] .billing-empty-state-title,
.page[data-page-id="bills"] .billing-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="invoices"] .billing-empty-state-description,
.page[data-page-id="bills"] .billing-empty-state-description {
    max-width: 420px;
    line-height: 1.55;
}

@media (max-width: 960px) {
    .page[data-page-id="invoices"] .billing-header-actions,
    .page[data-page-id="bills"] .billing-header-actions,
    .page[data-page-id="invoices"] .billing-results-actions,
    .page[data-page-id="bills"] .billing-results-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .page[data-page-id="invoices"] .billing-filter-span-2,
    .page[data-page-id="bills"] .billing-filter-span-2 {
        grid-column: span 1;
    }

    .page[data-page-id="invoices"] .billing-results-actions .form-select,
    .page[data-page-id="bills"] .billing-results-actions .form-select {
        width: 100%;
        min-width: 0;
    }
}

.page[data-page-id="invoices"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="invoices"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="invoices"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="invoices"] .tabulator .tabulator-tableholder {
    background: #fff;
}

.page[data-page-id="invoices"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="invoices"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="invoices"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="invoices"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="invoices"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="invoices"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="invoices"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="bills"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="bills"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="bills"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="bills"] .tabulator .tabulator-tableholder {
    background: #fff;
}

.page[data-page-id="bills"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="bills"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="bills"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="bills"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="bills"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="bills"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="bills"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="bills"] .tabulator .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="bills"] .tabulator .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.page[data-page-id="time-tracking"] .time-tracking-page-subtitle {
    max-width: 72ch;
    margin-top: 0.3rem;
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.4;
}

.page[data-page-id="time-tracking"] .time-tracking-context-bar {
    margin-bottom: 0;
}

.page[data-page-id="time-tracking"] .time-tracking-context-bar .project-detail-context-chip {
    border-color: rgba(14, 165, 233, 0.2);
}

.page[data-page-id="time-tracking"] .time-tracking-workspace {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page[data-page-id="time-tracking"] .time-tracking-tabs-shell {
    margin-bottom: 0;
}

.page[data-page-id="time-tracking"] .time-tracking-tabs-shell .card-body {
    padding: 0.75rem 0.85rem;
}

.page[data-page-id="time-tracking"] .time-tracking-tab-button {
    flex: 0 0 auto;
}

.page[data-page-id="time-tracking"] .time-tracking-section-card {
    border-color: rgba(14, 165, 233, 0.14);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, #ffffff 100%);
    box-shadow: 0 14px 28px -28px rgba(15, 23, 42, 0.38);
}

.page[data-page-id="time-tracking"] .time-tracking-section-card .card-header {
    padding: 1rem 1.2rem 0.8rem;
}

.page[data-page-id="time-tracking"] .time-tracking-section-body {
    padding: 0.7rem 1.2rem 1rem;
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0;
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid .stat-card {
    margin-bottom: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    box-shadow: 0 10px 22px -22px rgba(15, 23, 42, 0.25);
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid .stat-card:hover {
    transform: none;
    box-shadow: 0 10px 22px -22px rgba(15, 23, 42, 0.25);
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid .stat-header {
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid .stat-title {
    font-size: 0.69rem;
    line-height: 1.2;
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid .stat-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.8rem;
}

.page[data-page-id="time-tracking"] .time-tracking-snapshot-grid .stat-value {
    margin-bottom: 0;
    font-size: 1.05rem;
    line-height: 1.15;
    text-align: left;
}

.page[data-page-id="time-tracking"] .time-tracking-tab-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page[data-page-id="time-tracking"] .time-tracking-tab-stack .card {
    margin-bottom: 0;
    border-color: rgba(14, 165, 233, 0.12);
    box-shadow: 0 14px 28px -28px rgba(15, 23, 42, 0.28);
}

.page[data-page-id="time-tracking"] .time-tracking-tab-stack .card-header {
    padding: 1rem 1.15rem;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.page[data-page-id="time-tracking"] .time-tracking-tab-stack .card-body {
    padding: 1rem 1.15rem;
}

.page[data-page-id="time-tracking"] .time-tracking-tab-stack .stats-container,
.page[data-page-id="time-tracking"] .time-tracking-tab-stack .stats-grid {
    margin-bottom: 0;
}

.page[data-page-id="time-tracking"] .time-review-panel {
    margin-bottom: 0.9rem;
}

.page[data-page-id="time-tracking"] .time-review-header-actions {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page[data-page-id="time-tracking"] .time-review-shell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="time-tracking"] .time-review-card {
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 42%),
        linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
    padding: 1rem;
    box-shadow: 0 18px 30px -28px rgba(15, 23, 42, 0.34);
}

.page[data-page-id="time-tracking"] .time-review-card--month {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 42%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.page[data-page-id="time-tracking"] .time-review-card--loading {
    min-height: 92px;
    display: flex;
    align-items: center;
}

.page[data-page-id="time-tracking"] .time-review-card-header {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.page[data-page-id="time-tracking"] .time-review-eyebrow {
    margin-bottom: 0.25rem;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page[data-page-id="time-tracking"] .time-review-card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #0f172a;
}

.page[data-page-id="time-tracking"] .time-review-card-description {
    margin: 0.35rem 0 0;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.45;
    max-width: 52ch;
}

.page[data-page-id="time-tracking"] .time-review-actions {
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="time-tracking"] .time-review-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.page[data-page-id="time-tracking"] .time-review-metric {
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.page[data-page-id="time-tracking"] .time-review-metric-label {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}

.page[data-page-id="time-tracking"] .time-review-metric strong {
    color: #0f172a;
    font-size: 1rem;
}

.page[data-page-id="time-tracking"] .time-review-status {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #475569;
    font-size: 0.78rem;
}

.page[data-page-id="time-tracking"] .time-review-status.is-success {
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

.page[data-page-id="time-tracking"] .time-review-status.is-warning {
    border-color: rgba(249, 115, 22, 0.24);
    color: #9a3412;
}

.page[data-page-id="time-tracking"] .time-review-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.page[data-page-id="time-tracking"] .time-review-footnote {
    margin-top: 0.7rem;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.page[data-page-id="time-tracking"] .time-day-plan-summary {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    align-items: center;
}

.page[data-page-id="time-tracking"] .time-day-plan-total {
    color: #0f172a;
    font-size: 0.79rem;
    font-weight: 700;
}

.page[data-page-id="time-tracking"] .time-day-plan-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
}

.page[data-page-id="time-tracking"] .time-day-plan-gap.is-open {
    background: rgba(249, 115, 22, 0.14);
    color: #9a3412;
}

.page[data-page-id="time-tracking"] .time-day-plan-breakdown {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="time-tracking"] .time-day-plan-chip {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.45rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #1e293b;
    font-size: 0.74rem;
}

.page[data-page-id="time-tracking"] .time-day-plan-chip.is-open {
    border-color: rgba(249, 115, 22, 0.28);
    background: rgba(255, 247, 237, 0.95);
}

.page[data-page-id="time-tracking"] .time-day-plan-more {
    color: #64748b;
    font-size: 0.74rem;
    text-align: center;
}

.page[data-page-id="time-tracking"] .time-week-summary-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--primary-silver);
    border-radius: 12px;
}

.page[data-page-id="time-tracking"] .time-week-summary-extra {
    margin-top: 0.45rem;
    display: inline-flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: #475569;
    font-size: 0.82rem;
}

.page[data-page-id="time-tracking"] .time-status-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="time-tracking"] .time-status-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page[data-page-id="time-tracking"] .time-status-tabs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 999px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.page[data-page-id="time-tracking"] .time-status-tab,
.page[data-page-id="time-tracking"] .time-status-tab.btn-outline,
.page[data-page-id="time-tracking"] .time-status-tab.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.4rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="time-tracking"] .time-status-tab:hover {
    background: rgba(255, 255, 255, 0.82);
    color: #334155;
    transform: translateY(-1px);
}

.page[data-page-id="time-tracking"] .time-status-tab.is-active,
.page[data-page-id="time-tracking"] .time-status-tab.btn-primary {
    border-color: rgba(14, 165, 233, 0.2);
    background: #fff;
    color: #0f172a;
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.55);
}

.page[data-page-id="time-tracking"] .time-status-tab:focus-visible {
    outline: 2px solid rgba(14, 165, 233, 0.3);
    outline-offset: 2px;
}

.page[data-page-id="time-tracking"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-tableholder {
    background: #fff;
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="time-tracking"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="time-tracking"] .tabulator .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="time-tracking"] .tabulator .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

@media (max-width: 960px) {
    .page[data-page-id="time-tracking"] .time-tracking-tabs-shell .card-body,
    .page[data-page-id="time-tracking"] .time-tracking-tab-stack .card-header,
    .page[data-page-id="time-tracking"] .time-tracking-tab-stack .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page[data-page-id="time-tracking"] .time-status-tabs,
    .page[data-page-id="time-tracking"] .time-status-toolbar-actions {
        width: 100%;
    }

    .page[data-page-id="time-tracking"] .time-review-header-actions,
    .page[data-page-id="time-tracking"] .time-review-actions {
        width: 100%;
    }

    .page[data-page-id="time-tracking"] .time-status-tab {
        flex: 1 1 calc(50% - 0.35rem);
    }

    .page[data-page-id="time-tracking"] .time-week-summary-banner {
        flex-direction: column;
        align-items: stretch;
    }
}

.page[data-page-id="reports"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="reports"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .tabulator .tabulator-tableholder {
    background: #fff;
}

.page[data-page-id="reports"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="reports"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="reports"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="reports"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="reports"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="reports"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="budget"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="budget"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="budget"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .tabulator .tabulator-tableholder {
    background: #fff;
    overscroll-behavior: contain;
}

.page[data-page-id="budget"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="budget"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="budget"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="budget"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="budget"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="budget"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="budget"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="budget"] .tabulator .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="budget"] .tabulator .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.page[data-page-id="budget"] .budget-row-details {
    flex-basis: 100%;
    padding: 12px 8px;
    border-top: 1px dashed var(--border-color);
    background: var(--primary-silver);
}

.page[data-page-id="budget"] .budget-row-details.hidden {
    display: none;
}

.page[data-page-id="budget"] .budget-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.page[data-page-id="budget"] .budget-group-header label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page[data-page-id="budget"] .budget-group-meta {
    margin-left: auto;
    font-weight: 500;
    color: var(--text-gray);
    font-size: 0.85rem;
}

.page[data-page-id="budget"] {
    --budget-accent: #0f6d74;
    --budget-accent-strong: #0b5257;
    --budget-accent-soft: #e8f6f6;
    --budget-surface: #f7fafc;
    --budget-border: #d8e1e7;
    --budget-text-soft: #5f7084;
}

.page[data-page-id="budget"] .page-header {
    align-items: flex-start;
    gap: 1rem;
}

.page[data-page-id="budget"] .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.page[data-page-id="budget"] .budget-page-subtitle {
    margin: 0.45rem 0 0;
    max-width: 68ch;
    color: var(--budget-text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.page[data-page-id="budget"] .budget-workspace-card {
    border-color: var(--budget-border);
    background:
        radial-gradient(circle at top left, rgba(15, 109, 116, 0.09), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, var(--budget-surface) 100%);
}

.page[data-page-id="budget"] .budget-workspace-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
}

.page[data-page-id="budget"] .budget-workspace-copy {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.page[data-page-id="budget"] .budget-workspace-kicker {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--budget-accent-strong);
}

.page[data-page-id="budget"] .budget-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.page[data-page-id="budget"] .budget-toolbar-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
}

.page[data-page-id="budget"] .budget-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.page[data-page-id="budget"] .budget-toolbar-controls {
    display: flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.page[data-page-id="budget"] .budget-toolbar-controls .form-select {
    min-width: 150px;
    flex: 1 1 160px;
}

.page[data-page-id="budget"] .budget-toolbar-controls .btn {
    flex: 0 0 auto;
}

.page[data-page-id="budget"] .budget-filter-layout--beta {
    gap: 0.8rem;
}

.page[data-page-id="budget"] .budget-toolbar-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.page[data-page-id="budget"] .budget-toolbar-footer--filters {
    padding-top: 0.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.page[data-page-id="budget"] .budget-page-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem;
    margin: 0.25rem 0 0.9rem;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.page[data-page-id="budget"] .budget-page-tab {
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-gray);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.page[data-page-id="budget"] .budget-page-tab.is-active {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.page[data-page-id="budget"] .budget-tab-panel.hidden {
    display: none;
}

.page[data-page-id="budget"] .budget-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.page[data-page-id="budget"] .budget-scope-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.page[data-page-id="budget"] .budget-scope-pills--beta {
    flex: 1 1 420px;
    gap: 0.5rem;
}

.page[data-page-id="budget"] .budget-scope-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 128px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--budget-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-scope-pill strong {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--budget-text-soft);
}

.page[data-page-id="budget"] .budget-scope-pill span {
    font-size: 0.94rem;
    font-weight: 600;
}

.page[data-page-id="budget"] .budget-scope-pills--beta .budget-scope-pill {
    min-width: 0;
    padding: 0.55rem 0.7rem;
}

.page[data-page-id="budget"] .budget-scope-pill--accent {
    border-color: rgba(15, 109, 116, 0.2);
    background: linear-gradient(180deg, rgba(232, 246, 246, 0.96) 0%, #ffffff 100%);
}

.page[data-page-id="budget"] .budget-executive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.page[data-page-id="budget"] .budget-results-insights {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.page[data-page-id="budget"] .budget-results-insights .budget-executive-grid,
.page[data-page-id="budget"] .budget-results-insights .budget-visual-grid {
    margin: 0;
}

.page[data-page-id="budget"] .budget-results-insights--beta {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.page[data-page-id="budget"] .budget-executive-item {
    border: 1px solid var(--budget-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.85rem 0.95rem;
    min-width: 0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="budget"] .budget-executive-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--budget-text-soft);
}

.page[data-page-id="budget"] .budget-executive-value {
    margin-top: 0.3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-executive-sub {
    margin-top: 0.24rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.page[data-page-id="budget"] .budget-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.18);
    color: #334155;
}

.page[data-page-id="budget"] .budget-kpi-pill.positive {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.page[data-page-id="budget"] .budget-kpi-pill.negative {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.page[data-page-id="budget"] .budget-kpi-pill.neutral {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.page[data-page-id="budget"] .budget-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
    margin: 0 0 1rem;
}

.page[data-page-id="budget"] .budget-visual-card {
    border: 1px solid var(--budget-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    padding: 1rem 1.05rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.page[data-page-id="budget"] .budget-visual-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.page[data-page-id="budget"] .budget-visual-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--budget-text-soft);
}

.page[data-page-id="budget"] .budget-visual-title {
    margin-top: 0.18rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-visual-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--budget-accent-strong);
    white-space: nowrap;
}

.page[data-page-id="budget"] .budget-visual-bar {
    display: flex;
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    margin-bottom: 0.65rem;
}

.page[data-page-id="budget"] .budget-visual-bar-segment {
    display: block;
    height: 100%;
}

.page[data-page-id="budget"] .budget-visual-bar-segment.is-actual {
    background: linear-gradient(90deg, #0f6d74 0%, #1f9ea7 100%);
}

.page[data-page-id="budget"] .budget-visual-bar-segment.is-remaining {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.28) 0%, rgba(148, 163, 184, 0.52) 100%);
}

.page[data-page-id="budget"] .budget-visual-bar-segment.is-paid {
    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.page[data-page-id="budget"] .budget-visual-bar-segment.is-open {
    background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}

.page[data-page-id="budget"] .budget-visual-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin-bottom: 0.7rem;
    color: var(--budget-text-soft);
    font-size: 0.84rem;
}

.page[data-page-id="budget"] .budget-visual-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page[data-page-id="budget"] .budget-visual-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 109, 116, 0.08);
    color: var(--budget-accent-strong);
    font-size: 0.78rem;
    font-weight: 600;
}

.page[data-page-id="budget"] .budget-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.page[data-page-id="budget"] .budget-ranking-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="budget"] .budget-ranking-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.page[data-page-id="budget"] .budget-ranking-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-ranking-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--budget-accent-strong);
    white-space: nowrap;
}

.page[data-page-id="budget"] .budget-ranking-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.page[data-page-id="budget"] .budget-ranking-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f6d74 0%, #22c55e 100%);
}

.page[data-page-id="budget"] .budget-ranking-fill.is-over {
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

.page[data-page-id="budget"] .budget-ranking-fill.is-billing {
    background: linear-gradient(90deg, #fb923c 0%, #ef4444 100%);
}

.page[data-page-id="budget"] .budget-ranking-sub {
    color: var(--budget-text-soft);
    font-size: 0.78rem;
    line-height: 1.35;
}

.page[data-page-id="budget"] .budget-table-frame {
    border-radius: 16px;
    overflow: hidden;
}

.page[data-page-id="budget"] .budget-filter-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="budget"] .budget-filter-grid {
    display: grid;
    gap: 0.95rem;
}

.page[data-page-id="budget"] .budget-filter-grid--core {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page[data-page-id="budget"] .budget-filter-grid--advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page-id="budget"] .budget-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.page[data-page-id="budget"] .budget-filter-field--actions {
    justify-content: flex-end;
}

.page[data-page-id="budget"] .budget-filter-field--saved-view {
    grid-column: span 2;
}

.page[data-page-id="budget"] .budget-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.page[data-page-id="budget"] .budget-inline-actions .form-input,
.page[data-page-id="budget"] .budget-inline-actions .form-select {
    min-width: 150px;
    flex: 1 1 180px;
}

.page[data-page-id="budget"] .budget-date-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.page[data-page-id="budget"] .budget-threshold-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.page[data-page-id="budget"] .budget-saved-view-row {
    display: grid;
    grid-template-columns: minmax(0, 240px) 1fr;
    gap: 0.7rem;
    align-items: center;
}

.page[data-page-id="budget"] .budget-multi-select {
    min-height: 9rem;
}

.page[data-page-id="budget"] .budget-filter-advanced {
    border: 1px solid var(--budget-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f7fb 100%);
    padding: 0.9rem 1rem 1rem;
}

.page[data-page-id="budget"] .budget-filter-advanced summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--budget-accent-strong);
}

.page[data-page-id="budget"] .budget-filter-advanced summary::-webkit-details-marker {
    display: none;
}

.page[data-page-id="budget"] .budget-filter-advanced[open] summary {
    margin-bottom: 0.85rem;
}

.page[data-page-id="budget"] .btn-chip {
    border: 1px solid rgba(15, 109, 116, 0.18);
    background: #fff;
    color: var(--budget-accent-strong);
}

.page[data-page-id="budget"] .btn-chip:hover:not(:disabled),
.page[data-page-id="budget"] .btn-chip:focus-visible {
    border-color: var(--budget-accent);
    background: var(--budget-accent-soft);
    color: var(--budget-accent-strong);
}

.page[data-page-id="budget"] .budget-table-project {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.page[data-page-id="budget"] .budget-table-project-code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--budget-accent-strong);
}

.page[data-page-id="budget"] .budget-table-project-title {
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-table-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    color: var(--budget-text-soft);
    font-size: 0.78rem;
}

.page[data-page-id="budget"] .budget-table-stack {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.page[data-page-id="budget"] .budget-table-primary {
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-table-subline {
    color: var(--budget-text-soft);
    font-size: 0.76rem;
    line-height: 1.35;
}

.page[data-page-id="budget"] .budget-review-modal .modal-body,
.page[data-page-id="budget"] .budget-planner-modal .modal-body {
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.page[data-page-id="budget"] .budget-planner-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page[data-page-id="budget"] .budget-planner-summary .card,
.page[data-page-id="budget"] .budget-planner-advanced-grid .card {
    margin-bottom: 0;
}

.page[data-page-id="budget"] .budget-planner-summary-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
}

.page[data-page-id="budget"] .budget-planner-summary-note {
    margin-top: 0.2rem;
    color: var(--budget-text-soft);
    font-size: 0.78rem;
}

.page[data-page-id="budget"] .budget-planner-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.95rem;
}

.page[data-page-id="budget"] .budget-planner-period-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="budget"] .budget-planner-period-grid-span {
    grid-column: span 2;
}

.page[data-page-id="budget"] .budget-planner-advanced {
    margin-top: 0.8rem;
    border: 1px solid var(--budget-border);
    border-radius: 16px;
    background: #f9fbfd;
    padding: 0.95rem 1rem 1rem;
}

.page[data-page-id="budget"] .budget-planner-advanced summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--budget-accent-strong);
}

.page[data-page-id="budget"] .budget-planner-advanced summary::-webkit-details-marker {
    display: none;
}

.page[data-page-id="budget"] .budget-planner-advanced[open] summary {
    margin-bottom: 0.9rem;
}

.page[data-page-id="budget"] .budget-planner-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="budget"] .budget-planner-modal textarea.form-input {
    min-height: 13rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.page[data-page-id="budget"] .budget-planner-phase-table {
    border: 1px solid var(--budget-border);
    border-radius: 16px;
    background: #fff;
    padding: 0.95rem;
}

.page[data-page-id="budget"] .budget-planner-phase-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: var(--budget-accent-soft);
    color: var(--budget-accent-strong);
    font-weight: 700;
}

.page[data-page-id="budget"] .budget-phase-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: #eef3f7;
    color: var(--budget-accent-strong);
    font-size: 0.74rem;
    font-weight: 700;
}

.page[data-page-id="budget"] .budget-planner-phase-table .table td,
.page[data-page-id="budget"] .budget-planner-phase-table .table th {
    vertical-align: middle;
}

.page[data-page-id="budget"] .table-responsive {
    overflow-x: auto;
}

@media (max-width: 1180px) {
    .page[data-page-id="budget"] .budget-filter-grid--core {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="budget"] .budget-planner-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .page[data-page-id="budget"] .budget-workspace-card-body,
    .page[data-page-id="budget"] .budget-planner-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .page[data-page-id="budget"] .budget-filter-grid--core,
    .page[data-page-id="budget"] .budget-filter-grid--advanced,
    .page[data-page-id="budget"] .budget-planner-period-grid,
    .page[data-page-id="budget"] .budget-planner-advanced-grid,
    .page[data-page-id="budget"] .budget-saved-view-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page[data-page-id="budget"] .budget-filter-field--saved-view,
    .page[data-page-id="budget"] .budget-planner-period-grid-span {
        grid-column: auto;
    }

    .page[data-page-id="budget"] .budget-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .page[data-page-id="budget"] .page-header-actions,
    .page[data-page-id="budget"] .budget-workspace-actions,
    .page[data-page-id="budget"] .budget-inline-actions {
        width: 100%;
    }

    .page[data-page-id="budget"] .page-header-actions > *,
    .page[data-page-id="budget"] .budget-workspace-actions > * {
        flex: 1 1 100%;
        width: 100%;
    }

    .page[data-page-id="budget"] .budget-date-range,
    .page[data-page-id="budget"] .budget-threshold-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page[data-page-id="budget"] .budget-scope-pill {
        flex: 1 1 calc(50% - 0.65rem);
    }
}

/* Bills: modal polish */
#billModal .bill-modal {
    max-width: 980px;
    width: min(980px, 96vw);
}

#billModal .modal-body {
    background: var(--primary-silver);
}

#billModal #billForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#billModal .bill-form-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Reimbursements workspace */
.page[data-page-id="reimbursements"] .reimbursements-page-subtitle {
    margin-top: 0.45rem;
    max-width: 760px;
    color: var(--text-gray);
    font-size: 0.97rem;
    line-height: 1.55;
}

.page[data-page-id="reimbursements"] .reimbursements-context-bar {
    margin-top: 0.9rem;
}

.page[data-page-id="reimbursements"] .reimbursements-context-bar .project-detail-context-chip {
    background: rgba(255, 255, 255, 0.82);
}

.page[data-page-id="reimbursements"] .reimbursements-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reimbursements"] .reimbursements-section-card {
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="reimbursements"] .reimbursements-section-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reimbursements"] .reimbursements-section-body--flush {
    padding-top: 0;
}

.page[data-page-id="reimbursements"] .reimbursements-header-actions,
.page[data-page-id="reimbursements"] .reimbursements-admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.page[data-page-id="reimbursements"] .reimbursements-admin-actions .form-select {
    min-width: 190px;
}

.page[data-page-id="reimbursements"] .reimbursements-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0;
}

.page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-card {
    margin-bottom: 0;
    padding: 0.85rem 1rem;
}

.page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-header {
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-title {
    font-size: 0.76rem;
    line-height: 1.25;
}

.page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 1rem;
}

.page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-value {
    margin-bottom: 0;
    font-size: 1.35rem;
    text-align: left;
}

.page[data-page-id="reimbursements"] .reimbursements-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.page[data-page-id="reimbursements"] .reimbursements-filter-span-2 {
    grid-column: span 2;
    min-width: 0;
}

.page[data-page-id="reimbursements"] .reimbursements-filter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.page[data-page-id="reimbursements"] .reimbursements-quick-filter.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="reimbursements"] .reimbursements-register-frame {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.page[data-page-id="reimbursements"] .reimbursements-register-frame .table-container {
    overflow: auto;
}

.page[data-page-id="reimbursements"] .reimbursements-register-frame .tabulator {
    border: 0;
    border-radius: 0;
}

.page[data-page-id="reimbursements"] .reimbursements-table-empty-cell {
    padding: 0;
}

.page[data-page-id="reimbursements"] .reimbursements-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    color: var(--text-gray);
    text-align: center;
}

.page[data-page-id="reimbursements"] .reimbursements-empty-state-icon {
    font-size: 2.5rem;
    color: var(--text-dark);
}

.page[data-page-id="reimbursements"] .reimbursements-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reimbursements"] .reimbursements-empty-state-description {
    max-width: 420px;
    line-height: 1.55;
}

.page[data-page-id="reimbursements"] .reimbursements-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

@media (max-width: 960px) {
    .page[data-page-id="reimbursements"] .reimbursements-header-actions,
    .page[data-page-id="reimbursements"] .reimbursements-admin-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .page[data-page-id="reimbursements"] .reimbursements-filter-span-2 {
        grid-column: span 1;
    }

    .page[data-page-id="reimbursements"] .reimbursements-admin-actions .form-select {
        width: 100%;
        min-width: 0;
    }
}

/* Reimbursements page: compact overview table */
.page[data-page-id="reimbursements"] .reimbursements-table {
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="reimbursements"] .reimbursements-table th,
.page[data-page-id="reimbursements"] .reimbursements-table td {
    padding: 0.5rem 0.5rem;
}

.page[data-page-id="reimbursements"] .reimbursements-table th {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.page[data-page-id="reimbursements"] .reimbursements-table .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="reimbursements"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-tableholder {
    background: #fff;
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-row.tabulator-row-even {
    background: #fff;
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="reimbursements"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="reimbursements"] .tabulator .action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="reimbursements"] .tabulator .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Reimbursements: receipts modal */
#reimbursement-receipts-modal .reimbursement-receipts-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info-actions {
    flex-shrink: 0;
}

.page[data-page-id="reimbursements"] #reimbursementReceiptsInfo {
    background: var(--primary-silver);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    color: var(--text-gray);
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-edit-panel {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-edit-full {
    grid-column: 1 / -1;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-mileage-fields {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-mileage-toggle {
    display: flex;
    align-items: flex-end;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-mileage-summary {
    grid-column: 1 / -1;
    font-size: 0.9rem;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-edit-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 0.35rem 0.75rem;
    align-items: start;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info-row {
    display: contents;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info-label {
    font-weight: 600;
    color: var(--text-dark);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info-value {
    color: var(--text-gray);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-upload {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    object-fit: cover;
    background: #fff;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-filetype {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--primary-silver);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
    letter-spacing: 0.02em;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-name {
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-size {
    font-size: 0.8rem;
    color: var(--text-gray);
}

@media (max-width: 768px) {
    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-edit-grid,
    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-mileage-fields {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-info {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-item {
        align-items: stretch;
        flex-direction: column;
    }

    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-name {
        max-width: 100%;
    }

    .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-actions .btn {
        width: 100%;
    }
}

/* Reimbursements: modal polish */
#reimbursement-modal .reimbursement-modal {
    max-width: 980px;
    width: min(980px, 96vw);
}

#reimbursementExportModal .reimbursement-export-modal {
    max-width: 760px;
    width: min(760px, 94vw);
}

#reimbursement-receipts-modal .reimbursement-receipts-modal {
    max-width: 980px;
    width: min(980px, 96vw);
}

#vehicle-modal .vehicle-modal {
    max-width: 640px;
    width: min(640px, 94vw);
}

#receipt-cropper-modal .receipt-cropper-modal {
    max-width: 860px;
    width: min(860px, 96vw);
}

#reimbursement-modal .modal-body,
#reimbursementExportModal .modal-body,
#reimbursement-receipts-modal .modal-body,
#vehicle-modal .modal-body,
#receipt-cropper-modal .modal-body {
    background: var(--primary-silver);
}

#reimbursement-modal #reimbursementForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#reimbursement-modal .reimbursement-form-panel,
#reimbursementExportModal .reimbursement-export-panel,
#vehicle-modal .vehicle-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Costs page: detail modal layout */
.page[data-page-id="costs"] .cost-detail-summary {
    background: var(--primary-silver);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.page[data-page-id="costs"] .cost-detail-summary-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.page[data-page-id="costs"] .cost-detail-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.page[data-page-id="costs"] .cost-detail-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.35rem;
}

.page[data-page-id="costs"] .cost-detail-summary-meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-gray);
}

.page[data-page-id="costs"] .cost-detail-summary-meta span {
    color: var(--text-dark);
    font-weight: 600;
}

.page[data-page-id="costs"] .cost-detail-section {
    margin-bottom: 1.5rem;
}

.page[data-page-id="costs"] .cost-detail-section:last-child {
    margin-bottom: 0;
}

.page[data-page-id="costs"] .cost-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.page[data-page-id="costs"] .cost-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="costs"] .cost-detail-item label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page[data-page-id="costs"] .cost-detail-item span {
    font-size: 0.95rem;
    color: var(--text-dark);
}

.page[data-page-id="costs"] .cost-detail-emphasis {
    font-weight: 600;
}

.page[data-page-id="costs"] .cost-detail-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-cyan);
}

.page[data-page-id="costs"] .cost-detail-description {
    color: var(--text-dark);
    line-height: 1.5;
}

/* Costs: form/reject modal polish */
.page[data-page-id="costs"] #costModal .cost-form-modal {
    max-width: 720px;
    width: min(720px, 96vw);
}

.page[data-page-id="costs"] #rejectCostModal .cost-reject-modal {
    max-width: 520px;
    width: min(520px, 92vw);
}

.page[data-page-id="costs"] #costModal .modal-body,
.page[data-page-id="costs"] #rejectCostModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="costs"] .cost-form-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page[data-page-id="costs"] #costForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="costs"] .cost-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: end;
}

.page[data-page-id="costs"] .cost-form-grid--amount {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 640px) {
    .page[data-page-id="costs"] .cost-form-grid--amount {
        grid-template-columns: 1fr;
    }
}

/* Departments: modal polish */
#department-modal .department-form-modal,
#department-edit-modal .department-form-modal {
    max-width: 640px;
    width: min(640px, 96vw);
}

#department-details-modal .department-details-modal {
    max-width: 820px;
    width: min(820px, 96vw);
}

#department-modal .modal-body,
#department-edit-modal .modal-body,
#department-details-modal .modal-body {
    background: var(--primary-silver);
}

#department-modal .department-form-card,
#department-edit-modal .department-form-card,
#department-details-modal .department-details-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#department-modal #department-form,
#department-edit-modal #edit-department-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#department-details-modal .department-details-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#department-details-modal .department-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: center;
}

#department-details-modal .department-details-color {
    display: flex;
    gap: 8px;
    align-items: center;
}

#department-details-modal .department-details-description {
    margin-top: 1rem;
}

#department-details-modal .department-managers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

#department-details-modal .department-managers-subtitle {
    font-size: 12px;
    color: var(--text-gray);
}

#department-details-modal .department-managers-add {
    margin-top: 1rem;
}

#department-details-modal .department-managers-results {
    margin-top: 8px;
}

/* Projects: modal polish */
.page[data-page-id="projects"] #tasksModal .modal-content {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

.page[data-page-id="projects"] #timeEntriesModal .modal-content,
.page[data-page-id="projects"] #costsModal .modal-content,
.page[data-page-id="projects"] #invoicesModal .modal-content {
    max-width: 1000px;
    width: min(1000px, 96vw);
}

.page[data-page-id="projects"] #tasksModal .modal-body,
.page[data-page-id="projects"] #timeEntriesModal .modal-body,
.page[data-page-id="projects"] #costsModal .modal-body,
.page[data-page-id="projects"] #invoicesModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--primary-silver);
}

.page[data-page-id="projects"] #projectDetailModal .modal-body,
.page[data-page-id="projects"] #projectDeleteModal .modal-body,
.page[data-page-id="projects"] #createProjectModal .modal-body,
.page[data-page-id="projects"] #projectCreateClientModal .modal-body,
.page[data-page-id="projects"] #phaseBulkModal .modal-body,
.page[data-page-id="projects"] #arCreateModal .modal-body,
.page[data-page-id="projects"] #arEditModal .modal-body,
.page[data-page-id="projects"] #mtTypesModal .modal-body,
.page[data-page-id="projects"] #uploadModal .modal-body,
.page[data-page-id="projects"] #teamsFilesModal .modal-body,
.page[data-page-id="projects"] #teamsCreateModal .modal-body,
.page[data-page-id="projects"] #metadataModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="projects"] .project-modal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.page[data-page-id="projects"] .project-modal-toolbar-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page[data-page-id="projects"] .project-modal-toolbar-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.page[data-page-id="projects"] .project-modal-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page[data-page-id="projects"] .task-form-card {
    margin-bottom: 1.5rem;
}

.page[data-page-id="projects"] .project-costs-form h4 {
    margin: 0 0 0.75rem;
}

.page[data-page-id="projects"] .project-costs-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: end;
}

.page[data-page-id="projects"] .project-costs-form-grid .btn {
    justify-self: start;
}

.page[data-page-id="projects"] #phaseModal .project-phase-modal {
    max-width: 720px;
    width: min(720px, 94vw);
}

.page[data-page-id="projects"] #phaseModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="projects"] #phaseModal #phaseForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="projects"] #teamModal .project-team-modal {
    max-width: 980px;
    width: min(980px, 96vw);
}

.page[data-page-id="projects"] #teamModal .modal-body {
    background: var(--primary-silver);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page[data-page-id="projects"] #teamModal .project-team-toolbar {
    margin-bottom: 1.5rem;
}

.page[data-page-id="projects"] #teamModal .project-team-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 1rem;
    align-items: end;
}

.page[data-page-id="projects"] #documentsModal .project-documents-modal {
    max-width: 1320px;
    width: min(1320px, 98vw);
    height: 88vh;
    max-height: 88vh;
}

.page[data-page-id="projects"] #documentsModal .modal-body {
    background: var(--primary-silver);
    max-height: calc(88vh - 140px);
    overflow: hidden;
}

.page[data-page-id="projects"] #documentsModal .project-documents-sidebar,
.page[data-page-id="projects"] #documentsModal .project-documents-main {
    background: #fff;
}

.page[data-page-id="projects"] #projectInfoModal .project-info-modal {
    max-width: 1040px;
    width: min(1040px, 96vw);
}

.page[data-page-id="projects"] #projectInfoModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="projects"] #projectInfoModal .project-info-profit-distribution {
    margin-top: 1.25rem;
}

.page[data-page-id="projects"] #projectInfoModal .project-info-profit-distribution-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
}

@media (max-width: 768px) {
    .page[data-page-id="projects"] .project-modal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .page[data-page-id="projects"] .project-modal-toolbar-row {
        width: 100%;
    }

    .page[data-page-id="projects"] .project-modal-toolbar .btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .page[data-page-id="projects"] #teamModal .project-team-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .page[data-page-id="projects"] #teamModal .project-team-grid .btn {
        width: 100%;
    }
}

/* Reports page: controls + filters */
.page[data-page-id="reports"] .reports-controls {
    margin-bottom: 1rem;
}

.page[data-page-id="reports"] .reports-controls .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.page[data-page-id="reports"] .reports-controls-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .reports-controls-row--primary {
    flex-wrap: nowrap;
    align-items: flex-end;
}

.page[data-page-id="reports"] .reports-controls-row--primary > * {
    flex: 0 0 auto;
}

.page[data-page-id="reports"] .reports-controls-row--filters {
    padding-top: 0.55rem;
    align-items: stretch;
    gap: 0.6rem;
}

.page[data-page-id="reports"] .reports-advanced-panel {
    margin-top: 0.55rem;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--border-color);
    background: transparent;
}

.page[data-page-id="reports"] .reports-advanced-panel .reports-advanced-grid {
    gap: 0.6rem;
    align-items: start;
}

.page[data-page-id="reports"] .reports-advanced-panel .reports-filters-group {
    background: transparent;
}

.page[data-page-id="reports"] .reports-filter-panel {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
}

.page[data-page-id="reports"] .reports-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-filter-panel-head > div {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-filter-panel-head strong {
    font-size: 0.82rem;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-filter-panel-head span {
    color: var(--text-gray);
    font-size: 0.75rem;
}

.page[data-page-id="reports"] #reportsAdvancedToggle {
    flex: 0 0 auto;
    gap: 0.3rem;
}

.page[data-page-id="reports"] #reportsAdvancedToggle > span:last-child {
    display: inline-block;
    transition: transform 160ms ease;
}

.page[data-page-id="reports"] #reportsAdvancedToggle.is-open > span:last-child {
    transform: rotate(180deg);
}

.page[data-page-id="reports"] .reports-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--primary-cyan);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Newsletter modals */
.page[data-page-id="newsletter"] .newsletter-page-subtitle {
    max-width: 72ch;
    margin-top: 0.35rem;
    color: var(--text-gray);
    font-size: 0.96rem;
    line-height: 1.45;
}

.page[data-page-id="newsletter"] .newsletter-context-bar {
    margin-bottom: 0.15rem;
}

.page[data-page-id="newsletter"] .newsletter-context-bar .project-detail-context-chip {
    border-color: rgba(14, 165, 233, 0.2);
}

.page[data-page-id="newsletter"] .newsletter-workspace-tabs-shell {
    margin-bottom: 1rem;
}

.page[data-page-id="newsletter"] .newsletter-workspace-tabs-shell .card-body {
    padding: 0.95rem 1rem;
}

.page[data-page-id="newsletter"] .newsletter-tab-button {
    flex: 0 0 auto;
}

.page[data-page-id="newsletter"] .newsletter-tab-panel {
    gap: 1.15rem;
}

.page[data-page-id="newsletter"] .newsletter-shell-card,
.page[data-page-id="newsletter"] .newsletter-group-card {
    border-color: rgba(14, 165, 233, 0.12);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.45);
}

.page[data-page-id="newsletter"] .newsletter-shell-card > .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="newsletter"] .newsletter-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="newsletter"] .newsletter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.page[data-page-id="newsletter"] .newsletter-group-card .card-subtitle {
    margin-top: 0.2rem;
}

.page[data-page-id="newsletter"] .newsletter-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-input,
.page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-select {
    min-width: 180px;
}

.page[data-page-id="newsletter"] .newsletter-stats-row {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.page[data-page-id="newsletter"] .newsletter-table-frame {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #fff;
}

.page[data-page-id="newsletter"] .newsletter-table-frame .table {
    margin-bottom: 0;
}

.page[data-page-id="newsletter"] .newsletter-table-frame .table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.page[data-page-id="newsletter"] .newsletter-table-actions {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.page[data-page-id="newsletter"] .newsletter-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 220px;
    padding: 2.6rem 1rem;
    text-align: center;
}

.page[data-page-id="newsletter"] .newsletter-empty-state-icon {
    font-size: 2.3rem;
    line-height: 1;
}

.page[data-page-id="newsletter"] .newsletter-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="newsletter"] .newsletter-empty-state-description {
    max-width: 48ch;
    color: var(--text-gray);
    line-height: 1.5;
}

.page[data-page-id="newsletter"] #newsletterMediaGrid .newsletter-empty-state {
    grid-column: 1 / -1;
}

.page[data-page-id="newsletter"] .newsletter-settings-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page[data-page-id="newsletter"] .newsletter-settings-field {
    max-width: 420px;
}

.page[data-page-id="newsletter"] .newsletter-setup-card {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.9), rgba(248, 250, 252, 0.96));
}

.page[data-page-id="newsletter"] .newsletter-setup-card .btn-link,
.page[data-page-id="newsletter"] .newsletter-setup-restore .btn-link {
    padding: 0;
}

.page[data-page-id="newsletter"] .newsletter-setup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.9rem 1rem;
    flex-wrap: wrap;
}

.page[data-page-id="newsletter"] .newsletter-setup-title-row {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="newsletter"] .newsletter-setup-title {
    color: var(--text-dark);
}

.page[data-page-id="newsletter"] .newsletter-setup-description,
.page[data-page-id="newsletter"] .newsletter-setup-meta,
.page[data-page-id="newsletter"] .newsletter-setup-code-label {
    color: var(--text-gray);
}

.page[data-page-id="newsletter"] .newsletter-setup-meta {
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.page[data-page-id="newsletter"] .newsletter-setup-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="newsletter"] .newsletter-setup-code {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.page[data-page-id="newsletter"] .newsletter-setup-code-label {
    margin-bottom: 0.35rem;
}

.page[data-page-id="newsletter"] .newsletter-setup-restore {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .page[data-page-id="newsletter"] .newsletter-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-input,
    .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-select {
        width: 100%;
        min-width: 0;
    }

    .page[data-page-id="newsletter"] .newsletter-setup-actions {
        width: 100%;
    }
}

.modal .modal-content.newsletter-modal {
    width: min(96vw, 100%);
}

.modal .modal-content.newsletter-events-modal,
.modal .modal-content.newsletter-segment-modal {
    max-width: 760px;
}

.modal .modal-content.newsletter-campaign-modal,
.modal .modal-content.newsletter-analytics-modal {
    max-width: 1040px;
}

.modal .modal-content.newsletter-summary-modal,
.modal .modal-content.newsletter-audience-modal {
    max-width: 640px;
}

.modal .modal-content.newsletter-resend-modal {
    max-width: 520px;
}

.newsletter-modal .modal-body {
    background: var(--primary-silver);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.newsletter-modal .newsletter-table {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
}

.newsletter-summary-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.newsletter-sample-list {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

/* Meeting protocols modals */
.meeting-protocols-edit-modal .modal-body {
    background: var(--primary-silver);
}

.budget-bulk-modal .modal-body {
    background: var(--primary-silver);
}

/* Settings templates modals */
.modal .modal-content.settings-template-modal {
    width: min(96vw, 100%);
}

.modal .modal-content.settings-doc-template-modal {
    max-width: 1040px;
}

.modal .modal-content.settings-email-template-modal {
    max-width: 900px;
}

.modal .modal-content.settings-newsletter-template-modal {
    max-width: 1100px;
}

.modal .modal-content.settings-image-props-modal {
    max-width: 540px;
}

.modal .modal-content.settings-data-inspector-modal {
    max-width: 980px;
    max-height: 90vh;
}

.settings-template-modal .modal-body {
    background: var(--primary-silver);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-template-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-template-modal .modal-body .card {
    margin-bottom: 0;
}

/* Settings company modals */
.page[data-page-id="settings-company"] .settings-config-modal {
    max-width: 520px;
    width: min(520px, 94vw);
}

.page[data-page-id="settings-company"] #azureSetupModal .settings-azure-modal {
    max-width: 640px;
    width: min(640px, 94vw);
}

.page[data-page-id="settings-company"] #checklistTemplateModal .settings-checklist-modal {
    max-width: 760px;
    width: min(760px, 96vw);
}

.page[data-page-id="settings-company"] #waAddForm .wa-add-modal {
    max-width: 640px;
    width: min(640px, 94vw);
}

.page[data-page-id="settings-company"] #phaseModal .modal-body,
.page[data-page-id="settings-company"] #domainModal .modal-body,
.page[data-page-id="settings-company"] #clientTypeModal .modal-body,
.page[data-page-id="settings-company"] #expenseCategoryModal .modal-body,
.page[data-page-id="settings-company"] #azureSetupModal .modal-body,
.page[data-page-id="settings-company"] #checklistTemplateModal .modal-body,
.page[data-page-id="settings-company"] #waAddForm .modal-body,
.page[data-page-id="settings-company"] #holidayModal .modal-body {
    background: var(--primary-silver);
}

.page[data-page-id="settings-company"] #phaseForm,
.page[data-page-id="settings-company"] #domainForm,
.page[data-page-id="settings-company"] #clientTypeForm,
.page[data-page-id="settings-company"] #expenseCategoryForm,
.page[data-page-id="settings-company"] #azureSetupForm,
.page[data-page-id="settings-company"] #checklistTemplateForm,
.page[data-page-id="settings-company"] #waCreateForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reports"] .reports-controls-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 140px;
}

.page[data-page-id="reports"] .reports-controls-field--period {
    min-width: 160px;
    flex: 0 0 190px;
}

.page[data-page-id="reports"] .reports-controls-field--date {
    flex: 0 0 150px;
}

.page[data-page-id="reports"] .reports-controls-field--dept {
    min-width: 180px;
}

.page[data-page-id="reports"] .reports-controls-field--user {
    min-width: 220px;
    flex: 1 1 240px;
}

.page[data-page-id="reports"] .reports-controls-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.page[data-page-id="reports"] .reports-controls-actions .btn,
.page[data-page-id="reports"] .reports-controls-actions .dropdown {
    flex: 0 0 auto;
}

.page[data-page-id="reports"] .reports-filters-group {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
}

.page[data-page-id="reports"] .reports-filters-group-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-filters-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.page[data-page-id="reports"] .reports-filters-group-body--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.page[data-page-id="reports"] .reports-filters-group--actions {
    background: transparent;
    border-style: dashed;
    min-width: 150px;
}

.page[data-page-id="reports"] .reports-filters-group--actions .reports-filters-group-body {
    align-items: center;
}

.page[data-page-id="reports"] .reports-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.6rem;
}

.page[data-page-id="reports"] .reports-field-note {
    max-width: 260px;
    color: var(--text-gray);
    font-size: 0.68rem;
    line-height: 1.25;
}

.page[data-page-id="reports"] .reports-active-filter-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-active-filter-label {
    flex: 0 0 auto;
    color: var(--text-gray);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page[data-page-id="reports"] .reports-active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-active-filter-chip,
.page[data-page-id="reports"] .reports-entity-token {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--primary-cyan) 28%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-cyan) 7%, #fff);
    color: var(--text-color);
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 0.24rem 0.45rem 0.24rem 0.55rem;
}

.page[data-page-id="reports"] .reports-active-filter-chip > span,
.page[data-page-id="reports"] .reports-entity-token > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-active-filter-chip button,
.page[data-page-id="reports"] .reports-token-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.page[data-page-id="reports"] .reports-active-filter-chip button:hover,
.page[data-page-id="reports"] .reports-token-remove:hover {
    background: color-mix(in srgb, var(--primary-cyan) 14%, transparent);
    color: var(--text-color);
}

/* Reports drilldown modal polish */
.report-drilldown-modal {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

.report-drilldown-modal .modal-body {
    background: var(--primary-silver);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-drilldown-modal .table-container {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.report-drilldown-modal .table {
    margin-top: 0;
}

.report-drilldown-modal .reports-drilldown-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-drilldown-modal .reports-drilldown-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.report-drilldown-modal .reports-drilldown-search {
    flex: 1 1 260px;
    min-width: 220px;
}

.report-drilldown-modal .reports-drilldown-meta {
    font-size: 0.85rem;
    white-space: nowrap;
}

.report-drilldown-modal .reports-drilldown-table-wrap {
    max-height: min(62vh, 640px);
    overflow: auto;
}

.report-drilldown-modal .reports-drilldown-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.report-drilldown-modal .reports-drilldown-table th.is-sortable {
    cursor: pointer;
    user-select: none;
}

.report-drilldown-modal .reports-drilldown-table th.is-sort-active {
    color: var(--primary-cyan);
}

.report-drilldown-modal .reports-drilldown-sort {
    margin-left: 0.35rem;
    opacity: 0.6;
    font-size: 11px;
}

.report-drilldown-modal .reports-drilldown-loading,
.report-drilldown-modal .reports-drilldown-empty {
    padding: 1rem 0.25rem;
}

.report-drilldown-modal .reports-drilldown-table .num,
.report-drilldown-modal .reports-drilldown-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .report-drilldown-modal .reports-drilldown-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .report-drilldown-modal .reports-drilldown-meta {
        white-space: normal;
    }
}

/* Reports: export modals */
.reports-zeitkonto-paid-modal {
    max-width: 520px;
    width: min(520px, 94vw);
}

.reports-zeitkonto-paid-modal .modal-body {
    background: var(--primary-silver);
}

.reports-zeitkonto-paid-modal .reports-export-panel {
    gap: 0.75rem;
}

#reportsTimesheetExportModal .reports-timesheet-modal {
    max-width: 760px;
    width: min(760px, 94vw);
}

#reportsReimbursementsExportModal .reports-reimbursements-modal {
    max-width: 720px;
    width: min(720px, 94vw);
}

#reportsDashboardExportModal .reports-dashboard-export-modal {
    max-width: 760px;
    width: min(760px, 94vw);
}

#reportsTimesheetExportModal .modal-body,
#reportsReimbursementsExportModal .modal-body,
#reportsDashboardExportModal .modal-body {
    background: var(--primary-silver);
}

#reportsTimesheetExportModal .reports-export-panel,
#reportsReimbursementsExportModal .reports-export-panel,
#reportsDashboardExportModal .reports-export-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#reportsTimesheetExportModal .reports-export-presets,
#reportsReimbursementsExportModal .reports-export-presets,
#reportsDashboardExportModal .reports-export-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .reports-controls-chips {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-controls select[multiple] {
    min-height: 56px;
    height: 56px;
}

.page[data-page-id="reports"] .reports-controls .btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
}

.page[data-page-id="reports"] .reports-controls .btn.has-filters,
.page[data-page-id="reports"] .reports-controls .btn.is-open {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.page[data-page-id="reports"] .reports-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-gray);
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-cyan);
    border-radius: 50%;
    animation: kionov-spin 0.6s linear infinite;
}

.page[data-page-id="reports"] {
    position: relative;
}

#reportsLoadingOverlay.reports-loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
    z-index: 1500;
    pointer-events: all;
    cursor: progress;
}

#reportsLoadingOverlay.reports-loading-overlay.is-active {
    display: flex;
}

#reportsLoadingOverlay.reports-loading-overlay .reports-loading-spinner {
    width: 20px;
    height: 20px;
    border-width: 3px;
}

.page[data-page-id="reports"] .reports-controls .form-label {
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-page-subtitle {
    max-width: 72ch;
    margin-top: 0.35rem;
    color: var(--text-gray);
    font-size: 0.96rem;
    line-height: 1.45;
}

.page[data-page-id="reports"] .reports-context-bar {
    margin-bottom: 0.15rem;
}

.page[data-page-id="reports"] .reports-context-bar .project-detail-context-chip {
    border-color: rgba(14, 165, 233, 0.2);
}

.page[data-page-id="reports"] .reports-workspace-tabs-shell {
    margin-bottom: 1rem;
}

.page[data-page-id="reports"] .reports-workspace-tabs-shell .card-body {
    padding: 0.95rem 1rem;
}

.page[data-page-id="reports"] .reports-tab-button {
    flex: 0 0 auto;
}

.page[data-page-id="reports"] .reports-tab-content {
    margin-top: 0;
}

.page[data-page-id="reports"] .reports-tabs-card {
    margin-bottom: 0.65rem;
}

.page[data-page-id="reports"] .reports-tabs-card .card-body {
    padding: 0.35rem 0.5rem;
}

.page[data-page-id="reports"] .reports-tabs {
    display: flex;
    gap: 0.5rem 0.8rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .reports-tab-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-tab-group:first-child {
    padding-left: 0;
    border-left: 0;
    justify-content: flex-end;
}

.page[data-page-id="reports"] .reports-tab-group-label {
    padding-left: 0.45rem;
    color: var(--text-gray);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.page[data-page-id="reports"] .reports-tab-group-items {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .page[data-page-id="reports"] .reports-controls-row--primary {
        flex-wrap: wrap;
    }

    .page[data-page-id="reports"] .reports-controls-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .page[data-page-id="reports"] .reports-controls-field--period,
    .page[data-page-id="reports"] .reports-controls-field--date {
        flex: 1 1 100%;
    }

    .page[data-page-id="reports"] .reports-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .page[data-page-id="reports"] .reports-tab-group {
        flex: 0 0 auto;
    }
}

.page[data-page-id="reports"] .reports-controls .form-input,
.page[data-page-id="reports"] .reports-controls .form-select {
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

.page[data-page-id="reports"] .reports-controls-chips .muted {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page[data-page-id="reports"] .reports-user-picker,
.page[data-page-id="reports"] .reports-entity-picker {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px;
    background: #fff;
    min-height: 36px;
}

.page[data-page-id="reports"] .reports-user-tokens,
.page[data-page-id="reports"] .reports-entity-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
    max-height: 36px;
    overflow-y: auto;
}

.page[data-page-id="reports"] .reports-entity-tokens:empty {
    display: none;
    margin: 0;
}

.page[data-page-id="reports"] .reports-user-input,
.page[data-page-id="reports"] .reports-entity-input {
    border: none;
    box-shadow: none;
    padding: 4px 4px;
    width: 100%;
    outline: none;
}

.page[data-page-id="reports"] .reports-user-suggestions,
.page[data-page-id="reports"] .reports-entity-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    display: none;
    max-height: 200px;
    overflow: auto;
    z-index: 15;
}

.page[data-page-id="reports"] .reports-entity-suggestion {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
}

.page[data-page-id="reports"] .reports-entity-suggestion-label {
    overflow: hidden;
    color: var(--text-color);
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-entity-suggestion-meta {
    overflow: hidden;
    color: var(--text-gray);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .page[data-page-id="reports"] .reports-filter-panel-head,
    .page[data-page-id="reports"] .reports-filter-panel-head > div,
    .page[data-page-id="reports"] .reports-active-filter-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

.page[data-page-id="reports"] #reportsTabs {
    margin: 0;
}

.page[data-page-id="reports"] .tab-content {
    margin-top: 0.35rem;
}

.page[data-page-id="reports"] .reports-tab-stack {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.page[data-page-id="reports"] .reports-tab-stack .card {
    margin-bottom: 0;
}

.page[data-page-id="reports"] .reports-tab-stack .stats-grid {
    margin-bottom: 0;
}

.page[data-page-id="reports"] .reports-time-overview-card {
    border-color: rgba(14, 165, 233, 0.14);
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
    box-shadow: 0 28px 52px -42px rgba(15, 23, 42, 0.55);
}

.page[data-page-id="reports"] .reports-time-overview-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-time-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    grid-template-areas: "trend split";
    gap: 1rem;
    align-items: stretch;
}

.page[data-page-id="reports"] .reports-time-overview-grid.is-sparse-trend {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.95fr);
    grid-template-areas: "trend split";
    align-items: start;
}

.page[data-page-id="reports"] .reports-time-chart-panel {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    padding: 0.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.page[data-page-id="reports"] .reports-time-chart-panel--trend {
    grid-area: trend;
}

.page[data-page-id="reports"] .reports-time-chart-panel--split {
    grid-area: split;
}

.page[data-page-id="reports"] .reports-time-overview-grid.is-sparse-trend .reports-time-chart-panel--trend,
.page[data-page-id="reports"] .reports-time-overview-grid.is-sparse-trend .reports-time-chart-panel--split {
    align-self: start;
}

.page[data-page-id="reports"] .reports-time-chart-panel .card-subtitle {
    margin-bottom: 0.8rem;
}

.page[data-page-id="reports"] #timeTrendChart,
.page[data-page-id="reports"] #timeSplitChart {
    min-height: 170px;
}

.page[data-page-id="reports"] #timeTrendChart {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page[data-page-id="reports"] #timeTrendChart.is-empty {
    min-height: 152px;
}

.page[data-page-id="reports"] #timeTrendChart.is-compact {
    min-height: 0;
}

.page[data-page-id="reports"] .reports-time-trend-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    min-height: 124px;
    padding: 0.35rem 0;
}

.page[data-page-id="reports"] .reports-time-trend-empty-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-time-trend-empty strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-time-trend-empty p {
    margin: 0;
    max-width: 34ch;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-time-trend-spotlight {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.page[data-page-id="reports"] .reports-time-trend-spotlight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.page[data-page-id="reports"] .reports-time-trend-spotlight-head strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-time-trend-spotlight-kicker {
    display: inline-flex;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-time-trend-track {
    display: flex;
    height: 16px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-time-trend-track-billable,
.page[data-page-id="reports"] .reports-time-trend-track-nonbillable {
    height: 100%;
}

.page[data-page-id="reports"] .reports-time-trend-track-billable {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.94) 0%, rgba(5, 150, 105, 0.92) 100%);
}

.page[data-page-id="reports"] .reports-time-trend-track-nonbillable {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.78) 0%, rgba(239, 68, 68, 0.64) 100%);
}

.page[data-page-id="reports"] .reports-time-trend-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-time-trend-value {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.9);
}

.page[data-page-id="reports"] .reports-time-trend-value span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-time-trend-value strong {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] #timeSplitChart {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .page[data-page-id="reports"] .reports-dashboard-body {
        padding: 0.85rem;
    }

    .page[data-page-id="reports"] .reports-dashboard-panel {
        padding: 0.9rem;
    }

    .page[data-page-id="reports"] .reports-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-dashboard-overview-card--budget,
    .page[data-page-id="reports"] .reports-dashboard-overview-card--risk {
        grid-column: auto;
    }

    .page[data-page-id="reports"] .reports-dashboard-overview-card-head,
    .page[data-page-id="reports"] .reports-dashboard-overview-meter-label {
        flex-direction: column;
        align-items: flex-start;
    }

    .page[data-page-id="reports"] .reports-budget-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="reports"] .reports-time-overview-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "trend"
            "split";
    }

    .page[data-page-id="reports"] .reports-time-trend-spotlight-head {
        flex-direction: column;
    }

    .page[data-page-id="reports"] .reports-time-trend-values {
        grid-template-columns: 1fr;
    }
}

.page[data-page-id="reports"] .reports-grid {
    display: grid;
    gap: 1rem;
}

.page[data-page-id="reports"] .reports-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.page[data-page-id="reports"] .reports-grid--split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.page[data-page-id="reports"] .reports-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.page[data-page-id="reports"] .reports-stats-grid .stat-card {
    padding: 0.75rem 1rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-stats-grid .stat-header {
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.page[data-page-id="reports"] .reports-stats-grid .stat-title {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: normal;
}

.page[data-page-id="reports"] .reports-stats-grid .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
    border-radius: 8px;
}

.page[data-page-id="reports"] .reports-stats-grid .stat-value {
    font-size: 1.35rem;
    text-align: left;
}

.page[data-page-id="reports"] .card-header {
    padding: 1.25rem 1.5rem;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .card-body {
    padding: 1.5rem;
}

.page[data-page-id="reports"] .reports-controls {
    border-color: rgba(14, 165, 233, 0.12);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, #fff 100%);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.45);
}

.page[data-page-id="reports"] .reports-controls .card-body {
    padding: 1rem 1.1rem;
}

.page[data-page-id="reports"] .reports-controls-row--primary {
    gap: 1rem;
}

.page[data-page-id="reports"] .card-title {
    font-size: 1.1rem;
}

.page[data-page-id="reports"] .card-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .reports-chart-controls {
    gap: 0.4rem;
    row-gap: 0.3rem;
}

.page[data-page-id="reports"] .reports-top-group-controls {
    flex-wrap: nowrap;
}

.page[data-page-id="reports"] .reports-top-group-selects {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.page[data-page-id="reports"] .reports-inline-field--compact {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-view-switch {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
}

.page[data-page-id="reports"] .reports-view-switch-button {
    min-height: 28px;
    padding: 0.25rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-gray);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}

.page[data-page-id="reports"] .reports-view-switch-button.is-active {
    background: var(--surface, #fff);
    color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.page[data-page-id="reports"] .reports-section-note {
    margin: 0 0 0.65rem;
    color: var(--text-gray);
    font-size: 0.74rem;
}

.page[data-page-id="reports"] .reports-top-groups-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(220px, 0.65fr);
    gap: 0.8rem;
    align-items: start;
}

.page[data-page-id="reports"] .reports-time-domain-legend {
    display: flex;
    align-items: center;
    gap: 0.35rem 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.6rem;
}

.page[data-page-id="reports"] .reports-time-domain-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-gray);
    font-size: 0.68rem;
}

.page[data-page-id="reports"] .reports-time-domain-swatch {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 2px;
}

.page[data-page-id="reports"] .reports-time-domain-swatch--nonbillable {
    background: rgba(239, 68, 68, 0.6);
}

.page[data-page-id="reports"] .reports-time-trend-row {
    display: grid;
    grid-template-columns: minmax(90px, 130px) minmax(180px, 1fr) 74px;
    align-items: center;
    gap: 0.55rem;
    margin: 0.35rem 0;
}

.page[data-page-id="reports"] .reports-time-trend-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}

.page[data-page-id="reports"] .reports-time-trend-bar {
    height: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 6px;
    background: var(--primary-silver);
}

.page[data-page-id="reports"] .reports-time-trend-total {
    text-align: right;
    font-size: 0.75rem;
}

.page[data-page-id="reports"] .reports-time-heatmap-scroll {
    overflow-x: auto;
}

.page[data-page-id="reports"] .reports-time-heatmap-grid {
    min-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.page[data-page-id="reports"] .reports-time-heatmap-header,
.page[data-page-id="reports"] .reports-time-heatmap-row {
    display: grid;
    grid-template-columns: 48px repeat(7, minmax(52px, 1fr));
    align-items: center;
    gap: 4px;
}

.page[data-page-id="reports"] .reports-time-heatmap-day {
    text-align: center;
    font-size: 0.66rem;
}

.page[data-page-id="reports"] .reports-time-heatmap-week {
    padding-right: 0.25rem;
    text-align: right;
    font-size: 0.68rem;
}

.page[data-page-id="reports"] .reports-time-heatmap-cell {
    min-height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.page[data-page-id="reports"] .reports-time-heatmap-cell.is-empty {
    border-color: rgba(148, 163, 184, 0.18);
}

.page[data-page-id="reports"] .reports-time-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.55rem;
    color: var(--text-gray);
    font-size: 0.67rem;
}

.page[data-page-id="reports"] .reports-time-heatmap-legend-scale {
    display: inline-flex;
    gap: 2px;
}

.page[data-page-id="reports"] .reports-time-heatmap-legend-scale > span {
    width: 16px;
    height: 9px;
    border-radius: 2px;
}

@media (max-width: 900px) {
    .page[data-page-id="reports"] .reports-top-group-controls,
    .page[data-page-id="reports"] .reports-top-group-selects {
        flex-wrap: wrap;
    }

    .page[data-page-id="reports"] .reports-top-groups-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-time-trend-row {
        grid-template-columns: 92px minmax(150px, 1fr) 64px;
    }
}

.page[data-page-id="reports"] .reports-chart-controls .form-select {
    min-height: 32px;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
}

.page[data-page-id="reports"] .reports-chart-controls .form-label {
    font-size: 0.68rem;
}

.page[data-page-id="reports"] .reports-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .card-header-actions.reports-inline-actions {
    row-gap: 0.5rem;
}

.page[data-page-id="reports"] .reports-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.page[data-page-id="reports"] .reports-inline-field .form-label {
    margin: 0;
    display: inline-flex;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-inline-field .form-input {
    width: 110px;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

.page[data-page-id="reports"] .reports-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.18);
    color: #334155;
}

.page[data-page-id="reports"] .reports-kpi-pill.positive {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.page[data-page-id="reports"] .reports-kpi-pill.negative {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.page[data-page-id="reports"] .reports-kpi-pill.neutral {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.page[data-page-id="reports"] .reports-budget-shell {
    --budget-accent: #0f6d74;
    --budget-accent-strong: #0b5257;
    --budget-accent-soft: #e8f6f6;
    --budget-surface: #f7fafc;
    --budget-border: #d8e1e7;
    --budget-text-soft: #5f7084;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page[data-page-id="reports"] .reports-budget-section {
    border: 1px solid var(--budget-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f9fc 100%);
    padding: 1rem 1.05rem;
}

.page[data-page-id="reports"] .reports-budget-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-executive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-executive-item {
    border: 1px solid var(--budget-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.85rem 0.95rem;
    min-width: 0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-executive-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--budget-text-soft);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-executive-value {
    margin-top: 0.3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-executive-sub {
    margin-top: 0.24rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.18);
    color: #334155;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-kpi-pill.positive {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-kpi-pill.negative {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-kpi-pill.neutral {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-card {
    border: 1px solid var(--budget-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    padding: 1rem 1.05rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--budget-text-soft);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-title {
    margin-top: 0.18rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--budget-accent-strong);
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-bar {
    display: flex;
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    margin-bottom: 0.65rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-bar-segment {
    display: block;
    height: 100%;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-bar-segment.is-actual {
    background: linear-gradient(90deg, #0f6d74 0%, #1f9ea7 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-bar-segment.is-remaining {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.28) 0%, rgba(148, 163, 184, 0.52) 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-bar-segment.is-paid {
    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-bar-segment.is-open {
    background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin-bottom: 0.7rem;
    color: var(--budget-text-soft);
    font-size: 0.84rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-visual-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 109, 116, 0.08);
    color: var(--budget-accent-strong);
    font-size: 0.78rem;
    font-weight: 600;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--budget-accent-strong);
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f6d74 0%, #22c55e 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-fill.is-over {
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-fill.is-billing {
    background: linear-gradient(90deg, #fb923c 0%, #ef4444 100%);
}

.page[data-page-id="reports"] .reports-budget-shell .budget-ranking-sub {
    color: var(--budget-text-soft);
    font-size: 0.78rem;
    line-height: 1.35;
}

.page[data-page-id="reports"] .reports-dashboard-body {
    padding: 0;
}

.page[data-page-id="reports"] .reports-dashboard-control-surface {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(300px, 0.85fr);
    min-width: 0;
}

.page[data-page-id="reports"] .reports-dashboard-primary {
    min-width: 0;
    padding: 1.15rem 1.2rem 1.25rem;
}

.page[data-page-id="reports"] .reports-dashboard-primary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.page[data-page-id="reports"] .reports-dashboard-primary-head .reports-dashboard-panel-copy {
    max-width: 68ch;
}

.page[data-page-id="reports"] .reports-dashboard-rail {
    min-width: 0;
    border-left: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color, #fff) 96%, var(--border-color) 4%);
}

.page[data-page-id="reports"] .reports-dashboard-trajectory {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.58fr);
    gap: 1.1rem;
    align-items: end;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-callout {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
    padding-left: 0.85rem;
    border-left: 3px solid #2563eb;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-callout.is-positive {
    border-left-color: #10b981;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-callout.is-negative {
    border-left-color: #f97316;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-callout > span,
.page[data-page-id="reports"] .reports-dashboard-trajectory-callout > small {
    color: var(--text-gray);
    font-size: 0.78rem;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-callout > strong {
    color: var(--text-dark);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 720;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-scale {
    position: relative;
    height: 34px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-plan,
.page[data-page-id="reports"] .reports-dashboard-trajectory-option,
.page[data-page-id="reports"] .reports-dashboard-trajectory-actual {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-option {
    z-index: 1;
    background: rgba(249, 115, 22, 0.22);
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-plan {
    z-index: 2;
    background: rgba(37, 99, 235, 0.26);
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-actual {
    z-index: 3;
    top: 9px;
    bottom: 9px;
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-marker {
    position: absolute;
    z-index: 4;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    color: var(--text-gray);
    font-size: 0.76rem;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend b {
    color: var(--text-dark);
    font-weight: 650;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend i {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: #94a3b8;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend i.is-actual {
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend i.is-plan {
    background: #2563eb;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend i.is-option {
    background: #f97316;
}

.page[data-page-id="reports"] .reports-dashboard-trajectory-legend i.is-projected {
    background: #0f766e;
}

.page[data-page-id="reports"] .reports-dashboard-evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 1.2rem;
    padding-top: 1.15rem;
}

.page[data-page-id="reports"] .reports-dashboard-evidence {
    min-width: 0;
}

.page[data-page-id="reports"] .reports-dashboard-evidence--domains {
    padding-left: 1.2rem;
    border-left: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-dashboard-evidence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.page[data-page-id="reports"] .reports-dashboard-evidence-head h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.92rem;
}

.page[data-page-id="reports"] .reports-dashboard-evidence-head p {
    margin: 0.22rem 0 0;
    color: var(--text-gray);
    font-size: 0.76rem;
    line-height: 1.4;
}

.page[data-page-id="reports"] .reports-dashboard-evidence-head > strong {
    flex: 0 0 auto;
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 650;
}

.page[data-page-id="reports"] .reports-dashboard-evidence .reports-dashboard-quarter-grid {
    min-height: 164px;
}

.page[data-page-id="reports"] .reports-dashboard-evidence .reports-dashboard-quarter-bars {
    height: 96px;
    border-radius: 12px;
}

.page[data-page-id="reports"] .reports-dashboard-quarter-values {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: var(--text-gray);
    font-size: 0.68rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.page[data-page-id="reports"] .reports-dashboard-quarter-values strong {
    color: var(--text-dark);
    font-weight: 650;
}

.page[data-page-id="reports"] .reports-dashboard-domain-list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.page[data-page-id="reports"] .reports-dashboard-domain-row {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.page[data-page-id="reports"] .reports-dashboard-domain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    color: var(--text-gray);
    font-size: 0.75rem;
}

.page[data-page-id="reports"] .reports-dashboard-domain-head > span {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-dashboard-domain-head i {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-right: 0.35rem;
    border-radius: 2px;
}

.page[data-page-id="reports"] .reports-dashboard-domain-head strong {
    flex: 0 0 auto;
    color: var(--text-dark);
    font-size: 0.74rem;
}

.page[data-page-id="reports"] .reports-dashboard-domain-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

.page[data-page-id="reports"] .reports-dashboard-domain-track > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

.page[data-page-id="reports"] .reports-dashboard-domain-track > .is-plan {
    background: rgba(37, 99, 235, 0.3);
}

.page[data-page-id="reports"] .reports-dashboard-domain-track > .is-option {
    background: rgba(249, 115, 22, 0.64);
}

.page[data-page-id="reports"] .reports-dashboard-domain-track > .is-actual {
    top: 3px;
    bottom: 3px;
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-pulse-empty {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 0;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-pulse-empty strong {
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-domain-empty {
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

.page[data-page-id="reports"] .reports-dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reports"] .reports-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.page[data-page-id="reports"] .reports-dashboard-panel {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    padding: 1rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-dashboard-panel--budget-runway {
    width: 100%;
}

.page[data-page-id="reports"] .reports-dashboard-panel--attention {
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-dashboard-rail.reports-dashboard-panel--attention > .reports-dashboard-panel-head {
    padding: 1.15rem 1rem 0.85rem;
}

.page[data-page-id="reports"] .reports-dashboard-rail .reports-attention-list {
    border-top: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-dashboard-rail .reports-attention-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.7rem;
}

.page[data-page-id="reports"] .reports-dashboard-rail .reports-attention-row-impact {
    font-size: 0.86rem;
}

.page[data-page-id="reports"] .reports-dashboard-rail .reports-attention-row .btn {
    justify-self: start;
}

@media (max-width: 1120px) {
    .page[data-page-id="reports"] .reports-dashboard-control-surface {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-dashboard-rail {
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .page[data-page-id="reports"] .reports-dashboard-rail .reports-attention-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }
}

@media (max-width: 760px) {
    .page[data-page-id="reports"] .reports-dashboard-primary-head,
    .page[data-page-id="reports"] .reports-dashboard-evidence-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .page[data-page-id="reports"] .reports-dashboard-trajectory,
    .page[data-page-id="reports"] .reports-dashboard-evidence-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-dashboard-evidence--domains {
        padding-top: 1rem;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .page[data-page-id="reports"] .reports-dashboard-rail .reports-attention-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: flex-start;
    }
}

.page[data-page-id="reports"] .reports-dashboard-panel--attention > .reports-dashboard-panel-head {
    padding: 1rem 1rem 0;
}

.page[data-page-id="reports"] .reports-dashboard-panel--attention.is-clear > .reports-dashboard-panel-head {
    display: none;
}

.page[data-page-id="reports"] .reports-dashboard-panel--attention.is-clear .reports-attention-clear {
    padding: 0.85rem 1rem;
    border-top: 0;
}

.page[data-page-id="reports"] .reports-attention-list {
    border-top: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-attention-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-attention-row:last-child {
    border-bottom: 0;
}

.page[data-page-id="reports"] .reports-attention-row.is-urgent {
    box-shadow: inset 3px 0 0 #d97706;
}

.page[data-page-id="reports"] .reports-attention-row.is-unavailable {
    box-shadow: inset 3px 0 0 #94a3b8;
}

.page[data-page-id="reports"] .reports-attention-row-title {
    color: var(--text-dark);
    font-weight: 700;
}

.page[data-page-id="reports"] .reports-attention-row-detail {
    margin-top: 0.2rem;
    color: var(--text-gray);
    font-size: 0.84rem;
}

.page[data-page-id="reports"] .reports-attention-row-impact {
    color: var(--text-dark);
    font-weight: 650;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-attention-clear {
    padding: 0.95rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-worklist-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.8rem;
    color: var(--text-gray);
    font-size: 0.82rem;
}

.page[data-page-id="reports"] .reports-worklist-context strong {
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-worklist-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-worklist-table {
    width: 100%;
    border-collapse: collapse;
}

.page[data-page-id="reports"] .reports-worklist-table th,
.page[data-page-id="reports"] .reports-worklist-table td {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}

.page[data-page-id="reports"] .reports-worklist-table th {
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page[data-page-id="reports"] .reports-worklist-table tbody tr:last-child td {
    border-bottom: 0;
}

.page[data-page-id="reports"] .reports-worklist-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.page[data-page-id="reports"] .reports-worklist-issue {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.1);
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 650;
}

.page[data-page-id="reports"] .reports-worklist-issue.is-balance {
    background: rgba(71, 85, 105, 0.1);
    color: #475569;
}

.page[data-page-id="reports"] .reports-worklist-impact {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.page[data-page-id="reports"] .reports-worklist-action {
    width: 1%;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-worklist-state {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-worklist-state strong {
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-worklist-state .btn {
    margin-left: auto;
}

.page[data-page-id="reports"] .reports-worklist-more {
    margin-top: 0.65rem;
}

.page[data-page-id="reports"] .reports-reimbursements-context {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-gray);
    font-size: 0.82rem;
}

.page[data-page-id="reports"] .reports-reimbursements-context strong {
    color: var(--text-dark);
    font-size: 1rem;
}

.page[data-page-id="reports"] .reports-dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.page[data-page-id="reports"] .reports-dashboard-panel-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-card-body-title {
    margin: 0 0 0.85rem;
}

.page[data-page-id="reports"] .reports-dashboard-panel-copy {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-gray);
    max-width: 64ch;
}

.page[data-page-id="reports"] .reports-dashboard-signal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-dashboard-signal {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    padding: 0.9rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-dashboard-signal-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-signal-value {
    margin-top: 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-meter {
    position: relative;
    height: 8px;
    margin-top: 0.8rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-dashboard-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: #94a3b8;
}

.page[data-page-id="reports"] .reports-dashboard-meter-fill.is-positive {
    background: #10b981;
}

.page[data-page-id="reports"] .reports-dashboard-meter-fill.is-negative {
    background: #f97316;
}

.page[data-page-id="reports"] .reports-dashboard-meter-fill.is-neutral {
    background: #2563eb;
}

.page[data-page-id="reports"] .reports-dashboard-signal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.page[data-page-id="reports"] .reports-dashboard-summary-chip {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    padding: 0.75rem 0.85rem;
}

.page[data-page-id="reports"] .reports-dashboard-summary-chip span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-summary-chip strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-summary-chip .reports-budget-period-subnote {
    margin-top: -0.08rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.92);
}

.page[data-page-id="reports"] .reports-dashboard-overview-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-overview-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-overview-kpi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.96);
}

.page[data-page-id="reports"] .reports-dashboard-overview-card--budget,
.page[data-page-id="reports"] .reports-dashboard-overview-card--risk {
    grid-column: span 2;
}

.page[data-page-id="reports"] .reports-dashboard-overview-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-card-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-overview-card-copy {
    margin: 0.28rem 0 0;
    font-size: 0.82rem;
    line-height: 1.42;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-overview-card-value {
    flex: 0 0 auto;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-overview-progress {
    position: relative;
    display: flex;
    height: 16px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.92);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-dashboard-overview-progress.is-compact {
    height: 12px;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment {
    height: 100%;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-actual,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-actual {
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-remaining,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-remaining {
    background: rgba(37, 99, 235, 0.26);
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-projected,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-projected {
    background: #2563eb;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-positive,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-positive {
    background: #10b981;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-neutral,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-neutral {
    background: #2563eb;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-negative,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-negative {
    background: #f97316;
}

.page[data-page-id="reports"] .reports-dashboard-overview-segment.is-muted,
.page[data-page-id="reports"] .reports-dashboard-overview-dot.is-muted {
    background: rgba(148, 163, 184, 0.56);
}

.page[data-page-id="reports"] .reports-dashboard-overview-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.page[data-page-id="reports"] .reports-dashboard-overview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    font-size: 0.79rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-overview-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.page[data-page-id="reports"] .reports-dashboard-quarter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 0.7rem;
    align-items: end;
    min-height: 190px;
}

.page[data-page-id="reports"] .reports-dashboard-quarter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-dashboard-quarter-bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3rem;
    height: 120px;
    padding: 0 0.3rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92) 0%, rgba(226, 232, 240, 0.62) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.page[data-page-id="reports"] .reports-dashboard-quarter-bar {
    width: 18px;
    border-radius: 999px 999px 0 0;
}

.page[data-page-id="reports"] .reports-dashboard-quarter-bar.is-planned {
    background: rgba(37, 99, 235, 0.22);
}

.page[data-page-id="reports"] .reports-dashboard-quarter-bar.is-actual {
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-quarter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-overview-statline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.65rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-statline > span {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.72rem 0.8rem;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page[data-page-id="reports"] .reports-dashboard-overview-statline > span > span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-overview-statline strong,
.page[data-page-id="reports"] .reports-dashboard-overview-meter-label strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-overview-meter-block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-dashboard-overview-meter-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-payout-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.page[data-page-id="reports"] .reports-dashboard-payout-row {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.page[data-page-id="reports"] .reports-dashboard-payout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-payout-name,
.page[data-page-id="reports"] .reports-dashboard-payout-value {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.page[data-page-id="reports"] .reports-dashboard-payout-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-payout-value {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-dashboard-payout-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-dashboard-payout-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.72) 0%, rgba(14, 165, 233, 0.92) 100%);
}

@media (max-width: 768px) {
    .page[data-page-id="reports"] .reports-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-dashboard-overview-card--budget,
    .page[data-page-id="reports"] .reports-dashboard-overview-card--risk {
        grid-column: auto;
    }

    .page[data-page-id="reports"] .reports-dashboard-overview-card-head,
    .page[data-page-id="reports"] .reports-dashboard-overview-meter-label {
        flex-direction: column;
        align-items: flex-start;
    }
}

.page[data-page-id="reports"] .reports-dashboard-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 0.85rem;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-dashboard-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.page[data-page-id="reports"] .reports-dashboard-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
}

.page[data-page-id="reports"] .reports-dashboard-legend-dot.is-planned {
    background: rgba(37, 99, 235, 0.32);
}

.page[data-page-id="reports"] .reports-dashboard-legend-dot.is-actual {
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-legend-dot.is-labor {
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-dashboard-legend-dot.is-cost {
    background: #0f766e;
}

.page[data-page-id="reports"] .reports-budget-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.85rem;
    align-items: end;
    min-height: 260px;
}

.page[data-page-id="reports"] .reports-budget-column {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-budget-column-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-budget-column-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-track {
    position: relative;
    height: 210px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.55) 0%, rgba(241, 245, 249, 0.9) 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-budget-bar {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 18px 18px 0 0;
}

.page[data-page-id="reports"] .reports-budget-bar--planned {
    width: 60%;
    background: rgba(37, 99, 235, 0.2);
}

.page[data-page-id="reports"] .reports-budget-bar--actual {
    width: 32%;
    background: #0f172a;
    z-index: 1;
}

.page[data-page-id="reports"] .reports-budget-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-spotlight {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
    padding: 1rem;
}

.page[data-page-id="reports"] .reports-budget-spotlight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.page[data-page-id="reports"] .reports-budget-spotlight-head strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-spotlight-kicker {
    display: inline-flex;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-spotlight-track {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-budget-spotlight-track-shell,
.page[data-page-id="reports"] .reports-budget-spotlight-track-segment {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: inherit;
}

.page[data-page-id="reports"] .reports-budget-spotlight-track-shell {
    width: 100%;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.3) 0%, rgba(37, 99, 235, 0.16) 100%);
}

.page[data-page-id="reports"] .reports-budget-spotlight-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-budget-spotlight-value {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.page[data-page-id="reports"] .reports-budget-spotlight-value span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-spotlight-value strong {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-spotlight-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-gray);
    font-size: 0.84rem;
    line-height: 1.4;
}

.page[data-page-id="reports"] .reports-budget-spotlight-note.is-empty {
    background: rgba(249, 115, 22, 0.08);
    color: #9a3412;
}

.page[data-page-id="reports"] .reports-budget-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="reports"] .reports-budget-focus {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
}

.page[data-page-id="reports"] .reports-budget-focus-head {
    align-items: flex-end;
}

.page[data-page-id="reports"] .reports-dashboard-summary-row--focus {
    margin-top: -0.2rem;
}

.page[data-page-id="reports"] .reports-budget-focus-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.7rem;
}

.page[data-page-id="reports"] .reports-budget-focus-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 130px;
}

.page[data-page-id="reports"] .reports-budget-focus-control.is-hidden {
    display: none;
}

.page[data-page-id="reports"] .reports-budget-focus-control-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-focus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.96);
}

.page[data-page-id="reports"] .reports-budget-focus-toggle-btn {
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text-gray);
    padding: 0.52rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.page[data-page-id="reports"] .reports-budget-focus-toggle-btn.is-active {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.page[data-page-id="reports"] .reports-budget-focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
}

.page[data-page-id="reports"] .reports-budget-period-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: #fff;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-budget-period-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-budget-period-card-label {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-period-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-budget-period-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-period-row strong {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-period-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-budget-period-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
}

.page[data-page-id="reports"] .reports-budget-period-bar-segment,
.page[data-page-id="reports"] .reports-budget-spotlight-track-segment {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    height: 100%;
}

.page[data-page-id="reports"] .reports-budget-period-bar.is-planned > span {
    background: rgba(37, 99, 235, 0.28);
}

.page[data-page-id="reports"] .reports-budget-period-bar-segment.is-labor,
.page[data-page-id="reports"] .reports-budget-spotlight-track-segment.is-labor {
    background: #0f172a;
}

.page[data-page-id="reports"] .reports-budget-period-bar-segment.is-cost,
.page[data-page-id="reports"] .reports-budget-spotlight-track-segment.is-cost {
    background: #0f766e;
}

.page[data-page-id="reports"] .reports-budget-period-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.8rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-budget-period-note strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-budget-period-subnote {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-domain-section-head,
.page[data-page-id="reports"] .reports-domain-runway-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.page[data-page-id="reports"] .reports-domain-section-title,
.page[data-page-id="reports"] .reports-domain-runway-title,
.page[data-page-id="reports"] .reports-domain-view-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-domain-section-copy,
.page[data-page-id="reports"] .reports-domain-runway-copy {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-margin-formula {
    display: inline-flex;
    margin-top: 0.45rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
    font-size: 0.74rem;
    font-weight: 700;
}

.page[data-page-id="reports"] .reports-domain-runway {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding-top: 0.25rem;
}

.page[data-page-id="reports"] .reports-domain-runway-range {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.92);
    min-width: 0;
}

.page[data-page-id="reports"] .reports-domain-runway-range span,
.page[data-page-id="reports"] .reports-domain-runway-range small {
    color: var(--text-gray);
    font-size: 0.78rem;
}

.page[data-page-id="reports"] .reports-domain-runway-range strong {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-domain-runway-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.76rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-domain-runway-totals span {
    display: inline-flex;
    gap: 0.3rem;
}

.page[data-page-id="reports"] .reports-domain-runway-totals b {
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

.page[data-page-id="reports"] .reports-domain-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
}

.page[data-page-id="reports"] .reports-domain-filter {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-domain-filter-hint,
.page[data-page-id="reports"] .reports-domain-quarter-hint {
    color: var(--text-gray);
    font-size: 0.76rem;
    line-height: 1.35;
}

.page[data-page-id="reports"] .reports-domain-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.94);
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--text-gray);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.page[data-page-id="reports"] .reports-domain-legend-item:hover {
    border-color: rgba(15, 118, 110, 0.32);
    background: #fff;
    transform: translateY(-1px);
}

.page[data-page-id="reports"] .reports-domain-legend-item.is-active {
    border-color: rgba(15, 118, 110, 0.48);
    background: rgba(15, 118, 110, 0.08);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

.page[data-page-id="reports"] .reports-domain-legend-item strong {
    color: var(--text-dark);
    font-weight: 700;
}

.page[data-page-id="reports"] .reports-domain-legend-label {
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-domain-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.page[data-page-id="reports"] .reports-domain-legend-swatch.is-all {
    background: conic-gradient(#2563eb 0 33%, #0f766e 33% 66%, #ea580c 66% 100%);
}

.page[data-page-id="reports"] .reports-domain-view {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.page[data-page-id="reports"] .reports-domain-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.page[data-page-id="reports"] .reports-domain-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-domain-quarter-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-domain-period-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.96);
}

.page[data-page-id="reports"] .reports-domain-period-top {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.page[data-page-id="reports"] .reports-domain-period-card--quarter .reports-domain-period-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-domain-period-card--quarter .reports-domain-period-top > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-domain-quarter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0.32rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.94);
    color: var(--text-gray);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.page[data-page-id="reports"] .reports-domain-quarter-toggle:hover,
.page[data-page-id="reports"] .reports-domain-quarter-toggle.is-expanded {
    border-color: rgba(15, 118, 110, 0.38);
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
}

.page[data-page-id="reports"] .reports-domain-quarter-toggle-icon {
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.page[data-page-id="reports"] .reports-domain-quarter-toggle.is-expanded .reports-domain-quarter-toggle-icon {
    transform: rotate(180deg);
}

.page[data-page-id="reports"] .reports-domain-period-top strong {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-domain-period-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-domain-stack {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
}

.page[data-page-id="reports"] .reports-domain-stack.is-empty {
    min-height: 44px;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 0.6rem;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.92);
    color: var(--text-gray);
    font-size: 0.76rem;
    line-height: 1.35;
    text-align: center;
}

.page[data-page-id="reports"] .reports-domain-stack-segment {
    display: block;
    height: 100%;
}

.page[data-page-id="reports"] .reports-domain-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.page[data-page-id="reports"] .reports-domain-values {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.page[data-page-id="reports"] .reports-domain-values-head,
.page[data-page-id="reports"] .reports-domain-values-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.5fr) repeat(4, minmax(68px, 0.8fr));
    gap: 0.55rem;
    align-items: center;
}

.page[data-page-id="reports"] .reports-domain-values-head {
    padding: 0.5rem 0.1rem 0.4rem;
    color: var(--text-gray);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page[data-page-id="reports"] .reports-domain-values-head span:not(:first-child),
.page[data-page-id="reports"] .reports-domain-values-row > span:not(.reports-domain-values-name),
.page[data-page-id="reports"] .reports-domain-values-row > strong {
    text-align: right;
}

.page[data-page-id="reports"] .reports-domain-values-row {
    min-height: 38px;
    padding: 0.45rem 0.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--text-dark);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.page[data-page-id="reports"] .reports-domain-values-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-weight: 600;
}

.page[data-page-id="reports"] .reports-domain-values-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-domain-values-empty {
    padding: 0.75rem;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    color: var(--text-gray);
    font-size: 0.78rem;
    text-align: center;
}

.page[data-page-id="reports"] .reports-domain-quarter-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.2s ease, opacity 0.16s ease;
}

.page[data-page-id="reports"] .reports-domain-quarter-details.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
}

.page[data-page-id="reports"] .reports-domain-quarter-details-inner {
    min-height: 0;
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-budget-period-row--margin {
    padding-top: 0.45rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.page[data-page-id="reports"] .reports-domain-margin.is-positive {
    color: #047857;
}

.page[data-page-id="reports"] .reports-domain-margin.is-negative {
    color: #b91c1c;
}

.page[data-page-id="reports"] .reports-domain-margin.is-neutral {
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .page[data-page-id="reports"] .reports-budget-focus-head {
        align-items: flex-start;
    }

    .page[data-page-id="reports"] .reports-budget-focus-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .page[data-page-id="reports"] .reports-budget-focus-control {
        min-width: min(180px, 100%);
    }

    .page[data-page-id="reports"] .reports-domain-section-head,
    .page[data-page-id="reports"] .reports-domain-runway-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .page[data-page-id="reports"] .reports-domain-year-grid,
    .page[data-page-id="reports"] .reports-domain-quarter-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .page[data-page-id="reports"] .reports-domain-values-head {
        display: none;
    }

    .page[data-page-id="reports"] .reports-domain-values-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.4rem 0.8rem;
        padding: 0.65rem 0.1rem;
    }

    .page[data-page-id="reports"] .reports-domain-values-name {
        grid-column: 1 / -1;
    }

    .page[data-page-id="reports"] .reports-domain-values-row > span:not(.reports-domain-values-name),
    .page[data-page-id="reports"] .reports-domain-values-row > strong {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        text-align: right;
    }

    .page[data-page-id="reports"] .reports-domain-values-row > [data-label]::before {
        content: attr(data-label);
        color: var(--text-gray);
        font-weight: 400;
    }
}

.page[data-page-id="reports"] .reports-balance-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="reports"] .reports-balance-lane {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    padding: 0.9rem;
    min-width: 0;
}

.page[data-page-id="reports"] .reports-balance-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-balance-lane-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.page[data-page-id="reports"] .reports-balance-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.page[data-page-id="reports"] .reports-balance-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.82rem;
}

.page[data-page-id="reports"] .reports-balance-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-balance-item-value {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-balance-bar,
.page[data-page-id="reports"] .reports-reimbursement-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.page[data-page-id="reports"] .reports-balance-bar-fill,
.page[data-page-id="reports"] .reports-reimbursement-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
}

.page[data-page-id="reports"] .reports-balance-bar-fill.is-positive {
    background: #10b981;
}

.page[data-page-id="reports"] .reports-balance-bar-fill.is-negative {
    background: #f97316;
}

.page[data-page-id="reports"] .reports-balance-empty {
    font-size: 0.82rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-reimbursements-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page[data-page-id="reports"] .reports-reimbursement-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-reimbursement-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.84rem;
}

.page[data-page-id="reports"] .reports-reimbursement-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-reimbursement-amount {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-reimbursement-bar-fill {
    background: #2563eb;
}

.page[data-page-id="reports"] .reports-reimbursement-meta {
    display: flex;
    justify-content: flex-start;
}

.page[data-page-id="reports"] .reports-inline-note {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-table-view-controls {
    margin: 0.75rem 0;
}

.page[data-page-id="reports"] .reports-table-view-details {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: #fff;
}

.page[data-page-id="reports"] .reports-table-view-details > summary {
    cursor: pointer;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-gray);
    list-style: none;
}

.page[data-page-id="reports"] .reports-table-view-details > summary::-webkit-details-marker {
    display: none;
}

.page[data-page-id="reports"] .reports-table-view-details[open] > summary {
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="reports"] .reports-table-view-body {
    padding: 0.65rem 0.7rem 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.page[data-page-id="reports"] .reports-table-view-heading {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
    margin-bottom: 0.35rem;
}

.page[data-page-id="reports"] .reports-table-view-columns-grid {
    display: grid;
    gap: 0.35rem 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.page[data-page-id="reports"] .reports-table-view-column {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-table-view-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.page[data-page-id="reports"] .reports-table-view-row .form-input {
    min-width: 180px;
}

.page[data-page-id="reports"] .reports-wide-scroll {
    position: relative;
    overflow-x: auto;
}

.page[data-page-id="reports"] .reports-wide-scroll .reports-wide-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.page[data-page-id="reports"] .reports-wide-scroll .reports-wide-table th,
.page[data-page-id="reports"] .reports-wide-scroll .reports-wide-table td {
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-wide-scroll .reports-sticky-col {
    position: sticky;
    background: #fff;
}

.page[data-page-id="reports"] .reports-wide-scroll .reports-wide-table thead .reports-sticky-col {
    background: var(--primary-silver);
}

.page[data-page-id="reports"] .reports-wide-scroll .reports-sticky-col-last::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 10px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.15), rgba(15, 23, 42, 0));
}

.page[data-page-id="reports"] .reports-wide-scroll .reports-virtual-spacer-cell {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.page[data-page-id="reports"] .reports-wide-scroll--mobile-hidden {
    display: none;
}

.page[data-page-id="reports"] .reports-wide-cards {
    margin-top: 0.6rem;
}

.page[data-page-id="reports"] .reports-wide-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.55rem;
}

.page[data-page-id="reports"] .reports-wide-card--note {
    color: var(--text-gray);
    font-size: 0.82rem;
}

.page[data-page-id="reports"] .reports-wide-card-title,
.page[data-page-id="reports"] .reports-wide-card-title-btn {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.page[data-page-id="reports"] .reports-wide-card-title-btn {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.page[data-page-id="reports"] .reports-wide-card-fields {
    display: grid;
    gap: 0.35rem;
}

.page[data-page-id="reports"] .reports-wide-card-field {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: baseline;
}

.page[data-page-id="reports"] .reports-wide-card-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-wide-card-field-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
}

.page[data-page-id="reports"] .reports-visual-shell {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.page[data-page-id="reports"] .reports-visual-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .reports-visual-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.page[data-page-id="reports"] .reports-visual-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.page[data-page-id="reports"] .reports-visual-row.is-focused .reports-visual-row-main {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22);
}

.page[data-page-id="reports"] .reports-visual-row-main {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    padding: 0.45rem 0.55rem;
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, 2fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.page[data-page-id="reports"] .reports-visual-row-label {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page[data-page-id="reports"] .reports-visual-row-track {
    position: relative;
    width: 100%;
    height: 11px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--primary-silver);
}

.page[data-page-id="reports"] .reports-visual-row-fill {
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    display: flex;
    min-width: 4px;
}

.page[data-page-id="reports"] .reports-visual-segment {
    display: inline-block;
    height: 100%;
}

.page[data-page-id="reports"] .reports-visual-row-value {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-visual-row-meta {
    font-size: 0.72rem;
    color: var(--text-gray);
    white-space: nowrap;
}

.page[data-page-id="reports"] .reports-visual-row-action {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-gray);
    border-radius: 8px;
    font-size: 0.72rem;
    padding: 0.34rem 0.5rem;
    cursor: pointer;
}

.page[data-page-id="reports"] .reports-visual-row-action:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.page[data-page-id="reports"] .reports-visual-pareto {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.6rem 0.7rem 0.55rem;
    background: linear-gradient(180deg, rgba(248,250,252,0.95), rgba(255,255,255,0.98));
}

.page[data-page-id="reports"] .reports-visual-pareto-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.page[data-page-id="reports"] .reports-visual-pareto-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
    margin-bottom: 0.12rem;
}

.page[data-page-id="reports"] .reports-visual-pareto-summary {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--text-dark);
}

.page[data-page-id="reports"] .reports-visual-pareto-hint {
    font-size: 0.72rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.page[data-page-id="reports"] .reports-visual-pareto-note {
    font-size: 0.7rem;
    color: var(--text-gray);
    margin-bottom: 0.32rem;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed var(--border-color);
}

.page[data-page-id="reports"] .reports-visual-pareto-legend {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.page[data-page-id="reports"] .reports-visual-pareto-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-gray);
}

.page[data-page-id="reports"] .reports-visual-pareto-legend-swatch {
    display: inline-block;
    border-radius: 999px;
}

.page[data-page-id="reports"] .reports-visual-pareto-legend-swatch.bars {
    width: 14px;
    height: 7px;
    background: rgba(125, 211, 252, 0.95);
    border: 1px solid rgba(14, 116, 144, 0.3);
}

.page[data-page-id="reports"] .reports-visual-pareto-legend-swatch.line {
    width: 15px;
    height: 0;
    border-top: 2px solid rgba(37, 99, 235, 0.9);
    border-radius: 0;
}

.page[data-page-id="reports"] .reports-visual-pareto svg {
    width: 100%;
    height: 160px;
    display: block;
}

.page[data-page-id="reports"] .reports-visual-pareto-grid {
    stroke: rgba(148, 163, 184, 0.38);
    stroke-width: 1;
}

.page[data-page-id="reports"] .reports-visual-pareto-grid.is-threshold {
    stroke: rgba(217, 119, 6, 0.85);
    stroke-dasharray: 4 3;
}

.page[data-page-id="reports"] .reports-visual-pareto-grid-label {
    fill: var(--text-gray);
    font-size: 9px;
}

.page[data-page-id="reports"] .reports-visual-pareto-bar {
    fill: rgba(125, 211, 252, 0.8);
    stroke: rgba(14, 116, 144, 0.2);
    stroke-width: 0.6;
}

.page[data-page-id="reports"] .reports-visual-pareto-area {
    fill: rgba(37, 99, 235, 0.14);
}

.page[data-page-id="reports"] .reports-visual-pareto-line {
    fill: none;
    stroke: rgba(37, 99, 235, 0.9);
    stroke-width: 2.2;
}

.page[data-page-id="reports"] .reports-visual-pareto-point {
    fill: rgba(30, 64, 175, 1);
}

.page[data-page-id="reports"] .reports-visual-pareto-marker {
    stroke: rgba(217, 119, 6, 0.85);
    stroke-dasharray: 4 3;
    stroke-width: 1.4;
}

.page[data-page-id="reports"] .reports-visual-pareto-marker-label {
    font-size: 9px;
    fill: rgba(146, 64, 14, 0.95);
    font-weight: 600;
}

.page[data-page-id="reports"] .reports-visual-pareto-xlabels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-gray);
    margin-top: 0.12rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    transition: all 0.2s ease;
    position: relative;
    display: block; /* ensure vertical stacking to avoid label overlap */
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stat-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-icon {
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.blue {
    background: rgba(0, 188, 212, 0.1);
}

.stat-icon.green {
    background: rgba(76, 175, 80, 0.1);
}

.stat-icon.orange {
    background: rgba(255, 152, 0, 0.1);
}

.stat-icon.red {
    background: rgba(244, 67, 54, 0.1);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1;
}

/* Align numeric values to the right for better readability */
.stat-card .stat-value { text-align: right; }

.stat-change {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.stat-change.positive {
    color: var(--success-color);
}

.stat-change.negative {
    color: var(--danger-color);
}

/* Prevent overflow in stats widgets */
.stat-header { min-width: 0; }
.stat-title, .stat-change { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Allow horizontal scrolling for wide S-curve SVGs */
#projectSCurve { overflow-x: auto; }

/* Project Evaluation report */
.project-evaluation-actions .btn {
    white-space: nowrap;
}
.evaluation-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1rem;
}
.evaluation-meta-line { font-size: 0.9rem; }
.evaluation-meta-line.muted { color: var(--text-gray); }
.evaluation-section { margin-bottom: 1.5rem; }
.evaluation-section-title { font-size: 1rem; margin-bottom: 0.75rem; }
.evaluation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.evaluation-summary-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
}
.evaluation-summary-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-gray);
    letter-spacing: 0.04em;
}
.evaluation-summary-value {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 0.3rem;
}
.evaluation-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}
.evaluation-table-wrap > .tabulator.evaluation-table {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
}
.evaluation-table-wrap--wide { max-width: 100%; }
.evaluation-table { min-width: 980px; }
.evaluation-table th,
.evaluation-table td { white-space: nowrap; }
.evaluation-cell-num { text-align: right; }
.evaluation-cell-year { font-weight: 600; }
.evaluation-total-row {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 700;
}
.evaluation-table.tabulator .tabulator-calcs-holder,
#timeAnalysisTabulator .tabulator-calcs-holder,
#utilizationTabulator .tabulator-calcs-holder,
#zeitkontoReportTabulator .tabulator-calcs-holder {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 700;
}
.evaluation-chart {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}
.evaluation-overview-visuals {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) repeat(2, minmax(220px, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.9rem;
    align-items: stretch;
}
.evaluation-overview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    overflow: hidden;
}
.evaluation-overview-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.25));
}
.evaluation-overview-card--financial {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(255, 255, 255, 1) 42%),
        #fff;
}
.evaluation-overview-card--collection {
    background:
        radial-gradient(circle at top center, rgba(37, 99, 235, 0.08), transparent 58%),
        #fff;
}
.evaluation-overview-card--hours {
    background:
        radial-gradient(circle at top center, rgba(22, 163, 74, 0.08), transparent 58%),
        #fff;
}
.evaluation-overview-card--collection::before {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.3));
}
.evaluation-overview-card--hours::before {
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.95), rgba(34, 197, 94, 0.28));
}
.evaluation-overview-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.evaluation-overview-card--financial .evaluation-overview-card-head {
    flex-direction: column;
    gap: 0.65rem;
}
.evaluation-overview-card-subtitle {
    margin-top: 0.18rem;
    max-width: 28ch;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-gray);
}
.evaluation-overview-card--financial .evaluation-overview-card-subtitle {
    max-width: 34ch;
}
.evaluation-overview-callout {
    margin-top: 0.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #166534;
}
.evaluation-overview-callout.is-negative {
    color: #b91c1c;
}
.evaluation-overview-caption {
    margin-top: 0.18rem;
    font-size: 0.78rem;
    color: var(--text-gray);
}
.evaluation-overview-metric-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}
.evaluation-overview-card--financial .evaluation-overview-metric-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
}
.evaluation-overview-chip {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 110px;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
}
.evaluation-overview-card--financial .evaluation-overview-chip {
    min-width: 0;
}
.evaluation-overview-chip-label {
    font-size: 0.68rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.evaluation-overview-chip-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
}
.evaluation-overview-chip-value.is-negative {
    color: #b91c1c;
}
.evaluation-overview-bars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.evaluation-overview-bar-row {
    display: grid;
    grid-template-columns: minmax(92px, auto) 1fr minmax(92px, auto);
    gap: 0.55rem;
    align-items: center;
}
.evaluation-overview-bar-label,
.evaluation-overview-bar-value {
    font-size: 0.78rem;
    color: var(--text-gray);
    white-space: nowrap;
}
.evaluation-overview-bar-label {
    font-weight: 500;
}
.evaluation-overview-bar-value {
    text-align: right;
}
.evaluation-overview-bar-track {
    height: 11px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.08);
}
.evaluation-overview-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.12);
}
.evaluation-overview-donut-wrap {
    display: flex;
    justify-content: center;
}
.evaluation-overview-donut {
    position: relative;
    width: 132px;
    height: 132px;
}
.evaluation-overview-donut svg {
    display: block;
    width: 100%;
    height: 100%;
}
.evaluation-overview-donut svg circle {
    stroke-linecap: butt;
}
.evaluation-overview-donut-track {
    stroke: rgba(15, 23, 42, 0.08);
}
.evaluation-overview-donut-center {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.evaluation-overview-donut-value {
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-dark);
}
.evaluation-overview-donut-label {
    margin-top: 0.15rem;
    font-size: 0.64rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.evaluation-overview-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.evaluation-overview-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.evaluation-overview-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-gray);
}
.evaluation-overview-metric-value {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}
.evaluation-overview-swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.evaluation-year-focus {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.evaluation-year-focus-label {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.evaluation-year-chip {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--text-gray);
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
.evaluation-year-chip:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}
.evaluation-year-chip.is-active {
    border-color: var(--primary-cyan);
    background: rgba(37, 99, 235, 0.1);
    color: var(--text-dark);
}
.evaluation-chart-shell {
    position: relative;
    padding: 0.4rem 0 0.25rem 3.25rem;
}
.evaluation-chart-grid {
    position: absolute;
    left: 3.25rem;
    right: 0;
    top: 0.4rem;
    bottom: 1.85rem;
    pointer-events: none;
}
.evaluation-chart-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(100, 116, 139, 0.4);
}
.evaluation-chart-grid-label {
    position: absolute;
    left: -3.15rem;
    top: -0.55rem;
    font-size: 0.68rem;
    color: var(--text-gray);
    white-space: nowrap;
}
.evaluation-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    overflow-x: auto;
    padding: 0 0 0.6rem 0;
    min-height: 220px;
    position: relative;
    z-index: 1;
}
.evaluation-chart-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 58px;
}
.evaluation-chart-group--interactive {
    cursor: pointer;
}
.evaluation-chart-group.is-focused .evaluation-chart-columns {
    transform: translateY(-2px);
    transition: transform 120ms ease;
}
.evaluation-chart-group.is-dimmed .evaluation-bar {
    filter: grayscale(0.35);
    opacity: 0.45;
}
.evaluation-chart-columns {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 180px;
}
.evaluation-bar {
    width: 13px;
    border-radius: 4px 4px 0 0;
    background: #3b82f6;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    transition: transform 120ms ease, filter 120ms ease;
}
.evaluation-bar:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.evaluation-bar--budget { background: #111827; }
.evaluation-bar--cost { background: #ef4444; }
.evaluation-bar--income { background: #2563eb; }
.evaluation-chart-label {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-align: center;
}
.evaluation-chart-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-gray);
}
.evaluation-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.evaluation-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #3b82f6;
}
.evaluation-legend-dot.evaluation-bar--budget { background: #111827; }
.evaluation-legend-dot.evaluation-bar--cost { background: #ef4444; }
.evaluation-legend-dot.evaluation-bar--income { background: #2563eb; }
.evaluation-chart-focus-hint {
    margin-top: 0.65rem;
    font-size: 0.75rem;
    color: var(--text-gray);
}
.evaluation-controls {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.evaluation-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.evaluation-nav {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
}
.evaluation-nav-heading {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.evaluation-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.evaluation-nav-button {
    appearance: none;
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text-dark);
    padding: 0.6rem 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.evaluation-nav-button:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(148, 163, 184, 0.4);
}
.evaluation-nav-button.is-active {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: inset 3px 0 0 var(--primary-cyan);
}
.evaluation-nav-button-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}
.evaluation-panel {
    min-width: 0;
}
.evaluation-workspace .evaluation-section {
    margin-bottom: 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    animation: evaluation-section-enter 160ms ease-out;
}
@keyframes evaluation-section-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.evaluation-hours-explorer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.evaluation-hours-explorer-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    flex: 1 1 720px;
}
.evaluation-hours-explorer-field {
    min-width: 0;
}
.evaluation-hours-explorer-field--keyword {
    grid-column: span 2;
}
.evaluation-hours-explorer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.evaluation-control-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.evaluation-control-label {
    font-size: 0.74rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 86px;
}
.evaluation-control-help {
    flex-basis: 100%;
    max-width: 680px;
    margin-left: calc(86px + 0.65rem);
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.35;
}
.evaluation-date-range-controls {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.evaluation-controls--project {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.evaluation-controls--project .evaluation-control-group {
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.98));
}
.evaluation-controls--project .evaluation-control-head {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.evaluation-controls--project .evaluation-control-label {
    min-width: 0;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}
.evaluation-controls--project .evaluation-control-help {
    flex-basis: auto;
    max-width: none;
    margin-left: 0;
    font-size: 0.72rem;
    line-height: 1.3;
}
.evaluation-controls--project .evaluation-date-range-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: end;
}
.evaluation-controls--project .evaluation-date-range-field {
    min-width: 0;
    gap: 0.18rem;
    font-size: 0.72rem;
}
.evaluation-controls--project .evaluation-control-apply {
    min-height: 38px;
    align-self: end;
}
.evaluation-controls--project .evaluation-inline-select {
    min-width: 0;
}
.evaluation-controls--project .evaluation-inline-toggle {
    margin: 0;
    min-height: 38px;
    align-items: center;
}
.evaluation-controls--project .evaluation-control-chips {
    gap: 0.35rem;
}
.evaluation-controls--project .evaluation-year-chip {
    padding: 0.18rem 0.55rem;
}
.evaluation-date-range-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 150px;
    font-size: 0.78rem;
    color: var(--text-gray);
}
.evaluation-control-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.evaluation-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.evaluation-section-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.evaluation-drill-header-note {
    margin: 0 0 0.55rem 0;
    font-size: 0.82rem;
    color: var(--text-gray);
}
.evaluation-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
}
.evaluation-kpi-rows,
.evaluation-margin-list,
.evaluation-mix-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.evaluation-kpi-row,
.evaluation-margin-row,
.evaluation-mix-row {
    display: grid;
    grid-template-columns: minmax(78px, auto) 1fr minmax(80px, auto);
    gap: 0.45rem;
    align-items: center;
}
.evaluation-kpi-label,
.evaluation-margin-label,
.evaluation-mix-label {
    font-size: 0.76rem;
    color: var(--text-gray);
    white-space: nowrap;
}
.evaluation-kpi-lines {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.evaluation-kpi-line {
    height: 6px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.evaluation-kpi-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.evaluation-kpi-fill--budget { background: #111827; }
.evaluation-kpi-fill--cost { background: #ef4444; }
.evaluation-kpi-fill--income { background: #2563eb; }
.evaluation-kpi-fill--invoiced { background: #0ea5e9; }
.evaluation-margin-line {
    height: 10px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.evaluation-margin-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.evaluation-margin-fill.is-positive { background: #16a34a; }
.evaluation-margin-fill.is-negative { background: #ef4444; }
.evaluation-margin-value,
.evaluation-mix-value {
    text-align: right;
    font-size: 0.76rem;
    color: var(--text-gray);
    white-space: nowrap;
}
.evaluation-mix-line {
    display: flex;
    min-width: 70px;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
}
.evaluation-mix-fill {
    display: block;
    height: 100%;
}
.evaluation-mix-fill--billable { background: #16a34a; }
.evaluation-mix-fill--nonbillable { background: #f97316; }

.evaluation-legend-dot.evaluation-kpi-fill--budget { background: #111827; }
.evaluation-legend-dot.evaluation-kpi-fill--cost { background: #ef4444; }
.evaluation-legend-dot.evaluation-kpi-fill--income { background: #2563eb; }
.evaluation-legend-dot.evaluation-kpi-fill--invoiced { background: #0ea5e9; }

#projectEvaluationExportModal .project-evaluation-export-modal {
    max-width: 760px;
    width: min(760px, 94vw);
}

#projectEvaluationExportModal .modal-body {
    background: var(--primary-silver);
}

#projectEvaluationExportModal .reports-export-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#projectEvaluationExportModal .project-evaluation-export-scope {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

#projectEvaluationExportModal .project-evaluation-export-scope-label {
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

#projectEvaluationExportModal .project-evaluation-export-project {
    font-weight: 600;
    color: var(--text-dark);
}

@media print {
    body.evaluation-print-view {
        background: #fff;
        color: #111827;
    }

    body.evaluation-print-view .print-title {
        font-size: 16pt;
        margin-bottom: 4mm;
        break-after: avoid;
        page-break-after: avoid;
    }

    body.evaluation-print-view .evaluation-meta {
        margin-bottom: 3mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.evaluation-print-view .evaluation-section {
        margin: 0 0 4mm 0;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.evaluation-print-view .evaluation-section--table,
    body.evaluation-print-view .evaluation-section--table .evaluation-table-wrap,
    body.evaluation-print-view .evaluation-section--table .evaluation-table tbody tr {
        break-inside: auto;
        page-break-inside: auto;
    }

    body.evaluation-print-view .evaluation-section--break-before {
        break-before: page;
        page-break-before: always;
    }

    body.evaluation-print-view .evaluation-section-title {
        font-size: 10pt;
        margin: 0 0 2mm 0;
        break-after: avoid;
        page-break-after: avoid;
    }

    body.evaluation-print-view .evaluation-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.5mm;
    }

    body.evaluation-print-view .evaluation-summary-item {
        border-radius: 0;
        border-color: #d1d5db;
        padding: 2mm;
    }

    body.evaluation-print-view .evaluation-summary-label {
        font-size: 7pt;
    }

    body.evaluation-print-view .evaluation-summary-value {
        font-size: 9pt;
        margin-top: 1mm;
    }

    body.evaluation-print-view .evaluation-table-wrap {
        overflow: visible;
        border-radius: 0;
        border-color: #d1d5db;
    }

    body.evaluation-print-view .evaluation-table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
        font-size: 8pt;
        line-height: 1.2;
    }

    body.evaluation-print-view .evaluation-table--compact-print {
        font-size: 7.4pt;
    }

    body.evaluation-print-view .evaluation-table th,
    body.evaluation-print-view .evaluation-table td {
        padding: 1.2mm 1.4mm;
    }

    body.evaluation-print-view .evaluation-table thead th {
        white-space: normal;
        vertical-align: bottom;
    }

    body.evaluation-print-view .evaluation-table tbody td {
        white-space: nowrap;
    }

    body.evaluation-print-view .evaluation-table .evaluation-cell-year {
        white-space: nowrap;
        width: 12mm;
    }

    body.evaluation-print-view .evaluation-total-row {
        background: #f1f5f9 !important;
    }

    body.evaluation-print-view .evaluation-year-focus,
    body.evaluation-print-view .evaluation-chart-focus-hint {
        display: none !important;
    }
    body.evaluation-print-view .evaluation-controls,
    body.evaluation-print-view .evaluation-section-actions,
    body.evaluation-print-view .evaluation-cell-num .btn {
        display: none !important;
    }

    body.evaluation-print-view .evaluation-chart {
        border-radius: 0;
        border-color: #d1d5db;
        padding: 3mm;
    }

    body.evaluation-print-view .evaluation-chart-shell {
        padding: 2mm 0 2mm 16mm;
    }

    body.evaluation-print-view .evaluation-chart-grid {
        left: 16mm;
        top: 2mm;
        bottom: 8mm;
    }

    body.evaluation-print-view .evaluation-chart-grid-line:nth-child(2),
    body.evaluation-print-view .evaluation-chart-grid-line:nth-child(4) {
        display: none;
    }

    body.evaluation-print-view .evaluation-chart-grid-label {
        left: -15mm;
        font-size: 7pt;
    }

    body.evaluation-print-view .evaluation-chart-bars {
        min-height: 120px;
        gap: 8px;
        overflow: visible;
        padding-bottom: 2mm;
    }

    body.evaluation-print-view .evaluation-chart-group {
        min-width: 34px;
    }

    body.evaluation-print-view .evaluation-chart-columns {
        height: 106px;
        gap: 3px;
    }

    body.evaluation-print-view .evaluation-bar {
        width: 8px;
        box-shadow: none;
        transform: none !important;
        filter: none !important;
    }

    body.evaluation-print-view .evaluation-bar--budget {
        background: #111 !important;
    }

    body.evaluation-print-view .evaluation-bar--cost {
        background: #525252 !important;
    }

    body.evaluation-print-view .evaluation-bar--income {
        background: #9ca3af !important;
    }

    body.evaluation-print-view .evaluation-chart-label {
        font-size: 7pt;
        max-width: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.evaluation-print-view .evaluation-chart-legend {
        margin-top: 2mm;
        font-size: 7.5pt;
        gap: 4mm;
    }
    body.evaluation-print-view .evaluation-overview-visuals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3mm;
        margin-bottom: 3mm;
    }
    body.evaluation-print-view .evaluation-overview-card--financial {
        grid-column: 1 / -1;
    }
    body.evaluation-print-view .evaluation-overview-card {
        gap: 2mm;
    }
    body.evaluation-print-view .evaluation-overview-card::before {
        height: 1.2mm;
    }
    body.evaluation-print-view .evaluation-overview-callout {
        font-size: 12pt;
    }
    body.evaluation-print-view .evaluation-overview-chip,
    body.evaluation-print-view .evaluation-overview-donut-center {
        box-shadow: none;
    }
    body.evaluation-print-view .evaluation-trend-grid {
        grid-template-columns: 1fr;
        gap: 2.5mm;
    }
    body.evaluation-print-view .evaluation-kpi-row,
    body.evaluation-print-view .evaluation-margin-row,
    body.evaluation-print-view .evaluation-mix-row {
        grid-template-columns: 24mm 1fr 20mm;
        gap: 1.2mm;
    }
}

@media (max-width: 1280px) {
    .evaluation-overview-visuals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .evaluation-overview-card--financial {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .evaluation-workspace {
        grid-template-columns: 1fr;
    }
    .evaluation-nav {
        position: static;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }
    .evaluation-nav-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }
    .evaluation-nav-button {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
    }
    .evaluation-overview-visuals {
        grid-template-columns: 1fr;
    }
    .evaluation-overview-card-head {
        flex-direction: column;
    }
    .evaluation-overview-card-subtitle {
        max-width: none;
    }
    .evaluation-overview-metric-stack {
        justify-content: flex-start;
    }
    .evaluation-overview-card--financial .evaluation-overview-metric-stack {
        grid-template-columns: 1fr;
    }
    .evaluation-overview-bar-row {
        grid-template-columns: minmax(82px, auto) 1fr;
    }
    .evaluation-overview-bar-value {
        grid-column: 2;
    }
    .evaluation-controls--project .evaluation-date-range-controls {
        grid-template-columns: 1fr;
    }
    .evaluation-controls--project .evaluation-control-apply {
        width: 100%;
    }
    .evaluation-hours-explorer-field--keyword {
        grid-column: span 1;
    }
    .evaluation-kpi-row,
    .evaluation-margin-row,
    .evaluation-mix-row {
        grid-template-columns: 1fr;
    }
    .evaluation-kpi-label,
    .evaluation-margin-label,
    .evaluation-mix-label {
        font-size: 0.72rem;
    }
    .evaluation-margin-value,
    .evaluation-mix-value {
        text-align: left;
    }
}

.distribution-meta { margin-bottom: 1rem; }
.distribution-meta-line { font-size: 0.9rem; }
.distribution-meta-line.muted { color: var(--text-gray); }
.distribution-empty-state {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.distribution-empty-state-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}
.distribution-empty-state p {
    margin: 0.35rem 0 0;
    max-width: 62ch;
    color: var(--text-gray);
    line-height: 1.55;
}
.distribution-section { margin-bottom: 1.5rem; }
.distribution-section-title { font-size: 1rem; margin-bottom: 0.75rem; }
.distribution-section-empty {
    padding: 0.95rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 12px;
    background: #fff;
    color: var(--text-gray);
}
.distribution-table-wrap { overflow-x: auto; }
.distribution-table { min-width: 980px; }
.distribution-table th,
.distribution-table td { white-space: nowrap; }
.distribution-cell-num { text-align: right; }
.distribution-cell-year { font-weight: 600; }
.distribution-total-row { font-weight: 700; background: #f8fafc; }
.distribution-chart { position: relative; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem; margin-top: 0.75rem; }
.distribution-chart-shell { position: relative; padding: 0.4rem 0 0.25rem 3.25rem; }
.distribution-chart-grid { position: absolute; left: 3.25rem; right: 0; top: 0.4rem; bottom: 2rem; pointer-events: none; }
.distribution-chart-grid-line { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(100, 116, 139, 0.35); }
.distribution-chart-grid-label { position: absolute; left: -3.15rem; top: -0.55rem; font-size: 0.68rem; color: var(--text-gray); white-space: nowrap; }
.distribution-chart-bars { display: flex; align-items: flex-end; gap: 14px; min-height: 220px; padding: 0 0 0.6rem 0; overflow-x: auto; position: relative; z-index: 1; }
.distribution-chart-group { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 56px; }
.distribution-chart-columns { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
.distribution-bar { width: 13px; border-radius: 4px 4px 0 0; background: #94a3b8; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); transition: transform 120ms ease, filter 120ms ease; }
.distribution-bar:hover { transform: translateY(-1px); filter: brightness(1.08); }
.distribution-bar--cost { background: #ef4444; }
.distribution-bar--revenue { background: #2563eb; }
.distribution-bar--expected { background: #111827; }
.distribution-bar--cashflow { background: #16a34a; }
.distribution-bar--invoiced { background: #2563eb; }
.distribution-bar--avg-cost { background: #f97316; }
.distribution-bar--effective-cost { background: #0f172a; }
.distribution-chart-label { font-size: 0.75rem; color: var(--text-gray); }
.distribution-chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-gray); }
.distribution-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.distribution-legend-dot { width: 10px; height: 10px; border-radius: 999px; background: #94a3b8; }
.distribution-legend-dot--line { background: #dc2626; }
.distribution-line { position: absolute; left: 3.25rem; right: 0; top: 0.4rem; bottom: 2rem; pointer-events: none; z-index: 2; }
.distribution-line polyline { fill: none; stroke: #dc2626; stroke-width: 2; }
.distribution-line circle { fill: #dc2626; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid { grid-template-columns: 1fr; }
    .page[data-page-id="costs"] .stats-grid { grid-template-columns: 1fr; }
    .stats-grid--two-col { grid-template-columns: 1fr; }

    .page[data-page-id="costs"] .costs-page-subtitle {
        font-size: 0.92rem;
    }

    .page[data-page-id="costs"] .costs-workspace-tabs-shell .card-body {
        padding: 0.85rem 0.85rem;
    }

    .page[data-page-id="costs"] .costs-tab-button {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
    }

    .page[data-page-id="costs"] .costs-filter-field--search {
        grid-column: span 1;
    }

    .page[data-page-id="reports"] .reports-controls-row {
        align-items: stretch;
    }

    .page[data-page-id="reports"] .reports-controls-row--primary {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .page[data-page-id="reports"] .reports-controls-row--primary > * {
        flex: 1 1 auto;
    }

    .page[data-page-id="reports"] .reports-controls-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .page[data-page-id="reports"] .reports-page-subtitle {
        font-size: 0.92rem;
    }

    .page[data-page-id="reports"] .reports-workspace-tabs-shell .card-body {
        padding: 0.85rem 0.85rem;
    }

    .page[data-page-id="reports"] .reports-tab-button {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
    }

    .distribution-empty-state {
        padding: 0.9rem 0.95rem;
    }

    .distribution-section-empty {
        padding: 0.85rem 0.9rem;
    }

    .page[data-page-id="reports"] .reports-grid--split {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-visual-row {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="reports"] .reports-visual-row-main {
        grid-template-columns: minmax(100px, 1fr) minmax(110px, 1.4fr) auto;
        grid-template-areas:
            "label value value"
            "bar bar meta";
        row-gap: 0.3rem;
    }

    .page[data-page-id="reports"] .reports-visual-row-label { grid-area: label; }
    .page[data-page-id="reports"] .reports-visual-row-track { grid-area: bar; }
    .page[data-page-id="reports"] .reports-visual-row-value { grid-area: value; justify-self: end; }
    .page[data-page-id="reports"] .reports-visual-row-meta { grid-area: meta; justify-self: end; }
    .page[data-page-id="reports"] .reports-visual-pareto-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .page[data-page-id="reports"] .reports-visual-pareto svg {
        height: 144px;
    }
    .page[data-page-id="reports"] .reports-table-view-row {
        flex-direction: column;
        align-items: stretch;
    }
    .page[data-page-id="reports"] .reports-table-view-row .form-input,
    .page[data-page-id="reports"] .reports-table-view-row .form-select,
    .page[data-page-id="reports"] .reports-table-view-row .btn {
        width: 100%;
    }
    
    .time-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-actions {
        flex-direction: column;
    }
    
    .quick-action-card {
        flex-direction: row;
        text-align: left;
        min-width: auto;
    }
    
    .quick-action-icon {
        margin-bottom: 0;
        margin-right: 1rem;
    }
}

/* Offers table layout and overflow control */
.table.offers-table { table-layout: fixed; min-width: 1720px; }
.offers-table th, .offers-table td { overflow: hidden; }
.offers-table .col-number { width: 140px; }
.offers-table .col-client { width: 280px; }
.offers-table .col-title { width: 420px; }
.offers-table .col-amount { width: 140px; text-align: right; }
.offers-table .col-created { width: 140px; }
.offers-table .col-valid { width: 140px; }
.offers-table .col-status { width: 120px; }
.offers-table .col-actions { width: 400px; margin-right: 20px; }
/* Keep action buttons on one line inside actions column */
.offers-table td.col-actions { white-space: nowrap; }
.offers-table td.col-actions > div { display: flex; flex-wrap: nowrap; gap: 0.25rem; }

.page[data-page-id="offers"] .tabulator {
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page[data-page-id="offers"] .tabulator .tabulator-header {
    background: var(--primary-silver);
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="offers"] .tabulator .tabulator-header .tabulator-col {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border-right: none;
    padding: 0.5rem 0.5rem;
    color: var(--text-dark);
}

.page[data-page-id="offers"] .tabulator .tabulator-tableholder {
    background: #fff;
    padding-right: 12px;
    box-sizing: content-box;
}

.page[data-page-id="offers"] .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.page[data-page-id="offers"] .tabulator .tabulator-row:hover {
    background: var(--hover-color);
}

.page[data-page-id="offers"] .tabulator .tabulator-cell {
    padding: 0.5rem 0.5rem;
    border-right: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.page[data-page-id="offers"] .tabulator .tabulator-footer {
    border-top: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem;
}

.page[data-page-id="offers"] .tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.page[data-page-id="offers"] .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: #fff;
}

.page[data-page-id="offers"] .tabulator .action-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    white-space: nowrap;
}

.page[data-page-id="offers"] .tabulator .action-buttons .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

@media (max-width: 1024px) {
  .offers-table .col-title { width: 300px; }
  .offers-table .col-client { width: 220px; }
}
@media (max-width: 768px) {
  .offers-table .col-title { width: 220px; }
  .offers-table .col-client { width: 180px; }
  .offers-table .col-actions { width: 270px; margin-right: 20px; }
}

/* Invoices Page Styles */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stats-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon.bg-info {
    background: var(--info-light);
    color: var(--info-color);
}

.stat-icon.bg-success {
    background: var(--success-light);
    color: var(--success-color);
}

.stat-icon.bg-warning {
    background: var(--warning-light);
    color: var(--warning-color);
}

.stat-icon.bg-danger {
    background: var(--danger-light);
    color: var(--danger-color);
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-gray);
    font-weight: 500;
}

/* Compact stats for Time Tracking: fit tiles in one row */
.stats-container.compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.stats-container.compact .stats-card {
    padding: 0.875rem;
}
.stats-container.compact .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
}
.stats-container.compact .stat-number {
    font-size: 1.35rem;
}
.stats-container.compact .stat-label {
    font-size: 0.78rem;
}

/* Invoices page: compact stats tiles */
.stats-grid.stats-grid--invoices {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stats-grid--invoices .stat-card {
    padding: 0.75rem 1rem;
    min-width: 0;
}

.stats-grid--invoices .stat-header {
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.stats-grid--invoices .stat-title {
    font-size: 0.75rem;
    white-space: normal;
    line-height: 1.2;
}

.stats-grid--invoices .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
    border-radius: 8px;
}

.stats-grid--invoices .stat-value {
    font-size: 1.35rem;
    margin-bottom: 0;
    text-align: left;
}

.financial-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.financial-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    text-align: center;
}

.financial-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.financial-card .amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

.filters-section {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.filters-row {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
}

.table-section {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.table-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.table-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.line-item {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.line-item:last-child {
    margin-bottom: 0;
}

.line-total {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
}

.totals-section {
    background: var(--gray-50);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.totals-row.total-row {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.form-section {
    margin-bottom: 2rem;
}

.form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section-header h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.line-items-container {
    margin-bottom: 1rem;
}

/* Invoices: modal polish */
.page[data-page-id="invoices"] #invoiceModal .modal-content {
    max-width: 1050px;
    width: min(1050px, 96vw);
}

.page[data-page-id="invoices"] #invoiceModal .invoice-modal-body,
.page[data-page-id="invoices"] #einvoiceDetailsModal .einvoice-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--primary-silver);
}

.page[data-page-id="invoices"] #invoiceModal form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="invoices"] #invoiceModal .invoice-modal-details {
    display: grid;
    gap: 1rem;
}

.page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
}

.page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--secondary {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    align-items: start;
}

.page[data-page-id="invoices"] #invoiceModal .form-section {
    margin-bottom: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page[data-page-id="invoices"] #invoiceModal .card {
    margin-bottom: 0;
}

.page[data-page-id="invoices"] #invoiceModal .line-items-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page[data-page-id="invoices"] #invoiceModal .line-item {
    margin-bottom: 0;
}

.page[data-page-id="invoices"] #invoiceModal .line-item .row {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) repeat(4, minmax(90px, 1fr)) minmax(120px, 1.1fr);
    gap: 0.75rem;
    align-items: end;
}

.page[data-page-id="invoices"] #invoiceModal .line-item .row > div {
    min-width: 0;
}

.page[data-page-id="invoices"] #einvoiceDetailsModal .modal-content {
    max-width: 900px;
    width: min(900px, 96vw);
}

.page[data-page-id="invoices"] #einvoiceDetailsBody {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Invoices: document modal */
#invoiceDocModal .invoice-doc-modal {
    max-width: 1100px;
    width: min(1100px, 96vw);
}

#invoiceDocModal .modal-body {
    background: var(--primary-silver);
}

#invoiceDocModal .invoice-doc-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#invoiceDocModal .invoice-doc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

#invoiceDocModal .invoice-doc-toolbar #invoiceDocTemplate {
    min-width: 240px;
}

#invoiceDocModal .invoice-doc-toolbar #invoiceDocFilename {
    min-width: 240px;
}

#invoiceDocModal .invoice-doc-spacer {
    flex: 1;
}

#invoiceDocModal .invoice-doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0.75rem;
}

#invoiceDocModal .invoice-doc-saved {
    margin: 0;
}

#invoiceDocModal .invoice-doc-saved .card-body {
    max-height: 360px;
    overflow: auto;
}

@media (max-width: 900px) {
    .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--secondary {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="invoices"] #invoiceModal .line-item .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="invoices"] #invoiceModal .line-item .row > div:last-child {
        grid-column: 1 / -1;
        justify-self: end;
    }

    #invoiceDocModal .invoice-doc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-container {
        grid-template-columns: 1fr;
    }
    
    .financial-overview {
        grid-template-columns: 1fr;
    }
    
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        min-width: auto;
    }
    
    .table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
}

/* Settings Page Styles */
.settings-container {
    max-width: 800px;
    margin: 0 auto;
}

.settings-container .card {
    margin-bottom: 2rem;
}

.form-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: 1px solid var(--border-color);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-cyan);
    border-color: var(--primary-cyan);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
/* Dashboard Project Card Clickable Style */
.project-card[data-project-id] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card[data-project-id]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Inline form (compact row for widgets) */
.inline-form .form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.inline-form .form-group {
    margin-bottom: 0;
    min-width: 160px;
}

/* Widget metrics under quick time entry */
.page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.9fr) minmax(150px, 1fr) minmax(130px, 0.9fr) minmax(96px, 0.7fr);
    gap: 0.7rem;
    align-items: end;
}

.page[data-page-id="dashboard"] #timeEntryWidgetForm .form-group,
.page[data-page-id="dashboard"] .dashboard-quick-entry-secondary > .form-group,
.page[data-page-id="dashboard"] .dashboard-quick-entry-interval-field {
    min-width: 0;
}

.page[data-page-id="dashboard"] #timeEntryWidgetForm .dashboard-project-search-wrap {
    min-width: 0 !important;
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-secondary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1.05fr) auto;
    gap: 0.7rem;
    align-items: end;
}

.page[data-page-id="dashboard"] #quickEntryIntervalFields {
    grid-column: 1 / -1;
    margin-top: 0 !important;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-flags {
    min-width: 0 !important;
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-flags .form-label {
    margin-bottom: 0.25rem;
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-flag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-flags .form-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    margin: 0 !important;
    white-space: nowrap;
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-submit {
    justify-self: end;
    align-self: end;
}

.page[data-page-id="dashboard"] .dashboard-quick-entry-submit .btn {
    min-width: 110px;
}

.widget-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}
.widget-metrics .metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: var(--primary-silver);
    border-radius: 8px;
    padding: 10px 12px;
}
.widget-metrics .metric-label {
    color: var(--text-gray);
    font-size: 0.85rem;
}
.widget-metrics .metric-value {
    font-weight: 700;
    color: var(--text-dark);
}

.page[data-page-id="dashboard"] .widget-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.page[data-page-id="dashboard"] .widget-metrics .metric {
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, #ffffff 100%);
}

/* Dashboard today entries (Quick Time Entry) */
.today-entries {
    margin-top: 0.5rem;
    display: grid;
    gap: 4px;
}
.today-entry-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: none;
    cursor: pointer;
}
.today-entry-row:hover {
    background: #ffffff;
    border-color: var(--primary-cyan);
}
.today-entry-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    font-variant-numeric: tabular-nums;
}
.today-entry-hours {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-dark);
}
.today-entry-range {
    font-size: 0.68rem;
    color: var(--text-gray);
}
.today-entry-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.today-entry-project {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.today-entry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.68rem;
    color: var(--text-gray);
}
.today-entry-chip {
    background: #e5f2ff;
    color: #1f3b57;
    border: 1px solid rgba(31, 59, 87, 0.2);
    border-radius: 999px;
    padding: 0 5px;
    font-weight: 600;
}
.today-entry-delete {
    padding: 2px 5px;
    line-height: 1;
}

.page[data-page-id="dashboard"] .today-entries {
    margin-top: 0.65rem;
    gap: 0.45rem;
}

.page[data-page-id="dashboard"] .today-entry-row {
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.22);
}

.page[data-page-id="dashboard"] .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0;
}

.page[data-page-id="dashboard"] .stats-grid .stat-card {
    grid-column: auto;
    min-height: 78px;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.page[data-page-id="dashboard"] .stats-grid .stat-card .tile-handle {
    top: 6px;
    right: 8px;
}

.page[data-page-id="dashboard"] .stats-grid .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.92rem;
    flex: 0 0 auto;
}

.page[data-page-id="dashboard"] .stats-grid .stat-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 auto;
}

.page[data-page-id="dashboard"] .stats-grid .stat-value {
    font-size: 1.7rem;
    line-height: 1.05;
    margin-bottom: 0;
    text-align: left;
}

.page[data-page-id="dashboard"] .stats-grid .stat-label {
    font-size: 0.72rem;
    line-height: 1.3;
}

.page[data-page-id="dashboard"] .project-grid {
    margin-top: 0;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="dashboard"] .project-card-header {
    padding: 1rem 1rem 0.8rem;
}

.page[data-page-id="dashboard"] .project-card-body {
    padding: 0.9rem 1rem;
}

.page[data-page-id="dashboard"] .project-card-footer {
    padding: 0.75rem 1rem;
}

.page[data-page-id="dashboard"] #companyTasksKanban {
    gap: 0.75rem !important;
}

.page[data-page-id="dashboard"] .kanban-column {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, #ffffff 100%);
    padding: 0.75rem;
}

.page[data-page-id="dashboard"] .kanban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.page[data-page-id="dashboard"] .kanban-title {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-gray);
}

.page[data-page-id="dashboard"] .kanban-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dark);
}

.page[data-page-id="dashboard"] .kanban-dropzone {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.page[data-page-id="dashboard"] .kanban-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: #fff;
    padding: 0.7rem 0.8rem;
    box-shadow: 0 14px 28px -28px rgba(15, 23, 42, 0.28);
}

.page[data-page-id="dashboard"] .kanban-card-title {
    font-weight: 600;
    line-height: 1.35;
}

.page[data-page-id="dashboard"] #openChecklistItemsList .list-row,
.page[data-page-id="dashboard"] .activity-item,
.page[data-page-id="dashboard"] .news-item {
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 12px;
    padding: 0.75rem 0.85rem !important;
    margin-bottom: 0.6rem;
    background: #fff;
    box-shadow: 0 14px 28px -28px rgba(15, 23, 42, 0.24);
}

.page[data-page-id="dashboard"] #openChecklistItemsList .list-row:last-child,
.page[data-page-id="dashboard"] .activity-item:last-child,
.page[data-page-id="dashboard"] .news-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page[data-page-id="dashboard"] .dashboard-quick-entry-field--project,
    .page[data-page-id="dashboard"] .dashboard-quick-entry-secondary,
    .page[data-page-id="dashboard"] #quickEntryIntervalFields {
        grid-column: 1 / -1;
    }

    .page[data-page-id="dashboard"] .dashboard-quick-entry-secondary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .page[data-page-id="dashboard"] .dashboard-quick-entry-field--description {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .page[data-page-id="dashboard"] .dashboard-page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .page[data-page-id="dashboard"] .dashboard-page-header-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .page[data-page-id="dashboard"] .grid-controls {
        width: 100%;
    }

    .page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="dashboard"] .dashboard-quick-entry-secondary,
    .page[data-page-id="dashboard"] #quickEntryIntervalFields {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="dashboard"] .widget-metrics {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="dashboard"] .dashboard-feed-row {
        flex-direction: column;
    }

    .page[data-page-id="dashboard"] .dashboard-row-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .page[data-page-id="dashboard"] #companyTasksKanban {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .page[data-page-id="dashboard"] .dashboard-page-subtitle {
        font-size: 0.9rem;
    }

    .page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="dashboard"] .dashboard-quick-entry-submit {
        justify-self: stretch;
    }

    .page[data-page-id="dashboard"] .dashboard-quick-entry-submit .btn {
        width: 100%;
    }

    .page[data-page-id="dashboard"] .dashboard-grid > .card .card-header,
    .page[data-page-id="dashboard"] .dashboard-grid > .card .card-body,
    .page[data-page-id="dashboard"] .dashboard-layout-shell .card-body {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .page[data-page-id="dashboard"] .quick-action-card {
        flex-basis: 100%;
    }
}

@media (max-width: 720px) {
    .today-entry-time {
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
    }
}

/* Dashboard widgets drag & drop */
.card[data-widget-id], .stat-card[data-widget-id], .stats-grid[data-widget-id] {
    position: relative;
}
.widget-handle {
    margin-left: auto;
    color: var(--text-gray);
    cursor: grab;
    user-select: none;
    font-weight: 700;
}
.card.dragging, .stat-card.dragging {
    opacity: 0.6;
}

/* Visual placeholder location while dragging (optional) */
.drag-placeholder {
    border: 2px dashed var(--primary-cyan);
    border-radius: 10px;
    min-height: 80px;
}

/* Edge resize handles (only active in customize mode) */
.resize-edge {
    display: none;
    position: absolute;
    z-index: 2;
}
.resize-edge-right {
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
}
.resize-edge-bottom {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    cursor: ns-resize;
}
.page.customize-mode .resize-edge { display: block; }

/* Grid ruler overlay for vertical snapping visibility */
.grid-ruler {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 178, 204, 0.12) 0,
        rgba(0, 178, 204, 0.12) 1px,
        transparent 1px,
        transparent var(--row-unit, 12px)
    );
}

/* Vertical column guides overlay */
.grid-guides {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem; /* will be overridden dynamically to match grid gap */
    pointer-events: none;
}
.grid-guides .grid-guide-col {
    border-left: 1px dashed rgba(0, 178, 204, 0.25);
}
.grid-guides .grid-guide-col:last-child {
    border-right: 1px dashed rgba(0, 178, 204, 0.25);
}

/* Notes tab */
.notes-layout {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: calc(100vh - 280px);
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 45%, #f6fffb 100%);
    padding: 0.25rem;
    border-radius: 12px;
}
.notes-column {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.notes-sections,
.notes-pages {
    flex: 0 0 240px;
}
.notes-column.notes-column-collapsed {
    flex: 0 0 140px;
    min-height: 160px;
}
.notes-column.notes-column-collapsed .notes-list {
    display: none;
}
.notes-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.notes-collapsed-message {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-gray);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
}
.notes-column.notes-column-collapsed .notes-collapsed-message {
    display: flex;
}
.notes-collapse-toggle {
    width: 32px;
    padding: 0.15rem 0.25rem;
}
.notes-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.notes-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
}
.notes-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, border 0.2s, transform 0.1s ease;
}
.notes-list-item.active {
    border-color: var(--primary);
    background: linear-gradient(90deg, rgba(0, 170, 170, 0.12) 0%, rgba(0, 170, 170, 0.06) 100%);
}
.notes-list-item:hover {
    border-color: var(--border-color);
    background: rgba(0, 0, 0, 0.03);
    transform: translateY(-1px);
}
.note-item-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.note-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.note-inline-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
}
.note-inline-display {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-color);
    margin-right: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.notes-list-item:hover .note-inline-display {
    background: rgba(0, 170, 170, 0.06);
}
.note-inline-input {
    display: none;
    width: 100%;
    font-size: 0.92rem;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.notes-list-item.editing .note-inline-display {
    display: none;
}
.notes-list-item.editing .note-inline-input {
    display: block;
}
.note-item-label {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-color);
    margin-right: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-item-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.note-item-actions {
    opacity: 0.75;
    transition: opacity 0.15s ease;
}
.notes-list-item:hover .note-item-actions,
.notes-list-item.active .note-item-actions {
    opacity: 1;
}
.note-count-badge {
    background: var(--primary-silver);
    color: var(--text-color);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    border: 1px solid rgba(0,0,0,0.05);
}
.note-item-subtext {
    color: var(--text-gray);
    font-size: 0.82rem;
}
.notes-column.notes-editor-column {
    flex: 1 1 380px;
    min-height: 0;
}
.notes-editor-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 12px 36px rgba(0,0,0,0.04);
}
.note-editor {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    min-height: 260px;
    overflow-y: auto;
    line-height: 1.6;
}
.note-editor[contenteditable="true"]:focus {
    outline: 2px solid var(--primary);
}
.note-editor[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-gray);
}
.notes-toolbar {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.notes-toolbar-group {
    display: inline-flex;
    gap: 0.25rem;
}
.notes-toolbar.read-only {
    font-size: 0.85rem;
    color: var(--text-gray);
    background: var(--primary-silver);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
}
.notes-editor-empty {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
}
.note-meta {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-gray);
    font-size: 0.88rem;
}
.note-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3f6fb;
    border: 1px solid var(--border-color);
    line-height: 1.2;
}
.note-status {
    font-size: 0.85rem;
    color: var(--text-gray);
    min-height: 1rem;
}

/* Size badge while resizing */
.size-badge {
    position: absolute;
    top: 8px;
    left: 12px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1.6;
    z-index: 3;
    display: none;
}
.size-badge.active { display: inline-block; }

.tile-handle {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--text-gray);
    cursor: grab;
    user-select: none;
    font-weight: 700;
    font-size: 12px;
}

/* Hide handles by default; show in customize mode */
.page .widget-handle, .page .tile-handle { display: none; }
.page.customize-mode .widget-handle, .page.customize-mode .tile-handle { display: inline-block; }

.page[data-page-id="research-workspace"] {
    --research-workspace-accent: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-header {
    margin-bottom: 1.5rem;
}

.page[data-page-id="research-workspace"] .research-workspace-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-subtitle {
    max-width: 62rem;
    color: var(--text-muted, #64748b);
    font-size: 0.98rem;
    line-height: 1.55;
    margin-top: 0.35rem;
}

.page[data-page-id="research-workspace"] .research-workspace-context {
    margin-top: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-header-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
    width: fit-content;
}

.page[data-page-id="research-workspace"] .research-workspace-view-button {
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-view-button:hover {
    background: rgba(15, 118, 110, 0.08);
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-view-button.is-active {
    background: linear-gradient(135deg, #0f766e, #0f9f9a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
}

.page[data-page-id="research-workspace"] #researchWorkspaceCopilotSlot {
    pointer-events: none;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-shell {
    position: fixed;
    top: 7.2rem;
    right: 1rem;
    z-index: 35;
    pointer-events: none;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher,
.page[data-page-id="research-workspace"] .research-workspace-copilot,
.page[data-page-id="research-workspace"] .research-workspace-copilot-backdrop {
    pointer-events: auto;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    min-width: 220px;
    max-width: 280px;
    padding: 0.78rem 0.92rem;
    border: 1px solid rgba(15, 118, 110, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
    transition: transform 0.22s ease, opacity 0.22s ease, box-shadow 0.22s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.15);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-shell.is-open .research-workspace-copilot-launcher {
    opacity: 0;
    transform: translateX(1rem);
    pointer-events: none;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.22);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-meta {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #64748b;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-backdrop {
    position: fixed;
    inset: 0;
    border: none;
    background: rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-shell.is-open .research-workspace-copilot-backdrop {
    opacity: 1;
    visibility: visible;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot {
    position: fixed;
    top: 7.2rem;
    right: 1rem;
    width: min(420px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 8.2rem);
    overflow: auto;
    padding: 1.05rem 1rem 1rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 118, 110, 0.22);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(15, 118, 110, 0.14), transparent 32%),
        linear-gradient(180deg, #f8fdfc 0%, #ffffff 100%);
    box-shadow: 0 30px 72px rgba(15, 23, 42, 0.18);
    transform: translateX(calc(100% + 1rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-shell.is-open .research-workspace-copilot {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot::after {
    content: '';
    position: absolute;
    inset: auto -40px -55px auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.12) 0%, rgba(15, 118, 110, 0) 70%);
    pointer-events: none;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: start;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-head-actions {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-kicker {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-title {
    margin: 0.25rem 0 0;
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-copy {
    margin-top: 0.4rem;
    color: #475569;
    font-size: 0.93rem;
    line-height: 1.55;
    max-width: 56rem;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 118, 110, 0.15);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-context {
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-close {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-grid {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    padding: 0.95rem 1rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96)),
        #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.34);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-card-title {
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-card-body {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.55;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-card .btn {
    margin-top: auto;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96)),
        #ffffff;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-head,
.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-title {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-copy {
    margin-top: 0.24rem;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-language {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-toggle {
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 999px;
    padding: 0.48rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-toggle.is-active {
    background: linear-gradient(135deg, #0f766e, #0f9f9a);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.16);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-body {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-options {
    display: grid;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-option {
    border: 1px solid #dbe7ef;
    border-radius: 16px;
    background: #ffffff;
    padding: 0.85rem 0.9rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-option:hover,
.page[data-page-id="research-workspace"] .research-workspace-copilot-option.is-active {
    border-color: rgba(15, 118, 110, 0.35);
    background: linear-gradient(180deg, #ffffff, #f1f9f8);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-option-title {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-option-body {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-preview {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.09), transparent 28%),
        linear-gradient(180deg, #ffffff, #f8fafc);
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-preview-title {
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-preview-copy {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.55;
}

.page[data-page-id="research-workspace"] .research-workspace-state {
    padding: 1.35rem 1.4rem;
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.page[data-page-id="research-workspace"] .research-workspace-state-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-state-body {
    margin-top: 0.35rem;
    color: #64748b;
    line-height: 1.55;
}

.page[data-page-id="research-workspace"] .research-workspace-flow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-command-deck {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-command-card {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f4fbfa 100%);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 220px;
}

.page[data-page-id="research-workspace"] .research-workspace-command-step {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-command-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.page[data-page-id="research-workspace"] .research-workspace-command-copy {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-command-status {
    margin-top: auto;
    padding-top: 0.35rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-flow-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-flow-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-desk {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.1), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-desk-top,
.page[data-page-id="research-workspace"] .research-workspace-proposal-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-copy {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-metric,
.page[data-page-id="research-workspace"] .research-workspace-proposal-block {
    border: 1px solid #dce8ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-metric {
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-metric span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-metric strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-block {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-block-title {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-proposal-transitions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-panel,
.page[data-page-id="research-workspace"] .research-workspace-lane,
.page[data-page-id="research-workspace"] .research-workspace-portfolio-row {
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="research-workspace"] .research-workspace-panel {
    padding: 1.05rem 1.1rem 1.1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-panel.is-spotlit,
.page[data-page-id="research-workspace"] .research-workspace-lane.is-spotlit,
.page[data-page-id="research-workspace"] .research-workspace-panel.research-workspace-panel--portfolio.is-spotlit {
    border-color: rgba(15, 118, 110, 0.48);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12), 0 24px 56px rgba(15, 23, 42, 0.08);
}

.page[data-page-id="research-workspace"] .research-workspace-panel-head,
.page[data-page-id="research-workspace"] .research-workspace-lane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-panel-head--stacked {
    flex-direction: column;
    align-items: stretch;
}

.page[data-page-id="research-workspace"] .research-workspace-panel-title,
.page[data-page-id="research-workspace"] .research-workspace-lane-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-panel-copy,
.page[data-page-id="research-workspace"] .research-workspace-lane-copy {
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.55;
    margin-top: 0.25rem;
}

.page[data-page-id="research-workspace"] .research-workspace-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-form-span-2 {
    grid-column: span 2;
}

.page[data-page-id="research-workspace"] .research-workspace-form-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-form-hint {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete {
    position: relative;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    border-radius: 14px;
    border: 1px solid #dbe7ef;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option {
    width: 100%;
    text-align: left;
    border: 1px solid #e4edf2;
    background: #f8fbfc;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option:hover {
    border-color: rgba(15, 118, 110, 0.34);
    background: #f0f9f8;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option-meta,
.page[data-page-id="research-workspace"] .research-workspace-autocomplete-loading {
    font-size: 0.8rem;
    color: #64748b;
}

.page[data-page-id="research-workspace"] .research-workspace-selected-client {
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-selected-client-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #166534;
    font-size: 0.76rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-selected-client-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid #d7e6e8;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 32%),
        #f8fbfc;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk--empty,
.page[data-page-id="research-workspace"] .research-workspace-client-desk--error {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-copy {
    margin-top: 0.28rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-block {
    border: 1px solid #dce8ec;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-block-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-prefill-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    background: rgba(15, 118, 110, 0.08);
}

.page[data-page-id="research-workspace"] .research-workspace-prefill-copy {
    color: #0f172a;
    font-size: 0.88rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-suggestion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.92));
}

.page[data-page-id="research-workspace"] .research-workspace-suggestion-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    color: #0f172a;
    font-size: 0.84rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-hidden {
    display: none !important;
}

.page[data-page-id="research-workspace"] .research-workspace-offer-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f7fcfb);
}

.page[data-page-id="research-workspace"] .research-workspace-offer-pricing-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-offer-pricing-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-offer-pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.page[data-page-id="research-workspace"] .research-workspace-hours-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-line-items {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-line-item-head,
.page[data-page-id="research-workspace"] .research-workspace-line-item-labels,
.page[data-page-id="research-workspace"] .research-workspace-line-item-row {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) 0.7fr 0.7fr 0.9fr auto;
    gap: 0.55rem;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-line-item-head {
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-line-item-head span {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-line-item-labels span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.page[data-page-id="research-workspace"] .research-workspace-line-item-row {
    padding: 0.6rem;
    border-radius: 14px;
    border: 1px solid #dbe7ef;
    background: #fff;
}

.page[data-page-id="research-workspace"] .research-workspace-quote-summary {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(248, 250, 252, 0.92);
}

.page[data-page-id="research-workspace"] .research-workspace-quote-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    font-size: 0.88rem;
    color: #334155;
}

.page[data-page-id="research-workspace"] .research-workspace-quote-summary-row strong {
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-quote-summary-row--grand {
    padding-top: 0.6rem;
    border-top: 1px solid #dbe7ef;
    font-size: 1rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete {
    position: relative;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 260px;
    overflow: auto;
    padding: 0.45rem;
    border-radius: 14px;
    border: 1px solid #d8e5e9;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #f8fbfc;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option:hover {
    border-color: rgba(15, 118, 110, 0.22);
    background: #eff8f7;
    transform: translateY(-1px);
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-autocomplete-option-meta,
.page[data-page-id="research-workspace"] .research-workspace-autocomplete-loading {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-selected-client {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
}

.page[data-page-id="research-workspace"] .research-workspace-selected-client-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-size: 0.75rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-selected-client-name {
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 600;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk--empty,
.page[data-page-id="research-workspace"] .research-workspace-client-desk--error {
    padding: 0.25rem 0.1rem 0.1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-copy {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-block {
    padding: 0.85rem 0.9rem;
    border-radius: 15px;
    border: 1px solid #dbe7ef;
    background: #f8fbfc;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-block-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-client-desk-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #475569;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-panel--rail {
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 38%),
        linear-gradient(180deg, #ffffff, #f8fafc);
}

.page[data-page-id="research-workspace"] .research-workspace-action-list,
.page[data-page-id="research-workspace"] .research-workspace-lane-body,
.page[data-page-id="research-workspace"] .research-workspace-portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-action-row,
.page[data-page-id="research-workspace"] .research-workspace-lane-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #f8fbfc;
    border: 1px solid #deedf0;
}

.page[data-page-id="research-workspace"] .research-workspace-action-copy,
.page[data-page-id="research-workspace"] .research-workspace-lane-main {
    min-width: 0;
    flex: 1 1 auto;
}

.page[data-page-id="research-workspace"] .research-workspace-action-title,
.page[data-page-id="research-workspace"] .research-workspace-lane-title {
    overflow-wrap: anywhere;
}

.page[data-page-id="research-workspace"] .research-workspace-action-subtitle,
.page[data-page-id="research-workspace"] .research-workspace-lane-meta {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
    margin-top: 0.2rem;
}

.page[data-page-id="research-workspace"] .research-workspace-lane-copy {
    margin-top: 0.35rem;
    font-size: 0.88rem;
}

.page[data-page-id="research-workspace"] .research-workspace-empty-copy {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 0.45rem 0.1rem 0.1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(160px, 0.75fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus {
    margin-top: 0.95rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid #d7e6e8;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.09), transparent 28%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.09), transparent 34%),
        #f8fbfc;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-head {
    display: grid;
    gap: 0.24rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-grid {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card {
    border: 1px solid #dbe7ef;
    border-radius: 16px;
    padding: 0.9rem 0.95rem;
    background: rgba(255, 255, 255, 0.9);
    display: grid;
    gap: 0.22rem;
    text-align: left;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06);
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card.is-active {
    border-color: rgba(15, 118, 110, 0.55);
    background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%);
    box-shadow: 0 18px 32px rgba(15, 118, 110, 0.12);
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card strong {
    font-size: 1.3rem;
    line-height: 1;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card small {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-row {
    padding: 1rem 1.05rem;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.95fr) auto;
    gap: 1rem;
    align-items: start;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-badges,
.page[data-page-id="research-workspace"] .research-workspace-portfolio-meta,
.page[data-page-id="research-workspace"] .research-workspace-portfolio-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-meta {
    margin-top: 0.4rem;
    color: #64748b;
    font-size: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-summary {
    display: grid;
    gap: 0.4rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-summary-copy {
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #64748b;
    font-size: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-summary-meta span {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.page[data-page-id="research-workspace"] .research-workspace-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #dbe7ef;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-edit {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}

.page[data-page-id="research-workspace"] .research-workspace-inline-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.page[data-page-id="research-workspace"] .research-workspace-inline-field span {
    color: #64748b;
    font-size: 0.79rem;
    font-weight: 600;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-actions {
    justify-content: flex-end;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-drawer {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem 0.95rem 0.1rem;
    border-top: 1px solid #e2e8f0;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-portfolio-drawer-actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning {
    display: grid;
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-focus {
    margin-top: 0.95rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid #d7e6e8;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 34%),
        #f8fbfc;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-focus-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-focus-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-focus-copy {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-filter-banner {
    margin-top: 0.85rem;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bae6d0;
    color: #166534;
    font-size: 0.82rem;
    font-weight: 600;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-grid {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-state {
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px dashed #bfd5d9;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-state-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-state-copy {
    margin-top: 0.3rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid #dce8ec;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 214px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary.is-active {
    border-color: rgba(15, 118, 110, 0.4);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.18);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-copy {
    margin-top: 0.24rem;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-copy--muted {
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-summary-meta {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-badge--warning {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.page[data-page-id="research-workspace"] .research-workspace-badge--danger {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.page[data-page-id="research-workspace"] .research-workspace-badge--ok {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-metric {
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: linear-gradient(180deg, #f7fbfb 0%, #f0f9f8 100%);
    border-radius: 16px;
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-metric strong {
    font-size: 1.25rem;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-metric span {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-toolbar,
.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-grid {
    display: grid;
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-strip,
.page[data-page-id="research-workspace"] .research-workspace-planning-window-grid {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-card,
.page[data-page-id="research-workspace"] .research-workspace-planning-window-card {
    border-radius: 16px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f5faf9 100%);
    padding: 0.9rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-card strong,
.page[data-page-id="research-workspace"] .research-workspace-planning-window-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-card span,
.page[data-page-id="research-workspace"] .research-workspace-planning-window-copy {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-window-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page[data-page-id="research-workspace"] .research-workspace-planning-window-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-window-metrics strong {
    font-size: 1.08rem;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-window-metrics span {
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 600;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-toolbar {
    grid-template-columns: minmax(240px, 1.2fr) repeat(4, minmax(160px, 0.75fr));
    margin-top: 0.25rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope-tab {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.6rem 0.78rem;
    border-radius: 999px;
    border: 1px solid #d8e7ec;
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope-tab strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope-tab.is-active {
    border-color: rgba(15, 118, 110, 0.36);
    background: linear-gradient(135deg, #0f766e, #0f9f9a);
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(15, 118, 110, 0.16);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope-tab.is-active strong {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scope-copy {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-overview {
    margin-top: 0.95rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-card {
    border-radius: 18px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f5faf9 100%);
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-card--lead {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #eefaf7 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-card strong {
    font-size: 1.05rem;
    line-height: 1.3;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-card span {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix {
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-head {
    display: grid;
    gap: 0.24rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-copy {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-grid {
    margin-top: 0.8rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-card {
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
    min-height: 0;
    padding: 0.82rem 0.88rem;
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(255, 255, 255, 0.92);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-card strong {
    font-size: 1rem;
    line-height: 1.35;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-card span {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity {
    margin-top: 0.95rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    display: grid;
    gap: 0.82rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-copy {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-panel {
    padding: 0.88rem 0.92rem;
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(255, 255, 255, 0.94);
    display: grid;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-panel-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-list {
    display: grid;
    gap: 0.55rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    border: 1px solid #e2ebf0;
    background: #f8fafc;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-row[draggable="true"] {
    cursor: grab;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-row.is-dragging {
    opacity: 0.45;
    transform: scale(0.995);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-row strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-row span {
    display: block;
    margin-top: 0.14rem;
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-capacity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign {
    margin-top: 0.95rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
    display: grid;
    gap: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-copy {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-layout {
    display: grid;
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.15fr) minmax(260px, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-summary,
.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-form,
.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-preview {
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.88rem 0.92rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-summary {
    display: grid;
    gap: 0.28rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-summary strong {
    font-size: 1rem;
    line-height: 1.35;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-summary span {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-preview {
    display: grid;
    gap: 0.72rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-card {
    display: grid;
    gap: 0.24rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-card strong {
    font-size: 0.98rem;
    line-height: 1.35;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-card span {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-net {
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    border: 1px solid #dbe7ef;
    background: #f8fafc;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 600;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-net.is-up {
    border-color: rgba(217, 119, 6, 0.2);
    background: #fff8eb;
    color: #9a3412;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-reassign-net.is-down {
    border-color: rgba(15, 118, 110, 0.2);
    background: #eefbf8;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-fast-head {
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-fast-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-fast-copy {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-fast-grid {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendations {
    margin-top: 0.95rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    display: grid;
    gap: 0.82rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-copy {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-card {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(255, 255, 255, 0.94);
    display: grid;
    gap: 0.55rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-card--copy {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 249, 248, 0.92) 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-card--add {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.94) 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-top {
    display: grid;
    gap: 0.35rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-top strong {
    font-size: 0.98rem;
    line-height: 1.35;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-body {
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.48;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-metrics span {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.52rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
    color: #475569;
    font-size: 0.77rem;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario {
    margin-top: 0.95rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    display: grid;
    gap: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board {
    margin-top: 0.95rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(14, 116, 144, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4fbfd 100%);
    display: grid;
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-head,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-actions,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-column-head,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane-head,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-top,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-actions,
.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-actions,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-scenario {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-badge--soft {
    background: #f1f5f9;
    color: #475569;
    border-color: #dbe7ef;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-copy {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.48;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metric,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-column,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item {
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(255, 255, 255, 0.94);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metric {
    padding: 0.82rem 0.88rem;
    display: grid;
    gap: 0.24rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metric strong,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item strong {
    font-size: 1rem;
    line-height: 1.35;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metric span,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-copy {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.8rem;
    align-items: start;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-view-toggle,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-buckets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-view-button,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-bucket-button {
    border: 1px solid #dbe7ef;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-view-button.is-active,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-bucket-button.is-active {
    border-color: rgba(15, 118, 110, 0.38);
    background: rgba(15, 118, 110, 0.09);
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-column {
    padding: 0.9rem;
    display: grid;
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-column-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-column-list {
    display: grid;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item {
    padding: 0.8rem 0.85rem;
    display: grid;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item[draggable="true"] {
    cursor: grab;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item.is-dragging {
    opacity: 0.45;
    transform: scale(0.995);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item--move {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 249, 248, 0.92) 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item--add {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.94) 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-metrics span,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-scenario-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.56rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
    color: #475569;
    font-size: 0.77rem;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item-canvas-hint {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane {
    padding: 0.9rem;
    border-radius: 18px;
    border: 1px dashed #bdd2d8;
    background: rgba(255, 255, 255, 0.82);
    display: grid;
    gap: 0.7rem;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane.is-drop-target {
    border-color: rgba(15, 118, 110, 0.42);
    background: linear-gradient(180deg, #ffffff 0%, #eefaf7 100%);
    transform: translateY(-1px);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane-copy {
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane-body {
    display: grid;
    gap: 0.65rem;
    min-height: 180px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-head,
.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-actions,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-dropzone-strip,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-copy {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-card {
    padding: 0.82rem 0.88rem;
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: rgba(255, 255, 255, 0.94);
    display: grid;
    gap: 0.24rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-card strong {
    font-size: 1rem;
    line-height: 1.35;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-scenario-card span {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane {
    border-radius: 20px;
    border: 1px solid #dce8ec;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    padding: 1rem 1.05rem;
    display: grid;
    gap: 0.85rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane.is-focused {
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.14);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-head,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-main {
    display: grid;
    gap: 0.25rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-copy {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-copy--accent {
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-actions,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-metrics,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-metrics span,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-category-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe7ef;
    color: #334155;
    font-size: 0.77rem;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-body {
    display: grid;
    gap: 0.65rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-scenario {
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-dropzone-strip {
    gap: 0.55rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-dropzone {
    display: grid;
    gap: 0.12rem;
    min-width: 132px;
    padding: 0.58rem 0.72rem;
    border-radius: 14px;
    border: 1px dashed #bdd2d8;
    background: rgba(255, 255, 255, 0.76);
    color: #334155;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-dropzone span {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-dropzone small {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-dropzone.is-drop-target {
    border-color: rgba(15, 118, 110, 0.42);
    background: linear-gradient(180deg, #ffffff 0%, #eefaf7 100%);
    transform: translateY(-1px);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(230px, 1fr) minmax(220px, 0.95fr) auto;
    gap: 0.8rem;
    align-items: start;
    padding: 0.8rem 0.85rem;
    border-radius: 16px;
    border: 1px solid #deedf0;
    background: #ffffff;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row.is-dirty {
    border-color: rgba(15, 118, 110, 0.35);
    background: linear-gradient(180deg, #ffffff 0%, #f3fbf8 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row[draggable="true"] {
    cursor: grab;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row.is-dragging {
    opacity: 0.45;
    transform: scale(0.995);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-actions {
    align-items: stretch;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-actions .btn {
    white-space: nowrap;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-main,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-hours,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-rate,
.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-actions {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.34rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: grab;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-copy {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-copy--accent {
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-actions {
    min-width: 92px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-empty {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px dashed #bfd5d9;
    background: rgba(255, 255, 255, 0.92);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-empty-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-lane-empty-copy {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(230px, 0.95fr) minmax(240px, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid #dce8ec;
    background: #ffffff;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row.is-dirty {
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf9 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-main,
.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-hours,
.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-rate,
.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-meta {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-meta--accent {
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-field-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-stepper {
    display: grid;
    grid-template-columns: auto minmax(88px, 110px) auto;
    gap: 0.45rem;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-row-actions {
    min-width: 120px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd {
    margin-top: 0.95rem;
    border-radius: 18px;
    border: 1px solid #d7e6e8;
    background: #f8fbfc;
    padding: 0.95rem 1rem 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-table {
    margin-top: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-advanced {
    margin-top: 1rem;
    border-radius: 16px;
    border: 1px solid #d7e6e8;
    background: #ffffff;
    overflow: hidden;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-advanced summary {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    background: #f8fbfc;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-advanced summary::-webkit-details-marker {
    display: none;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-advanced[open] summary {
    border-bottom: 1px solid #dce8ec;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-table table td,
.page[data-page-id="research-workspace"] .research-workspace-planning-table table th {
    vertical-align: top;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-head {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 128px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-head strong {
    color: #0f172a;
    font-size: 0.83rem;
    line-height: 1.3;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-head span,
.page[data-page-id="research-workspace"] .research-workspace-planning-month-head small {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-month-head span {
    color: #0f766e;
    font-weight: 700;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-row.is-dirty {
    background: rgba(15, 118, 110, 0.04);
}

.page[data-page-id="research-workspace"] .research-workspace-planning-project {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-subline {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-input {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 94px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-input input {
    min-width: 94px;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-actual {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.3;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-budget-hint {
    color: #0f766e;
    font-size: 0.72rem;
    line-height: 1.3;
}

.page[data-page-id="research-workspace"] .research-workspace-planning-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 114px;
}

.page[data-page-id="research-workspace"] .research-workspace-project {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-focus {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
    width: fit-content;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-project-focus-button {
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="research-workspace"] .research-workspace-project-focus-button:hover {
    background: rgba(15, 118, 110, 0.08);
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-project-focus-button.is-active {
    background: linear-gradient(135deg, #0f766e, #0f9f9a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.16);
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview-card {
    border: 1px solid #dce8ec;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 168px;
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview-card span {
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview-card strong {
    color: #0f172a;
    font-size: 1.3rem;
    line-height: 1.1;
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview-card p {
    margin: 0;
    color: #4b5563;
    font-size: 0.84rem;
    line-height: 1.5;
}

.page[data-page-id="research-workspace"] .research-workspace-project-overview-card .btn {
    margin-top: auto;
}

.page[data-page-id="research-workspace"] .research-workspace-project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.72fr);
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.2rem;
    border-color: rgba(15, 118, 110, 0.2);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f4fbfa 100%);
}

.page[data-page-id="research-workspace"] .research-workspace-project-hero-main {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.page[data-page-id="research-workspace"] .research-workspace-project-kicker {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.page[data-page-id="research-workspace"] .research-workspace-project-title {
    margin: 0;
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    line-height: 1.1;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.page[data-page-id="research-workspace"] .research-workspace-project-copy {
    max-width: 56rem;
    color: #4b5563;
    font-size: 0.96rem;
    line-height: 1.6;
}

.page[data-page-id="research-workspace"] .research-workspace-project-badges,
.page[data-page-id="research-workspace"] .research-workspace-project-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.page[data-page-id="research-workspace"] .research-workspace-project-hero-actions {
    align-content: flex-start;
    justify-content: flex-end;
}

.page[data-page-id="research-workspace"] .research-workspace-project-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-metric {
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 16px;
    padding: 0.9rem 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-metric span {
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.4;
}

.page[data-page-id="research-workspace"] .research-workspace-project-metric strong {
    color: #0f172a;
    font-size: 1.18rem;
    line-height: 1.15;
}

.page[data-page-id="research-workspace"] .research-workspace-project-quick {
    padding-top: 1.15rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-quick-grid,
.page[data-page-id="research-workspace"] .research-workspace-project-grid {
    display: grid;
    gap: 0.9rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page[data-page-id="research-workspace"] .research-workspace-project-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.page[data-page-id="research-workspace"] .research-workspace-project-quick-form {
    border: 1px solid #dce8ec;
    border-radius: 16px;
    padding: 0.95rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-quick-form-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-project-quick-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-section {
    overflow: hidden;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-list,
.page[data-page-id="research-workspace"] .research-workspace-project-staffing-list,
.page[data-page-id="research-workspace"] .research-workspace-project-date-list,
.page[data-page-id="research-workspace"] .research-workspace-project-deliverable-list,
.page[data-page-id="research-workspace"] .research-workspace-project-activity-list {
    display: flex;
    flex-direction: column;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-row,
.page[data-page-id="research-workspace"] .research-workspace-project-staffing-row,
.page[data-page-id="research-workspace"] .research-workspace-project-date-row,
.page[data-page-id="research-workspace"] .research-workspace-project-deliverable-row,
.page[data-page-id="research-workspace"] .research-workspace-project-activity-row {
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem 0;
    border-top: 1px solid #e6eef4;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-row:first-child,
.page[data-page-id="research-workspace"] .research-workspace-project-staffing-row:first-child,
.page[data-page-id="research-workspace"] .research-workspace-project-date-row:first-child,
.page[data-page-id="research-workspace"] .research-workspace-project-deliverable-row:first-child,
.page[data-page-id="research-workspace"] .research-workspace-project-activity-row:first-child {
    border-top: none;
    padding-top: 0.1rem;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-main,
.page[data-page-id="research-workspace"] .research-workspace-project-date-main {
    min-width: 0;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-title,
.page[data-page-id="research-workspace"] .research-workspace-project-date-title,
.page[data-page-id="research-workspace"] .research-workspace-project-staffing-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-meta,
.page[data-page-id="research-workspace"] .research-workspace-project-date-meta,
.page[data-page-id="research-workspace"] .research-workspace-project-staffing-meta {
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.81rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-edit,
.page[data-page-id="research-workspace"] .research-workspace-project-date-edit {
    display: grid;
    gap: 0.65rem;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-project-phase-edit {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.page[data-page-id="research-workspace"] .research-workspace-project-staffing-row {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-project-staffing-weeks {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page[data-page-id="research-workspace"] .research-workspace-project-staffing-weeks span {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
    color: #334155;
    font-size: 0.77rem;
    font-weight: 600;
}

.page[data-page-id="research-workspace"] .research-workspace-project-task-table table {
    margin-bottom: 0;
}

.page[data-page-id="research-workspace"] .research-workspace-project-task-table th {
    border-top: none;
    white-space: nowrap;
    color: #475569;
    font-size: 0.79rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page[data-page-id="research-workspace"] .research-workspace-project-task-table tbody tr:hover {
    background: rgba(15, 118, 110, 0.03);
}

.page[data-page-id="research-workspace"] .research-workspace-project-task-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="research-workspace"] .research-workspace-project-task-copy {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.45;
}

.page[data-page-id="research-workspace"] .research-workspace-project-date-row {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-project-date-edit {
    grid-template-columns: minmax(180px, 1.1fr) repeat(3, minmax(0, 0.8fr)) auto;
}

.page[data-page-id="research-workspace"] .research-workspace-project-deliverable-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.page[data-page-id="research-workspace"] .research-workspace-project-activity-row {
    grid-template-columns: 1fr;
}

.page[data-page-id="research-workspace"] .research-workspace-project-gantt {
    padding: 0.25rem;
    border-radius: 18px;
    border: 1px solid #dce8ec;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

@media (max-width: 1420px) {
    .page[data-page-id="research-workspace"] .research-workspace-copilot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-command-deck {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-flow-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-panel--rail {
        grid-column: 1 / -1;
    }

    .page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-portfolio-row {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-portfolio-actions {
        justify-content: flex-start;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-proposal-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-proposal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-month-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-layout,
    .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-form,
    .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-preview-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-capacity-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-list,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-budget-strip,
    .page[data-page-id="research-workspace"] .research-workspace-planning-window-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-month-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page[data-page-id="research-workspace"] .research-workspace-project-hero,
    .page[data-page-id="research-workspace"] .research-workspace-project-grid,
    .page[data-page-id="research-workspace"] .research-workspace-project-quick-grid,
    .page[data-page-id="research-workspace"] .research-workspace-project-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-project-overview-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .page[data-page-id="research-workspace"] .research-workspace-copilot-head,
    .page[data-page-id="research-workspace"] .research-workspace-command-deck,
    .page[data-page-id="research-workspace"] .research-workspace-flow-lanes,
    .page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-body,
    .page[data-page-id="research-workspace"] .research-workspace-portfolio-filters,
    .page[data-page-id="research-workspace"] .research-workspace-copilot-grid,
    .page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-grid,
    .page[data-page-id="research-workspace"] .research-workspace-proposal-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-proposal-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-toolbar,
    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-row,
    .page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-summary-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-month-overview,
    .page[data-page-id="research-workspace"] .research-workspace-planning-budget-strip,
    .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-layout,
    .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-form,
    .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-preview-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-window-grid,
    .page[data-page-id="research-workspace"] .research-workspace-client-desk-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-portfolio-edit {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-project-phase-row,
    .page[data-page-id="research-workspace"] .research-workspace-project-staffing-row,
    .page[data-page-id="research-workspace"] .research-workspace-project-date-row,
    .page[data-page-id="research-workspace"] .research-workspace-project-phase-edit,
    .page[data-page-id="research-workspace"] .research-workspace-project-date-edit {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-month-row {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-project-staffing-weeks {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .page[data-page-id="research-workspace"] .research-workspace-copilot-shell {
        top: auto;
        right: 1rem;
        bottom: 1rem;
    }

    .page[data-page-id="research-workspace"] .research-workspace-copilot-launcher {
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }

    .page[data-page-id="research-workspace"] .research-workspace-copilot {
        top: auto;
        right: 1rem;
        left: 1rem;
        bottom: 1rem;
        width: auto;
        max-height: min(78vh, 720px);
        transform: translateY(calc(100% + 1rem));
    }

    .page[data-page-id="research-workspace"] .research-workspace-copilot-shell.is-open .research-workspace-copilot {
        transform: translateY(0);
    }

    .page[data-page-id="research-workspace"] .research-workspace-flow-top,
    .page[data-page-id="research-workspace"] .research-workspace-form-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-form-span-2 {
        grid-column: span 1;
    }

    .page[data-page-id="research-workspace"] .research-workspace-header-actions,
    .page[data-page-id="research-workspace"] .research-workspace-copilot-head-actions,
    .page[data-page-id="research-workspace"] .research-workspace-copilot-meta,
    .page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-head,
    .page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-actions,
    .page[data-page-id="research-workspace"] .research-workspace-prefill-banner,
    .page[data-page-id="research-workspace"] .research-workspace-lane-row,
    .page[data-page-id="research-workspace"] .research-workspace-action-row,
    .page[data-page-id="research-workspace"] .research-workspace-selected-client,
    .page[data-page-id="research-workspace"] .research-workspace-client-desk-head,
    .page[data-page-id="research-workspace"] .research-workspace-proposal-desk-top,
    .page[data-page-id="research-workspace"] .research-workspace-proposal-headline,
    .page[data-page-id="research-workspace"] .research-workspace-inline-actions,
    .page[data-page-id="research-workspace"] .research-workspace-offer-pricing-head,
    .page[data-page-id="research-workspace"] .research-workspace-portfolio-drawer-head,
    .page[data-page-id="research-workspace"] .research-workspace-portfolio-drawer-actions,
    .page[data-page-id="research-workspace"] .research-workspace-planning-fast-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-capacity-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-actions,
    .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-canvas-lane-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-title-row,
    .page[data-page-id="research-workspace"] .research-workspace-planning-focus-head,
    .page[data-page-id="research-workspace"] .research-workspace-planning-focus-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page[data-page-id="research-workspace"] .research-workspace-offer-pricing-grid,
    .page[data-page-id="research-workspace"] .research-workspace-hours-grid,
    .page[data-page-id="research-workspace"] .research-workspace-line-item-head,
    .page[data-page-id="research-workspace"] .research-workspace-line-item-labels,
    .page[data-page-id="research-workspace"] .research-workspace-line-item-row,
    .page[data-page-id="research-workspace"] .research-workspace-project-quick-form-row,
    .page[data-page-id="research-workspace"] .research-workspace-project-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-project-overview-cards {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-line-item-labels {
        display: none;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-metrics {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-budget-strip,
    .page[data-page-id="research-workspace"] .research-workspace-planning-window-grid,
    .page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-grid {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-actions {
        min-width: 0;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-stepper {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-actions,
    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-metrics,
    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-categories {
        align-items: stretch;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-scope-tabs {
        flex-direction: column;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-month-row-actions {
        min-width: 0;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-actions {
        min-width: 0;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-actions {
        align-items: stretch;
    }

    .page[data-page-id="research-workspace"] .research-workspace-planning-capacity-row {
        flex-direction: column;
        align-items: stretch;
    }

    .page[data-page-id="research-workspace"] .research-workspace-project-deliverable-row {
        grid-template-columns: 1fr;
    }
}

.page[data-page-id="industry-workspace"] {
    --industry-workspace-accent: #b7791f;
}

.page[data-page-id="industry-workspace"] .industry-workspace-header {
    margin-bottom: 1.5rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page[data-page-id="industry-workspace"] .industry-workspace-subtitle {
    max-width: 62rem;
    color: var(--text-muted, #64748b);
    font-size: 0.98rem;
    line-height: 1.55;
    margin-top: 0.35rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-context {
    margin-top: 0.85rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-context .project-detail-context-chip--strong {
    background: rgba(183, 121, 31, 0.12);
    border-color: rgba(183, 121, 31, 0.24);
    color: #92400e;
}

.page[data-page-id="industry-workspace"] .industry-workspace-header-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="industry-workspace"] .industry-workspace-shell,
.page[data-page-id="industry-workspace"] .industry-workspace-flow,
.page[data-page-id="industry-workspace"] .industry-workspace-project {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
    width: fit-content;
    flex-wrap: wrap;
}

.page[data-page-id="industry-workspace"] .industry-workspace-view-button {
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="industry-workspace"] .industry-workspace-view-button:hover {
    background: rgba(183, 121, 31, 0.08);
    color: #0f172a;
}

.page[data-page-id="industry-workspace"] .industry-workspace-view-button.is-active {
    background: linear-gradient(135deg, #b7791f, #d97706);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(180, 83, 9, 0.16);
}

.page[data-page-id="industry-workspace"] .industry-workspace-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-metric,
.page[data-page-id="industry-workspace"] .industry-workspace-project-metric {
    border: 1px solid rgba(183, 121, 31, 0.14);
    border-radius: 16px;
    padding: 0.9rem 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%);
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-stat-label {
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page[data-page-id="industry-workspace"] .industry-workspace-stat-value {
    color: #0f172a;
    font-size: 1.24rem;
    font-weight: 700;
    line-height: 1.15;
}

.page[data-page-id="industry-workspace"] .industry-workspace-flow-grid,
.page[data-page-id="industry-workspace"] .industry-workspace-project-grid,
.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-grid {
    display: grid;
    gap: 0.9rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-flow-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
}

.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-row {
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.04);
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel {
    padding: 1.05rem 1.1rem 1.1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel--hero,
.page[data-page-id="industry-workspace"] .industry-workspace-project-hero {
    border-color: rgba(183, 121, 31, 0.2);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fff8ef 100%);
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel--soft {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel-head--stacked {
    flex-direction: column;
    align-items: stretch;
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel-kicker {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel-title,
.page[data-page-id="industry-workspace"] .industry-workspace-project-title {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel-title {
    font-size: 1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-title {
    font-size: clamp(1.6rem, 2vw, 2.05rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.page[data-page-id="industry-workspace"] .industry-workspace-panel-copy {
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.55;
    margin-top: 0.25rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-flow-highlight {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(183, 121, 31, 0.16);
    background: rgba(255, 255, 255, 0.76);
}

.page[data-page-id="industry-workspace"] .industry-workspace-flow-highlight-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="industry-workspace"] .industry-workspace-flow-highlight-copy {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.45;
}

.page[data-page-id="industry-workspace"] .industry-workspace-command-row,
.page[data-page-id="industry-workspace"] .industry-workspace-inline-actions,
.page[data-page-id="industry-workspace"] .industry-workspace-form-actions,
.page[data-page-id="industry-workspace"] .industry-workspace-filter-row,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-actions,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-drawer-actions,
.page[data-page-id="industry-workspace"] .industry-workspace-header-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="industry-workspace"] .industry-workspace-command-row {
    margin-top: 1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-list,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 0.9rem 0.95rem;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.88);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row:hover {
    border-color: rgba(183, 121, 31, 0.24);
    background: rgba(255, 250, 244, 0.92);
    transform: translateY(-1px);
}

.page[data-page-id="industry-workspace"] .industry-workspace-row--compact {
    padding: 0.75rem 0.85rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-main,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-main {
    min-width: 0;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-title,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-title {
    color: #0f172a;
    font-weight: 700;
    word-break: break-word;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-title {
    font-size: 0.94rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-title {
    font-size: 1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-meta,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-meta,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-summary-copy,
.page[data-page-id="industry-workspace"] .industry-workspace-empty-copy {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-meta {
    margin-top: 0.2rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-row-amount {
    color: #92400e;
    font-weight: 700;
}

.page[data-page-id="industry-workspace"] .industry-workspace-badges,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-badges,
.page[data-page-id="industry-workspace"] .industry-workspace-project-hero-actions,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-summary-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.page[data-page-id="industry-workspace"] .industry-workspace-badges {
    margin-top: 0.9rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #fff7ed;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #fed7aa;
}

.page[data-page-id="industry-workspace"] .industry-workspace-badge--warning {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #b42318;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(180px, 0.8fr));
    gap: 0.75rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus {
    margin-top: 0.95rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(183, 121, 31, 0.12);
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.1), transparent 34%),
        #fffaf3;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-grid,
.page[data-page-id="industry-workspace"] .industry-workspace-project-overview-cards {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card,
.page[data-page-id="industry-workspace"] .industry-workspace-project-overview-card,
.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card {
    border: 1px solid #eadfd2;
    border-radius: 16px;
    padding: 0.9rem 0.95rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card:hover,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card.is-active,
.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card:hover {
    border-color: rgba(183, 121, 31, 0.35);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card strong,
.page[data-page-id="industry-workspace"] .industry-workspace-project-overview-card strong {
    color: #0f172a;
    font-size: 1.3rem;
    line-height: 1.1;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card span,
.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card strong,
.page[data-page-id="industry-workspace"] .industry-workspace-project-overview-card span {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card small,
.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card span,
.page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card small,
.page[data-page-id="industry-workspace"] .industry-workspace-project-overview-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
    gap: 0.9rem;
    padding: 1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-meta {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-meta span,
.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-summary-meta span {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-summary {
    display: grid;
    gap: 0.4rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-actions {
    justify-content: flex-end;
    align-content: flex-start;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-drawer {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem 0.95rem 0.1rem;
    border-top: 1px solid #e2e8f0;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page[data-page-id="industry-workspace"] .industry-workspace-portfolio-edit {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}

.page[data-page-id="industry-workspace"] .industry-workspace-inline-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.page[data-page-id="industry-workspace"] .industry-workspace-inline-field span {
    color: #64748b;
    font-size: 0.79rem;
    font-weight: 600;
}

.page[data-page-id="industry-workspace"] .industry-workspace-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-form-span-2,
.page[data-page-id="industry-workspace"] .industry-workspace-form-error,
.page[data-page-id="industry-workspace"] .industry-workspace-form-actions {
    grid-column: 1 / -1;
}

.page[data-page-id="industry-workspace"] .industry-workspace-form-error {
    color: #b42318;
    font-weight: 600;
}

.page[data-page-id="industry-workspace"] .industry-workspace-state {
    padding: 1.35rem 1.4rem;
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fffaf3);
}

.page[data-page-id="industry-workspace"] .industry-workspace-state-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.page[data-page-id="industry-workspace"] .industry-workspace-state-body {
    margin-top: 0.35rem;
    color: #64748b;
    line-height: 1.55;
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.72fr);
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.2rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-hero-main {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-hero-actions {
    align-content: flex-start;
    justify-content: flex-end;
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.page[data-page-id="industry-workspace"] .industry-workspace-project-overview {
    padding-top: 1.15rem;
}

@media (max-width: 1420px) {
    .page[data-page-id="industry-workspace"] .industry-workspace-metrics,
    .page[data-page-id="industry-workspace"] .industry-workspace-project-metrics,
    .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-grid,
    .page[data-page-id="industry-workspace"] .industry-workspace-project-overview-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page[data-page-id="industry-workspace"] .industry-workspace-flow-grid,
    .page[data-page-id="industry-workspace"] .industry-workspace-project-grid,
    .page[data-page-id="industry-workspace"] .industry-workspace-project-hero {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-row {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1180px) {
    .page[data-page-id="industry-workspace"] .industry-workspace-snapshot-grid,
    .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-filters,
    .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-edit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page[data-page-id="industry-workspace"] .industry-workspace-form,
    .page[data-page-id="industry-workspace"] .industry-workspace-row {
        grid-template-columns: 1fr;
    }

    .page[data-page-id="industry-workspace"] .industry-workspace-row-side {
        align-items: flex-start;
    }
}
.reports-options-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reports-options-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--text-gray);
  font-size: 13px;
}

.reports-options-context strong {
  color: var(--text-color);
}

.reports-options-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color, #fff);
}

.reports-options-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.reports-options-table th,
.reports-options-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  text-align: left;
}

.reports-options-table thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-gray);
  background: color-mix(in srgb, var(--surface-color, #fff) 94%, var(--border-color) 6%);
}

.reports-options-table tbody tr:last-child td {
  border-bottom: 0;
}

.reports-options-primary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reports-options-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-options-title {
  font-weight: 600;
  color: var(--text-color);
}

.reports-options-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-gray);
}

.reports-options-meta strong {
  font-size: 13px;
  color: var(--text-color);
}

.reports-options-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-options-empty {
  padding: 12px 0;
}

@media (max-width: 900px) {
  .page[data-page-id="reports"] .reports-attention-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page[data-page-id="reports"] .reports-attention-row .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .reports-options-table {
    min-width: 760px;
  }

  .reports-options-table th,
  .reports-options-table td {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .page[data-page-id="reports"] .reports-dashboard-panel-head {
    flex-direction: column;
  }

  .page[data-page-id="reports"] .reports-worklist-context {
    justify-content: flex-start;
  }

  .page[data-page-id="reports"] .reports-worklist-table thead {
    display: none;
  }

  .page[data-page-id="reports"] .reports-worklist-table,
  .page[data-page-id="reports"] .reports-worklist-table tbody,
  .page[data-page-id="reports"] .reports-worklist-table tr,
  .page[data-page-id="reports"] .reports-worklist-table td {
    display: block;
    width: 100%;
  }

  .page[data-page-id="reports"] .reports-worklist-table tr {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
  }

  .page[data-page-id="reports"] .reports-worklist-table td {
    display: grid;
    grid-template-columns: minmax(88px, 0.35fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 0;
    white-space: normal;
  }

  .page[data-page-id="reports"] .reports-worklist-table td::before {
    content: attr(data-label);
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .page[data-page-id="reports"] .reports-worklist-action {
    width: 100%;
  }
}

/* public/css/documents.css */
/* Document Management - CDE Styles */

/* Folder Tree Styles */
.folder-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    user-select: none;
    font-size: 0.875rem;
}

.folder-item:hover {
    background-color: rgba(0, 178, 204, 0.1);
}

.folder-item.active {
    background-color: var(--primary-cyan);
    color: white;
}

.folder-item.active .folder-icon,
.folder-item.active .folder-name {
    color: white;
}

.folder-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.folder-name {
    font-weight: 500;
}

/* Filter Buttons */
.filter-btn {
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

.filter-btn.active {
    background-color: var(--primary-cyan) !important;
    color: white !important;
    border-color: var(--primary-cyan) !important;
}

/* View Toggle Buttons */
.view-toggle {
    min-width: 40px !important;
    padding: 0.5rem !important;
    font-size: 1rem !important;
}

.view-toggle.active {
    background-color: var(--primary-cyan) !important;
    color: white !important;
    border-color: var(--primary-cyan) !important;
}

/* Document Grid View */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.document-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.document-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-cyan);
    transform: translateY(-2px);
}

.document-card.selected {
    border-color: var(--primary-cyan);
    background: rgba(0, 178, 204, 0.05);
}

.document-thumbnail {
    width: 100%;
    height: 120px;
    background: var(--primary-silver);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.document-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-meta {
    font-size: 0.75rem;
    color: var(--text-gray);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.document-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 0.25rem;
    display: flex;
    gap: 0.25rem;
}

.document-card:hover .document-actions {
    opacity: 1;
}

.document-action-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s ease;
}

.document-action-btn:hover {
    background-color: var(--primary-silver);
}

/* Document List View */
.documents-list {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.documents-list .table {
    margin: 0;
    border: none;
}

.documents-list .table th,
.documents-list .table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.documents-list .table th {
    background: var(--primary-silver);
    font-weight: 600;
    font-size: 0.875rem;
}

.documents-list .table tr:hover {
    background-color: rgba(0, 178, 204, 0.05);
}

.document-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-right: 0.75rem;
}

.document-name-cell {
    display: flex;
    align-items: center;
}

.document-info {
    flex: 1;
}

.document-filename {
    font-weight: 600;
    margin-bottom: 0.125rem;
    font-size: 0.875rem;
}

.document-size {
    font-size: 0.75rem;
    color: var(--text-gray);
}

/* File Type Icons */
.file-icon-pdf { background: #ff4757; color: white; }
.file-icon-doc, .file-icon-docx { background: #2980b9; color: white; }
.file-icon-xls, .file-icon-xlsx { background: #27ae60; color: white; }
.file-icon-ppt, .file-icon-pptx { background: #e74c3c; color: white; }
.file-icon-img { background: #f39c12; color: white; }
.file-icon-dwg, .file-icon-dxf { background: #9b59b6; color: white; }
.file-icon-default { background: var(--text-gray); color: white; }

/* Upload Zone Styles */
#dropZone.dragover {
    border-color: var(--primary-cyan);
    background-color: rgba(0, 178, 204, 0.05);
    border-style: solid;
}

.upload-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: white;
}

.upload-item-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
    width: 40px;
    text-align: center;
}

.upload-item-info {
    flex: 1;
}

.upload-item-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.upload-item-details {
    font-size: 0.75rem;
    color: var(--text-gray);
    display: flex;
    gap: 1rem;
}

.upload-progress {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.upload-progress-bar {
    height: 100%;
    background: var(--primary-cyan);
    transition: width 0.3s ease;
}

.upload-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* File Preview Panel */
.file-preview {
    padding: 1rem;
}

.file-preview-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.file-preview-icon {
    font-size: 2rem;
    margin-right: 0.75rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.file-preview-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    line-height: 1.3;
}

.file-preview-meta {
    font-size: 0.75rem;
    color: var(--text-gray);
    line-height: 1.4;
}

.file-preview-actions {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}

.file-preview-content {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-height: 200px;
    background: white;
    overflow: hidden;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-gray);
    text-align: center;
}

.preview-placeholder .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Properties Panel */
.file-properties {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

.property-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.property-row:last-child {
    border-bottom: none;
}

.property-label {
    font-weight: 600;
    color: var(--text-gray);
}

.property-value {
    color: var(--text-dark);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .documents-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }
    
    .document-card {
        padding: 0.75rem;
    }
    
    .document-thumbnail {
        height: 100px;
        font-size: 2.5rem;
    }
    
    #filePreviewPanel {
        width: 320px !important;
    }
}

@media (max-width: 768px) {
    .modal-body {
        flex-direction: column !important;
    }
    
    .modal-body > div {
        width: 100% !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .documents-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }
    
    #filePreviewPanel {
        display: none !important;
    }
}

/* Animation for file operations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.document-card {
    animation: fadeInUp 0.3s ease;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 150px;
    overflow: hidden;
}

.context-menu-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.context-menu-item:hover {
    background-color: var(--primary-silver);
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item.danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}
/* public/css/documentation.css */
/* Documentation Page Styles */

.documentation-page {
    max-width: 100%;
    margin: 0;
}

.documentation-container {
    display: grid;
    grid-template-columns: 260px 1fr 240px;
    gap: 2rem;
    margin-top: 2rem;
    min-height: calc(100vh - 200px);
}

/* Documentation Sidebar */
.doc-sidebar {
    position: sticky;
    top: 1rem;
    height: fit-content;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.doc-search {
    margin-bottom: 1.5rem;
}

.doc-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.doc-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.doc-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.doc-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.doc-link:hover {
    background: var(--primary-silver);
    color: var(--primary-cyan);
}

.doc-link.active {
    background: var(--primary-cyan);
    color: white;
    font-weight: 500;
}

/* Documentation Content */
.doc-content {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    max-height: calc(100vh - 150px);
}

.doc-context-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    border-radius: 8px;
}

.doc-context-hint .doc-context-text {
    font-size: 0.9rem;
    color: var(--text-dark);
}

.doc-context-hint .doc-context-text strong {
    font-weight: 600;
}

.doc-article {
    max-width: 900px;
}

.doc-article h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-dark);
}

.doc-article h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--primary-dark);
}

.doc-article h4 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.doc-article h5 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-weight: 600;
}

.doc-article p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.doc-article p.lead {
    font-size: 1.125rem;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

.doc-article ul, .doc-article ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.doc-article li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.doc-article code {
    background: var(--primary-silver);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    color: var(--primary-dark);
}

.doc-article pre {
    background: var(--primary-dark);
    color: white;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.doc-article pre code {
    background: transparent;
    color: white;
    padding: 0;
}

.doc-article dl {
    margin-bottom: 1rem;
}

.doc-article dt {
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
}

.doc-article dd {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-gray);
}

@media (max-width: 640px) {
    .doc-context-hint {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

/* Table of Contents */
.doc-toc {
    position: sticky;
    top: 1rem;
    height: fit-content;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.doc-toc h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
    margin-bottom: 1rem;
    font-weight: 600;
}

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

.toc-list li {
    margin-bottom: 0.5rem;
}

.toc-list a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
    display: block;
    padding: 0.25rem 0;
}

.toc-list a:hover {
    color: var(--primary-cyan);
}

.toc-h3 {
    font-weight: 500;
}

.toc-h4 {
    padding-left: 1rem;
    font-size: 0.8125rem;
}

/* Alert Boxes */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.alert-info {
    background: rgba(0, 178, 204, 0.1);
    border-left: 4px solid var(--primary-cyan);
    color: var(--text-dark);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--warning);
    color: var(--text-dark);
}

.alert strong {
    font-weight: 600;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.feature-card {
    background: var(--primary-silver);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

.feature-card h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}

.feature-card p {
    color: var(--text-gray);
    font-size: 0.875rem;
    margin: 0;
}

/* File Types Grid */
.file-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.file-type {
    text-align: center;
    padding: 1rem;
    background: var(--primary-silver);
    border-radius: 6px;
}

.file-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 8px;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.file-type strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.file-type p {
    font-size: 0.75rem;
    color: var(--text-gray);
    margin: 0;
}

/* Actions Grid */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.action-item {
    text-align: center;
    padding: 1rem;
    background: var(--primary-silver);
    border-radius: 6px;
}

.action-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.action-item strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.action-item p {
    font-size: 0.75rem;
    color: var(--text-gray);
    margin: 0;
}

/* Folder Structure */
.folder-structure {
    background: var(--primary-silver);
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}

.folder-structure pre {
    margin: 0;
    background: transparent;
    color: var(--text-dark);
    font-size: 0.875rem;
}

/* WebDAV Setup */
.webdav-setup {
    background: var(--primary-silver);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.webdav-setup h5 {
    margin-top: 0;
}

.webdav-setup ol {
    margin-bottom: 0;
}

/* Keyboard shortcuts */
kbd {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.125rem 0.375rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .documentation-container {
        grid-template-columns: 240px 1fr;
    }
    
    .doc-toc {
        display: none;
    }
}

@media (max-width: 1024px) {
    .documentation-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .doc-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 1rem;
    }
    
    .doc-content {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .doc-article h2 {
        font-size: 1.5rem;
    }
    
    .doc-article h3 {
        font-size: 1.25rem;
    }
    
    .feature-grid,
    .file-types-grid,
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .doc-content {
        padding: 1rem;
    }
}

/* public/css/projects-enhancements.css */
/* Project Enhancements Styles */

/* Project list data quality indicator */
.project-quality-head { width: 46px; }
.projects-table-container { overflow: visible; }
.project-quality-cell { width: 46px; text-align: center; position: relative; overflow: visible; }
.project-issue-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid transparent;
    cursor: default;
    z-index: 50;
}
.project-issue-indicator[data-variant="error"] {
    color: #b91c1c;
    background: #fff0f0;
    border-color: #f8b4b4;
}
.project-issue-indicator[data-variant="warning"] {
    color: #92400e;
    background: #fff7e6;
    border-color: #f6c969;
}
.project-issue-indicator:focus-visible {
    outline: 2px solid var(--primary, #0aa);
    outline-offset: 2px;
}
.project-issue-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #fffef8;
    color: #0f172a;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(248, 180, 83, 0.35);
    white-space: normal;
    font-size: 12px;
    z-index: 9999;
    min-width: 200px;
    max-width: 320px;
}
.project-issue-tooltip::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fffef8;
}
.project-issue-indicator:hover .project-issue-tooltip,
.project-issue-indicator:focus .project-issue-tooltip,
.project-issue-indicator:focus-visible .project-issue-tooltip {
    display: block;
}
.project-issue-tooltip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.project-issue-tooltip-item::before {
    content: '•';
    color: #d97706;
    font-weight: 700;
}

/* Project overview stat tiles: denser layout on detail page */
.project-detail-content .project-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.project-detail-content .project-stat-grid .stat-card {
    padding: 1rem;
    gap: 0.75rem;
}

.project-detail-content .project-stat-grid .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 8px;
}

.project-detail-content .project-stat-grid .stat-value {
    font-size: 1.35rem;
    line-height: 1.15;
}

.project-detail-content .project-stat-grid .stat-label {
    font-size: 0.8rem;
}

@media (min-width: 1200px) {
    /* Ensure up to four tiles line up on wide screens */
    .project-detail-content .project-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.project-detail-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-detail-context-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.project-detail-context-chip,
.project-detail-context-bar .project-model-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: #fff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.5);
}

.project-detail-context-chip--strong {
    color: var(--text-dark);
}

.project-detail-tabs-shell {
    margin-bottom: 1.25rem;
}

.project-detail-tabs-shell .card-body {
    padding: 0.85rem 1rem;
}

.project-detail-tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.project-detail-tab-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: #fff;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.project-detail-tab-button:hover {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 10px 20px -18px rgba(14, 165, 233, 0.65);
    transform: translateY(-1px);
}

.project-detail-tab-button.is-active {
    background: var(--primary, #06b6d4);
    border-color: var(--primary, #06b6d4);
    color: #fff;
    box-shadow: 0 16px 30px -22px rgba(6, 182, 212, 0.9);
}

.project-detail-tab-button:focus-visible {
    outline: 2px solid rgba(14, 165, 233, 0.35);
    outline-offset: 2px;
}

.project-workspace-view-button {
    gap: 0.45rem;
}

.project-workspace-view-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.project-workspace-view-list {
    flex: 1 1 320px;
    min-width: 0;
}

.project-workspace-view-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.project-workspace-view-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.project-list-page-subtitle {
    max-width: 72ch;
    margin-top: 0.35rem;
    color: var(--text-gray);
    font-size: 0.96rem;
    line-height: 1.45;
}

.project-list-workspace {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.project-list-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    align-items: end;
}

.project-list-filter {
    min-width: 0;
}

.project-list-filter .form-select,
.project-list-filter .form-input,
.project-list-filter .input-with-clear {
    width: 100%;
}

.project-status-filter {
    position: relative;
    width: 100%;
}

.project-status-filter-toggle {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    background: var(--card-bg, #fff);
    color: var(--text-dark);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.project-status-filter-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-status-filter-chevron {
    flex: 0 0 auto;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.project-status-filter.is-open .project-status-filter-chevron {
    transform: rotate(180deg);
}

.project-status-filter-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.4rem);
    left: 0;
    width: max(100%, 210px);
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    box-shadow: var(--shadow-lg);
}

.project-status-filter-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 36px;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    color: var(--text-dark);
    font-size: 0.875rem;
    cursor: pointer;
}

.project-status-filter-option:hover {
    background: var(--primary-silver);
}

.project-status-filter-option input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-cyan);
}

.project-status-filter-option--all {
    font-weight: 600;
}

.project-status-filter-separator {
    height: 1px;
    margin: 0.3rem 0.45rem;
    background: var(--border-color);
}

.project-list-filter--search {
    grid-column: span 2;
}

.project-list-filter--sort {
    display: flex;
    gap: 0.65rem;
    align-items: center;
}

.project-list-filter--sort .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.project-list-sort-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    gap: 0.35rem;
}

.project-list-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.project-list-display-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-list-display-button {
    min-height: 34px;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
}

.project-list-results-shell .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-list-results-shell #projectsGrid.project-grid {
    margin-top: 0;
}

.project-list-results-shell .projects-table-container {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
}

.project-list-results-shell .projects-table {
    margin-bottom: 0;
}

.project-list-results-shell .projects-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.project-list-results-shell .projects-table tbody tr {
    transition: background 0.18s ease;
}

.project-list-results-shell .projects-table tbody tr:hover {
    background: #f8fbff;
}

.project-list-empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.75rem 0.25rem 1rem;
}

.project-list-empty-state-title {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
}

.project-list-empty-state-description {
    max-width: 54ch;
    color: var(--text-gray);
    line-height: 1.5;
}

.project-detail-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.project-tab-card-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.project-tab-card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 420px;
}

.project-tab-card-description {
    max-width: 74ch;
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.45;
}

.project-tab-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.project-tab-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.project-tab-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.project-tab-note {
    color: var(--text-gray);
    font-size: 0.82rem;
}

.project-overview-intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
}

.project-overview-intro-item {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: #fff;
    padding: 0.8rem 0.9rem;
}

.project-overview-intro-label {
    color: var(--text-gray);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.project-overview-intro-value {
    margin-top: 0.3rem;
    color: var(--text-dark);
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.35;
}

.research-execution-card {
    border: 1px solid rgba(14, 165, 233, 0.16);
    background:
        radial-gradient(circle at top left, rgba(8, 145, 178, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 1));
}

.research-execution-context-bar {
    margin-bottom: 1rem;
}

.project-workplan-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.research-workplan-advanced-shell {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    overflow: hidden;
}

.research-workplan-advanced-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
}

.research-workplan-advanced-summary::-webkit-details-marker {
    display: none;
}

.research-workplan-advanced-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

.research-workplan-advanced-summary-copy strong {
    color: var(--text-dark);
    font-size: 0.96rem;
    font-weight: 700;
}

.research-workplan-advanced-summary-copy span {
    color: var(--text-gray);
    font-size: 0.84rem;
    line-height: 1.45;
}

.research-workplan-advanced-summary-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(240, 249, 255, 0.96);
    border: 1px solid rgba(14, 165, 233, 0.16);
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.research-workplan-advanced-body {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.research-execution-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.78fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.research-execution-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.research-execution-command-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 0.2rem 0 0.1rem;
}

.research-execution-command-copy {
    min-width: 0;
}

.research-execution-command-kicker {
    color: rgba(8, 145, 178, 0.92);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.research-execution-command-title {
    margin-top: 0.2rem;
    color: var(--text-dark);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.15;
}

.research-execution-command-description {
    margin-top: 0.35rem;
    max-width: 78ch;
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.5;
}

.research-execution-command-points,
.research-execution-command-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.research-execution-command-points {
    margin-top: 0.7rem;
}

.research-execution-command-stats {
    margin-top: 0.6rem;
}

.research-execution-command-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 34px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: var(--text-dark);
    font-size: 0.8rem;
    line-height: 1.3;
}

.research-execution-command-chip strong {
    font-weight: 700;
}

.research-execution-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-start;
    justify-content: flex-end;
}

.research-execution-hero-copy {
    min-width: 0;
}

.research-execution-hero-kicker {
    color: rgba(8, 145, 178, 0.92);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.research-execution-hero-title {
    margin-top: 0.3rem;
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
}

.research-execution-hero-description {
    max-width: 72ch;
    margin-top: 0.5rem;
    color: var(--text-gray);
    font-size: 0.94rem;
    line-height: 1.58;
}

.research-execution-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.research-execution-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: stretch;
}

.research-execution-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.research-execution-summary-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.9rem 0.95rem;
    box-shadow: 0 18px 32px -34px rgba(15, 23, 42, 0.5);
}

.research-execution-summary-label {
    color: var(--text-gray);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.research-execution-summary-value {
    margin-top: 0.4rem;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.research-execution-summary-meta {
    margin-top: 0.3rem;
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.45;
}

.research-execution-primary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.82fr);
    gap: 1rem;
    align-items: start;
}

.research-execution-primary-main,
.research-execution-primary-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.research-execution-secondary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.82fr);
    gap: 1rem;
    align-items: start;
}

.research-execution-secondary-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.research-execution-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1fr) minmax(340px, 1.35fr);
    gap: 1rem;
    align-items: start;
}

.research-execution-panel {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 1rem;
    box-shadow: 0 22px 42px -36px rgba(15, 23, 42, 0.55);
}

.research-execution-panel--accent {
    background:
        linear-gradient(180deg, rgba(8, 145, 178, 0.1), rgba(255, 255, 255, 0.96)),
        #fff;
}

.research-execution-panel--wide {
    grid-column: span 2;
}

.research-execution-panel-title {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.research-execution-panel-description {
    margin-top: 0.35rem;
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.5;
}

.research-execution-lead-row,
.research-execution-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.research-execution-handover-card {
    margin-top: 1rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.86);
}

.research-execution-handover-label {
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.research-execution-handover-state {
    margin: 0.3rem 0 0.75rem;
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
}

.research-execution-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.research-execution-month-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.9));
    padding: 0.8rem 0.85rem;
}

.research-execution-month-label {
    color: var(--text-gray);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.research-execution-month-value {
    margin-top: 0.35rem;
    color: var(--text-dark);
    font-size: 1.15rem;
    font-weight: 700;
}

.research-execution-month-meta,
.research-execution-grid-hint {
    margin-top: 0.25rem;
    color: var(--text-gray);
    font-size: 0.82rem;
}

.research-execution-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.research-execution-person-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: #fff;
    padding: 0.9rem;
}

.research-execution-person-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.research-execution-person-avatar {
    flex: 0 0 auto;
}

.research-execution-person-copy {
    min-width: 0;
}

.research-execution-person-name {
    color: var(--text-dark);
    font-size: 0.94rem;
    font-weight: 700;
}

.research-execution-person-role {
    color: var(--text-gray);
    font-size: 0.8rem;
}

.research-execution-person-stats,
.research-execution-person-months,
.research-execution-person-assignments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.research-execution-inline-chip,
.research-execution-assignment-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(241, 245, 249, 0.92);
    color: var(--text-dark);
    font-size: 0.79rem;
    font-weight: 600;
}

.research-execution-assignment-pill {
    background: rgba(207, 250, 254, 0.8);
    border-color: rgba(6, 182, 212, 0.18);
}

.research-execution-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.research-execution-activity-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.88);
}

.research-execution-activity-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.12);
    font-size: 1rem;
}

.research-execution-activity-copy {
    min-width: 0;
}

.research-execution-activity-line {
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.45;
}

.research-execution-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    margin-top: 0.3rem;
    color: var(--text-gray);
    font-size: 0.78rem;
}

.research-execution-empty-state {
    margin-top: 1rem;
}

.research-execution-panel--planner {
    background:
        linear-gradient(180deg, rgba(244, 247, 250, 0.96), rgba(255, 255, 255, 0.98)),
        #fff;
}

.research-execution-planner-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: end;
    justify-content: space-between;
    margin-top: 1rem;
}

.research-execution-planner-month-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.research-execution-planner-month-label {
    min-width: 120px;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 700;
}

.research-execution-planner-filter {
    min-width: min(100%, 280px);
}

.research-execution-planner-filter .form-label {
    margin-bottom: 0.35rem;
}

.research-execution-planner-stats {
    margin-top: 1rem;
    margin-bottom: 0;
}

.research-execution-planner-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.research-execution-planner-calendar {
    min-width: 0;
}

.research-execution-planner-weekdays,
.research-execution-planner-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.55rem;
}

.research-execution-planner-weekday {
    padding: 0.2rem 0.35rem 0.15rem;
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.research-execution-planner-day {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    min-height: 124px;
    padding: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-dark);
    text-align: left;
    box-shadow: 0 18px 34px -32px rgba(15, 23, 42, 0.65);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}

.research-execution-planner-day:hover {
    transform: translateY(-1px);
    border-color: rgba(8, 145, 178, 0.32);
    box-shadow: 0 24px 36px -30px rgba(8, 145, 178, 0.35);
}

.research-execution-planner-day.is-selected {
    border-color: rgba(8, 145, 178, 0.42);
    background:
        linear-gradient(180deg, rgba(236, 254, 255, 0.94), rgba(255, 255, 255, 0.98)),
        #fff;
}

.research-execution-planner-day.is-muted {
    background: rgba(248, 250, 252, 0.82);
    color: rgba(71, 85, 105, 0.82);
}

.research-execution-planner-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.24);
}

.research-execution-planner-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.research-execution-planner-day-number {
    font-size: 0.98rem;
    font-weight: 700;
}

.research-execution-planner-day-tasks {
    color: var(--text-gray);
    font-size: 0.72rem;
    font-weight: 700;
}

.research-execution-planner-day-totals {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    color: var(--text-gray);
    font-size: 0.77rem;
}

.research-execution-planner-day-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.research-execution-planner-inspector {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: rgba(249, 250, 251, 0.94);
}

.research-execution-planner-inspector-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.research-execution-planner-day-stats {
    margin: 0;
}

.research-execution-planner-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.1rem;
}

.research-execution-planner-block-title {
    color: var(--text-dark);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.research-execution-planner-block-copy {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.research-execution-planner-line,
.research-execution-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: #fff;
}

.research-execution-planner-line-copy,
.research-execution-task-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.research-execution-planner-line-copy strong,
.research-execution-task-name {
    color: var(--text-dark);
    font-size: 0.88rem;
    font-weight: 700;
}

.research-execution-planner-line-note {
    color: var(--text-gray);
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.research-execution-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    color: var(--text-gray);
    font-size: 0.76rem;
}

.research-execution-planner-line-actions,
.research-execution-task-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.research-execution-task-actions .form-select {
    min-width: 180px;
}

.research-execution-planner-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.research-execution-planner-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.research-execution-planner-block-subtitle {
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.45;
    margin-top: 0.25rem;
}

.research-execution-planner-block-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.research-execution-suggestion-summary {
    color: var(--text-dark);
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    background: rgba(236, 254, 255, 0.92);
    border: 1px solid rgba(8, 145, 178, 0.16);
}

.research-execution-suggestion-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.research-execution-suggestion-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
}

.research-execution-suggestion-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.research-execution-suggestion-text {
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.research-execution-suggestion-why {
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

.research-execution-suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.research-execution-suggestion-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.research-execution-suggestion-sources {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    color: var(--text-gray);
    font-size: 0.76rem;
    line-height: 1.45;
}

@media (max-width: 1400px) {
    .research-execution-command-strip {
        grid-template-columns: 1fr;
    }

    .research-execution-command-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1200px) {
    .research-execution-hero,
    .research-execution-summary-grid,
    .research-execution-primary-layout,
    .research-execution-secondary-layout {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .research-execution-command-actions,
    .research-execution-hero-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .research-execution-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .research-execution-panel--wide {
        grid-column: span 2;
    }

    .research-execution-planner-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .research-workplan-advanced-summary,
    .research-execution-command-strip,
    .research-execution-hero,
    .research-execution-summary-grid,
    .research-execution-primary-layout,
    .research-execution-secondary-layout {
        grid-template-columns: 1fr;
    }

    .research-workplan-advanced-summary {
        align-items: flex-start;
    }

    .research-execution-grid {
        grid-template-columns: 1fr;
    }

    .research-execution-panel--wide {
        grid-column: span 1;
    }

    .research-execution-planner-grid {
        gap: 0.45rem;
    }

    .research-execution-planner-day {
        min-height: 108px;
        padding: 0.65rem;
    }

    .research-execution-task-row,
    .research-execution-planner-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .research-execution-planner-block-head,
    .research-execution-suggestion-row {
        flex-direction: column;
    }

    .research-execution-task-actions {
        width: 100%;
    }

    .research-execution-command-actions,
    .research-execution-hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .research-execution-command-actions .btn {
        width: 100%;
    }

    .research-execution-task-actions .form-select {
        width: 100%;
        min-width: 0;
    }
}

.project-notes-shell .card-body {
    padding-top: 1rem;
}

.project-notes-shell .notes-layout {
    min-height: 420px;
}

.project-detail-content .reports-executive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.project-detail-content .reports-executive-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    padding: 0.65rem 0.75rem;
    min-width: 0;
}

.project-detail-content .reports-executive-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.project-detail-content .reports-executive-value {
    margin-top: 0.2rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-dark);
}

.project-detail-content .reports-executive-sub {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-gray);
    line-height: 1.3;
}

.project-detail-content .reports-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.18);
    color: #334155;
}

.project-detail-content .reports-kpi-pill.positive {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.project-detail-content .reports-kpi-pill.negative {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.project-detail-content .reports-kpi-pill.neutral {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.project-detail-content .reports-inline-note {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-gray);
}

.project-detail-content .budget-analysis-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
}

.project-detail-content .budget-analysis-panel {
    margin: 0;
    box-shadow: none;
}

.project-detail-content .budget-chart-panel .card-body {
    gap: 0.75rem;
}

.project-detail-content .budget-analysis-panel .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-detail-content .budget-status-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.project-detail-content .budget-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-detail-content .budget-breakdown-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.project-detail-content .budget-breakdown-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.84rem;
}

.project-detail-content .budget-breakdown-head strong {
    font-size: 0.88rem;
    color: var(--text-dark);
}

.project-detail-content .budget-breakdown-head span {
    color: var(--text-gray);
    white-space: nowrap;
}

.project-detail-content .budget-breakdown-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}

.project-detail-content .budget-breakdown-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.project-detail-content .budget-metric-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.project-detail-content .budget-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.9rem;
}

.project-detail-content .budget-metric-row span {
    color: var(--text-gray);
}

.project-detail-content .budget-metric-row strong {
    color: var(--text-dark);
    white-space: nowrap;
}

.project-detail-content .budget-planning-studio-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.project-detail-content .budget-planning-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.project-detail-content .budget-planning-card,
.project-detail-content .budget-planning-quick-card {
    margin: 0;
}

.project-detail-content .budget-planning-card .card-body,
.project-detail-content .budget-planning-quick-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-detail-content .budget-planning-topbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.project-detail-content .budget-planning-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 560px;
    min-width: 0;
}

.project-detail-content .budget-planning-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.project-detail-content .budget-planning-subtitle {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-gray);
    max-width: 70ch;
}

.project-detail-content .budget-planning-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.project-detail-content .budget-planning-inline-note {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-gray);
}

.project-detail-content .budget-planning-inline-note--danger {
    color: var(--danger);
}

.project-detail-content .budget-planning-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.project-detail-content .budget-planning-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 600;
}

.project-detail-content .budget-planning-stepper-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
}

.project-detail-content .budget-planning-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.project-detail-content .budget-planning-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.project-detail-content .budget-planning-kpi > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.project-detail-content .budget-planning-kpi > strong {
    font-size: 1.15rem;
    color: var(--text-dark);
}

.project-detail-content .budget-planning-kpi > small {
    font-size: 0.79rem;
    line-height: 1.4;
    color: var(--text-gray);
}

.project-detail-content .budget-planning-kpi-state--positive {
    color: var(--success);
}

.project-detail-content .budget-planning-kpi-state--negative {
    color: var(--danger);
}

.project-detail-content .budget-planning-kpi-state--neutral {
    color: var(--text-gray);
}

.project-detail-content .budget-planning-status-pills,
.project-detail-content .budget-planning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.project-detail-content .budget-planning-status-pills {
    justify-content: flex-end;
    align-content: flex-start;
}

.project-detail-content .budget-planning-actions .btn {
    min-height: 34px;
}

.project-detail-content .budget-planning-actions {
    justify-content: flex-end;
}

.project-detail-content .budget-workflow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.project-detail-content .budget-workflow-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
}

.project-detail-content .budget-workflow-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-detail-content .budget-workflow-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.project-detail-content .budget-workflow-step-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.project-detail-content .budget-workflow-step {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    background: #e0f2fe;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.project-detail-content .budget-workflow-section-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.project-detail-content .budget-workflow-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.project-detail-content .budget-workflow-section-text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-gray);
}

.project-detail-content .budget-domain-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.project-detail-content .budget-domain-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.project-detail-content .budget-domain-summary-item span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.project-detail-content .budget-domain-summary-item strong {
    font-size: 1rem;
    color: var(--text-dark);
}

.project-detail-content .budget-domain-summary-item.is-alert {
    border-color: #fecaca;
    background: #fff7f7;
}

.project-detail-content .budget-domain-table-head,
.project-detail-content .budget-domain-target-row,
.project-detail-content .budget-domain-graph-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 0.9fr) minmax(150px, 1fr);
    gap: 0.75rem;
    align-items: center;
}

.project-detail-content .budget-domain-table-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.project-detail-content .budget-domain-table {
    display: flex;
    flex-direction: column;
}

.project-detail-content .budget-domain-target-row {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.project-detail-content .budget-domain-target-meta,
.project-detail-content .budget-domain-target-input,
.project-detail-content .budget-domain-target-result {
    min-width: 0;
}

.project-detail-content .budget-domain-target-result {
    text-align: right;
}

.project-detail-content .budget-domain-phase-breakdown {
    margin: -0.2rem 0 0.7rem 1.25rem;
    padding: 0.55rem 0.75rem;
    border-left: 2px solid var(--border-color, #e2e8f0);
    background: #f8fafc;
    border-radius: 0 0.5rem 0.5rem 0;
}

.project-detail-content .budget-domain-phase-result {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(90px, auto));
    gap: 0.75rem;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.78rem;
}

.project-detail-content .budget-domain-phase-result > :not(:first-child) {
    text-align: right;
}

.project-detail-content .budget-domain-phase-result--head {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.project-detail-content .budget-domain-summary-strip--periods {
    margin-bottom: 0.85rem;
}

.project-detail-content .budget-domain-period-summary {
    min-width: 205px;
    padding: 0.65rem !important;
    vertical-align: top;
}

.project-detail-content .budget-domain-period-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.project-detail-content .budget-domain-period-summary > div span {
    color: #64748b;
}

.project-detail-content .budget-domain-period-summary .is-open strong {
    color: #b45309;
}

.project-detail-content .budget-domain-period-summary .is-over strong {
    color: #b91c1c;
}

.project-detail-content .budget-domain-period-summary .btn {
    width: 100%;
    margin-top: 0.45rem;
    white-space: normal;
}

.project-detail-content .budget-domain-graph-row {
    grid-template-columns: minmax(160px, 1.15fr) minmax(220px, 1.8fr) auto;
}

.project-detail-content .budget-domain-graph-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.project-detail-content .budget-domain-graph-bar {
    height: 14px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.project-detail-content .budget-domain-graph-fill {
    height: 100%;
    border-radius: 999px;
}

.project-detail-content .budget-domain-graph-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-gray);
}

.project-detail-content .budget-planning-quick-card .card-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.project-detail-content .budget-advanced-details {
    margin-top: 0;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    padding: 0.85rem 1rem 1rem;
}

.project-detail-content .budget-advanced-details > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--text-dark);
}

.project-detail-content .budget-advanced-details > summary::-webkit-details-marker {
    display: none;
}

.project-detail-content .budget-advanced-details > summary small {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-gray);
    text-align: right;
}

.project-detail-content .budget-grid-shell .card-header {
    align-items: flex-start;
    gap: 1rem;
}

.project-detail-content .budget-planning-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    flex-wrap: wrap;
    align-items: end;
}

.project-detail-content .budget-planning-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: end;
}

.project-detail-content .budget-planning-rate-field {
    min-width: 136px;
}

.project-detail-content .budget-planning-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.project-detail-content .budget-grid-shell .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
}

.project-detail-content .budget-grid-shell .card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    font-size: 12px;
}

.project-detail-content .budget-grid-header-copy {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1 1 420px;
    min-width: 0;
}

.project-detail-content .budget-grid-helper {
    font-size: 0.82rem;
    color: var(--text-gray);
    line-height: 1.4;
    max-width: 78ch;
}

.project-detail-content .budget-grid-summary,
.project-detail-content .budget-grid-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-detail-content .budget-grid-toolbar-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 560px;
    min-width: 280px;
}

.project-detail-content .budget-grid-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.project-detail-content .budget-grid-toolbar .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-gray);
}

.project-detail-content .budget-grid-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-detail-content .budget-grid-table th,
.project-detail-content .budget-grid-table td {
    vertical-align: top;
}

.project-detail-content .budget-grid-table {
    white-space: nowrap;
}

.project-detail-content .budget-grid-shell .table-responsive {
    overflow-x: auto;
}

.project-detail-content .budget-grid-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.project-detail-content .budget-grid-table td {
    padding: 0.6rem 0.5rem;
}

.project-detail-content .budget-grid-row-label {
    min-width: 180px;
}

.project-detail-content .budget-grid-row-name {
    font-weight: 600;
    color: var(--text-dark);
}

.project-detail-content .budget-grid-row-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 12px;
    color: var(--text-gray);
}

.project-detail-content .budget-grid-row-meta-note {
    font-size: 12px;
    color: var(--text-gray);
}

.project-detail-content .budget-grid-inline-select {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.project-detail-content .budget-grid-inline-select span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-gray);
}

.project-detail-content .budget-grid-inline-select .form-select {
    min-width: 0;
    padding: 0.3rem 0.4rem;
    font-size: 12px;
}

.project-detail-content .budget-grid-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 118px;
}

.project-detail-content .budget-grid-mini-field {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
}

.project-detail-content .budget-grid-mini-prefix {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-gray);
    text-align: right;
}

.project-detail-content .budget-grid-mini-field .form-input {
    min-width: 0;
    padding: 0.35rem 0.45rem;
}

.project-detail-content .budget-grid-static-stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-end;
}

.project-detail-content .budget-grid-static-primary {
    font-weight: 600;
    color: var(--text-dark);
}

.project-detail-content .budget-grid-static-secondary,
.project-detail-content .budget-grid-cell-note {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-gray);
}

.project-detail-content .budget-grid-derived-note {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.2rem 0.45rem 0;
    font-size: 11px;
    color: var(--text-gray);
}

.project-detail-content .budget-grid-derived-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.project-detail-content .budget-grid-table .budget-grid-phase-row td {
    background: #f8fafc;
}

.project-detail-content .budget-grid-table .budget-grid-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 10px 0 16px -18px rgba(15, 23, 42, 0.35);
}

.project-detail-content .budget-grid-table thead .budget-grid-sticky-col {
    z-index: 3;
    background: #f8fafc;
}

.project-detail-content .budget-grid-table .budget-grid-phase-row .budget-grid-sticky-col {
    background: #f8fafc;
}

.project-detail-content .budget-grid-table .budget-grid-totals .budget-grid-sticky-col {
    background: #f8fafc;
}

@media (max-width: 1100px) {
    .project-detail-content .budget-analysis-layout {
        grid-template-columns: 1fr;
    }

    .project-detail-content .budget-planning-intro-grid,
    .project-detail-content .budget-workflow-grid,
    .project-detail-content .budget-domain-summary-strip {
        grid-template-columns: 1fr;
    }

    .project-detail-content .budget-planning-topbar {
        flex-direction: column;
    }

    .project-detail-content .budget-planning-actions {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .project-detail-content .budget-domain-table-head {
        display: none;
    }

    .project-detail-content .budget-domain-target-row,
    .project-detail-content .budget-domain-graph-row {
        grid-template-columns: 1fr;
    }

    .project-detail-content .budget-domain-target-result,
    .project-detail-content .budget-domain-graph-value {
        align-items: flex-start;
        text-align: left;
    }

    .project-detail-content .budget-domain-phase-breakdown {
        margin-left: 0;
        overflow-x: auto;
    }

    .project-detail-content .budget-domain-phase-result {
        min-width: 560px;
    }
}

@media (max-width: 768px) {
    .project-detail-tabs-list {
        gap: 0.5rem;
    }

    .project-detail-tab-button {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .project-list-filter--search {
        grid-column: span 1;
    }

    .project-list-filter--sort {
        flex-wrap: wrap;
    }

    .project-list-filter--sort .form-select,
    .project-list-filter--sort .btn {
        width: 100%;
    }

    .project-list-results-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .project-list-display-toggle {
        width: 100%;
    }

    .project-list-display-button {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .project-tab-card-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .project-detail-content .budget-planning-toolbar,
    .project-detail-content .budget-planning-controls {
        align-items: stretch;
    }

    .project-detail-content .budget-planning-rate-field {
        min-width: 0;
        flex: 1 1 180px;
    }

    .project-detail-content .budget-grid-actions {
        justify-content: stretch;
    }

    .project-detail-content .budget-grid-actions .btn {
        flex: 1 1 160px;
    }

    .project-detail-content .budget-planning-actions .btn {
        flex: 1 1 180px;
    }

    .project-detail-content .budget-advanced-details > summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-detail-content .budget-advanced-details > summary small {
        text-align: left;
    }
}

/* Gantt Chart Styles */
.gantt-container {
    overflow-x: auto;
    overflow-y: visible;
    min-height: 400px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    transition: cursor 0.2s ease;
}

.gantt-container.gantt-pan-enabled {
    cursor: grab;
}

.gantt-container.is-panning {
    cursor: grabbing;
}

.gantt-timeline {
    min-width: 800px;
    background: white;
}

.gantt-timeline-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-project-name {
    padding: 1rem;
    font-weight: 600;
    border-right: 1px solid #dee2e6;
}

.gantt-timeline-months {
    display: flex;
}

.gantt-month {
    flex: 1;
    padding: 1rem;
    text-align: center;
    border-right: 1px solid #dee2e6;
    font-weight: 500;
    color: #495057;
}

.gantt-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    border-bottom: 1px solid #e9ecef;
    min-height: 60px;
}

.gantt-project-info {
    padding: 1rem;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gantt-project-title {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.gantt-project-title .project-number {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

.gantt-project-title .project-name {
    font-weight: 600;
    color: #212529;
}

.gantt-project-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gantt-timeline-row {
    position: relative;
    padding: 1rem 0;
}

.gantt-timeline-row.has-task-lanes {
    padding-bottom: 3.25rem;
}

/* Alternate row shading for readability */
.gantt-body .gantt-row:nth-child(even) {
    background: #fbfcfe;
}

.gantt-baseline {
    position: absolute;
    height: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 6px;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 6px, rgba(0,0,0,0.05) 6px, rgba(0,0,0,0.05) 12px);
}

.gantt-bar {
    position: absolute;
    height: 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    top: 50%;
    transform: translateY(-50%);
}

.gantt-bar:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gantt-bar-handle {
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
}
.gantt-bar-handle[data-role="left"] { left: -6px; }
.gantt-bar-handle[data-role="right"] { right: -6px; }

.gantt-bar-planning {
    background: linear-gradient(45deg, #6c757d, #495057);
}

.gantt-bar-active {
    background: linear-gradient(45deg, #00B2CC, #007ba3);
}

.gantt-bar-completed {
    background: linear-gradient(45deg, #28a745, #1e7e34);
}

.gantt-bar-on-hold {
    background: linear-gradient(45deg, #ffc107, #e0a800);
}

.gantt-bar-progress {
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    transition: width 0.3s ease;
}

.gantt-bar-label {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    right: 8px; /* allow ellipsis within bar */
}

.gantt-milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.gantt-milestone-marker {
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gantt-milestone-marker:hover {
    transform: scale(1.2);
}

.gantt-milestone-marker.completed {
    filter: hue-rotate(120deg);
}

.gantt-dependency {
    position: absolute;
    height: 2px;
    background: #9aa1a9;
    top: calc(50% + 14px);
}

/* Simple hover tooltip for milestones */
.gantt-tooltip {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.gantt-milestone:hover .gantt-tooltip { opacity: 1; }

/* Legend tweaks */
.gantt-legend .gantt-legend-toggle[aria-expanded="true"]::before {
    content: '▾ ';
}
.gantt-legend .gantt-legend-toggle[aria-expanded="false"]::before {
    content: '▸ ';
}

/* Improve spacing for toggles and milestone checkboxes in the Gantt legend */
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.gantt-legend label.checkbox,
.gantt-legend .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem; /* space between the checkbox and its text */
    margin: 0 .75rem .5rem 0; /* space between sibling toggles and rows */
    flex: 0 0 auto; /* prevent shrinking that can cause overlap */
    white-space: nowrap; /* keep each toggle on a single line */
}

.gantt-legend label.checkbox input[type="checkbox"],
.gantt-legend .checkbox-label input[type="checkbox"] {
    margin: 0; /* reset browser default */
    flex: 0 0 auto;
}

/* Defensive resets so checkboxes never inherit odd component styles */
.gantt-legend .checkbox-label input[type="checkbox"] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    width: 16px;
    height: 16px;
    position: static;
    opacity: 1;
}

/* Ensure the legend body never spills into the timeline */
.gantt-legend-body {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    max-width: 100%;
}

/* Today marker line */
.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e55353; /* subtle red */
    opacity: 0.8;
    pointer-events: none;
}

/* Phase bars within a project row */
.gantt-phase-bar {
    position: absolute;
    height: 6px;
    background: #8884d8;
    border-radius: 4px;
    top: calc(50% + 18px);
}

.gantt-task-chip {
    position: absolute;
    min-height: 18px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    background: var(--primary-cyan, #00b2cc);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.15s ease;
}

.gantt-task-chip:hover {
    transform: translateY(-1px);
}

.gantt-task-chip[data-status="done"] {
    background: #16a34a;
}

.gantt-task-chip[data-status="in-progress"] {
    background: #f59e0b;
}

.gantt-task-chip[data-status="on-hold"] {
    background: #d97706;
}

.gantt-task-chip[data-status="todo"] {
    background: #0ea5e9;
}

.gantt-task-chip[data-status="backlog"] {
    background: #6b7280;
}

.gantt-task-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-task-chip--phase {
    background: var(--primary-indigo, #6366f1);
}

/* Resource Allocation Styles */
.resource-overview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Kanban (Planner) Enhancements */
.kanban-col,
.kanban-column {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), #ffffff);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 28px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.kanban-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--primary-cyan), #7ce7d3);
    opacity: 0.9;
}

.kanban-column[data-planner-col="backlog"] {
    background: linear-gradient(180deg, rgba(248,249,252,0.95), #ffffff);
}
.kanban-column[data-planner-col="backlog"]::before { background: linear-gradient(90deg, #9aa1a9, #c8ccd4); }
.kanban-column[data-planner-col="todo"] {
    background: linear-gradient(180deg, rgba(0,178,204,0.08), #ffffff);
}
.kanban-column[data-planner-col="todo"]::before { background: linear-gradient(90deg, #00b2cc, #5de0dd); }
.kanban-column[data-planner-col="in-progress"] {
    background: linear-gradient(180deg, rgba(245,158,11,0.08), #ffffff);
}
.kanban-column[data-planner-col="in-progress"]::before { background: linear-gradient(90deg, #f97316, #facc15); }
.kanban-column[data-planner-col="on-hold"] {
    background: linear-gradient(180deg, rgba(234,179,8,0.08), #ffffff);
}
.kanban-column[data-planner-col="on-hold"]::before { background: linear-gradient(90deg, #eab308, #fde047); }
.kanban-column[data-planner-col="done"] {
    background: linear-gradient(180deg, rgba(16,185,129,0.08), #ffffff);
}
.kanban-column[data-planner-col="done"]::before { background: linear-gradient(90deg, #059669, #34d399); }

/* Column header */
.kanban-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.25rem 0.6rem 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.kanban-title { font-weight: 600; }
.kanban-actions { display: flex; align-items: center; gap: 6px; }
.kanban-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    font-weight: 600;
    font-size: 0.75rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-gray);
}

.kanban-dropzone {
    min-height: 80px;
    padding-top: 0.35rem;
    padding-right: 0.1rem;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.kanban-dropzone::-webkit-scrollbar {
    width: 6px;
}
.kanban-dropzone::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.kanban-dropzone.is-dragover {
    outline: 2px dashed var(--primary-cyan);
    outline-offset: -4px;
    background: rgba(0, 178, 204, 0.06);
}

.kanban-card {
    background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 80%);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-left: 4px solid var(--primary-cyan);
    border-radius: 14px;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.12);
    cursor: grab;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}

.kanban-card:hover {
    box-shadow: 0 25px 45px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px);
}

/* Flash highlight when restored */
.kanban-card.flash-highlight {
    animation: flashHighlight 1.6s ease-out 1;
}
@keyframes flashHighlight {
    0% { box-shadow: 0 0 0 3px rgba(0,178,204,0.35); background: rgba(0,178,204,0.08); }
    40% { box-shadow: 0 0 0 0 rgba(0,178,204,0.0); background: #fff; }
    100% { box-shadow: var(--shadow-sm); background: #fff; }
}

.kanban-card-title {
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    font-size: 0.97rem;
    color: #0f172a;
}
.kanban-card-title:hover { color: var(--primary-cyan); text-decoration: underline; }

/* Accent by column */
.kanban-card[data-col="backlog"] { border-left-color: #9aa1a9; }
.kanban-card[data-col="todo"] { border-left-color: var(--primary-cyan); }
.kanban-card[data-col="in-progress"] { border-left-color: #f59e0b; }
.kanban-card[data-col="on-hold"] { border-left-color: #eab308; }
.kanban-card[data-col="done"] { border-left-color: #10b981; }

/* Label chips (fallback styles; color comes inline) */
.kanban-card .labels, .kanban-card [style*="flex-wrap:wrap"] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.label-chip {
    color: #000;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0,0,0,0.06);
}
.label-chip .label-remove {
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
}

/* Card meta */
.kanban-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
}
.kanban-meta .meta-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.kanban-meta .meta-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.pill + .pill { margin-left: 4px; }
.pill-icon { font-size: 0.85rem; line-height: 1; }
.time-pill {
    background: rgba(0, 178, 204, 0.15);
    color: #036672;
}
.comment-pill {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}
.due-pill.due-overdue {
    background: #fee2e2;
    color: #b91c1c;
}
.due-pill.due-soon {
    background: #fef3c7;
    color: #92400e;
}
.due-pill.due-far {
    background: #e0f2fe;
    color: #075985;
}

/* Chips row for status/phase */
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top: 4px; }
.chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.2;
    border: 1px solid var(--border-color);
    color: var(--text-gray);
    background: #fff;
}
.chip-status.status-backlog { background: #eef2f7; color: #334155; border-color: transparent; }
.chip-status.status-todo { background: rgba(0, 178, 204, 0.12); color: var(--primary-cyan); border-color: transparent; }
.chip-status.status-in-progress { background: rgba(245, 158, 11, 0.12); color: var(--warning); border-color: transparent; }
.chip-status.status-on-hold { background: rgba(234, 179, 8, 0.15); color: #a16207; border-color: transparent; }
.chip-status.status-done { background: rgba(16, 185, 129, 0.12); color: var(--success); border-color: transparent; }
.chip-phase { background: var(--primary-silver); color: var(--text-gray); }

.avatar-extra { font-size: 0.75rem; color: var(--text-gray); }

/* Optional grid wrapper if present */
.kanban-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .kanban-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 900px) {
    .kanban-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
    .kanban-grid { grid-template-columns: 1fr; }
}

.kanban-scroll {
    overflow-x: auto;
    padding: 0.5rem 0.25rem 0.75rem 0.25rem;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(120deg, rgba(248,249,255,0.9), rgba(255,255,255,0.95));
    border-radius: 16px;
}

.kanban-scroll .kanban-grid {
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    min-width: 1200px;
    padding-bottom: 0.5rem;
}

.resource-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.resource-stat-card {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.resource-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00B2CC;
}

.resource-stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.resource-allocation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.resource-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.resource-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
}

.resource-avatar {
    width: 40px;
    height: 40px;
    background: #00B2CC;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 1rem;
}

.resource-info {
    flex: 1;
}

.resource-name {
    font-weight: 600;
    color: #212529;
}

.resource-role {
    font-size: 0.875rem;
    color: #6c757d;
}

.resource-utilization {
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.resource-utilization.normal {
    background: #d4edda;
    color: #155724;
}

.resource-utilization.high {
    background: #fff3cd;
    color: #856404;
}

.resource-utilization.overallocated {
    background: #f8d7da;
    color: #721c24;
}

.resource-projects {
    padding: 1rem;
}

.resource-projects-header {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.resource-project {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.resource-project-name {
    font-size: 0.875rem;
    color: #495057;
}

.resource-project-allocation {
    font-size: 0.875rem;
    font-weight: 600;
    color: #00B2CC;
}

/* Template Styles */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.template-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.template-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.template-header {
    padding: 1.5rem 1rem 1rem;
    text-align: center;
}

.template-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.template-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0.5rem 0;
    color: #212529;
}

.template-description {
    color: #6c757d;
    font-size: 0.875rem;
    margin: 0;
}

.template-details {
    padding: 1rem;
    border-top: 1px solid #e9ecef;
}

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

.template-stat {
    text-align: center;
}

.template-stat .label {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.template-stat .value {
    font-weight: 600;
    color: #212529;
    font-size: 0.875rem;
}

.template-phases {
    margin-top: 1rem;
}

.template-phases-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.template-phases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.template-phase-tag {
    background: #e9ecef;
    color: #495057;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
}

.template-phase-more {
    color: #6c757d;
    font-size: 0.75rem;
    font-style: italic;
}

.template-actions {
    padding: 1rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Milestone Styles */
.milestones-timeline {
    position: relative;
}

.milestone-item {
    display: flex;
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 4rem;
}

.milestone-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 3rem;
    bottom: -1.5rem;
    width: 2px;
    background: #dee2e6;
}

.milestone-marker {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3rem;
}

.milestone-number {
    background: #e9ecef;
    color: #495057;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.milestone-status {
    font-size: 1.25rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
}

.milestone-item.completed .milestone-status {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.milestone-item.overdue .milestone-status {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.milestone-item.upcoming .milestone-status {
    background: white;
    color: #6c757d;
    border-color: #dee2e6;
}

.milestone-content {
    flex: 1;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
}

.milestone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.milestone-title {
    margin: 0;
    color: #212529;
    font-size: 1rem;
}

.milestone-date {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
}

.milestone-actions {
    display: flex;
    gap: 0.25rem;
}

.milestone-description {
    margin: 0.5rem 0;
    color: #495057;
    font-size: 0.875rem;
}

.milestone-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.milestone-type {
    font-size: 0.75rem;
}

.milestone-priority {
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-high {
    color: #dc3545;
}

.priority-medium {
    color: #ffc107;
}

.priority-low {
    color: #28a745;
}

.milestone-assignee {
    font-size: 0.75rem;
    color: #6c757d;
}

.milestone-deliverables {
    margin-top: 1rem;
    font-size: 0.875rem;
}

.milestone-deliverables ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
}

.milestone-deliverables li.completed {
    text-decoration: line-through;
    color: #6c757d;
}

/* Document Styles */
.documents-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.document-stat {
    text-align: center;
}

.document-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00B2CC;
    display: block;
}

.document-stat .stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.document-card {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.document-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.document-icon {
    font-size: 2rem;
    margin-right: 1rem;
}

.document-info {
    flex: 1;
    min-width: 0;
}

.document-name {
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.document-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.document-size, .document-date {
    font-size: 0.75rem;
    color: #6c757d;
}

.document-category {
    margin-top: 0.25rem;
}

.document-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: 1rem;
}

/* Empty State Styles */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state-description {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

/* Button Group Styles */
.btn-group {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

.btn-group .btn {
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right: none;
}

/* Phase Workflow Styles */
.phases-workflow {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.workflow-header {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.workflow-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: auto;
    padding: 1rem 0;
}

.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 120px;
}

.workflow-step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.workflow-step-number {
    background: #e9ecef;
    color: #495057;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.workflow-step-status {
    width: 32px;
    height: 32px;
    border: 3px solid #dee2e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    font-size: 1rem;
    font-weight: 600;
}

.workflow-step.active .workflow-step-status {
    border-color: #00B2CC;
    background: #00B2CC;
    color: white;
}

.workflow-step.completed .workflow-step-status {
    border-color: #28a745;
    background: #28a745;
    color: white;
}

.workflow-step-content {
    text-align: center;
}

.workflow-step-title {
    font-weight: 600;
    color: #212529;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.workflow-step-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

.workflow-connector {
    position: absolute;
    top: 46px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #dee2e6;
    z-index: -1;
}

.workflow-step.completed + .workflow-step .workflow-connector {
    background: #28a745;
}

.phases-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.phase-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.phase-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phase-card.completed {
    border-left: 4px solid #28a745;
    background: linear-gradient(90deg, #f8fff8 0%, white 20%);
}

.phase-card.in-progress {
    border-left: 4px solid #00B2CC;
    background: linear-gradient(90deg, #f0fdff 0%, white 20%);
}

.phase-card.not-started {
    border-left: 4px solid #6c757d;
}

.phase-header {
    display: flex;
    justify-content: between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.phase-info {
    flex: 1;
}

.phase-title {
    margin: 0 0 0.5rem 0;
    color: #212529;
    font-size: 1.125rem;
    font-weight: 600;
}

.phase-description {
    margin: 0;
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.4;
}

.phase-status {
    margin-left: 1rem;
}

.phase-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.phase-metric {
    text-align: center;
}

.metric-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.metric-value {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

.metric-value.over-budget {
    color: #dc3545;
}

.phase-progress {
    margin-bottom: 1rem;
}

.phase-progress .progress {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.phase-progress .progress-bar {
    background: linear-gradient(45deg, #00B2CC, #007ba3);
    height: 100%;
    transition: width 0.3s ease;
}

.phase-tasks {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.phase-tasks-header {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #495057;
    font-size: 0.875rem;
}

.phase-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phase-task {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.phase-task.completed .task-name {
    text-decoration: line-through;
    color: #6c757d;
}

.task-status {
    color: #28a745;
}

.phase-tasks-more {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
    margin-top: 0.25rem;
}

.phase-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.phase-actions-left {
    display: flex;
    gap: 0.5rem;
}

.phase-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phase-completed {
    color: #28a745;
    font-weight: 600;
    font-size: 0.875rem;
}

.phase-blocked {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.phase-blocked-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.phase-blocked-text {
    color: #6c757d;
    font-weight: 500;
}

/* Budget Tracking Enhancement */
.budget-overview-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.budget-metric-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.budget-metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.budget-metric-value.positive {
    color: #28a745;
}

.budget-timeline-card .timeline-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.budget-timeline-card .timeline-summary .stat-label {
    font-size: 12px;
    color: #6c757d;
}
.budget-timeline-card .timeline-summary .stat-value {
    font-weight: 600;
    font-size: 1.05rem;
    font-family: inherit;
    line-height: 1.2;
}
.budget-timeline-card .timeline-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.budget-timeline-card .timeline-chart {
    width: 100%;
    overflow-x: auto;
}
.budget-timeline-card .timeline-chart svg {
    width: 100%;
    height: auto;
}
.budget-timeline-card .timeline-grid-line {
    stroke: var(--border-color);
    stroke-width: 1;
    opacity: 0.6;
    shape-rendering: crispEdges;
    pointer-events: none;
}
.budget-timeline-card .timeline-point {
    fill: #0ea5e9;
    stroke: #0ea5e9;
    cursor: pointer;
}
.budget-timeline-card .timeline-point:hover {
    fill: #0284c7;
}
.budget-timeline-card .timeline-row {
    display: grid;
    grid-template-columns: 100px 1fr 180px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}
.budget-timeline-card .timeline-day {
    font-weight: 600;
    color: var(--text-gray);
}
.budget-timeline-card .timeline-range {
    width: 100%;
    accent-color: var(--primary);
}
.budget-timeline-card .timeline-range:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.budget-timeline-card .timeline-value {
    font-size: 0.9rem;
    text-align: right;
}
@media (max-width: 900px) {
    .budget-timeline-card .timeline-row {
        grid-template-columns: 90px 1fr;
    }
    .budget-timeline-card .timeline-value {
        text-align: left;
        grid-column: span 2;
    }
}

.budget-metric-value.negative {
    color: #dc3545;
}

.budget-metric-value.warning {
    color: #ffc107;
}

.budget-metric-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.budget-progress-indicator {
    margin-top: 0.5rem;
}

.budget-progress-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.budget-progress-fill {
    height: 100%;
    background: #00B2CC;
    transition: width 0.3s ease;
}

.budget-progress-fill.over-budget {
    background: #dc3545;
}

/* Utility Classes */
.btn-xs {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    border-radius: 3px;
}

.gantt-baseline {
    position: absolute;
    height: 4px;
    top: -6px;
    background: repeating-linear-gradient(90deg, #64748b, #64748b 6px, transparent 6px, transparent 12px);
    border-radius: 3px;
    opacity: 0.8;
    pointer-events: none;
}

.gantt-bar-critical {
    outline: 2px solid #ef4444;
    box-shadow: 0 0 6px rgba(239,68,68,0.6);
}

.gantt-dep-connector {
    position: absolute;
    height: 2px;
    background: #64748b;
    opacity: 0.9;
    pointer-events: none;
}

.gantt-dep-connector .gantt-dep-arrow {
    position: absolute;
    right: -6px;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #64748b;
}

.gantt-dep-connector.critical {
    background: #ef4444;
}
.gantt-dep-connector.critical .gantt-dep-arrow {
    border-left-color: #ef4444;
}

.gantt-variance-pill {
    background: rgba(239,68,68,0.15);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,0.4);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.3;
}

.research-preaward-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.research-preaward-hero {
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f4fbfa 100%);
}

.research-preaward-hero-body,
.research-preaward-layout,
.research-preaward-form,
.research-preaward-sidebar,
.research-preaward-history-grid {
    display: flex;
    flex-direction: column;
}

.research-preaward-hero-body {
    gap: 1rem;
}

.research-preaward-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.research-preaward-kicker {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.research-preaward-title {
    margin: 0.25rem 0 0;
    font-size: 1.32rem;
    line-height: 1.25;
    color: #0f172a;
}

.research-preaward-copy,
.research-preaward-card-copy,
.research-preaward-archive-copy,
.research-preaward-action-copy,
.research-preaward-reference-copy {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.55;
}

.research-preaward-copy {
    margin-top: 0.45rem;
    max-width: 64rem;
}

.research-preaward-inline-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.research-preaward-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.research-preaward-metric,
.research-preaward-action-card,
.research-preaward-reference {
    border: 1px solid #dce8ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.research-preaward-metric {
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.research-preaward-metric-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.research-preaward-metric-value {
    color: #0f172a;
    font-size: 1.05rem;
}

.research-preaward-metric-meta {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.research-preaward-next-step {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px solid #dce8ec;
    background: rgba(255, 255, 255, 0.92);
}

.research-preaward-next-step strong {
    color: #0f172a;
    font-size: 0.98rem;
}

.research-preaward-next-step span {
    color: #475569;
    line-height: 1.55;
}

.research-preaward-next-step.is-warning {
    border-color: rgba(239, 68, 68, 0.28);
    background: #fff7f7;
}

.research-preaward-next-step.is-ready {
    border-color: rgba(15, 118, 110, 0.26);
    background: #f2fbf8;
}

.research-preaward-layout {
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.research-preaward-form {
    flex: 1 1 720px;
    gap: 1rem;
    min-width: min(100%, 720px);
}

.research-preaward-sidebar {
    flex: 0 0 380px;
    gap: 1rem;
    min-width: min(100%, 320px);
}

.research-preaward-card .card-header {
    gap: 0.85rem;
}

.research-preaward-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.research-preaward-form-span-2 {
    grid-column: span 2;
}

.research-preaward-reference {
    padding: 0.9rem 1rem;
}

.research-preaward-reference-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 0.35rem;
}

.research-preaward-reference-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.research-preaward-archive {
    width: 100%;
}

.research-preaward-archive-body {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.research-preaward-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.research-preaward-blockers {
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid #dbe7ef;
    background: #f8fafc;
    margin-bottom: 1rem;
}

.research-preaward-blockers.is-warning {
    border-color: rgba(239, 68, 68, 0.24);
    background: #fff7f7;
}

.research-preaward-blockers-title,
.research-preaward-action-title {
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 700;
}

.research-preaward-blockers-title {
    margin-bottom: 0.45rem;
}

.research-preaward-blockers-list {
    margin: 0;
    padding-left: 1.15rem;
    color: #b91c1c;
    line-height: 1.55;
}

.research-preaward-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.research-preaward-action-card {
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.research-preaward-readonly-note {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.92);
    color: #475569;
}

.research-preaward-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.research-preaward-summary-card .card-body {
    padding-top: 0.25rem;
}

.research-preaward-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.research-preaward-summary-row {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.research-preaward-summary-row--wide {
    grid-column: 1 / -1;
}

.research-preaward-summary-label {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.research-preaward-summary-value {
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.research-preaward-summary-value a {
    color: #0f766e;
    text-decoration: none;
}

.research-preaward-summary-value a:hover {
    text-decoration: underline;
}

.research-preaward-summary-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.research-preaward-summary-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #dbe3ea;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.3;
}

.research-preaward-summary-flag strong {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.research-preaward-summary-flag.is-positive {
    border-color: rgba(15, 118, 110, 0.25);
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
}

.research-preaward-summary-flag.is-muted {
    background: #f8fafc;
    color: #64748b;
}

.research-preaward-quick-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.research-preaward-inline-details {
    margin-top: 0.15rem;
}

.research-preaward-inline-details-body {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.research-preaward-full-width {
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .research-preaward-metrics,
    .research-preaward-form-grid,
    .research-preaward-action-grid,
    .research-preaward-history-grid,
    .research-preaward-readonly-grid,
    .research-preaward-summary-grid {
        grid-template-columns: 1fr;
    }

    .research-preaward-form-span-2 {
        grid-column: span 1;
    }

    .research-preaward-sidebar,
    .research-preaward-form {
        flex-basis: 100%;
        min-width: 100%;
    }

    .gantt-timeline-header,
    .gantt-row {
        grid-template-columns: 200px 1fr;
    }
    
    .gantt-project-name {
        padding: 0.75rem;
    }
    
    .templates-grid,
    .documents-grid {
        grid-template-columns: 1fr;
    }
    
    .resource-allocation-grid {
        grid-template-columns: 1fr;
    }
    
    .milestone-item {
        padding-left: 3rem;
    }
    
    .milestone-marker {
        width: 2.5rem;
    }
}

/* public/css/project-planner.css */
.project-planner-page {
    --project-planner-border: rgba(15, 23, 42, 0.09);
    --project-planner-border-soft: rgba(148, 163, 184, 0.16);
    --project-planner-muted: #64748b;
    --project-planner-surface: #ffffff;
    --project-planner-surface-muted: #f8fafc;
    --project-planner-accent: #0f766e;
    --project-planner-accent-soft: rgba(15, 118, 110, 0.08);
}

.project-planner-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 0.85rem;
}

.project-planner-header-copy {
    max-width: 820px;
}

.project-planner-kicker {
    display: inline-block;
    margin-bottom: 0.2rem;
    color: var(--project-planner-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-planner-header-copy .page-title {
    margin: 0;
    font-size: clamp(1.85rem, 2vw, 2.3rem);
    line-height: 1.02;
}

.project-planner-header-copy .page-subtitle {
    margin: 0.3rem 0 0;
    max-width: 640px;
    color: var(--project-planner-muted);
    font-size: 0.94rem;
    line-height: 1.35;
}

.project-planner-header-actions,
.project-planner-header-meta,
.project-planner-view-switch,
.project-planner-primary-actions,
.project-planner-row-actions,
.project-planner-comment-actions,
.project-planner-sidebar-meta,
.project-planner-board-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.project-planner-header-actions {
    justify-content: flex-end;
    align-items: center;
    align-self: flex-start;
    min-width: 320px;
}

.project-planner-header-meta {
    justify-content: flex-end;
    gap: 0.4rem;
}

.project-planner-card {
    background: var(--project-planner-surface);
    border: 1px solid var(--project-planner-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.project-planner-toolbar-card {
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.8rem;
}

.project-planner-primary-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
}

.project-planner-toolbar-search {
    flex: 1 1 320px;
    min-width: 240px;
}

.project-planner-toolbar-search .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.74rem;
}

.project-planner-summary-bar {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--project-planner-border-soft);
}

.project-planner-advanced-filters {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--project-planner-border-soft);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.project-planner-filters-grid {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 0.7rem;
}

.project-planner-advanced-filters-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.project-planner-advanced-hint,
.project-planner-muted,
.project-planner-inline-empty,
.project-planner-column-empty {
    color: var(--project-planner-muted);
}

.project-planner-advanced-hint {
    font-size: 0.78rem;
}

.project-planner-status-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.project-planner-status-toggle {
    border: 1px solid var(--project-planner-border-soft);
    background: var(--project-planner-surface-muted);
    border-radius: 999px;
    padding: 0.32rem 0.58rem;
    color: #0f172a;
    cursor: pointer;
    font-size: 0.78rem;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.project-planner-status-toggle.is-active {
    background: var(--project-planner-accent-soft);
    border-color: rgba(15, 118, 110, 0.24);
    color: var(--project-planner-accent);
}

.project-planner-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.project-planner-shell.is-sidebar-open {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 320px);
}

.project-planner-main,
.project-planner-sidebar {
    min-width: 0;
}

.project-planner-sidebar {
    display: none;
}

.project-planner-shell.is-sidebar-open .project-planner-sidebar {
    display: block;
}

.project-planner-sidebar-card {
    padding: 0.85rem 0.9rem 0.95rem;
    position: sticky;
    top: 1rem;
}

.project-planner-sidebar-head {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 0.7rem;
}

.project-planner-sidebar-head h3 {
    margin: 0;
}

.project-planner-sidebar-head-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.project-planner-sidebar-project,
.project-planner-board-card-project {
    color: var(--project-planner-muted);
    font-size: 0.84rem;
}

.project-planner-comment-form {
    margin: 0.8rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.project-planner-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.project-planner-comment-item {
    border: 1px solid var(--project-planner-border-soft);
    background: var(--project-planner-surface-muted);
    border-radius: 12px;
    padding: 0.65rem 0.7rem;
}

.project-planner-comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--project-planner-muted);
    margin-bottom: 0.35rem;
}

.project-planner-comment-body {
    white-space: pre-wrap;
    line-height: 1.35;
}

.project-planner-table-wrap {
    overflow-x: auto;
}

.project-planner-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.project-planner-table th {
    padding: 0.62rem 0.65rem;
    color: var(--project-planner-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--project-planner-border-soft);
    white-space: nowrap;
}

.project-planner-table td {
    padding: 0.72rem 0.65rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    vertical-align: top;
    text-align: left;
}

.project-planner-project-row {
    transition: background-color 0.16s ease;
}

.project-planner-project-row:hover {
    background: rgba(248, 250, 252, 0.9);
}

.project-planner-project-row.is-selected {
    background: rgba(15, 118, 110, 0.05);
}

.project-planner-project-detail-row td {
    background: rgba(248, 250, 252, 0.82);
    padding-top: 0;
}

.project-planner-project-main {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.project-planner-project-link,
.project-planner-task-link,
.project-planner-board-card-link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.project-planner-project-link {
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1.25;
}

.project-planner-row-toggle {
    min-width: 1.7rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.project-planner-row-meta {
    display: flex;
    gap: 0.25rem 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    color: var(--project-planner-muted);
    font-size: 0.76rem;
}

.project-planner-plan-summary {
    display: flex;
    gap: 0.3rem 0.55rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.78rem;
}

.project-planner-plan-metric {
    display: inline-flex;
    gap: 0.2rem;
    align-items: baseline;
    white-space: nowrap;
}

.project-planner-task-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.05rem 0.05rem;
}

.project-planner-task-item {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.65rem 0.7rem;
    background: var(--project-planner-surface);
    border: 1px solid var(--project-planner-border-soft);
    border-radius: 12px;
}

.project-planner-task-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.project-planner-task-link {
    font-weight: 600;
    line-height: 1.25;
}

.project-planner-task-item-meta,
.project-planner-board-card-meta {
    display: flex;
    gap: 0.25rem 0.55rem;
    flex-wrap: wrap;
    align-items: center;
    color: var(--project-planner-muted);
    font-size: 0.76rem;
}

.project-planner-pill {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid var(--project-planner-border-soft);
    padding: 0.28rem 0.54rem;
    font-size: 0.75rem;
    max-width: 100%;
}

.project-planner-pill strong {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-planner-status-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: #e2e8f0;
    color: #0f172a;
}

.project-planner-status-chip.status-backlog { background: #e2e8f0; color: #334155; }
.project-planner-status-chip.status-todo { background: #dbeafe; color: #1d4ed8; }
.project-planner-status-chip.status-in-progress { background: #dcfce7; color: #15803d; }
.project-planner-status-chip.status-on-hold { background: #fef3c7; color: #b45309; }
.project-planner-status-chip.status-done { background: #ede9fe; color: #6d28d9; }

.project-planner-date.is-overdue,
.project-planner-board-card-meta .is-overdue {
    color: #b42318;
    font-weight: 600;
}

.project-planner-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 0.7rem;
}

.project-planner-column {
    background: var(--project-planner-surface-muted);
    border: 1px solid var(--project-planner-border-soft);
    border-radius: 14px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
}

.project-planner-column-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem 0.8rem 0.62rem;
    border-bottom: 1px solid var(--project-planner-border-soft);
}

.project-planner-column-head h3 {
    margin: 0;
    font-size: 0.84rem;
}

.project-planner-column-body {
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-height: 220px;
}

.project-planner-column-body.is-drop-target {
    background: rgba(15, 118, 110, 0.05);
    border-radius: 0 0 18px 18px;
}

.project-planner-board-card {
    background: var(--project-planner-surface);
    border: 1px solid var(--project-planner-border-soft);
    border-radius: 12px;
    padding: 0.65rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.project-planner-board-card:hover {
    border-color: rgba(15, 118, 110, 0.22);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.project-planner-board-card.is-selected {
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.1);
}

.project-planner-board-card.is-dragging {
    opacity: 0.58;
    transform: rotate(1deg);
}

.project-planner-board-card-link {
    display: block;
    width: 100%;
}

.project-planner-board-card-title {
    display: block;
    margin-top: 0.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.project-planner-board-card-meta {
    justify-content: space-between;
    margin-top: 0.45rem;
}

.project-planner-board-card-actions {
    justify-content: space-between;
    margin-top: 0.55rem;
}

.project-planner-comment-count {
    color: var(--project-planner-muted);
    font-size: 0.74rem;
}

.project-planner-task-modal {
    width: min(920px, 94vw);
    max-height: 90vh;
    overflow: auto;
}

.project-planner-task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.project-planner-task-title-group,
.project-planner-task-description-group {
    grid-column: 1 / -1;
}

.project-planner-task-comments {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--project-planner-border-soft);
}

.project-planner-task-comments-head {
    margin-bottom: 0.6rem;
}

@media (max-width: 1320px) {
    .project-planner-shell.is-sidebar-open {
        grid-template-columns: 1fr;
    }

    .project-planner-sidebar-card {
        position: static;
    }

    .project-planner-board {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 980px) {
    .project-planner-header,
    .project-planner-header-actions,
    .project-planner-sidebar-head {
        flex-direction: column;
        align-items: stretch;
    }

    .project-planner-header-meta {
        justify-content: flex-start;
    }

    .project-planner-filters-grid,
    .project-planner-task-grid,
    .project-planner-board {
        grid-template-columns: 1fr;
    }

    .project-planner-task-item,
    .project-planner-advanced-filters-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* public/css/settings-company.css */
/* Company Settings Styles */

/* Inline sub-navigation layout */
.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

.settings-subnav {
    position: sticky;
    top: 16px; /* within page container */
    align-self: start;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 12px;
    /* Ensure long menus remain usable on smaller displays */
    max-height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-subnav-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-gray);
    margin-bottom: 8px;
}

.settings-subnav-search {
    margin-bottom: 12px;
}

.settings-subnav-search-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.settings-subnav-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.settings-subnav-search-input {
    flex: 1;
    min-width: 0;
}

.settings-subnav-search-clear {
    flex-shrink: 0;
}

.settings-subnav-status {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-gray);
}

.settings-subnav-empty {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text-gray);
    font-size: 13px;
}

.settings-subnav-links {
    display: block;
}

.settings-subnav a.settings-subnav-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-dark);
    text-decoration: none;
    border: 1px solid transparent;
    margin: 2px 0;
    font-size: 14px;
}

.settings-subnav a.settings-subnav-link:hover {
    background: var(--primary-silver);
}

.settings-subnav a.settings-subnav-link.active {
    border-color: var(--primary-cyan);
    background: rgba(0,178,204,0.08);
    color: var(--text-dark);
}

.settings-subnav a.settings-subnav-link.sub {
    padding-left: 18px;
    font-size: 13px;
}

.settings-subnav a.settings-subnav-link.is-hidden {
    display: none !important;
}

.settings-content {
    min-width: 0; /* prevent overflow */
}

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .settings-subnav {
        position: static;
        padding: 8px;
        max-height: min(420px, calc(100vh - 180px));
        overflow: auto;
    }
    .settings-subnav-search-row {
        align-items: stretch;
    }
    .settings-subnav-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .settings-subnav a.settings-subnav-link {
        display: block;
        padding: 6px 10px;
    }
}

/* Page Header Enhancements */
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Form Layout */
.form-grid {
    display: grid;
    gap: 1rem;
}

/* Logo Upload Section */
.logo-upload-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #f8f9fa;
}

.current-logo {
    flex-shrink: 0;
}

.logo-placeholder {
    width: 200px;
    height: 100px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    color: #6c757d;
}

.logo-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.logo-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.logo-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Color Picker Section */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.color-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.color-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.color-picker {
    width: 60px;
    height: 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.color-picker:hover {
    transform: scale(1.05);
}

.color-hex {
    width: 100px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    text-align: center;
}

/* Integration Setup */
.integration-setup {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.integration-icon {
    flex-shrink: 0;
}

.integration-content {
    flex: 1;
}

.integration-content h4 {
    margin: 0 0 0.5rem 0;
    color: #212529;
}

.integration-content p {
    margin: 0 0 1rem 0;
    color: #6c757d;
}

.integration-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.benefit-item {
    font-size: 0.875rem;
    color: #28a745;
    font-weight: 500;
}

/* Azure Status */
.integration-status {
    display: flex;
    align-items: center;
}

.azure-status-connected {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.azure-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Security Toggles */
.security-toggles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.security-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.toggle-info {
    flex: 1;
}

.toggle-info h5 {
    margin: 0 0 0.25rem 0;
    color: #212529;
    font-size: 1rem;
}

.toggle-info p {
    margin: 0;
    color: #6c757d;
    font-size: 0.875rem;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #00B2CC;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* Disabled (Not Yet Implemented) Sections */
.disabled-section {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(15%);
}

.disabled-hint {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 6px;
}

/* Setup Modal */
.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-step {
    display: none;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #f8f9fa;
}

.setup-step.active {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-number {
    width: 32px;
    height: 32px;
    background: #00B2CC;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h4 {
    margin: 0 0 0.5rem 0;
    color: #212529;
}

.step-content p {
    margin: 0 0 1rem 0;
    color: #6c757d;
}

/* Card Header Actions */
.card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form Help */
.form-help {
    margin-top: 0.5rem;
}

.form-help small {
    color: #6c757d;
    font-size: 0.75rem;
}

/* Checkbox Groups */
.checkbox-group {
    margin: 0.5rem 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #495057;
}

.checkbox {
    margin: 0;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #dee2e6;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox:checked + .checkmark {
    background: #00B2CC;
    border-color: #00B2CC;
}

.checkbox:checked + .checkmark::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: 600;
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.badge-danger {
    background: #f8d7da;
    color: #721c24;
}

.badge-info {
    background: #d1ecf1;
    color: #0c5460;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .color-picker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .integration-benefits {
        grid-template-columns: 1fr;
    }
    
    .azure-actions {
        flex-direction: column;
    }
    
    .azure-actions .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .color-picker-grid {
        grid-template-columns: 1fr;
    }
    
    .logo-upload-section {
        flex-direction: column;
        text-align: center;
    }
    
    .integration-setup {
        flex-direction: column;
        text-align: center;
    }
    
    .security-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .page-header-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .page-header-actions .btn {
        width: 100%;
    }
}

/* Animation for unsaved changes indicator */
@keyframes pulse-save {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 178, 204, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 178, 204, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 178, 204, 0);
    }
}

#saveAllSettings {
    animation: pulse-save 2s infinite;
}

/* Loading states */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e9ecef;
    border-top: 3px solid #00B2CC;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* public/css/company-ui.css */
/* Company Context and Switching UI Styles */

.company-context {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 178, 204, 0.1);
    border-radius: 8px;
    margin-right: 12px;
    border: 1px solid rgba(0, 178, 204, 0.2);
}

.company-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
}

.company-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-color);
    line-height: 1.2;
}

.user-role {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Company Switcher */
.company-switcher {
    position: relative;
    margin-right: 8px;
}

.company-switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-cyan);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.company-switcher-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.company-switcher-btn .dropdown-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.company-switcher.active .dropdown-arrow {
    transform: rotate(180deg);
}

.company-switcher .header-btn {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.company-switcher .header-btn:hover {
    background: var(--primary-color);
    transform: translateY(-1px);
}

.company-switcher-menu {
    min-width: 320px;
    max-height: 450px;
    overflow-y: auto;
    padding: 0;
}

.companies-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
}

.company-switcher .dropdown-menu {
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    right: 0;
    top: 45px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.dropdown-header {
    padding: 12px 16px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.company-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

.company-option:hover {
    background: var(--bg-hover);
}

.company-option:last-child {
    border-bottom: none;
}

.company-option.active {
    background: rgba(0, 178, 204, 0.1);
    border-left: 3px solid var(--primary-color);
}

.company-option-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.company-option-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 2px;
}

.company-option-status {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.company-option-indicator {
    color: var(--success-color, #10b981);
    font-size: 12px;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.company-option.inactive .company-option-name {
    color: var(--text-secondary);
}

.company-option.inactive .company-option-status {
    color: var(--danger-color);
}

/* Company Admin Section */
.company-admin-section {
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    padding-top: 8px;
}

.company-admin-section a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.company-admin-section a:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .company-context {
        display: none;
    }
    
    .company-switcher .dropdown-menu {
        min-width: 260px;
        right: -20px;
    }
}

@media (max-width: 480px) {
    .company-switcher .dropdown-menu {
        min-width: 240px;
        right: -40px;
    }
    
    .company-option {
        padding: 10px 12px;
    }
    
    .company-option-name {
        font-size: 13px;
    }
}

/* Loading State */
.company-context.loading .company-name {
    color: var(--text-secondary);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Super Admin Badge */
.user-role.super-admin {
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.user-role.company-admin {
    background: var(--secondary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.user-role.manager {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-dark);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

/* Additional Styles */
.dropdown-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-light, #f9fafb);
}

.loading-message, .no-companies, .error-message {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

.error-message {
    color: var(--danger, #ef4444);
}

.company-option-status.active {
    color: var(--success-color, #10b981);
}

.company-option-status.inactive {
    color: var(--danger, #ef4444);
}

.company-option-status.suspended {
    color: var(--warning, #f59e0b);
}

.company-switcher-btn .company-label {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .company-switcher-btn .company-label {
        display: none;
    }
}

/* public/css/admin-subscriptions.css */
/* Admin Subscriptions Page */
#admin-subscriptions-page .plan-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
}

#admin-subscriptions-page .plan-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

#admin-subscriptions-page .feature-cluster {
    margin-top: 12px;
}

#admin-subscriptions-page .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 16px;
}

.muted { color: var(--text-gray); }
.small { font-size: 0.85rem; }

/* Checkbox alignment matching admin/users */
.checkbox-group { display: grid; gap: 6px; }
.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox { width: 18px; height: 18px; }


/* public/css/automations.css */
#pageContainer.automations-editor-locked {
    overflow-y: hidden;
    overscroll-behavior: none;
}

.automations-page {
    --automations-editor-height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding-bottom: 0.75rem;
}

.automations-page.is-editor-mode {
    gap: 0.65rem;
}

.automations-page::before {
    content: "";
    display: none;
    pointer-events: none;
    z-index: 0;
}

.automations-header,
.automations-workspace-context,
.automations-workspace-tabs-shell,
.automations-tab-panels {
    position: relative;
    z-index: 1;
}

.automations-header .page-header-content {
    max-width: 76ch;
}

.automations-header .page-header-content h1 {
    letter-spacing: -0.03em;
}

.automations-header .page-header-content p {
    margin-top: 0.45rem;
    color: var(--text-muted, #5b6472);
}

.automations-workspace-context {
    gap: 0.35rem;
}

.automations-workspace-context-label {
    display: none;
}

.automations-workspace-context-row,
.automation-builder-meta,
.automations-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.automations-context-chip {
    gap: 0.5rem;
}

.automations-context-chip-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-gray);
}

.automations-context-chip strong {
    color: var(--text-dark);
}

.automations-context-chip.is-strong {
    border-color: rgba(14, 165, 233, 0.22);
}

.automations-context-chip.is-muted {
    background: rgba(248, 250, 252, 0.96);
}

.automations-context-chip.is-attention {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(255, 251, 235, 0.96);
}

.automations-context-chip.is-danger {
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(254, 242, 242, 0.96);
}

.automations-panel-meta-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.automation-canvas-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.92);
}

.automation-canvas-zoom-button {
    min-width: 32px;
    min-height: 32px;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
}

.automation-canvas-zoom-readout {
    min-width: 72px;
    font-variant-numeric: tabular-nums;
}

.automations-workspace-tabs-shell {
    margin-bottom: 0;
}

.automations-workspace-tabs-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    justify-content: flex-start;
}

.automations-workspace-tabs {
    flex: 1 1 360px;
    min-width: 0;
}

.automations-workspace-tab-button {
    min-width: 120px;
}

.automations-workspace-tab-context {
    display: none;
}

.automations-workspace-tab-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 48ch;
    text-align: right;
}

.automations-workspace-tab-copy strong {
    font-size: 0.9rem;
    color: #0f172a;
}

.automations-workspace-tab-copy span {
    color: var(--text-muted, #5b6472);
    font-size: 0.88rem;
    line-height: 1.45;
}

.automations-tab-panels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}

.automations-tab-panel[hidden] {
    display: none !important;
}

.automations-page.is-editor-mode .automations-workspace-tabs-shell {
    position: relative;
    top: auto;
    z-index: 1;
    backdrop-filter: none;
}

.automations-page.is-editor-mode .automations-workspace-context {
    display: none;
}

.automations-page.is-editor-mode .automations-workspace-tabs-body {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.automations-page.is-editor-mode .automations-workspace-tab-copy {
    display: none;
}

.automations-page.is-editor-mode .automations-header .page-header-content p {
    display: none;
}

.automations-page.is-editor-mode .automations-tab-panel-editor {
    height: var(--automations-editor-height, 78vh);
    min-height: 0;
}

.automations-sidebar,
.automations-builder,
.automations-palette,
.automations-inspector,
.automations-executions,
.automations-overview-hero,
.automations-overview-detail {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.automations-overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 1rem 1.25rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.automations-overview-hero-copy h2 {
    margin: 0;
    letter-spacing: -0.03em;
}

.automations-overview-hero-copy p {
    margin: 0.4rem 0 0;
    max-width: 70ch;
    color: var(--text-muted, #5b6472);
    line-height: 1.55;
}

.automations-overview-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-start;
    justify-content: flex-end;
}

.automations-overview-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.automations-overview-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) 360px;
    gap: 1.25rem;
    align-items: start;
}

.automations-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1rem;
}

.automations-sidebar-overview {
    min-height: 100%;
}

.automations-overview-detail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
}

.automations-sidebar-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.automations-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.automations-sidebar-section + .automations-sidebar-section {
    padding-top: 1.05rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.automations-sidebar-section-highlight {
    padding: 0.9rem;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.82);
    border: 1px solid var(--border-color);
}

.automations-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.automations-section-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.automations-section-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.automations-section-copy {
    margin: 0;
    color: var(--text-muted, #5b6472);
    font-size: 0.88rem;
    line-height: 1.45;
}

.automations-empty,
.automations-canvas-empty {
    padding: 1rem 1.05rem;
    border: 1px dashed rgba(14, 165, 233, 0.26);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.92) 0%, rgba(236, 253, 245, 0.68) 100%);
    color: var(--text-muted, #5b6472);
    line-height: 1.5;
}

.automations-empty-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
}

.automations-workflow-list,
.automations-button-directory,
.automations-task-inbox,
.automations-template-list,
.automations-provider-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.automation-workflow-card,
.automation-directory-card,
.automation-template-card,
.automation-provider-card {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.automation-workflow-card:hover,
.automation-directory-card:hover,
.automation-template-card:hover,
.automation-provider-card:hover,
.automation-provider-connection:hover,
.automation-task-card:hover,
.automation-palette-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 28px -24px rgba(15, 23, 42, 0.45);
}

.automation-workflow-card.is-active {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12), 0 18px 28px -24px rgba(15, 23, 42, 0.45);
}

.automation-provider-card.is-active {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.12);
}

.automation-workflow-card-top,
.automation-workflow-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.automation-workflow-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.15rem;
}

.automation-workflow-card-current {
    color: var(--text-muted, #5b6472);
    font-size: 0.82rem;
    font-weight: 600;
}

.automation-provider-main {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.automation-provider-top,
.automation-provider-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.automation-provider-desc,
.automation-provider-meta,
.automation-provider-connection-meta,
.automation-provider-detail-meta {
    color: var(--text-muted, #5b6472);
    font-size: 0.9rem;
}

.automation-provider-connections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.2rem;
}

.automation-provider-connection {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.95);
    padding: 0.55rem 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
}

.automation-provider-connection.is-active {
    border-color: #1d4ed8;
    background: rgba(219, 234, 254, 0.6);
}

.automation-provider-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.automation-provider-status-ready {
    background: #dcfce7;
    color: #166534;
}

.automation-provider-status-attention {
    background: #fef3c7;
    color: #92400e;
}

.automation-provider-status-available {
    background: #dbeafe;
    color: #1d4ed8;
}

.automation-task-card {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.automation-task-card.is-active {
    border-color: #b45309;
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}

.automation-task-card.is-overdue {
    border-color: #f59e0b;
    background: #fffbeb;
}

.automation-task-card-top,
.automation-task-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.automation-task-card-desc {
    color: var(--text-muted, #5b6472);
    font-size: 0.9rem;
}

.automation-provider-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.automation-workflow-card-desc,
.automation-directory-desc,
.automation-template-desc {
    color: var(--text-muted, #5b6472);
    font-size: 0.92rem;
}

.automation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.automation-status-draft {
    background: #fef3c7;
    color: #92400e;
}

.automation-status-active,
.automation-status-succeeded {
    background: #dcfce7;
    color: #166534;
}

.automation-status-paused {
    background: #e0f2fe;
    color: #0c4a6e;
}

.automation-status-running {
    background: #dbeafe;
    color: #1d4ed8;
}

.automation-status-failed {
    background: #fee2e2;
    color: #b91c1c;
}

.automation-status-waiting,
.automation-status-approved,
.automation-status-resumed {
    background: #ede9fe;
    color: #6d28d9;
}

.automation-status-rejected,
.automation-status-expired {
    background: #ffedd5;
    color: #c2410c;
}

.automations-builder {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
}

.automations-page.is-editor-mode .automations-builder {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
    padding: 0.75rem;
}

.automation-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
}

.automations-page.is-editor-mode .automation-builder-header {
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
}

.automation-builder-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.automation-builder-title-block h2 {
    margin: 0;
    letter-spacing: -0.03em;
}

.automation-builder-title-block p {
    margin: 0;
    max-width: 72ch;
    color: var(--text-muted, #5b6472);
    line-height: 1.5;
}

.automations-page.is-editor-mode .automation-builder-title-block {
    gap: 0.18rem;
}

.automations-page.is-editor-mode .automation-builder-title-block p {
    display: none;
}

.automations-page.is-editor-mode .automation-builder-title-block .automations-panel-kicker {
    display: none;
}

.automation-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.automations-page.is-editor-mode .automation-builder-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.automation-builder-icon-actions,
.automation-builder-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.automation-builder-meta-inline {
    gap: 0.4rem;
}

.automations-page.is-editor-mode .automation-builder-meta-inline {
    margin-top: 0.15rem;
}

.automation-builder-inline-stat {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.18rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.automation-builder-inline-stat.is-danger {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.2);
    color: #b91c1c;
}

.automation-toolbar-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.automation-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 11px;
    line-height: 1;
}

.automation-icon-button .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.9rem;
    line-height: 1;
}

.automation-icon-button .btn-icon i {
    display: block;
    line-height: 1;
}

.automations-builder-grid {
    --automations-palette-width: clamp(224px, 18vw, 248px);
    --automations-inspector-width: clamp(284px, 22vw, 320px);
    display: grid;
    grid-template-columns: var(--automations-palette-width) minmax(0, 1fr) var(--automations-inspector-width);
    gap: 0.85rem;
    min-height: 52vh;
    align-items: stretch;
}

.automations-page.is-editor-mode .automations-builder-grid {
    height: 100%;
    min-height: 0;
}

.automations-builder-grid.is-palette-collapsed {
    --automations-palette-width: 58px;
}

.automations-builder-grid.is-inspector-collapsed {
    --automations-inspector-width: 58px;
}

.automations-palette,
.automations-inspector {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    max-height: clamp(560px, 68vh, 860px);
}

.automations-canvas-panel {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: clamp(620px, 72vh, 940px);
}

.automations-page.is-editor-mode .automations-palette,
.automations-page.is-editor-mode .automations-inspector,
.automations-page.is-editor-mode .automations-canvas-panel {
    height: 100%;
    max-height: none;
}

#automationsPalette {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 0.75rem;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.automations-inspector-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.85rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.automations-panel-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.automations-panel-intro-compact {
    padding-bottom: 0.85rem;
}

.automations-page.is-editor-mode .automations-panel-intro {
    padding: 0.5rem 0.65rem 0.45rem;
}

.automations-page.is-editor-mode .automations-panel-intro p,
.automations-page.is-editor-mode .automations-panel-kicker {
    display: none;
}

.automations-page.is-editor-mode .automations-panel-intro h2 {
    font-size: 0.92rem;
}

.automations-panel-intro h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.automations-panel-intro-main {
    min-width: 0;
    flex: 1 1 auto;
}

.automations-panel-intro-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.automations-panel-rail-label {
    display: none;
    align-items: center;
    gap: 0.45rem;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 700;
}

.automations-panel-rail-label-text {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.automation-panel-toggle {
    border-color: rgba(148, 163, 184, 0.24);
}

.automations-panel-intro p {
    margin: 0.35rem 0 0;
    color: var(--text-muted, #5b6472);
    font-size: 0.9rem;
    line-height: 1.45;
}

.automations-panel-kicker {
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.automation-palette-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    padding: 0 0.75rem;
}

.automation-palette-search {
    padding: 0.8rem 0.75rem 0;
    margin-bottom: 0.25rem;
}

.automation-palette-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.automation-palette-group-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.automation-palette-item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.automations-page.is-editor-mode .automation-palette-item {
    padding: 0.65rem 0.72rem;
    gap: 0.22rem;
}

.automation-palette-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.automation-palette-item span {
    font-size: 0.86rem;
    color: var(--text-muted, #5b6472);
}

.automations-page.is-editor-mode .automation-palette-item span {
    font-size: 0.8rem;
    line-height: 1.3;
}

.automation-palette-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.3;
}

.automation-palette-item-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
    font-size: 0.8rem;
}

.automations-canvas-panel {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.automations-canvas-banner {
    min-height: 46px;
    margin: 0 0.75rem;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #0f172a;
}

.automations-page.is-editor-mode .automations-canvas-banner {
    min-height: 38px;
    margin: 0 0.6rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.84rem;
}

.automations-canvas-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    margin: 0 0.75rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
    min-height: clamp(420px, 52vh, 700px);
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
}

.automations-palette.is-collapsed,
.automations-inspector.is-collapsed {
    min-width: 0;
}

.automations-palette.is-collapsed .automations-panel-intro,
.automations-inspector.is-collapsed .automations-panel-intro {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    padding: 0.7rem 0.3rem;
    border-bottom: 0;
}

.automations-palette.is-collapsed .automations-panel-intro-main,
.automations-inspector.is-collapsed .automations-panel-intro-main {
    display: none;
}

.automations-palette.is-collapsed .automations-panel-rail-label,
.automations-inspector.is-collapsed .automations-panel-rail-label {
    display: inline-flex;
    flex-direction: column;
}

.automations-palette.is-collapsed .automations-panel-rail-label-text,
.automations-inspector.is-collapsed .automations-panel-rail-label-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.automations-canvas {
    position: relative;
}

.automations-canvas-stage {
    position: absolute;
    inset: 0 auto auto 0;
    transform-origin: top left;
    will-change: transform;
}

.automation-edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.automation-edge {
    fill: none;
    stroke: rgba(30, 41, 59, 0.28);
    stroke-width: 3;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
}

.automation-edge.is-selected {
    stroke: #0f766e;
}

.automation-node-layer {
    position: absolute;
    inset: 0;
}

.automation-node {
    position: absolute;
    width: 236px;
    min-height: 118px;
    transition: transform 0.18s ease;
}

.automation-node-main {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    overflow: hidden;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.automation-node:hover .automation-node-main {
    transform: translateY(-2px);
    box-shadow: 0 24px 38px -26px rgba(15, 23, 42, 0.52);
}

.automation-node.is-selected .automation-node-main {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.18), 0 24px 38px -26px rgba(15, 23, 42, 0.52);
}

.automation-node-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem 0.55rem;
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.12) 0%, rgba(14, 116, 144, 0.06) 100%);
    cursor: grab;
}

.automation-node-kind-trigger .automation-node-header {
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.18) 0%, rgba(6, 182, 212, 0.08) 100%);
}

.automation-node-kind-action .automation-node-header {
    background: linear-gradient(90deg, rgba(29, 78, 216, 0.16) 0%, rgba(56, 189, 248, 0.08) 100%);
}

.automation-node-kind-flow .automation-node-header {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(251, 146, 60, 0.08) 100%);
}

.automation-node-kind-utility .automation-node-header {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.2) 0%, rgba(226, 232, 240, 0.45) 100%);
}

.automation-node-kind-note .automation-node-header {
    background: linear-gradient(90deg, rgba(180, 83, 9, 0.16) 0%, rgba(245, 158, 11, 0.08) 100%);
}

.automation-node-title {
    font-weight: 700;
}

.automation-node-type {
    font-size: 0.78rem;
    color: #475569;
}

.automation-node-body {
    padding: 0.8rem 0.85rem 0.95rem;
    font-size: 0.92rem;
    color: var(--text-muted, #5b6472);
    min-height: 56px;
    white-space: pre-wrap;
}

.automation-port {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #0f766e;
    z-index: 3;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.18);
}

.automation-port-input {
    left: -7px;
}

.automation-port-output {
    right: -7px;
    background: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.16);
}

.note-amber .automation-node-main {
    background: linear-gradient(180deg, #fff7cf 0%, #fff9e4 100%);
}

.note-sky .automation-node-main {
    background: linear-gradient(180deg, #dff3ff 0%, #eff9ff 100%);
}

.note-emerald .automation-node-main {
    background: linear-gradient(180deg, #dff8ee 0%, #effdf5 100%);
}

.automations-inspector-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.automations-inspector-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.automations-inspector-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.automations-inspector-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}

.automations-inspector-section-caption {
    font-size: 0.78rem;
    color: #64748b;
    text-align: right;
}

.automations-inspector-card h2 {
    margin: 0;
}

.automations-page.is-editor-mode .automations-inspector-card h2 {
    font-size: 0.94rem;
}

.automations-inspector-meta,
.automations-inspector-hint,
.automation-template-meta,
.automation-directory-meta {
    color: var(--text-muted, #5b6472);
    font-size: 0.88rem;
}

.automations-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.automations-executions {
    padding: 1rem;
}

.automations-page.is-editor-mode .automations-executions {
    min-height: 0;
    max-height: clamp(58px, 17vh, 214px);
    overflow: auto;
    padding: 0.65rem 0.8rem 0.8rem;
}

.automations-executions .table-container {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    overflow: hidden;
    overscroll-behavior: contain;
}

.automations-page.is-editor-mode .automations-executions .table-container {
    max-height: 138px;
    overflow: auto;
}

.automation-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.automation-token-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.automation-token-target,
.automation-token-chip {
    border: 1px solid rgba(29, 78, 216, 0.16);
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

.automation-token-target {
    background: #ffffff;
    color: #334155;
}

.automation-token-target.is-active,
.automation-token-chip:hover,
.automation-token-chip:focus-visible {
    border-color: rgba(29, 78, 216, 0.34);
    background: #dbeafe;
    color: #1d4ed8;
}

.automation-token-target:hover,
.automation-token-target:focus-visible {
    border-color: rgba(29, 78, 216, 0.28);
    color: #1d4ed8;
}

.automation-template-field {
    border-radius: 14px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.automation-template-field.is-template-target {
    background: rgba(219, 234, 254, 0.42);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    padding: 0.6rem 0.7rem;
    margin: -0.1rem -0.15rem;
}

.automation-json-preview {
    margin: 0;
    padding: 0.8rem;
    border-radius: 12px;
    background: #0f172a;
    color: #dbeafe;
    font-size: 0.8rem;
    overflow: auto;
    max-height: 240px;
}

.automation-event-catalog {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 340px;
    overflow: auto;
}

.automation-event-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background: #fff;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.automation-event-card.is-active {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.automation-event-card-top,
.automation-step-card-top,
.automation-execution-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.automation-event-card-desc,
.automation-event-card-meta {
    font-size: 0.88rem;
    color: var(--text-muted, #5b6472);
}

.automation-executions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.automations-page.is-editor-mode .automation-executions-header {
    align-items: center;
    margin-bottom: 0.55rem;
}

.automation-executions-header-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.automation-executions-intro {
    flex: 1 1 auto;
    min-width: 0;
}

.automation-section-toggle {
    flex: 0 0 auto;
}

.automation-executions-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.automations-page.is-editor-mode .automation-executions-intro .automations-panel-meta {
    gap: 0.35rem;
}

.automations-page.is-editor-mode .automation-executions-intro .automations-context-chip {
    min-height: 30px;
    padding: 0.25rem 0.62rem;
}

.automations-governance-list,
.automation-validation-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.automations-governance-list > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.automation-validation-item,
.automation-step-error {
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    font-size: 0.9rem;
}

.table tbody tr.is-selected {
    background: rgba(29, 78, 216, 0.06);
}

.table tbody tr[data-action="select-execution"] {
    cursor: pointer;
}

.automation-execution-detail {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.automations-page.is-editor-mode .automation-execution-detail {
    min-height: 0;
    overflow: auto;
    padding-right: 0.15rem;
}

.automation-execution-grid,
.automation-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.automation-execution-card,
.automation-step-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.automation-execution-wait {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    background: #faf5ff;
    border: 1px solid #ddd6fe;
    color: #6d28d9;
}

.automation-execution-approval {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.automation-task-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--text-muted, #5b6472);
    font-size: 0.88rem;
}

.automation-task-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.automation-task-form-field-wide {
    grid-column: 1 / -1;
}

.automation-execution-steps {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.automation-version-list,
.automation-audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.automation-version-item,
.automation-audit-item {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.automation-version-item.is-current {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.automation-version-item-top,
.automation-audit-item-top,
.automation-version-item-meta,
.automation-audit-item-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.automation-version-item-meta,
.automation-audit-item-meta,
.automation-version-item-desc,
.automation-audit-item-desc,
.automation-version-item-current {
    color: var(--text-muted, #5b6472);
    font-size: 0.88rem;
}

@media (max-width: 900px) {
    .automation-execution-grid,
    .automation-step-grid,
    .automation-task-form-grid {
        grid-template-columns: 1fr;
    }

    .automations-overview-hero {
        grid-template-columns: 1fr;
    }

    .automations-panel-intro,
    .automation-executions-header,
    .automations-workspace-tab-context,
    .automations-overview-hero,
    .automation-task-card-top,
    .automation-task-card-meta,
    .automation-workflow-card-top,
    .automation-workflow-card-meta,
    .automation-workflow-card-actions,
    .automation-provider-top,
    .automation-provider-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .automations-workspace-tab-copy {
        text-align: left;
    }

    .automation-canvas-zoom-controls {
        margin-left: 0;
    }

    .automations-canvas-scroll {
        min-height: 420px;
    }
}

@media (max-width: 1200px) {
    .automations-overview-shell {
        grid-template-columns: 1fr;
    }

    .automations-builder-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .automation-builder-header {
        flex-direction: column;
    }

    .automation-builder-actions {
        justify-content: flex-start;
    }

    .automations-panel-meta {
        justify-content: flex-start;
    }

    .automations-palette,
    .automations-inspector,
    .automations-canvas-panel {
        max-height: none;
    }

    .automations-palette.is-collapsed .automations-panel-intro,
    .automations-inspector.is-collapsed .automations-panel-intro {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: auto;
        padding: 0.6rem 0.75rem;
    }

    .automations-palette.is-collapsed .automations-panel-rail-label,
    .automations-inspector.is-collapsed .automations-panel-rail-label {
        flex-direction: row;
    }

    .automations-palette.is-collapsed .automations-panel-rail-label-text,
    .automations-inspector.is-collapsed .automations-panel-rail-label-text {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .automations-page.is-editor-mode .automations-header {
        display: block;
    }

    .automations-page.is-editor-mode .automations-workspace-context {
        display: flex;
    }

    .automations-page.is-editor-mode .automations-workspace-tabs-shell {
        position: relative;
        top: auto;
    }

    .automations-page.is-editor-mode .automations-tab-panel-editor {
        height: auto;
    }

    .automations-page.is-editor-mode .automations-builder {
        display: flex;
        height: auto;
        padding: 1rem;
    }

    .automations-page.is-editor-mode .automations-executions {
        max-height: none;
        overflow: visible;
    }

    .automations-page.is-editor-mode .automations-executions .table-container {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .automations-builder,
    .automations-sidebar,
    .automations-executions,
    .automations-overview-detail {
        padding: 0.9rem;
    }

    .automations-overview-hero {
        padding: 1rem;
    }

    .automations-canvas-banner,
    .automations-canvas-scroll {
        margin-left: 0.6rem;
        margin-right: 0.6rem;
    }

    .automations-context-chip {
        width: 100%;
        justify-content: space-between;
    }
}

/* public/css/insights-studio.css */
.insights-studio-page {
    --insights-accent: #0f766e;
    --insights-accent-soft: rgba(15, 118, 110, 0.12);
    --insights-border: rgba(15, 23, 42, 0.08);
    --insights-border-strong: rgba(15, 23, 42, 0.12);
    --insights-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    --insights-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.04);
    --insights-surface: #ffffff;
    --insights-surface-alt: #f4f7f8;
    --insights-text-soft: #5f6d7d;
    --insights-text-strong: #0f172a;
}

.insights-studio-header {
    align-items: flex-start;
    gap: 16px;
}

.insights-studio-header-copy {
    max-width: 760px;
}

.insights-studio-kicker {
    color: var(--insights-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.insights-studio-header-copy .page-title {
    margin-bottom: 8px;
}

.insights-studio-header-copy p {
    color: var(--insights-text-soft);
    margin: 0;
    max-width: 680px;
}

.insights-studio-actions {
    flex-wrap: wrap;
}

.insights-studio-shell {
    display: grid;
    gap: 18px;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    min-height: calc(100vh - 260px);
}

.insights-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 248, 0.92));
    border: 1px solid var(--insights-border);
    border-radius: 24px;
    box-shadow: var(--insights-shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.insights-panel-empty {
    align-items: center;
    justify-content: center;
}

.insights-panel-head {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 22px 22px 18px;
}

.insights-panel-head h2,
.insights-section-head h3,
.insights-board-card-head h3,
.insights-drilldown-head h3 {
    font-family: "Montserrat", "Inter", sans-serif;
    margin: 0 0 8px;
}

.insights-panel-head p,
.insights-section-note,
.insights-directory-item p,
.insights-source-row p,
.insights-function-row p,
.insights-empty p,
.insights-drilldown-head p,
.insights-board-card-head p,
.insights-drilldown-row p {
    color: var(--insights-text-soft);
    margin: 0;
}

.insights-panel-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insights-panel-kicker,
.insights-widget-order {
    color: var(--insights-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.insights-metric-chip {
    align-items: baseline;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
}

.insights-metric-chip span {
    color: var(--insights-text-soft);
    font-size: 12px;
}

.insights-metric-chip strong {
    font-size: 13px;
}

.insights-metric-chip.is-attention {
    border-color: rgba(217, 119, 6, 0.25);
    color: #92400e;
}

.insights-metric-chip.is-muted {
    background: rgba(15, 23, 42, 0.03);
}

.insights-directory-toolbar,
.insights-catalog-toolbar {
    padding: 0 22px 16px;
}

.insights-directory-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 22px 18px;
}

.insights-template-chip,
.insights-path-chip {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: var(--insights-text-strong);
    cursor: pointer;
    font-size: 12px;
    padding: 9px 12px;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.insights-template-chip:hover,
.insights-path-chip:hover,
.insights-directory-item:hover {
    border-color: rgba(15, 118, 110, 0.28);
    transform: translateY(-1px);
}

.insights-template-card {
    --template-accent: rgba(15, 118, 110, 0.18);
    --template-accent-strong: #0f766e;
    align-items: flex-start;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.4;
    max-width: 260px;
    min-height: 126px;
    min-width: 180px;
    padding: 14px 15px;
    text-align: left;
    white-space: normal;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.insights-template-card strong,
.insights-template-card small,
.insights-template-card span {
    display: block;
}

.insights-template-card strong {
    color: var(--insights-text-strong);
    font-size: 13px;
    font-weight: 700;
}

.insights-template-card small {
    color: var(--insights-text-soft);
    font-size: 12px;
}

.insights-template-card span {
    align-items: center;
    color: var(--template-accent-strong);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.04em;
    margin-top: auto;
    text-transform: uppercase;
}

.insights-template-card::before {
    background: linear-gradient(90deg, var(--template-accent), rgba(255, 255, 255, 0));
    border-radius: 999px;
    content: '';
    display: block;
    height: 4px;
    width: 64px;
}

.insights-template-card[data-accent="emerald"] {
    --template-accent: rgba(16, 185, 129, 0.28);
    --template-accent-strong: #047857;
}

.insights-template-card[data-accent="amber"] {
    --template-accent: rgba(245, 158, 11, 0.3);
    --template-accent-strong: #b45309;
}

.insights-template-card[data-accent="slate"] {
    --template-accent: rgba(100, 116, 139, 0.26);
    --template-accent-strong: #334155;
}

.insights-directory-list,
.insights-catalog-section,
.insights-workspace-panel {
    min-height: 0;
}

.insights-directory-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    padding: 0 18px 18px;
}

.insights-directory-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    cursor: pointer;
    padding: 14px;
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.insights-directory-item.is-active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.98));
    border-color: rgba(15, 118, 110, 0.28);
}

.insights-directory-item-head,
.insights-directory-item-meta,
.insights-source-meta,
.insights-widget-actions,
.insights-line-labels,
.insights-empty-actions,
.insights-widget-card-footer,
.insights-drilldown-row-meta,
.insights-board-card-meta,
.insights-drilldown-pagination {
    display: flex;
    gap: 10px;
}

.insights-directory-item-head {
    align-items: flex-start;
    justify-content: space-between;
}

.insights-directory-item-meta,
.insights-source-meta {
    color: var(--insights-text-soft);
    flex-wrap: wrap;
    font-size: 12px;
    margin: 8px 0;
}

.insights-workspace-panel {
    padding-bottom: 16px;
}

.insights-workspace-head {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.insights-workspace-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px 0;
}

.insights-workspace-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insights-section {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    padding: 18px;
}

.insights-section-head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.insights-section-head h3 {
    margin-bottom: 0;
}

.insights-settings-grid,
.insights-filters-grid,
.insights-widget-grid {
    gap: 14px 16px;
}

.insights-span-2 {
    grid-column: span 2;
}

.insights-board-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 247, 248, 0.8));
    padding: 20px;
}

.insights-board-section-head {
    margin-bottom: 18px;
}

.insights-board-shell {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.insights-board-shell.has-drawer {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.insights-board-grid {
    align-items: start;
    background:
        linear-gradient(90deg, rgba(15, 118, 110, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 118, 110, 0.05) 1px, transparent 1px);
    background-position: 0 0;
    background-size: calc((100% - 176px) / 12 + 16px) 88px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 24px;
    display: grid;
    gap: 16px;
    grid-auto-flow: dense;
    grid-auto-rows: 72px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 0;
    padding: 16px;
    position: relative;
}

.insights-board-shell:not(.is-arranging) .insights-board-grid {
    background: transparent;
    border-color: transparent;
    padding: 0;
}

.insights-board-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    box-shadow: var(--insights-shadow-soft);
    display: flex;
    flex-direction: column;
    min-height: 210px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.insights-board-card.is-full {
    grid-column: 1 / -1;
}

.insights-board-card.is-compact {
    min-height: 230px;
}

.insights-board-card.is-tall {
    min-height: 320px;
}

.insights-board-card-head {
    align-items: flex-start;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 18px 18px 16px;
}

.insights-board-card-head h3 {
    margin: 6px 0 4px;
}

.insights-board-card-meta {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.insights-board-shell.is-arranging .insights-board-card {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.insights-board-card.is-drag-source {
    opacity: 0.55;
}

.insights-layout-pill {
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 999px;
    color: var(--insights-accent);
    font-size: 11px;
    font-weight: 700;
    padding: 7px 10px;
    white-space: nowrap;
}

.insights-board-control {
    align-items: center;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    color: var(--insights-text-soft);
    cursor: grab;
    display: inline-flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 34px;
    min-width: 34px;
    padding: 0 10px;
}

.insights-board-control:hover {
    border-color: rgba(15, 118, 110, 0.24);
    color: var(--insights-accent);
}

.insights-board-control:active {
    cursor: grabbing;
}

.insights-board-card-body {
    display: flex;
    flex: 1;
    padding: 18px;
}

.insights-board-resize-handle {
    background:
        linear-gradient(135deg, transparent 45%, rgba(15, 118, 110, 0.85) 45%, rgba(15, 118, 110, 0.85) 55%, transparent 55%),
        linear-gradient(135deg, transparent 62%, rgba(15, 118, 110, 0.55) 62%, rgba(15, 118, 110, 0.55) 72%, transparent 72%);
    border: 0;
    bottom: 10px;
    cursor: nwse-resize;
    height: 22px;
    position: absolute;
    right: 10px;
    width: 22px;
}

.insights-board-drop-preview {
    background: rgba(15, 118, 110, 0.12);
    border: 2px dashed rgba(15, 118, 110, 0.7);
    border-radius: 20px;
    display: none;
    pointer-events: none;
    z-index: 2;
}

.insights-board-drop-preview.is-visible {
    display: block;
}

.insights-preview-state {
    align-items: center;
    color: var(--insights-text-soft);
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 116px;
    text-align: center;
    width: 100%;
}

.insights-preview-state.is-error {
    color: #b91c1c;
}

.insights-preview-clickable,
.insights-preview-point {
    cursor: pointer;
}

.insights-preview-clickable:hover,
.insights-preview-point:hover {
    border-color: rgba(15, 118, 110, 0.24);
    transform: translateY(-1px);
}

.insights-kpi-preview {
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    color: inherit;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 140px;
    padding: 18px;
    text-align: left;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.insights-kpi-preview span,
.insights-kpi-preview small {
    color: var(--insights-text-soft);
}

.insights-kpi-preview strong {
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1;
}

.insights-bar-preview,
.insights-table-body,
.insights-drilldown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.insights-bar-row,
.insights-table-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    color: inherit;
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.insights-bar-row {
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto;
}

.insights-bar-label,
.insights-bar-value,
.insights-table-head,
.insights-table-row span,
.insights-table-row strong {
    font-size: 12px;
}

.insights-bar-label,
.insights-table-head,
.insights-table-row span {
    color: var(--insights-text-soft);
}

.insights-bar-track {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.insights-bar-fill {
    background: linear-gradient(90deg, var(--insights-accent), #14b8a6);
    border-radius: 999px;
    height: 100%;
}

.insights-table-preview {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.insights-table-head {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 4px;
    text-transform: uppercase;
}

.insights-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.insights-line-preview {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

.insights-line-preview svg {
    height: 164px;
    width: 100%;
}

.insights-line-preview circle {
    fill: #14b8a6;
}

.insights-line-path {
    fill: none;
    stroke: var(--insights-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.insights-line-labels {
    flex-wrap: wrap;
    margin-top: 8px;
}

.insights-line-label {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 92px;
    padding: 10px 12px;
    text-align: left;
    transition: border-color 160ms ease, transform 160ms ease;
}

.insights-line-label span {
    color: var(--insights-text-soft);
    font-size: 11px;
}

.insights-drilldown-drawer {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    box-shadow: var(--insights-shadow-soft);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.insights-drilldown-head {
    align-items: flex-start;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 18px 16px;
}

.insights-drilldown-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px 18px;
}

.insights-drilldown-row {
    background: rgba(244, 247, 248, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    padding: 12px 14px;
}

.insights-drilldown-row-head,
.insights-drilldown-footer {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.insights-drilldown-row-head strong,
.insights-table-row strong {
    color: var(--insights-text-strong);
}

.insights-drilldown-row-head span,
.insights-drilldown-count {
    color: var(--insights-text-soft);
    font-size: 12px;
}

.insights-drilldown-row-meta {
    color: var(--insights-text-soft);
    flex-wrap: wrap;
    font-size: 12px;
    margin: 10px 0 0;
}

.insights-drilldown-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    padding: 14px 18px 16px;
}

.insights-drilldown-pagination {
    align-items: center;
    flex-wrap: wrap;
}

.insights-widgets-section {
    margin: 0;
}

.insights-widgets-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.insights-widget-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    overflow: hidden;
}

.insights-widget-card-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 16px 18px;
}

.insights-widget-card-head h4 {
    margin: 6px 0 4px;
}

.insights-widget-meta {
    color: var(--insights-text-soft);
    font-size: 12px;
}

.insights-widget-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.insights-widget-card-body {
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.insights-widget-card-footer {
    align-items: center;
    justify-content: space-between;
}

.insights-status-pill {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    color: var(--insights-text-soft);
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    padding: 8px 10px;
}

.insights-status-pill.is-ready {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.14);
    color: var(--insights-accent);
}

.insights-status-pill.is-loading {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.16);
    color: #2563eb;
}

.insights-status-pill.is-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.insights-catalog {
    min-height: 0;
}

.insights-catalog .insights-panel {
    height: 100%;
}

.insights-catalog-section {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding: 18px 22px;
}

.insights-catalog-section h3 {
    margin: 0 0 12px;
}

.insights-source-list,
.insights-function-list,
.insights-catalog-entities {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insights-source-row,
.insights-function-row,
.insights-entity-group {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 14px;
}

.insights-entity-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.insights-entity-head span {
    color: var(--insights-text-soft);
    font-size: 12px;
}

.insights-path-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insights-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto;
    max-width: 460px;
    padding: 34px 24px;
    text-align: center;
}

.insights-empty-inline {
    background: rgba(255, 255, 255, 0.76);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 20px;
    margin: 0;
    max-width: none;
}

.insights-board-empty {
    min-height: 240px;
}

.insights-empty-actions {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

@media (max-width: 1560px) {
    .insights-board-shell.has-drawer {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1440px) {
    .insights-studio-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .insights-studio-catalog {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1180px) {
    .insights-board-grid {
        background: transparent;
        border-color: transparent;
        grid-auto-rows: auto;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .insights-board-card,
    .insights-board-card.is-full {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 1040px) {
    .insights-studio-shell,
    .insights-workspace-grid {
        grid-template-columns: 1fr;
    }

    .insights-span-2 {
        grid-column: span 1;
    }

    .insights-board-section,
    .insights-workspace-stack {
        padding-left: 0;
        padding-right: 0;
    }

    .insights-workspace-stack {
        padding-top: 20px;
    }
}

@media (max-width: 720px) {
    .insights-panel-head,
    .insights-board-card-head,
    .insights-widget-card-head,
    .insights-drilldown-head,
    .insights-drilldown-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .insights-board-card-meta,
    .insights-widget-card-footer,
    .insights-drilldown-pagination {
        justify-content: flex-start;
    }

    .insights-bar-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .insights-table-head,
    .insights-table-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* public/css/login.css */
/* Authentication surfaces */

#loginOverlay,
#maintenanceOverlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

#loginOverlay {
    background:
        radial-gradient(circle at top left, rgba(15, 23, 42, 0.08), transparent 32%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.08), transparent 28%),
        #f3f5f8;
}

#loginOverlay::before,
#loginOverlay::after,
#maintenanceOverlay::before,
#maintenanceOverlay::after {
    content: '';
    position: absolute;
    inset: auto;
    pointer-events: none;
}

#loginOverlay::before,
#maintenanceOverlay::before {
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.56);
    filter: blur(12px);
}

#loginOverlay::after,
#maintenanceOverlay::after {
    bottom: -160px;
    left: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
    filter: blur(18px);
}

#loginOverlay .login-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 48px));
    min-height: min(720px, calc(100vh - 48px));
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(380px, 0.95fr);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

#loginOverlay .login-brand-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02)),
        #eef1f5;
    border-right: 1px solid rgba(203, 213, 225, 0.7);
}

#loginOverlay .login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 32px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#loginOverlay .login-brand-panel::after {
    content: '';
    position: absolute;
    inset: 32px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 22% 18%, rgba(56, 189, 248, 0.18), transparent 32%),
        radial-gradient(circle at 76% 74%, rgba(148, 163, 184, 0.16), transparent 28%);
}

#loginOverlay .login-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 360px;
    margin-left: 28px;
    color: rgba(255, 255, 255, 0.94);
}

#loginOverlay .login-brand-lockup {
    display: inline-flex;
    align-items: center;
    margin-bottom: 26px;
}

#loginOverlay .login-brand-mark {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    flex: 0 0 auto;
}

#loginOverlay .login-brand-mark img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.98;
}

#loginOverlay .login-brand-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 600;
}

#loginOverlay .login-brand-description {
    margin: 18px 0 0;
    max-width: 300px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.9);
}

#loginOverlay .login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.92));
}

#loginOverlay .login-card {
    width: min(420px, 100%);
    padding: 22px 22px 20px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
}

#loginOverlay .login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

#loginOverlay .login-header--minimal {
    justify-content: space-between;
}

#loginOverlay .logo,
#maintenanceOverlay .logo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
}

#loginOverlay .logo-icon,
#maintenanceOverlay .logo-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
}

#loginOverlay .logo-icon img,
#maintenanceOverlay .logo-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#loginOverlay .logo-text-block,
#maintenanceOverlay .logo-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

#loginOverlay .logo .logo-text,
#maintenanceOverlay .logo .logo-text {
    width: 156px;
    max-width: 100%;
    line-height: 0;
}

#loginOverlay .logo--auth,
#maintenanceOverlay .logo--auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#loginOverlay .logo--auth .logo-icon,
#maintenanceOverlay .logo--auth .logo-icon,
#loginOverlay .logo--auth .logo-text-block,
#maintenanceOverlay .logo--auth .logo-text-block {
    display: none;
}

#loginOverlay .logo--auth .logo-text,
#maintenanceOverlay .logo--auth .logo-text {
    width: 152px;
}

#loginOverlay .logo--auth-wordmark .logo-text {
    width: 168px;
}

#loginOverlay .logo .logo-text img,
#maintenanceOverlay .logo .logo-text img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22px;
    object-fit: contain;
    object-position: left center;
}

#loginOverlay .logo-partner,
#maintenanceOverlay .logo-partner {
    margin-top: 3px;
    height: 22px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
    padding: 2px 8px;
}

#loginOverlay .logo img.company-logo {
    max-height: 28px;
    width: auto;
    display: block;
}

#loginOverlay .language-selector {
    margin-left: auto;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.96);
    box-shadow: none;
}

#loginOverlay .language-selector .current-language,
#loginOverlay .language-options a {
    font-size: 0.8125rem;
}

#loginOverlay .login-heading {
    margin-bottom: 12px;
}

#loginOverlay .login-eyebrow {
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #111827;
}

#loginOverlay .login-form {
    display: grid;
    gap: 12px;
}

#loginOverlay .login-form .form-group {
    margin: 0;
}

#loginOverlay .login-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #4b5563;
}

#loginOverlay .login-form .form-input {
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #d6dde6;
    background: #f8fafc;
    box-shadow: none;
    color: #111827;
    font-size: 0.875rem;
}

#loginOverlay .login-form .form-input::placeholder {
    color: #94a3b8;
}

#loginOverlay .login-form .form-input:focus {
    background: #ffffff;
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

#loginOverlay .login-form .form-input.is-invalid {
    border-color: rgba(190, 24, 93, 0.38);
    background: #fff7fb;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.12);
}

#loginOverlay .login-validation,
#loginOverlay .login-field-hint {
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
}

#loginOverlay .login-validation {
    color: #be123c;
}

#loginOverlay .login-field-hint {
    color: #6b7280;
}

#loginOverlay .login-field-hint--warning {
    color: #b45309;
}

#loginOverlay .login-password-group {
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease, margin 0.18s ease;
}

#loginOverlay .login-password-group.is-hidden {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    margin: 0;
    pointer-events: none;
}

#loginOverlay .login-actions {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

#loginOverlay .login-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
}

#loginOverlay .login-secondary-action {
    padding: 0;
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.18s ease;
}

#loginOverlay .login-secondary-action:hover,
#loginOverlay .login-secondary-action:focus-visible {
    color: #111827;
    text-decoration: underline;
}

#loginOverlay .btn {
    min-height: 42px;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#loginOverlay .btn:hover {
    transform: translateY(-1px);
}

#loginOverlay .btn.btn-primary {
    border-color: #111827;
    background: #111827;
    color: #f8fafc;
}

#loginOverlay .btn.btn-primary:hover {
    background: #1f2937;
    border-color: #1f2937;
}

#loginOverlay .btn.btn-outline {
    border-color: #d6dde6;
    background: #ffffff;
    color: #111827;
}

#loginOverlay .btn.btn-outline:hover {
    border-color: #c6d0dc;
    background: #f8fafc;
}

#loginOverlay .btn.btn-lg {
    width: 100%;
}

#loginOverlay .login-sso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#loginOverlay .login-banner {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #f8fafc;
}

#loginOverlay .login-banner--warning {
    border-color: rgba(245, 158, 11, 0.26);
    background: #fff8eb;
}

#loginOverlay .login-banner--info {
    border-color: rgba(14, 165, 233, 0.2);
    background: #f3f9ff;
}

#loginOverlay .login-banner__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#loginOverlay .login-banner__copy {
    flex: 1;
    min-width: 0;
}

#loginOverlay .login-banner__title {
    margin-bottom: 4px;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 600;
    color: #111827;
}

#loginOverlay .login-banner__message,
#loginOverlay .login-banner__hint {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #4b5563;
}

#loginOverlay .login-banner__hint {
    margin-top: 5px;
    color: #6b7280;
}

#loginOverlay .login-banner__link {
    color: #0369a1;
    font-weight: 600;
    text-decoration: none;
}

#loginOverlay .login-banner__link:hover {
    text-decoration: underline;
}

#loginOverlay .login-banner__dismiss {
    min-height: 30px;
    padding-inline: 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Maintenance surface */

#maintenanceOverlay {
    background:
        radial-gradient(circle at top left, rgba(15, 23, 42, 0.08), transparent 32%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.08), transparent 28%),
        #f3f5f8;
}

#maintenanceOverlay .maintenance-container {
    position: relative;
    z-index: 1;
    width: min(540px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 24px;
}

#maintenanceOverlay .maintenance-card {
    padding: 28px 26px 24px;
    border-radius: 24px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
    text-align: center;
}

#maintenanceOverlay .logo {
    justify-content: center;
    margin-bottom: 10px;
}

#maintenanceOverlay .logo .logo-text {
    width: 166px;
}

#maintenanceOverlay .logo .logo-text img {
    object-position: center;
}

#maintenanceOverlay .maintenance-title {
    margin: 18px 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #111827;
}

#maintenanceOverlay .maintenance-message {
    margin: 0 0 6px;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.55;
}

#maintenanceOverlay .maintenance-subtitle {
    margin: 0 0 16px;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

#maintenanceOverlay .maintenance-retry {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
}

body.maintenance-mode {
    overflow: hidden;
}

@media (max-width: 1024px) {
    #loginOverlay .login-shell {
        width: min(960px, calc(100vw - 40px));
        grid-template-columns: 1fr;
        min-height: auto;
    }

    #loginOverlay .login-brand-panel {
        min-height: 280px;
        padding: 28px;
        border-right: 0;
        border-bottom: 1px solid rgba(203, 213, 225, 0.7);
    }

    #loginOverlay .login-brand-panel::before,
    #loginOverlay .login-brand-panel::after {
        inset: 24px;
    }

    #loginOverlay .login-brand-copy {
        max-width: 420px;
        margin-left: 18px;
    }

    #loginOverlay .login-brand-lockup {
        margin-bottom: 20px;
    }

    #loginOverlay .login-container {
        padding: 24px;
    }
}

@media (max-width: 640px) {
    #loginOverlay .login-shell {
        width: calc(100vw - 24px);
        border-radius: 22px;
    }

    #loginOverlay .login-brand-panel {
        min-height: 220px;
        padding: 20px;
    }

    #loginOverlay .login-brand-panel::before,
    #loginOverlay .login-brand-panel::after {
        inset: 18px;
        border-radius: 18px;
    }

    #loginOverlay .login-brand-title {
        font-size: 1.9rem;
    }

    #loginOverlay .login-brand-copy {
        margin-left: 10px;
    }

    #loginOverlay .login-brand-mark {
        width: 64px;
        height: 64px;
        border-radius: 20px;
    }

    #loginOverlay .login-brand-mark img {
        width: 34px;
        height: 34px;
    }

    #loginOverlay .login-container {
        padding: 16px;
    }

    #loginOverlay .login-card {
        width: 100%;
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    #loginOverlay .language-selector {
        margin-left: auto;
    }

    #loginOverlay .login-banner__body {
        flex-direction: column;
    }

    #loginOverlay .login-secondary-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #loginOverlay .login-banner__dismiss {
        width: 100%;
    }
}

/* public/css/mobile.css */
/* Mobile Responsive Styles */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 101;
    background: var(--primary-dark);
    color: white;
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    margin: 5px 0;
    transition: 0.3s;
    position: relative;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Overlay for mobile menu */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
}

/* Tablet and Mobile Styles */
@media screen and (max-width: 1024px) {
    .mobile-menu-toggle { display: flex; flex-direction: column; }
    .mobile-overlay { display: block; pointer-events: none; }
    .mobile-overlay.active { pointer-events: auto; }
    .top-bar { padding-left: 4rem; }
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    /* Typography adjustments */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Page content adjustments */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .page-header h1,
    .page-title {
        font-size: 1.45rem;
        line-height: 1.25;
    }
    
    .page-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .page-actions .btn {
        flex: 1;
    }
    
    /* Cards and containers */
    .dashboard-content {
        padding: 1rem;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: 1rem;
    }
    
    /* Tables - Horizontal scrolling */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    table {
        min-width: 600px;
    }
    
    /* Mobile-optimized table (stacked view) */
    @media screen and (max-width: 480px) {
        .mobile-table table,
        .mobile-table thead,
        .mobile-table tbody,
        .mobile-table th,
        .mobile-table td,
        .mobile-table tr {
            display: block;
        }
        
        .mobile-table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        
        .mobile-table tr {
            border: 1px solid var(--border-color);
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .mobile-table td {
            border: none;
            position: relative;
            padding-left: 50%;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        
        .mobile-table td:before {
            content: attr(data-label);
            position: absolute;
            left: 1rem;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: 600;
            color: var(--text-gray);
        }
    }
    
    /* Forms */
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    .form-control,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    /* Modals */
    .modal,
    .modal-overlay {
        padding: 1rem;
    }
    
    .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
        max-height: calc(100vh - 140px);
    }
    
    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Navigation tabs */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    /* New name used for Projects-style button tabs */
    .tabbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .tabs-list {
        min-width: max-content;
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        position: fixed;
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
    }
    
    /* Search bars */
    .search-box {
        width: 100%;
    }
    
    /* Filters */
    .filters-section {
        flex-direction: column;
        gap: 1rem;
    }
    
    .filter-group {
        width: 100%;
    }
    
    /* Sidebar width when explicitly expanded on mobile */
    .app-container.sidebar-expanded .sidebar {
        width: 85%;
        max-width: 280px;
    }
    
    /* Top bar adjustments */
    .top-bar {
        padding: 0.75rem 1rem;
        padding-left: 4rem;
    }
    
    .top-bar-content {
        gap: 0.5rem;
    }
    
    .user-menu {
        position: relative;
    }
    
    .user-dropdown {
        right: 0;
        left: auto;
    }
    
    /* Notification panel */
    .notifications-panel {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }
    
    /* Charts and visualizations */
    .chart-container {
        height: 250px;
    }
    
    /* Buttons and actions */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        border-radius: 4px;
    }
    
    /* Timeline and activity feed */
    .timeline-item {
        padding-left: 2rem;
    }
    
    .timeline-item::before {
        left: 0.5rem;
    }
    
    /* Status badges */
    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Loading states */
    .skeleton {
        height: 60px;
    }
}

/* Small Mobile Styles */
@media screen and (max-width: 375px) {
    /* Further adjustments for very small screens */
    body {
        font-size: 13px;
    }
    
    .page-header {
        padding: 0.75rem;
    }
    
    .card {
        padding: 0.75rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .form-control,
    .form-select,
    .form-textarea {
        padding: 0.625rem;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .nav-link,
    .dropdown-item,
    .chip {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .nav-link:hover {
        background-color: inherit;
    }
    
    /* Add active states for touch feedback */
    .btn:active,
    .nav-link:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* Landscape mobile adjustments */
@media screen and (max-width: 812px) and (orientation: landscape) {
    .sidebar {
        width: 240px;
    }
    
    .modal-content {
        max-height: 90vh;
    }
    
    .modal-body {
        max-height: calc(90vh - 120px);
    }
}

/* Print styles */
@media print {
    .sidebar,
    .mobile-menu-toggle,
    .top-bar,
    .page-actions,
    .btn,
    .modal,
    .modal-overlay {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .card {
        page-break-inside: avoid;
    }
}

/* public/css/tour.css */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  pointer-events: auto;
}

.tour-overlay--passthrough {
  pointer-events: none;
}

.tour-overlay--passthrough .tour-popover {
  pointer-events: auto;
}

.tour-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.tour-highlight {
  position: fixed;
  border: 2px solid var(--primary-cyan);
  box-shadow: 0 0 0 6px rgba(0, 178, 204, 0.2), 0 20px 50px rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  transition: all 0.16s ease;
  pointer-events: none;
}

.tour-popover {
  position: fixed;
  max-width: 360px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  padding: 16px 18px;
  color: var(--text-dark);
  border: 1px solid var(--border-color);
  pointer-events: auto;
}

.tour-highlight--design-switch {
  border-color: rgba(17, 24, 39, 0.76);
  box-shadow: 0 0 0 6px rgba(17, 24, 39, 0.12), 0 20px 44px rgba(0, 0, 0, 0.24);
}

.tour-popover--design-switch {
  max-width: 372px;
  border-radius: 14px;
  border-color: #e5e7eb;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.tour-popover h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
}

.tour-popover p {
  margin: 0 0 12px;
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.4;
}

.tour-progress {
  font-size: 12px;
  color: var(--text-gray);
  margin-bottom: 6px;
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tour-actions .left,
.tour-actions .right {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tour-actions--design-switch {
  margin-top: 12px;
}

.tour-design-switch-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #475467;
  cursor: pointer;
}

.tour-design-switch-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.tour-skip {
  background: none;
  border: none;
  color: var(--text-gray);
  cursor: pointer;
  padding: 6px 8px;
}

.tour-skip:hover {
  color: var(--primary-dark);
}

.tour-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  transform: rotate(45deg);
  box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.06);
}

.tour-welcome-list {
  margin: 6px 0 12px;
  padding-left: 18px;
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .tour-popover {
    left: 12px !important;
    right: 12px !important;
    max-width: none;
    top: auto !important;
    bottom: 16px;
    transform: none !important;
  }
}

/* public/css/assistant.css */
/* Assistant Chat Widget */
.assistant-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #0b5ed7;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 1200;
}
.assistant-fab.assistant-fab-v3 {
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  font-size: 0;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 12px 24px rgba(15,23,42,0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.assistant-v3-launcher-label {
  display: none;
}
.assistant-fab.assistant-fab-v3:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(15,23,42,0.14);
}
.assistant-v3-mark {
  display: block;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background:
    center / 68% 68% no-repeat url('/icons/kionov-logo-square.svg'),
    rgba(244,247,250,0.96);
}
.assistant-v3-mark-fab {
  width: 34px;
  height: 34px;
}
.assistant-v3-mark-panel {
  width: 32px;
  height: 32px;
  filter: none;
}
.assistant-v3-mark-empty {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
}
.assistant-fab.assistant-fab-v3::after {
  content: attr(data-badge);
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff5c5c;
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  display: none;
}
.assistant-fab.assistant-fab-v3[data-badge]:not([data-badge=""])::after {
  display: inline-block;
}

body.tour-welcome-open #assistantFabV3,
body.tour-welcome-open #assistantPanelV3 {
  display: none !important;
}

.assistant-panel {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 360px;
  max-width: calc(100vw - 40px);
  height: 460px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  z-index: 1200;
}
.assistant-panel.open { display: flex; }
.assistant-panel.dragging { cursor: move; }
.assistant-panel.resizing { cursor: se-resize; }
.assistant-panel.assistant-panel-v3 {
  --assistant-surface: #ffffff;
  --assistant-ink: #082f49;
  --assistant-muted: #526173;
  --assistant-stroke: rgba(0,51,102,0.12);
  --assistant-accent: #00b2cc;
  --assistant-accent-strong: #003366;
  --assistant-accent-soft: rgba(0,178,204,0.12);
  --assistant-teal: #00b2cc;
  --assistant-orange: #ff9900;
  --assistant-panel-shadow: 0 28px 64px rgba(0,51,102,0.18);
  --assistant-tray-top: 88px;
  right: 18px;
  bottom: 18px;
  width: 440px;
  height: min(760px, calc(100vh - 34px));
  max-height: calc(100vh - 24px);
  max-width: calc(100vw - 36px);
  border-radius: 18px;
  border: 1px solid var(--assistant-stroke);
  background: #ffffff;
  box-shadow: var(--assistant-panel-shadow);
}
.assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f6f8fa;
  border-bottom: 1px solid #e3e3e3;
}
.assistant-header { cursor: move; user-select: none; }
.assistant-title { font-weight: 600; }
.assistant-close {
  background: transparent; border: none; font-size: 16px; cursor: pointer; color: #444;
}
.assistant-tabs { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #e3e3e3; background: #fff; }
.assistant-tab { border: 1px solid #d0d7de; background: #f6f8fa; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.assistant-tab.active { background: #e7f1ff; border-color: #99baff; }
.assistant-body { flex: 1; padding: 10px; background: #fff; overflow: hidden; }
.assistant-content-row { display: flex; gap: 10px; height: 100%; }
.assistant-messages { display: flex; flex-direction: column; flex: 1; overflow: auto; position: relative; }
.assistant-runcol { display: flex; flex-direction: column; width: 160px; min-width: 150px; max-width: 200px; border-left: 1px solid #eef1f4; padding-left: 8px; }
.assistant-runlog-heading { font-size: 11px; font-weight: 600; color: #505050; margin-bottom: 6px; }
.assistant-runlog { flex: 1; overflow: auto; padding-right: 4px; }
.assistant-runlog-item { border: 1px solid #e3e3e3; border-radius: 6px; background: #fafafa; padding: 6px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.assistant-runlog-item.kind-call { border-left: 3px solid #99baff; }
.assistant-runlog-item.kind-result { border-left: 3px solid #84c184; }
.assistant-runlog-item.kind-summary { border-left: 3px solid #b3b3b3; }
.assistant-runlog-item.error, .assistant-runlog-item.kind-error { border-color: #f2b0b0; background: #fff5f5; }
.assistant-runlog-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; font-weight: 600; color: #333; cursor: pointer; user-select: none; }
.assistant-runlog-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.assistant-runlog-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-runlog-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.assistant-runlog-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 6px; font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: 0.02em; border: 1px solid rgba(15,23,42,0.08); background: rgba(241,245,249,0.9); color: #334155; }
.assistant-runlog-tag.is-read { background: rgba(239,246,255,0.95); color: #1d4ed8; border-color: rgba(59,130,246,0.2); }
.assistant-runlog-tag.is-write { background: rgba(255,247,237,0.95); color: #c2410c; border-color: rgba(249,115,22,0.22); }
.assistant-runlog-tag.is-external { background: rgba(236,253,245,0.95); color: #047857; border-color: rgba(16,185,129,0.22); }
.assistant-runlog-tag.is-communication { background: rgba(254,242,242,0.95); color: #b91c1c; border-color: rgba(239,68,68,0.24); }
.assistant-runlog-tag.is-financial { background: rgba(250,245,255,0.95); color: #7c3aed; border-color: rgba(139,92,246,0.24); }
.assistant-runlog-tag.is-destructive { background: rgba(127,29,29,0.08); color: #991b1b; border-color: rgba(185,28,28,0.24); }
.assistant-runlog-tag.is-delegate { background: rgba(245,243,255,0.95); color: #6d28d9; border-color: rgba(139,92,246,0.18); }
.assistant-runlog-tag.is-confirm { background: rgba(254,249,195,0.95); color: #854d0e; border-color: rgba(234,179,8,0.24); }
.assistant-runlog-copy { border: none; background: transparent; font-size: 10px; color: #0b5ed7; cursor: pointer; padding: 0; }
.assistant-runlog-copy:hover { text-decoration: underline; }
.assistant-runlog-details { display: none; margin-top: 4px; font-size: 10px; background: #fff; border-radius: 4px; padding: 6px; max-height: 140px; overflow: auto; white-space: pre-wrap; }
.assistant-runlog-details.open { display: block; }
.assistant-pane.hidden { display: none; }
.assistant-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.assistant-label { width: 100px; font-size: 12px; color: #444; }
.assistant-input, .assistant-select { flex: 1; padding: 6px 8px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 13px; }
.assistant-btn { padding: 6px 10px; border: 1px solid #d0d7de; background: #f6f8fa; border-radius: 6px; cursor: pointer; font-size: 12px; }
.assistant-btn.primary { background: #0b5ed7; color: #fff; border-color: #0b5ed7; }
.assistant-suggest-list { position: absolute; margin-top: 2px; background: #fff; border: 1px solid #d0d7de; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 10; }
.assistant-suggest-item { padding: 6px 8px; cursor: pointer; }
.assistant-suggest-item:hover { background: #e7f1ff; }
.assistant-footer {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e3e3e3; background: #fafafa;
}
#assistantInput {
  flex: 1; padding: 7px 9px; border: 1px solid #d0d7de; border-radius: 8px; font-size: 12px;
}
.assistant-send {
  padding: 8px 12px; background: #0b5ed7; color: #fff; border: none; border-radius: 8px; cursor: pointer;
}
.assistant-agent-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #444; }
.assistant-agent-label { user-select: none; }
.assistant-msg { margin: 6px 0; padding: 6px 8px; border-radius: 8px; white-space: pre-wrap; font-size: 12px; }
.assistant-msg.user { background: #e7f1ff; color: #083a7a; align-self: flex-end; }
.assistant-msg.bot { background: #f2f2f2; color: #222; }
.assistant-json { margin: 0; font-size: 12px; background: #f6f8fa; padding: 8px; border-radius: 6px; overflow: auto; }

/* Styled links inside assistant messages */
.assistant-msg.bot a.assistant-link {
  display: inline-block;
  padding: 2px 7px;
  margin: 2px 4px 2px 0;
  border: 1px solid #99baff;
  background: #eef4ff;
  color: #0b5ed7;
  text-decoration: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.assistant-msg.bot a.assistant-link:hover {
  background: #e7f1ff;
  text-decoration: none;
}

/* New messages indicator (appears when user scrolled up) */
#assistantNewMsg.assistant-newmsg {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #d0d7de;
  background: #0b5ed7;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  cursor: pointer;
}
#assistantNewMsg.assistant-newmsg.show { display: inline-block; }

/* Inline tool log (shown in chat after each user question) */
.assistant-inline-log {
  margin: 6px 0 4px;
  padding: 6px 8px;
  background: #f9fafb;
  border-left: 3px solid #d0d7de;
  border-radius: 6px;
}
.assistant-inline-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  cursor: pointer;
  user-select: none;
}
.assistant-inline-caret { display: inline-block; transition: transform 0.15s ease; }
.assistant-inline-count { color: #777; font-weight: 600; }
.assistant-inline-items { margin-top: 2px; }
.assistant-inline-log.collapsed .assistant-inline-items { display: none; }
.assistant-inline-log.collapsed .assistant-inline-caret { transform: rotate(-90deg); }
.assistant-inline-item {
  font-size: 10px;
  color: #444;
  line-height: 1.3;
}

.assistant-messages { display: flex; flex-direction: column; }

/* Resizer handle */
.assistant-resizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 0, transparent 50%, #c7ccd1 50%, #c7ccd1 60%, transparent 60%, transparent 100%);
  border-radius: 2px;
  opacity: 0.8;
}

@media (max-width: 480px) {
  .assistant-panel { right: 10px; bottom: 70px; width: calc(100vw - 20px); height: 60vh; }
  .assistant-content-row { flex-direction: column; }
  .assistant-runcol { max-width: none; min-width: 0; width: 100%; border-left: none; border-top: 1px solid #eef1f4; padding-left: 0; padding-top: 8px; }
  /* Denser typography on small screens */
  #assistantInput { font-size: 11px; padding: 6px 8px; }
  .assistant-msg { font-size: 11px; padding: 5px 7px; margin: 5px 0; }
  .assistant-msg.bot a.assistant-link { font-size: 9px; padding: 2px 6px; }
  .assistant-inline-title { font-size: 9px; }
  .assistant-inline-item { font-size: 9px; }
  #assistantNewMsg.assistant-newmsg { font-size: 11px; padding: 5px 9px; bottom: 6px; right: 6px; }
}

/* Working indicator */
.assistant-typing { font-size: 11px; color: #555; opacity: 0.9; }

/* Assistant v3 refinements */
.assistant-panel.assistant-panel-v3.open {
  animation: assistant-v3-panel-in 0.24s ease;
}
.assistant-panel-v3 .assistant-header {
  cursor: default;
  user-select: none;
}
.assistant-panel-v3 .assistant-v3-header {
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--assistant-stroke);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.assistant-panel-v3 .assistant-v3-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 220px;
}
.assistant-panel-v3 .assistant-v3-titleblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.assistant-panel-v3 .assistant-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--assistant-ink);
}
.assistant-panel-v3 .assistant-v3-subtitle {
  font-size: 11px;
  color: var(--assistant-muted);
  letter-spacing: 0.01em;
}
.assistant-panel-v3 .assistant-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
}
.assistant-v3-runlog-btn,
.assistant-v3-approval-btn,
.assistant-v3-proactive-btn,
.assistant-v3-skill-btn,
.assistant-v3-memory-btn,
.assistant-v3-connector-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.75);
  color: var(--assistant-ink);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.assistant-v3-runlog-btn::before,
.assistant-v3-approval-btn::before,
.assistant-v3-proactive-btn::before,
.assistant-v3-skill-btn::before,
.assistant-v3-memory-btn::before,
.assistant-v3-connector-btn::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--assistant-pill-dot, var(--assistant-accent));
  box-shadow: 0 0 0 4px rgba(37,99,235,0.16);
}
.assistant-v3-runlog-btn {
  --assistant-pill-dot: var(--assistant-teal);
}
.assistant-v3-approval-btn {
  --assistant-pill-dot: #f97316;
}
.assistant-v3-proactive-btn {
  --assistant-pill-dot: #16a34a;
}
.assistant-v3-skill-btn {
  --assistant-pill-dot: #f59e0b;
}
.assistant-v3-memory-btn {
  --assistant-pill-dot: #0f766e;
}
.assistant-v3-connector-btn {
  --assistant-pill-dot: var(--assistant-accent);
}
.assistant-v3-runlog-btn:hover,
.assistant-v3-approval-btn:hover,
.assistant-v3-proactive-btn:hover,
.assistant-v3-skill-btn:hover,
.assistant-v3-memory-btn:hover,
.assistant-v3-connector-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 18px rgba(15,23,42,0.12);
}
.assistant-v3-runlog-btn.active {
  box-shadow: 0 0 0 2px rgba(14,165,164,0.18);
}
.assistant-v3-approval-btn.is-hidden {
  display: none;
}
.assistant-panel-v3 .assistant-v3-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0,51,102,0.14);
  background: rgba(255,255,255,0.84);
  color: var(--assistant-ink);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.assistant-panel-v3 .assistant-v3-close:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 18px rgba(0,51,102,0.12);
}
.assistant-panel-v3 .assistant-v3-close-icon {
  font-size: 12px;
  line-height: 1;
}
.assistant-panel-v3 .assistant-v3-close-text {
  white-space: nowrap;
}
.assistant-v3-runlog-btn[data-badge]:not([data-badge=""])::after,
.assistant-v3-approval-btn[data-badge]:not([data-badge=""])::after,
.assistant-v3-proactive-btn[data-badge]:not([data-badge=""])::after,
.assistant-v3-skill-btn[data-badge]:not([data-badge=""])::after,
.assistant-v3-memory-btn[data-badge]:not([data-badge=""])::after,
.assistant-v3-connector-btn[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-radius: 999px;
  padding: 0 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  height: 16px;
  box-shadow: 0 6px 12px rgba(239,68,68,0.35);
}
.assistant-v3-proactive-btn[data-badge-tone="new"][data-badge]:not([data-badge=""])::after {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  box-shadow: 0 6px 12px rgba(20,184,166,0.28);
}
.assistant-v3-proactive-btn[data-badge-tone="urgent"][data-badge]:not([data-badge=""])::after {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  box-shadow: 0 6px 12px rgba(239,68,68,0.35);
}
.assistant-v3-connector-btn[data-badge-tone="available"][data-badge]:not([data-badge=""])::after,
.assistant-v3-connector-btn[data-badge-tone="selected"][data-badge]:not([data-badge=""])::after {
  background: linear-gradient(135deg, #2563eb, #0ea5a4);
  box-shadow: 0 6px 12px rgba(37,99,235,0.28);
}
.assistant-v3-connector-btn[data-badge-tone="empty"][data-badge]:not([data-badge=""])::after {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  box-shadow: 0 6px 12px rgba(100,116,139,0.24);
}
.assistant-panel-v3 .assistant-body {
  background: transparent;
  padding: 12px 14px 8px;
  min-height: 0;
}
.assistant-panel-v3 .assistant-content-row {
  gap: 12px;
  height: 100%;
  min-height: 0;
}
.assistant-panel-v3 .assistant-messages {
  gap: 10px;
  padding: 2px 4px 8px;
  scrollbar-gutter: stable;
  min-width: 0;
  min-height: 0;
}
.assistant-panel-v3 .assistant-messages::-webkit-scrollbar {
  width: 6px;
}
.assistant-panel-v3 .assistant-messages::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,0.2);
  border-radius: 999px;
}
.assistant-panel-v3 .assistant-msg {
  font-size: 13px;
  line-height: 1.5;
  border-radius: 14px;
  padding: 10px 12px;
  max-width: 85%;
  box-shadow: 0 12px 20px rgba(15,23,42,0.08);
  animation: assistant-v3-msg-in 0.25s ease both;
}
.assistant-panel-v3 .assistant-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  color: #0f172a;
  border: 1px solid rgba(37,99,235,0.18);
}
.assistant-panel-v3 .assistant-msg.bot {
  align-self: flex-start;
  background: rgba(255,255,255,0.92);
  color: #111827;
  border: 1px solid rgba(15,23,42,0.08);
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-paragraph {
  margin: 0 0 8px;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-paragraph:last-child {
  margin-bottom: 0;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-heading {
  margin: 6px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--assistant-ink);
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-heading.level-1 {
  font-size: 13px;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-heading.level-2 {
  font-size: 12px;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-heading.level-3 {
  font-size: 11px;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-list {
  margin: 6px 0 8px 18px;
  padding: 0;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-list li {
  margin: 2px 0;
}
.assistant-panel-v3 .assistant-msg.bot .assistant-v3-md-hr {
  border: none;
  border-top: 1px solid rgba(15,23,42,0.12);
  margin: 8px 0;
}
.assistant-panel-v3 .assistant-msg.bot code {
  background: rgba(15,23,42,0.08);
  border: 1px solid rgba(15,23,42,0.08);
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 11px;
}
.assistant-panel-v3 .assistant-v3-confirm {
  align-self: flex-start;
  max-width: 85%;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(15,23,42,0.1);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 20px rgba(15,23,42,0.08);
  animation: assistant-v3-msg-in 0.25s ease both;
}
.assistant-panel-v3 .assistant-v3-confirm.danger {
  border-color: rgba(239,68,68,0.25);
  background: rgba(254,242,242,0.92);
}
.assistant-panel-v3 .assistant-v3-confirm-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--assistant-ink);
}
.assistant-panel-v3 .assistant-v3-confirm-message {
  font-size: 12px;
  color: var(--assistant-muted);
}
.assistant-panel-v3 .assistant-v3-confirm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.assistant-panel-v3 .assistant-v3-confirm-btn {
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.9);
  color: #1f2937;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
}
.assistant-panel-v3 .assistant-v3-confirm-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(15,23,42,0.2);
  box-shadow: 0 10px 16px rgba(15,23,42,0.12);
}
.assistant-panel-v3 .assistant-v3-confirm-btn.confirm.danger {
  border-color: rgba(239,68,68,0.35);
  background: rgba(248,113,113,0.16);
  color: #b91c1c;
}
.assistant-panel-v3 .assistant-v3-next-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  max-width: 85%;
  margin-top: -2px;
  animation: assistant-v3-fade-in 0.2s ease both;
}
.assistant-panel-v3 .assistant-v3-next-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--assistant-muted);
}
.assistant-panel-v3 .assistant-v3-next-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assistant-panel-v3 .assistant-v3-next-action {
  border: 1px solid rgba(37,99,235,0.2);
  background: rgba(239,246,255,0.92);
  color: #1f2937;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
}
.assistant-panel-v3 .assistant-v3-next-action:hover {
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.4);
  box-shadow: 0 10px 18px rgba(15,23,42,0.12);
}
.assistant-v3-empty {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 16px 28px rgba(15,23,42,0.08);
  animation: assistant-v3-fade-in 0.3s ease both;
}
.assistant-v3-empty-art {
  position: relative;
  width: 100%;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,0.06);
}
.assistant-v3-empty-art::before {
  content: '';
  position: absolute;
  inset: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.05);
}
.assistant-v3-empty-art::after {
  display: none;
}
.assistant-v3-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--assistant-ink);
}
.assistant-v3-empty-body {
  font-size: 12px;
  color: var(--assistant-muted);
}
.assistant-v3-suggestions {
  display: grid;
  gap: 6px;
}
.assistant-v3-suggestion {
  border: 1px solid rgba(37,99,235,0.2);
  background: rgba(255,255,255,0.9);
  color: #1f2937;
  padding: 8px 10px;
  border-radius: 12px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
}
.assistant-v3-suggestion:hover {
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.4);
  box-shadow: 0 10px 18px rgba(15,23,42,0.12);
}
.assistant-panel-v3 .assistant-runcol {
  flex: 0 0 0;
  max-width: 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  padding-left: 0;
  border-left: 1px solid transparent;
  transform: translateX(6px);
  transition: all 0.2s ease;
}
.assistant-panel-v3.assistant-v3-runlog-open .assistant-runcol {
  flex: 0 0 210px;
  max-width: 210px;
  width: 210px;
  opacity: 1;
  pointer-events: auto;
  padding-left: 12px;
  border-left-color: var(--assistant-stroke);
  transform: translateX(0);
}
.assistant-panel-v3 .assistant-runlog-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--assistant-muted);
}
.assistant-panel-v3 .assistant-runlog-item {
  font-size: 11px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(15,23,42,0.08);
  animation: assistant-v3-stagger 0.2s ease both;
}
.assistant-panel-v3 .assistant-runlog-tag {
  backdrop-filter: blur(4px);
}
.assistant-panel-v3 .assistant-runlog-item:nth-child(1) { animation-delay: 0.02s; }
.assistant-panel-v3 .assistant-runlog-item:nth-child(2) { animation-delay: 0.04s; }
.assistant-panel-v3 .assistant-runlog-item:nth-child(3) { animation-delay: 0.06s; }
.assistant-panel-v3 .assistant-runlog-item:nth-child(4) { animation-delay: 0.08s; }
.assistant-panel-v3 .assistant-runlog-details {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(15,23,42,0.08);
}
.assistant-panel-v3 .assistant-footer {
  display: block;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--assistant-stroke);
  background: linear-gradient(180deg, rgba(248,250,252,0.9), rgba(226,232,240,0.9));
}
.assistant-panel-v3 .assistant-v3-compose {
  width: 100%;
}
.assistant-v3-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 26px rgba(15,23,42,0.12);
}
.assistant-v3-modebar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px 10px;
}
.assistant-v3-mode-summary {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #475569;
  line-height: 1.35;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistant-v3-reasoning-wrap,
.assistant-v3-autonomy-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font-size: 11px;
  color: #475569;
  min-width: 0;
}
.assistant-v3-reasoning-label,
.assistant-v3-autonomy-label {
  font-weight: 600;
}
.assistant-v3-reasoning-select,
.assistant-v3-autonomy-select {
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  color: #0f172a;
  width: 100%;
  min-width: 0;
}
.assistant-v3-input {
  width: 100%;
  resize: none;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  color: var(--assistant-ink);
  min-height: 56px;
  max-height: 160px;
}
.assistant-v3-input::placeholder {
  color: rgba(15,23,42,0.45);
}
.assistant-v3-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: flex-end;
  width: 100%;
}
.assistant-v3-speak {
  min-width: 104px;
  border: 1px solid rgba(0,51,102,0.14);
  background: rgba(255,255,255,0.92);
  color: var(--assistant-ink);
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.assistant-v3-speak:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 10px 18px rgba(0,51,102,0.1);
}
.assistant-v3-speak.active {
  border-color: rgba(255,153,0,0.4);
  background: rgba(255,153,0,0.12);
  color: #9a3412;
  box-shadow: 0 0 0 1px rgba(255,153,0,0.14);
}
.assistant-v3-speak.unsupported {
  opacity: 0.65;
}
.assistant-v3-speak-label {
  white-space: nowrap;
}
.assistant-v3-stop {
  border: 1px solid rgba(185,28,28,0.2);
  background: rgba(248,113,113,0.12);
  color: #b91c1c;
  border-radius: 10px;
  padding: 6px 10px;
}
.assistant-v3-send {
  min-width: 96px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 18px rgba(37,99,235,0.25);
}
.assistant-v3-connector-tray {
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  top: var(--assistant-tray-top, 88px);
  z-index: 4;
  background: rgba(255,255,255,0.86);
  padding: 10px 14px;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--assistant-stroke);
  border-radius: 16px;
  box-shadow: 0 20px 36px rgba(15,23,42,0.16);
  max-height: min(280px, calc(100% - var(--assistant-tray-top, 88px) - 188px));
  overflow: auto;
}
.assistant-v3-connector-tray.open {
  display: flex;
  animation: assistant-v3-fade-in 0.2s ease;
}
.assistant-v3-proactive-tray {
  overflow: hidden;
}
.assistant-v3-connector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.assistant-v3-connector-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--assistant-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.assistant-v3-refresh,
.assistant-v3-apply {
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
}
.assistant-v3-connector-list {
  max-height: 160px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assistant-v3-proactive-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assistant-v3-connector-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #1f2937;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.95);
}
.assistant-v3-skill-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assistant-v3-skill-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.assistant-v3-skill-note {
  font-size: 11px;
  color: #64748b;
}
.assistant-v3-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.assistant-v3-skill-chip-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #1e293b;
  background: rgba(226,232,240,0.7);
  border: 1px solid rgba(148,163,184,0.3);
}
.assistant-v3-skill-chip-pill.source-tenant {
  color: #0f766e;
  background: rgba(204,251,241,0.9);
  border-color: rgba(13,148,136,0.18);
}
.assistant-v3-skill-chip-pill.proactive {
  color: #7c2d12;
  background: rgba(254,215,170,0.8);
  border-color: rgba(234,88,12,0.2);
}
.assistant-v3-skill-chip-pill.connector {
  color: #1d4ed8;
  background: rgba(219,234,254,0.9);
  border-color: rgba(37,99,235,0.18);
}
.assistant-v3-skill-warning {
  margin-top: 4px;
  font-size: 11px;
  color: #b45309;
}
.assistant-v3-skill-studio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.assistant-v3-skill-studio.hidden,
.assistant-v3-skill-form.hidden,
.assistant-v3-skill-new.hidden,
.assistant-v3-skill-cancel.hidden,
.assistant-v3-skill-studio-empty.hidden {
  display: none !important;
}
.assistant-v3-skill-studio-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assistant-v3-skill-studio-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.assistant-v3-skill-studio-note {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.assistant-v3-skill-studio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assistant-v3-skill-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.assistant-v3-skill-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.assistant-v3-skill-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assistant-v3-skill-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.assistant-v3-skill-card-subtitle,
.assistant-v3-skill-card-meta {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.assistant-v3-skill-card-actions {
  display: flex;
  gap: 8px;
}
.assistant-v3-skill-delete {
  color: #b91c1c;
  border-color: rgba(185,28,28,0.18);
  background: rgba(248,113,113,0.08);
}
.assistant-v3-skill-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,0.14);
  background: rgba(239,246,255,0.5);
}
.assistant-v3-skill-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.assistant-v3-skill-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assistant-v3-skill-label {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.assistant-v3-skill-helper {
  font-size: 10px;
  color: #64748b;
}
.assistant-v3-skill-input,
.assistant-v3-skill-select {
  width: 100%;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.95);
  color: #0f172a;
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
}
.assistant-v3-skill-textarea {
  resize: vertical;
  min-height: 72px;
}
.assistant-v3-skill-textarea-lg {
  min-height: 140px;
}
.assistant-v3-skill-check-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.assistant-v3-skill-checklist {
  max-height: 140px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.assistant-v3-skill-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.95);
  font-size: 11px;
  color: #1f2937;
}
.assistant-v3-skill-chip input {
  margin-top: 1px;
}
.assistant-v3-skill-chip-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
}
.assistant-v3-skill-chip-note {
  display: block;
  margin-top: 2px;
  color: #64748b;
}
.assistant-v3-skill-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
}
.assistant-v3-skill-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.assistant-v3-proactive-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.assistant-v3-proactive-card.is-new {
  border-color: rgba(13, 148, 136, 0.24);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.08);
}
.assistant-v3-proactive-card.urgent {
  border-color: rgba(239, 68, 68, 0.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(254,242,242,0.96));
}
.assistant-v3-proactive-kind {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.assistant-v3-proactive-kind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.assistant-v3-proactive-band {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  background: rgba(148,163,184,0.16);
  color: #475569;
}
.assistant-v3-proactive-band.band-critical {
  background: rgba(239,68,68,0.14);
  color: #b91c1c;
}
.assistant-v3-proactive-band.band-high {
  background: rgba(249,115,22,0.14);
  color: #c2410c;
}
.assistant-v3-proactive-band.band-medium {
  background: rgba(13,148,136,0.14);
  color: #0f766e;
}
.assistant-v3-approval-kind {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.assistant-v3-proactive-body {
  white-space: pre-line;
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}
.assistant-v3-proactive-why {
  font-size: 11px;
  line-height: 1.4;
  color: #64748b;
}
.assistant-v3-proactive-policy {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(248,250,252,0.96);
}
.assistant-v3-proactive-policy-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.assistant-v3-proactive-policy-note,
.assistant-v3-proactive-policy-summary,
.assistant-v3-proactive-policy-notice {
  font-size: 11px;
  line-height: 1.4;
  color: #64748b;
}
.assistant-v3-proactive-policy-grid {
  display: grid;
  gap: 8px;
}
.assistant-v3-proactive-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #334155;
}
.assistant-v3-proactive-policy-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.assistant-v3-proactive-policy-notice[data-tone="success"] {
  color: #0f766e;
}
.assistant-v3-proactive-policy-notice[data-tone="error"] {
  color: #b91c1c;
}
.assistant-v3-proactive-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.assistant-v3-proactive-open,
.assistant-v3-proactive-run {
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.assistant-v3-proactive-open {
  border: 1px solid rgba(15,23,42,0.08);
  background: #ffffff;
  color: #0f172a;
}
.assistant-v3-proactive-run {
  border: 1px solid rgba(37,99,235,0.16);
  background: rgba(37,99,235,0.08);
  color: #1d4ed8;
}
.assistant-v3-proactive-open:hover {
  border-color: rgba(15,23,42,0.14);
  background: #f8fafc;
}
.assistant-v3-proactive-inline-actions {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.assistant-v3-proactive-inline-list {
  display: grid;
  gap: 8px;
}
.assistant-v3-proactive-inline-card {
  gap: 6px;
}
.assistant-v3-proactive-inline-open {
  justify-self: flex-start;
}
.assistant-v3-approval-action.reject {
  border-color: rgba(185,28,28,0.18);
  background: rgba(248,113,113,0.12);
  color: #b91c1c;
}
.assistant-v3-approval-action.approve-always {
  border-color: rgba(15,23,42,0.1);
  background: rgba(15,23,42,0.04);
  color: #0f172a;
}
.assistant-v3-approval-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,248,235,0.95);
  color: #b45309;
}
.assistant-v3-approval-status.status-processing {
  background: rgba(239,246,255,0.95);
  color: #1d4ed8;
}
.assistant-v3-approval-status.status-executed {
  background: rgba(236,253,245,0.95);
  color: #047857;
}
.assistant-v3-approval-status.status-rejected,
.assistant-v3-approval-status.status-failed {
  background: rgba(254,242,242,0.95);
  color: #b91c1c;
}
.assistant-v3-connector-empty {
  font-size: 12px;
  color: #64748b;
}
.assistant-v3-connector-footer {
  display: flex;
  justify-content: flex-end;
}
.assistant-v3-memory-tray {
  max-height: min(430px, calc(100% - var(--assistant-tray-top, 88px) - 152px));
}
.assistant-v3-memory-notice:empty,
.assistant-v3-memory-summary-meta:empty {
  display: none;
}
.assistant-v3-memory-notice {
  font-size: 11px;
  line-height: 1.4;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(248,250,252,0.95);
  color: #475569;
}
.assistant-v3-memory-notice[data-tone="success"] {
  border-color: rgba(13,148,136,0.2);
  background: rgba(240,253,250,0.96);
  color: #0f766e;
}
.assistant-v3-memory-notice[data-tone="error"] {
  border-color: rgba(185,28,28,0.18);
  background: rgba(254,242,242,0.96);
  color: #b91c1c;
}
.assistant-v3-memory-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(37,99,235,0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,178,204,0.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.94));
}
.assistant-v3-memory-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}
.assistant-v3-memory-summary-body {
  font-size: 12px;
  line-height: 1.5;
  color: #0f172a;
}
.assistant-v3-memory-summary-meta {
  font-size: 11px;
  color: #64748b;
}
.assistant-v3-memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.assistant-v3-memory-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assistant-v3-memory-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.assistant-v3-memory-edit-card {
  min-height: 100%;
}
.assistant-v3-memory-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.assistant-v3-memory-card-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.assistant-v3-memory-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.assistant-v3-memory-card-note {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.assistant-v3-memory-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.assistant-v3-memory-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.assistant-v3-memory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assistant-v3-memory-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.96);
}
.assistant-v3-memory-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.assistant-v3-memory-item-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
}
.assistant-v3-memory-item-body {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
  white-space: pre-line;
}
.assistant-v3-memory-item-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.assistant-v3-memory-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #1e293b;
  background: rgba(226,232,240,0.78);
  border: 1px solid rgba(148,163,184,0.26);
}
.assistant-v3-memory-chip.source-explicit {
  color: #0f766e;
  background: rgba(204,251,241,0.92);
  border-color: rgba(13,148,136,0.18);
}
.assistant-v3-memory-chip.source-observed {
  color: #1d4ed8;
  background: rgba(219,234,254,0.92);
  border-color: rgba(37,99,235,0.18);
}
.assistant-v3-memory-chip.channel-teams {
  color: #115e59;
  background: rgba(204,251,241,0.8);
  border-color: rgba(15,118,110,0.18);
}
.assistant-v3-memory-chip.channel-mail {
  color: #9a3412;
  background: rgba(255,237,213,0.88);
  border-color: rgba(234,88,12,0.18);
}
.assistant-v3-memory-footer {
  justify-content: flex-end;
}
.assistant-panel-v3.assistant-busy .assistant-v3-header {
  background:
    radial-gradient(circle at 80% 0%, rgba(14,165,164,0.3), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,0.9), rgba(224,242,254,0.9));
}

@media (max-width: 480px) {
  .assistant-panel.assistant-panel-v3 {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    height: min(78vh, calc(100vh - 20px));
    max-height: calc(100vh - 20px);
    bottom: 10px;
    border-radius: 16px;
  }
  .assistant-v3-connector-tray {
    left: 10px;
    right: 10px;
    max-height: min(240px, calc(100% - var(--assistant-tray-top, 88px) - 152px));
  }
  .assistant-fab.assistant-fab-v3 {
    width: 48px;
    height: 48px;
  }
  .assistant-v3-mark-fab {
    width: 32px;
    height: 32px;
  }
  .assistant-panel-v3 .assistant-v3-close-text {
    display: none;
  }
  .assistant-v3-speak {
    min-width: 0;
    flex: 1 1 auto;
  }
  .assistant-panel-v3 .assistant-content-row {
    gap: 10px;
  }
  .assistant-panel-v3 .assistant-runcol {
    max-width: none;
    width: 100%;
    flex: 0 0 auto;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    border-top: 1px solid transparent;
    border-left: none;
    padding-left: 0;
    padding-top: 0;
  }
  .assistant-panel-v3.assistant-v3-runlog-open .assistant-runcol {
    max-height: 200px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    border-top-color: var(--assistant-stroke);
    padding-top: 10px;
  }
  .assistant-v3-modebar {
    grid-template-columns: 1fr;
  }
  .assistant-v3-mode-summary { white-space: normal; }
  .assistant-v3-reasoning-wrap,
  .assistant-v3-autonomy-wrap {
    justify-content: flex-start;
  }
  .assistant-v3-memory-grid,
  .assistant-v3-memory-form-grid,
  .assistant-v3-skill-form-grid,
  .assistant-v3-skill-checklist {
    grid-template-columns: 1fr;
  }
  .assistant-v3-memory-card-head,
  .assistant-v3-skill-card-head,
  .assistant-v3-skill-check-header {
    flex-direction: column;
    align-items: stretch;
  }
  .assistant-v3-actions { width: 100%; }
}

@keyframes assistant-v3-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes assistant-v3-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes assistant-v3-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes assistant-v3-stagger {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* public/css/bug-report.css */
.bug-report-fab {
  position: fixed;
  right: 20px;
  bottom: 76px; /* sits above assistant FAB */
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: #f59e0b; /* amber */
  color: #1f2937;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 1700; /* above modals and assistant, below bug-report overlay */
}

body.modal-open .bug-report-fab {
  visibility: hidden;
  pointer-events: none;
}

.bug-report-overlay {
  position: fixed;
  inset: 0;
  padding: 16px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  z-index: 10060;
}

.bug-report-modal {
  background: #fff;
  width: min(1120px, 100%);
  max-height: calc(100vh - 32px);
  min-height: 0;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bug-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.bug-report-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bug-report-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.bug-report-collapsed {
  display: grid;
  gap: 6px;
  padding: 12px 14px 14px;
  border-top: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}
.bug-report-collapsed-status {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d4ed8;
}
.bug-report-collapsed-text {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
}
.bug-report-collapsed-hint {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.bug-report-intro {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}
.bug-report-field {
  display: grid;
  gap: 6px;
}
.bug-report-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.bug-report-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
}
.bug-report-canvas-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
}
.bug-report-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}
.bug-report-canvas-wrap canvas.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
}
.bug-report-toolbar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap;
}
.bug-report-assistant {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f8fbff;
}
.bug-report-assistant-title {
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
}
.bug-report-assistant-question {
  padding: 10px 12px;
  border-radius: 8px;
  background: #eaf2ff;
  color: #0f172a;
  line-height: 1.5;
}
.bug-report-footer {
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex; gap: 8px; justify-content: flex-end;
}
.bug-btn { padding: 6px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: #f3f4f6; cursor: pointer; }
.bug-btn.primary { background: #0b5ed7; border-color: #0b5ed7; color: #fff; }
.bug-btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.bug-report-textarea { width: 100%; min-height: 80px; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px; font: inherit; }

.bug-report-overlay[hidden],
.bug-report-modal[hidden] {
  display: none !important;
}

@media (max-width: 480px) {
  .bug-report-fab { right: 10px; bottom: 70px; }
  .bug-report-overlay { padding: 10px; }
  .bug-report-modal { max-height: calc(100vh - 20px); }
}

/* public/css/desktop.css */
/* Desktop-like polish applied in standalone PWA mode */
body.pwa-standalone {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none; /* prevent pull-to-refresh/bounce */
  touch-action: manipulation;
}

/* Re-enable selection and context features where it matters */
body.pwa-standalone input,
body.pwa-standalone textarea,
body.pwa-standalone [contenteditable="true"],
body.pwa-standalone .selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Prevent image/link dragging that feels non-native in apps */
body.pwa-standalone img,
body.pwa-standalone a {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Subtle window-chrome vibes in standalone */
body.pwa-standalone .main-header {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Reduce tap highlight artifacts for buttons/links */
body.pwa-standalone a,
body.pwa-standalone button,
body.pwa-standalone .btn,
body.pwa-standalone .btn-ghost,
body.pwa-standalone .header-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Enhanced hover affordances in standalone */
body.pwa-standalone .nav-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Consistent text selection appearance */
::selection {
  background: var(--primary-cyan);
  color: #fff;
}
::-moz-selection {
  background: var(--primary-cyan);
  color: #fff;
}

/* Command palette item highlight */
.cp-item.active { background: var(--primary-silver); }

/* public/css/design-beta.css */
body.design-beta {
    --beta-bg: #f7f8fa;
    --beta-surface: #ffffff;
    --beta-surface-subtle: #f2f4f7;
    --beta-surface-elevated: #fcfcfd;
    --beta-text: #111827;
    --beta-text-muted: #6b7280;
    --beta-text-soft: #94a3b8;
    --beta-border: #e5e7eb;
    --beta-border-strong: #d7dde5;
    --beta-navy: #112033;
    --beta-navy-soft: #1d2c43;
    --beta-cyan: #00b2cc;
    --beta-cyan-soft: rgba(0, 178, 204, 0.12);
    --beta-orange: #c96e1b;
    --beta-success: #0f8b5f;
    --beta-danger: #c2413a;
    --beta-radius-xs: 8px;
    --beta-radius-sm: 10px;
    --beta-radius-md: 14px;
    --beta-radius-lg: 18px;
    --beta-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
    --beta-shadow-2: 0 10px 24px rgba(15, 23, 42, 0.08);
    --beta-shadow-3: 0 24px 48px rgba(15, 23, 42, 0.12);
    --beta-header-height: 60px;
    --beta-toolbar-height: 40px;
    --beta-table-row: 44px;
    --beta-control-height: 36px;
    --beta-control-height-compact: 34px;
    --beta-font-meta: 11px;
    --beta-font-sm: 12px;
    --beta-font-md: 13px;
    --beta-font-lg: 14px;
    --beta-font-xl: 16px;
    --beta-font-modal-title: 17px;
    --beta-font-page-title: clamp(24px, 1.55vw, 28px);
    --beta-font-kpi: clamp(20px, 1.45vw, 24px);
    --beta-font-kpi-compact: clamp(18px, 1.2vw, 20px);
    --beta-font-hero: 20px;
    --assistant-shell-width: 432px;
    --assistant-shell-gap: 14px;
    --assistant-launcher-width: 46px;
    --sidebar-width: 238px;
    --sidebar-collapsed-width: 76px;
    --primary-dark: var(--beta-navy);
    --primary-cyan: var(--beta-cyan);
    --primary-silver: var(--beta-bg);
    --accent-orange: var(--beta-orange);
    --text-dark: var(--beta-text);
    --text-gray: var(--beta-text-muted);
    --border-color: var(--beta-border);
    --hover-color: var(--beta-surface-subtle);
    --shadow-sm: var(--beta-shadow-1);
    --shadow-md: var(--beta-shadow-2);
    --shadow-lg: var(--beta-shadow-3);
    background: var(--beta-bg);
    color: var(--beta-text);
    font-size: var(--beta-font-md);
    line-height: 1.45;
}

body.design-beta,
body.design-beta input,
body.design-beta select,
body.design-beta textarea,
body.design-beta button {
    font-family: 'Inter', sans-serif;
}

body.design-beta h1,
body.design-beta h2,
body.design-beta h3,
body.design-beta h4,
body.design-beta h5,
body.design-beta h6,
body.design-beta .page-title,
body.design-beta .card-title,
body.design-beta .nav-section-title,
body.design-beta .logo-text {
    font-family: 'Montserrat', sans-serif;
}

body.design-beta :focus-visible {
    outline: 2px solid rgba(0, 178, 204, 0.55);
    outline-offset: 2px;
}

html.design-beta-boot .loading-screen,
body.design-beta .loading-screen {
    background:
        radial-gradient(circle at top left, rgba(15, 23, 42, 0.08), transparent 32%),
        radial-gradient(circle at bottom right, rgba(0, 178, 204, 0.08), transparent 24%),
        var(--beta-bg);
}

html.design-beta-boot .loading-panel,
body.design-beta .loading-panel {
    min-width: min(460px, calc(100vw - 48px));
    border: 1px solid rgba(215, 221, 229, 0.88);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 28px 72px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(20px);
}

html.design-beta-boot .loading-brand,
body.design-beta .loading-brand {
    margin-bottom: 18px;
    gap: 12px;
}

html.design-beta-boot .loading-logo-mark,
body.design-beta .loading-logo-mark {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
}

html.design-beta-boot .loading-logo-text,
body.design-beta .loading-logo-text {
    width: 128px;
    line-height: 0;
}

html.design-beta-boot .loading-logo-mark img,
body.design-beta .loading-logo-mark img,
html.design-beta-boot .loading-logo-text img,
body.design-beta .loading-logo-text img {
    filter: none;
}

html.design-beta-boot .loading-indicator,
body.design-beta .loading-indicator {
    gap: 12px;
}

html.design-beta-boot .loading-spinner,
body.design-beta .loading-spinner {
    width: 36px;
    height: 36px;
    border-width: 2px;
    border-color: rgba(17, 24, 39, 0.08);
    border-top-color: var(--beta-cyan);
}

html.design-beta-boot .loading-screen p,
body.design-beta .loading-screen p {
    color: var(--beta-text);
    font-size: var(--beta-font-lg);
}

body.design-beta .app-container {
    background: var(--beta-bg);
}

body.design-beta .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: #101b2c;
    box-shadow: none;
}

body.design-beta .sidebar::-webkit-scrollbar {
    width: 10px;
}

body.design-beta .sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.26);
    border-radius: 999px;
}

body.design-beta .sidebar-header {
    min-height: 72px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.design-beta .logo {
    gap: 10px;
    min-width: 0;
}

body.design-beta .logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    box-shadow: none;
    border: 0;
    background: transparent;
}

body.design-beta .logo-icon::after {
    display: none;
}

body.design-beta .logo-text-block {
    gap: 3px;
}

body.design-beta .logo-text {
    width: 110px;
    line-height: 0;
}

body.design-beta .logo-text img {
    filter: none;
}

body.design-beta .logo-subtext {
    color: rgba(226, 232, 240, 0.64);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.design-beta .logo img.company-logo {
    max-height: 36px;
    max-width: 160px;
}

body.design-beta .sidebar .sidebar-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    color: rgba(241, 245, 249, 0.78);
}

body.design-beta .sidebar .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.design-beta .nav-menu {
    padding: 10px 10px 14px;
}

body.design-beta .nav-section {
    margin-bottom: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.design-beta .nav-section:first-child {
    padding-top: 0;
    border-top: 0;
}

body.design-beta .nav-section.nav-section-active .nav-section-title {
    color: rgba(226, 232, 240, 0.74);
}

body.design-beta .nav-section-title {
    padding: 0 10px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(226, 232, 240, 0.46);
}

body.design-beta .nav-item {
    position: relative;
    min-height: 36px;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    margin-bottom: 2px;
    border-left: 0;
    border-radius: 10px;
    color: rgba(226, 232, 240, 0.78);
    font-size: var(--beta-font-sm);
    font-weight: 500;
}

body.design-beta .nav-item::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: rgba(144, 205, 255, 0.92);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

body.design-beta .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

body.design-beta .nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.design-beta .nav-item.active::before {
    opacity: 1;
    transform: scaleY(1);
}

body.design-beta .nav-item.active .nav-label {
    font-weight: 600;
}

body.design-beta .nav-icon {
    width: 16px;
    color: rgba(226, 232, 240, 0.84);
}

body.design-beta .nav-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.85;
}

body.design-beta .app-container.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

body.design-beta .app-container.sidebar-collapsed .sidebar-header {
    padding: 12px 10px;
    gap: 8px;
}

body.design-beta .app-container.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 8px 0;
}

body.design-beta .app-container.sidebar-collapsed .nav-item::before {
    left: 9px;
}

body.design-beta .main-content {
    margin-left: var(--sidebar-width);
    margin-right: 0;
    background: var(--beta-bg);
    transition: margin-right 0.22s ease;
}

body.design-beta .app-container.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

body.design-beta.assistant-v3-shell-open .main-content {
    margin-right: calc(var(--assistant-shell-width) + var(--assistant-shell-gap) + 12px);
}

body.design-beta .main-header {
    position: relative;
    z-index: 20;
    min-height: var(--beta-header-height);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    background: rgba(247, 248, 250, 0.9);
    backdrop-filter: blur(18px);
    box-shadow: none;
}

body.design-beta .header-left,
body.design-beta .header-right {
    gap: 8px;
    min-width: 0;
}

body.design-beta .header-right {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

body.design-beta .sidebar-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--beta-border);
    border-radius: 9px;
    color: var(--beta-text-muted);
    background: var(--beta-surface);
}

body.design-beta .sidebar-toggle:hover {
    background: var(--beta-surface-subtle);
}

body.design-beta .command-bar {
    min-width: min(620px, 48vw);
    min-height: 40px;
    padding: 0 5px 0 8px;
    gap: 3px;
    border: 1px solid var(--beta-border-strong);
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .command-bar input {
    min-width: 0;
    font-size: var(--beta-font-md);
    color: var(--beta-text);
}

body.design-beta .command-bar input::placeholder {
    color: #98a2b3;
}

body.design-beta .search-btn,
body.design-beta .search-clear,
body.design-beta .header-btn,
body.design-beta .command-bar-shortcut,
body.design-beta .btn-ghost {
    color: var(--beta-text-muted);
}

body.design-beta .search-btn,
body.design-beta .search-clear,
body.design-beta .header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
}

body.design-beta .command-bar-shortcut {
    min-width: 50px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--beta-border);
    border-radius: 8px;
    background: var(--beta-surface-subtle);
    font-size: var(--beta-font-meta);
    font-weight: 600;
}

body.design-beta .command-bar-shortcut:hover {
    background: #eef1f5;
}

body.design-beta .btn,
body.design-beta .header-btn,
body.design-beta .company-switcher-btn {
    min-height: 34px;
    padding: 0.38rem 0.72rem;
    border-radius: 9px;
    font-size: var(--beta-font-sm);
    font-weight: 500;
    transform: none;
    box-shadow: none;
}

body.design-beta .btn-sm {
    min-height: 30px;
    padding: 0.28rem 0.56rem;
    border-radius: 8px;
    font-size: var(--beta-font-sm);
}

body.design-beta .btn:hover,
body.design-beta .header-btn:hover,
body.design-beta .company-switcher-btn:hover {
    transform: none;
    box-shadow: none;
}

body.design-beta .btn-primary {
    background: var(--beta-navy);
    color: #fff;
}

body.design-beta .btn-primary:hover {
    background: var(--beta-navy-soft);
}

body.design-beta .design-toggle-btn {
    width: auto;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 0.7rem;
    gap: 0.4rem;
    border: 1px solid var(--beta-border-strong);
    border-radius: 10px;
    background: var(--beta-surface);
    color: #334155;
}

body.design-beta .design-toggle-btn:hover {
    border-color: #cbd5e1;
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
}

body.design-beta .btn-outline {
    border: 1px solid var(--beta-border-strong);
    color: #334155;
    background: var(--beta-surface);
}

body.design-beta .btn-outline:hover {
    border-color: #cbd5e1;
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
}

body.design-beta .btn-ghost,
body.design-beta .header-btn,
body.design-beta .company-switcher-btn {
    background: transparent;
}

body.design-beta .btn-ghost:hover,
body.design-beta .header-btn:hover,
body.design-beta .company-switcher-btn:hover {
    background: var(--beta-surface-subtle);
}

body.design-beta .btn-success {
    background: var(--beta-success);
    color: #fff;
}

body.design-beta .btn-danger {
    background: var(--beta-danger);
    color: #fff;
}

body.design-beta .design-toggle-btn.is-active,
body.design-beta .header-command-btn.is-open {
    background: var(--beta-navy);
    border-color: var(--beta-navy);
    color: #fff;
}

body.design-beta .btn-icon-shell,
body.design-beta .header-btn-icon,
body.design-beta .company-icon {
    width: 16px;
    height: 16px;
}

body.design-beta .btn-icon-shell svg,
body.design-beta .header-btn-icon svg,
body.design-beta .company-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.9;
}

body.design-beta .company-context {
    min-height: 34px;
    max-width: 220px;
    padding: 0 10px;
    border: 1px solid var(--beta-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .header-company-cluster,
body.design-beta .header-actions-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

body.design-beta .header-actions-cluster {
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid rgba(17, 24, 39, 0.08);
}

body.design-beta .company-info {
    min-width: 0;
    gap: 1px;
}

body.design-beta .company-name {
    display: block;
    overflow: hidden;
    font-size: var(--beta-font-sm);
    font-weight: 600;
    color: var(--beta-text);
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.design-beta .user-role {
    display: block;
    overflow: hidden;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--beta-text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    text-overflow: ellipsis;
}

body.design-beta .notification-badge {
    top: -4px;
    right: -4px;
    min-width: 16px;
    padding: 0 5px;
    background: var(--beta-orange);
    font-size: 10px;
}

body.design-beta .dropdown-menu,
body.design-beta .notifications-menu {
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-3);
}

body.design-beta .profile-flyout {
    min-width: 292px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--beta-border);
    box-shadow: var(--beta-shadow-2);
}

body.design-beta .profile-flyout-summary {
    gap: 9px;
    padding: 2px 2px 8px;
}

body.design-beta .profile-flyout-summary-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--beta-navy);
    border: 1px solid rgba(17, 32, 51, 0.08);
    font-size: 11px;
    box-shadow: none;
}

body.design-beta .profile-flyout-name {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--beta-font-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--beta-text);
}

body.design-beta .profile-flyout-email {
    font-size: 11px;
    color: var(--beta-text-muted);
}

body.design-beta .profile-flyout-meta {
    gap: 4px;
    margin-top: 5px;
}

body.design-beta .profile-flyout-role,
body.design-beta .profile-flyout-company {
    min-height: 18px;
    padding: 0 7px;
    background: var(--beta-surface-subtle);
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--beta-text-muted);
}

body.design-beta .profile-flyout-section {
    padding-top: 1px;
}

body.design-beta .profile-flyout-section--divider,
body.design-beta .profile-flyout-section--session,
body.design-beta .company-admin-section.profile-flyout-section {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .profile-flyout-link {
    gap: 9px;
    min-height: 32px;
    padding: 7px 9px !important;
    border-radius: 10px;
    font-size: var(--beta-font-sm);
    color: var(--beta-text);
}

body.design-beta .profile-flyout-link:hover {
    background: var(--beta-surface-subtle);
}

body.design-beta .profile-flyout-link-icon {
    width: 14px;
    height: 14px;
    color: var(--beta-text-muted);
}

body.design-beta .profile-flyout-link-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.9;
}

body.design-beta .profile-flyout-link--danger,
body.design-beta .profile-flyout-link--danger .profile-flyout-link-icon {
    color: var(--beta-danger) !important;
}

body.design-beta .profile-flyout-language {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid var(--beta-border);
    border-radius: 10px;
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta .profile-flyout-language .current-language {
    font-size: 11px;
    color: var(--beta-text);
}

body.design-beta .profile-flyout-language .current-language::after {
    width: 6px;
    height: 6px;
    margin-left: 6px;
    color: var(--beta-text-soft);
}

body.design-beta .profile-flyout-language .language-options {
    top: calc(100% + 6px);
    border: 1px solid var(--beta-border);
    border-radius: 10px;
    box-shadow: var(--beta-shadow-2);
}

body.design-beta .profile-flyout-language .language-options a {
    padding: 7px 9px;
    font-size: 11px;
    border-bottom-color: var(--beta-border);
}

body.design-beta .profile-flyout-language .language-options a.active {
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
}

body.design-beta .profile-flyout-language .language-options a.active::before {
    background: var(--beta-cyan);
}

body.design-beta .user-avatar {
    width: 34px;
    height: 34px;
    border-width: 1px;
    background: var(--beta-navy);
    box-shadow: none;
}

body.design-beta #quickLogTimeBtn,
body.design-beta .header-command-btn {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--beta-border);
}

body.design-beta #quickLogTimeBtn:hover,
body.design-beta .header-command-btn:hover {
    background: var(--beta-surface);
}

body.design-beta .page-container {
    padding: 16px clamp(16px, 1.8vw, 28px) 20px;
    background: var(--beta-bg);
}

body.design-beta .app-footer {
    display: none;
}

body.design-beta .page {
    min-width: 0;
}

body.design-beta .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

body.design-beta .page-header-left {
    min-width: 0;
}

body.design-beta .page-header .header-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

body.design-beta .page-header .header-content > div:first-child,
body.design-beta .page-header .page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

body.design-beta .page-header-actions,
body.design-beta .dashboard-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page-title,
body.design-beta .page-header h1 {
    margin: 0;
    font-size: var(--beta-font-page-title);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--beta-text);
}

body.design-beta .offers-page-subtitle,
body.design-beta .crm-page-subtitle,
body.design-beta .reports-page-subtitle,
body.design-beta .time-tracking-page-subtitle,
body.design-beta .dashboard-page-subtitle,
body.design-beta .project-list-page-subtitle,
body.design-beta .costs-page-subtitle,
body.design-beta .billing-page-subtitle,
body.design-beta .newsletter-page-subtitle {
    margin-top: 4px;
    max-width: 64ch;
    font-size: var(--beta-font-sm);
    line-height: 1.38;
    color: var(--beta-text-muted);
}

body.design-beta .project-detail-context-bar,
body.design-beta .dashboard-context-bar,
body.design-beta .offers-context-bar,
body.design-beta .crm-context-bar,
body.design-beta .reports-context-bar,
body.design-beta .time-tracking-context-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

body.design-beta .project-detail-context-chip,
body.design-beta .project-detail-context-bar .project-model-pill,
body.design-beta .badge,
body.design-beta .tag,
body.design-beta .chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--beta-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #475467;
    font-size: var(--beta-font-meta);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.design-beta .project-detail-context-chip--strong {
    border-color: rgba(17, 32, 51, 0.12);
    background: rgba(17, 32, 51, 0.06);
    color: var(--beta-navy);
}

body.design-beta .project-detail-context-bar .project-model-pill {
    box-shadow: none;
    gap: 0;
}

body.design-beta .card {
    margin-bottom: 10px;
    border: 1px solid var(--beta-border);
    border-radius: var(--beta-radius-md);
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .card-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .card-title {
    font-size: var(--beta-font-xl);
    font-weight: 600;
    color: var(--beta-text);
    letter-spacing: -0.02em;
}

body.design-beta .card-body {
    padding: 14px;
}

@media (min-width: 1101px) {
    body.design-beta .main-header {
        padding-left: clamp(16px, 1.8vw, 28px);
        padding-right: clamp(16px, 1.8vw, 28px);
    }

    body.design-beta .header-left {
        flex: 1 1 auto;
    }

    body.design-beta .command-bar {
        min-width: min(680px, 58vw);
    }

    body.design-beta .header-company-cluster {
        max-width: 176px;
    }

    body.design-beta .page-container {
        padding-top: 12px;
    }
}

body.design-beta .card-footer {
    padding: 10px 14px 14px;
    background: transparent;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .card.compact .card-header,
body.design-beta .project-detail-tabs-shell .card-body,
body.design-beta .reports-workspace-tabs-shell .card-body,
body.design-beta .time-tracking-tabs-shell .card-body,
body.design-beta .crm-products-tabs-shell .card-body,
body.design-beta .costs-workspace-tabs-shell .card-body,
body.design-beta .billing-workspace-tabs-shell .card-body,
body.design-beta .newsletter-workspace-tabs-shell .card-body {
    padding: 8px 10px;
}

body.design-beta .project-detail-tabs-shell,
body.design-beta .reports-workspace-tabs-shell,
body.design-beta .time-tracking-tabs-shell,
body.design-beta .crm-products-tabs-shell,
body.design-beta .costs-workspace-tabs-shell,
body.design-beta .billing-workspace-tabs-shell,
body.design-beta .newsletter-workspace-tabs-shell,
body.design-beta .project-workspace-view-shell {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-bottom: 8px;
}

body.design-beta .project-detail-tabs-list,
body.design-beta .project-workspace-view-list,
body.design-beta .reports-tabs,
body.design-beta .time-tracking-tabs,
body.design-beta .crm-products-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .time-tracking-mode-switch {
    display: none;
}

body.design-beta .project-detail-tab-button,
body.design-beta .project-list-display-button,
body.design-beta .reports-tab-button,
body.design-beta .time-tracking-tab-button,
body.design-beta .crm-products-tab-button,
body.design-beta .project-workspace-view-button {
    min-height: 32px;
    padding: 0 10px;
    gap: 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #475467;
    font-size: var(--beta-font-sm);
    font-weight: 500;
}

body.design-beta .project-detail-tab-button:hover,
body.design-beta .project-list-display-button:hover,
body.design-beta .reports-tab-button:hover,
body.design-beta .time-tracking-tab-button:hover,
body.design-beta .crm-products-tab-button:hover,
body.design-beta .project-workspace-view-button:hover {
    background: var(--beta-surface-subtle);
}

body.design-beta .project-detail-tab-button.is-active,
body.design-beta .project-list-display-button.is-active,
body.design-beta .reports-tab-button.is-active,
body.design-beta .time-tracking-tab-button.is-active,
body.design-beta .crm-products-tab-button.is-active,
body.design-beta .project-workspace-view-button.is-active {
    background: rgba(17, 32, 51, 0.08);
    color: var(--beta-navy);
}

body.design-beta .evaluation-workspace {
    gap: 10px;
}

body.design-beta .evaluation-nav {
    gap: 6px;
    padding: 8px;
    border-color: var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .evaluation-nav-heading {
    font-size: var(--beta-font-meta);
    color: var(--beta-text-muted);
}

body.design-beta .evaluation-nav-list {
    gap: 3px;
}

body.design-beta .evaluation-nav-button {
    padding: 8px 10px;
    border-radius: 9px;
    color: #475467;
}

body.design-beta .evaluation-nav-button:hover {
    background: var(--beta-surface-subtle);
    border-color: transparent;
}

body.design-beta .evaluation-nav-button.is-active {
    background: rgba(17, 32, 51, 0.08);
    border-color: transparent;
    box-shadow: none;
    color: var(--beta-navy);
}

body.design-beta .evaluation-nav-button-label {
    font-size: var(--beta-font-sm);
    font-weight: 500;
    line-height: 1.2;
}

body.design-beta .evaluation-workspace .evaluation-section {
    border-color: var(--beta-border);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .evaluation-overview-visuals {
    gap: 10px;
}

body.design-beta .evaluation-overview-card {
    border-radius: 14px;
}

body.design-beta .evaluation-overview-callout {
    color: var(--beta-success);
}

body.design-beta .evaluation-overview-callout.is-negative,
body.design-beta .evaluation-overview-chip-value.is-negative {
    color: var(--beta-danger);
}

body.design-beta .evaluation-overview-chip {
    border-radius: 10px;
    background: var(--beta-surface-subtle);
}

body.design-beta .evaluation-overview-chip-label,
body.design-beta .evaluation-overview-donut-label,
body.design-beta .evaluation-overview-card-subtitle {
    font-size: var(--beta-font-meta);
    color: var(--beta-text-muted);
}

body.design-beta .evaluation-overview-chip-value,
body.design-beta .evaluation-overview-metric-value,
body.design-beta .evaluation-overview-donut-value {
    color: var(--beta-navy);
}

body.design-beta .evaluation-overview-bar-label,
body.design-beta .evaluation-overview-bar-value,
body.design-beta .evaluation-overview-metric-label,
body.design-beta .evaluation-overview-caption {
    color: var(--beta-text-muted);
}

body.design-beta .evaluation-overview-bar-track,
body.design-beta .evaluation-overview-donut-track {
    background: var(--beta-surface-subtle);
    stroke: var(--beta-surface-subtle);
}

body.design-beta .evaluation-overview-donut-center {
    box-shadow: inset 0 0 0 1px var(--beta-border);
}

body.design-beta .evaluation-overview-card--financial {
    background:
        linear-gradient(180deg, rgba(17, 32, 51, 0.03) 0%, rgba(255, 255, 255, 1) 42%),
        var(--beta-surface);
}

body.design-beta .evaluation-overview-card--collection {
    background:
        radial-gradient(circle at top center, rgba(0, 178, 204, 0.12), transparent 58%),
        var(--beta-surface);
}

body.design-beta .evaluation-overview-card--hours {
    background:
        radial-gradient(circle at top center, rgba(15, 139, 95, 0.12), transparent 58%),
        var(--beta-surface);
}

body.design-beta .page[data-page-id="projects"] .project-detail-page-header--beta {
    margin-bottom: 8px;
}

body.design-beta .page[data-page-id="projects"] .project-detail-breadcrumb {
    margin-bottom: 4px;
}

body.design-beta .page[data-page-id="projects"] .project-detail-tabs-shell {
    position: sticky;
    top: calc(var(--beta-header-height, 64px) + 8px);
    z-index: 4;
}

body.design-beta .page[data-page-id="projects"] .project-detail-tabs-mobile-switch {
    display: none;
}

body.design-beta .page[data-page-id="projects"] .project-detail-content--beta {
    display: grid;
    gap: 10px;
    min-width: 0;
}

body.design-beta .page[data-page-id="projects"] .project-detail-tab-panel--beta {
    display: grid;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

body.design-beta .page[data-page-id="projects"] .project-detail-tab-panel--beta > .card {
    margin-bottom: 0 !important;
    border-color: var(--beta-border);
    box-shadow: none;
}

body.design-beta .page[data-page-id="projects"] .project-tab-card-header {
    gap: 8px;
    align-items: flex-start;
}

body.design-beta .page[data-page-id="projects"] .project-tab-card-copy {
    display: grid;
    gap: 2px;
}

body.design-beta .page[data-page-id="projects"] .project-tab-card-description,
body.design-beta .page[data-page-id="projects"] .project-tab-card-meta {
    display: none;
}

body.design-beta .page[data-page-id="projects"] .project-tab-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="projects"] .project-overview-beta,
body.design-beta .page[data-page-id="projects"] .project-overview-beta-main,
body.design-beta .page[data-page-id="projects"] .project-overview-beta-side {
    display: grid;
    gap: 10px;
}

body.design-beta .page[data-page-id="projects"] .project-overview-beta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
    gap: 10px;
    align-items: start;
}

body.design-beta .page[data-page-id="projects"] .project-overview-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="projects"] .project-overview-summary-item {
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="projects"] .project-overview-summary-label {
    font-size: var(--beta-font-meta);
    font-weight: 600;
    color: var(--beta-text-muted);
    margin-bottom: 4px;
}

body.design-beta .page[data-page-id="projects"] .project-overview-summary-value {
    font-size: var(--beta-font-md);
    font-weight: 600;
    color: var(--beta-text);
    line-height: 1.3;
}

body.design-beta .page[data-page-id="projects"] .project-overview-section-card {
    margin-bottom: 0 !important;
}

body.design-beta .page[data-page-id="projects"] .project-overview-section-head {
    min-height: 0;
    padding: 10px 12px;
    gap: 8px;
    align-items: center;
}

body.design-beta .page[data-page-id="projects"] .project-overview-section-head .card-title {
    font-size: var(--beta-font-lg);
    letter-spacing: -0.01em;
}

body.design-beta .page[data-page-id="projects"] .project-overview-section-card > .card-body {
    padding: 12px;
}

body.design-beta .page[data-page-id="projects"] .project-overview-intro-card {
    display: none;
}

body.design-beta .page[data-page-id="projects"] #budgetPlanningAnalysis .text-gray {
    display: none;
}

@media (max-width: 1180px) {
    body.design-beta .page[data-page-id="projects"] .project-overview-beta-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body.design-beta .page[data-page-id="projects"] .project-overview-summary-strip {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.design-beta .project-workspace-view-icon,
body.design-beta .project-list-display-button .project-workspace-view-icon {
    width: 16px;
    height: 16px;
    line-height: 0;
}

body.design-beta .project-workspace-view-icon svg,
body.design-beta .project-list-display-button .project-workspace-view-icon svg {
    width: 16px;
    height: 16px;
}

body.design-beta .form-label {
    margin-bottom: 4px;
    font-size: var(--beta-font-sm);
    font-weight: 600;
    color: #475467;
}

body.design-beta .form-input,
body.design-beta .form-select,
body.design-beta .form-textarea {
    min-height: var(--beta-control-height);
    padding: 0 10px;
    border: 1px solid var(--beta-border-strong);
    border-radius: 9px;
    background: var(--beta-surface);
    color: var(--beta-text);
    font-size: var(--beta-font-md);
    box-shadow: none;
}

body.design-beta .form-control {
    min-height: var(--beta-control-height);
    padding: 0 10px;
    border: 1px solid var(--beta-border-strong);
    border-radius: 9px;
    background: var(--beta-surface);
    color: var(--beta-text);
    font-size: var(--beta-font-md);
    box-shadow: none;
}

body.design-beta .form-textarea {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.design-beta textarea.form-control {
    min-height: 96px;
    padding-top: 8px;
    padding-bottom: 8px;
}

body.design-beta .form-input:focus,
body.design-beta .form-select:focus,
body.design-beta .form-textarea:focus {
    border-color: rgba(0, 178, 204, 0.45);
    box-shadow: 0 0 0 4px rgba(0, 178, 204, 0.08);
}

body.design-beta .form-control:focus {
    border-color: rgba(0, 178, 204, 0.45);
    box-shadow: 0 0 0 4px rgba(0, 178, 204, 0.08);
}

body.design-beta .form-control[readonly],
body.design-beta .form-control:disabled {
    background: #f8fafc;
    color: #475467;
}

body.design-beta .table-container,
body.design-beta .table-responsive {
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
}

body.design-beta .table {
    margin-top: 0;
}

body.design-beta .table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 11px;
    background: #f8fafc;
    color: #475467;
    font-size: var(--beta-font-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.design-beta .table td {
    padding: 10px 11px;
    font-size: var(--beta-font-md);
    color: var(--beta-text);
}

body.design-beta .table tbody tr:hover {
    background: rgba(17, 32, 51, 0.03);
}

body.design-beta .tabulator {
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: none;
    overflow: hidden;
}

body.design-beta .tabulator .tabulator-header {
    border-bottom: 1px solid var(--beta-border);
    background: #f8fafc;
}

body.design-beta .tabulator .tabulator-header .tabulator-col {
    min-height: 40px;
    padding: 0 10px;
    border-right-color: rgba(229, 231, 235, 0.8);
    background: transparent;
    color: #475467;
    font-size: var(--beta-font-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.design-beta .tabulator .tabulator-row {
    min-height: var(--beta-table-row);
    border-bottom: 1px solid rgba(229, 231, 235, 0.85);
    background: var(--beta-surface);
}

body.design-beta .tabulator .tabulator-row:hover {
    background: rgba(17, 32, 51, 0.03);
}

body.design-beta .tabulator .tabulator-cell {
    padding: 10px 11px;
    font-size: 13px;
    color: var(--beta-text);
}

body.design-beta .tabulator .tabulator-footer {
    border-top: 1px solid var(--beta-border);
    background: var(--beta-surface);
}

body.design-beta .stats-grid,
body.design-beta .offers-metrics-grid,
body.design-beta .billing-metrics-grid,
body.design-beta .time-tracking-snapshot-grid,
body.design-beta .reports-stats-grid {
    gap: 8px;
    margin-bottom: 0;
}

body.design-beta .stat-card {
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .stat-card:hover {
    box-shadow: none;
    transform: none;
}

body.design-beta .stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 2px;
}

body.design-beta .stat-title,
body.design-beta .stat-label {
    color: #475467;
    font-size: var(--beta-font-meta);
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.design-beta .stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0;
}

body.design-beta .stat-icon svg {
    width: 16px;
    height: 16px;
}

body.design-beta .stat-value {
    font-size: var(--beta-font-kpi);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: left !important;
}

body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-value {
    font-size: var(--beta-font-kpi);
    line-height: 1.05;
}

body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-label {
    font-size: var(--beta-font-meta);
    line-height: 1.3;
}

body.design-beta .page[data-page-id="offers"] .offers-metrics-grid .stat-value,
body.design-beta .page[data-page-id="costs"] .stats-grid--costs .stat-value,
body.design-beta .page[data-page-id="invoices"] .billing-metrics-grid .stat-value,
body.design-beta .page[data-page-id="bills"] .billing-metrics-grid .stat-value,
body.design-beta .page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-value,
body.design-beta .page[data-page-id="reports"] .reports-stats-grid .stat-value,
body.design-beta .stats-grid--compact .stat-value,
body.design-beta .stats-grid--invoices .stat-value {
    font-size: var(--beta-font-kpi-compact);
    line-height: 1.05;
}

body.design-beta .stat-change {
    margin-top: 4px;
    font-size: var(--beta-font-meta);
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-workspace,
body.design-beta .page[data-page-id="costs"] .costs-workspace,
body.design-beta .page[data-page-id="offers"] .offers-workspace,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-workspace,
body.design-beta .page[data-page-id="reports"] .reports-tab-stack,
body.design-beta .page[data-page-id="projects"] .project-list-workspace {
    gap: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-layout-shell {
    display: none;
    position: sticky;
    top: 10px;
    z-index: 6;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="dashboard"].customize-mode .dashboard-layout-shell {
    display: block;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-layout-shell .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-layout-hint {
    margin: 0;
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header-actions .btn {
    min-height: 34px;
    border-radius: 10px;
    padding-inline: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-card-subtitle {
    display: none;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header {
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-page-heading {
    flex: 1 1 auto;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-refresh-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 10px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-refresh-btn svg {
    width: 16px;
    height: 16px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header-actions #resetLayoutBtn[hidden] {
    display: none !important;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-context-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-context-bar[hidden] {
    display: none;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-context-bar .project-detail-context-chip {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
    font-weight: 600;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-context-bar .project-detail-context-chip--strong {
    background: var(--beta-surface);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid {
    gap: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card,
body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .stats-grid {
    order: 20;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card {
    border: 1px solid var(--beta-border);
    border-radius: 18px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card .card-header {
    padding: 12px 14px 0;
    align-items: center;
    gap: 10px;
    border-bottom: 0;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card .card-actions,
body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card .filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card .card-actions .btn,
body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card .filter-controls .btn {
    min-height: 32px;
    border-radius: 8px;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="stats-grid"] {
    order: 1;
    grid-column: span 12;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="quick-time-entry"] {
    order: 2;
    grid-column: span 7;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="quick-actions"] {
    order: 3;
    grid-column: span 5;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="approval-inbox"] {
    order: 4;
    grid-column: span 6;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="missing-time-entries"] {
    order: 5;
    grid-column: span 6;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="research-institutional-funding"] {
    order: 6;
    grid-column: span 6;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="research-public-funded-compliance"] {
    order: 7;
    grid-column: span 6;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="my-work-plan"] {
    order: 8;
    grid-column: span 5;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="company-tasks-kanban"] {
    order: 9;
    grid-column: span 7;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="open-checklist-items"] {
    order: 10;
    grid-column: span 5;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="company-news"] {
    order: 11;
    grid-column: span 7;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="recent-projects"] {
    order: 12;
    grid-column: span 6;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="recent-activity"] {
    order: 13;
    grid-column: span 6;
}

body.design-beta .page[data-page-id="dashboard"] [data-widget-id="mini-calendar"] {
    order: 14;
    grid-column: span 5;
}

body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-card {
    min-height: 72px;
    padding: 12px 14px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--beta-surface-subtle);
    font-size: 0;
}

body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-content {
    gap: 2px;
}

body.design-beta .page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
    grid-template-columns: minmax(220px, 1.95fr) minmax(140px, 1fr) minmax(124px, 0.9fr) minmax(90px, 0.68fr);
    gap: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-secondary {
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1.15fr) auto;
    gap: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-project-search-wrap {
    position: relative;
    min-width: 0;
    width: 100%;
}

body.design-beta .page[data-page-id="dashboard"] #quickEntryIntervalFields {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flags {
    padding: 8px 10px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-submit {
    min-width: 132px;
}

body.design-beta .page[data-page-id="dashboard"] .widget-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
    padding-top: 0;
    border-top: 0;
}

body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric {
    padding: 8px 10px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric-label {
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric-value {
    font-size: var(--beta-font-md);
}

body.design-beta .page[data-page-id="dashboard"] .today-entries {
    gap: 6px;
}

body.design-beta .page[data-page-id="dashboard"] .today-entry-row {
    padding: 8px 10px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .today-entry-hours {
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="dashboard"] .today-entry-range,
body.design-beta .page[data-page-id="dashboard"] .today-entry-meta {
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="dashboard"] .today-entry-project {
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card {
    border-color: var(--beta-border);
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card::before {
    display: none;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card.dashboard-research-card .card-header {
    padding-top: 12px;
    border-bottom: 0;
    background: transparent;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-widget-summary {
    gap: 6px;
    margin-bottom: 2px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-summary-pill {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-summary-pill--strong {
    background: var(--beta-surface);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-compact-list,
body.design-beta .page[data-page-id="dashboard"] #openChecklistItemsList,
body.design-beta .page[data-page-id="dashboard"] #recentActivity,
body.design-beta .page[data-page-id="dashboard"] #companyNews {
    min-height: 0;
    max-height: 360px;
    overflow: auto;
    padding-right: 2px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-feed-row,
body.design-beta .page[data-page-id="dashboard"] #openChecklistItemsList .list-row,
body.design-beta .page[data-page-id="dashboard"] .activity-item,
body.design-beta .page[data-page-id="dashboard"] .news-item {
    padding: 10px 11px !important;
    border: 1px solid var(--beta-border) !important;
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-feed-title {
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-feed-meta,
body.design-beta .page[data-page-id="dashboard"] .dashboard-feed-meta--muted,
body.design-beta .page[data-page-id="dashboard"] .dashboard-empty-state-copy {
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-empty-state {
    padding: 10px 12px;
    border: 1px dashed var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-empty-state-title {
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-row-actions .btn {
    min-height: 30px;
    padding-inline: 9px;
    border-radius: 8px;
}

body.design-beta .page[data-page-id="dashboard"] .dashboard-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="dashboard"] .quick-action-card {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    flex: none;
}

body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .widget-handle,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .tile-handle,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .resize-controls,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .resize-edge,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .resize-edge-right,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .resize-edge-bottom,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .grid-ruler,
body.design-beta .page[data-page-id="dashboard"]:not(.customize-mode) .grid-guides {
    display: none !important;
}

body.design-beta .quick-action-card {
    border: 1px solid var(--beta-border);
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .quick-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--beta-surface-subtle);
    color: var(--beta-navy);
}

body.design-beta .quick-action-icon svg {
    width: 16px;
    height: 16px;
}

body.design-beta .page[data-page-id="dashboard"] .quick-action-label {
    font-size: var(--beta-font-sm);
    line-height: 1.3;
}

body.design-beta .page[data-page-id="dashboard"] #companyTasksKanban {
    gap: 10px !important;
}

body.design-beta .page[data-page-id="dashboard"] .kanban-column {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
    padding: 10px;
}

body.design-beta .page[data-page-id="dashboard"] .kanban-count {
    border-color: var(--beta-border);
    background: var(--beta-surface);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="dashboard"] .kanban-card {
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    padding: 10px 11px;
    box-shadow: none;
}

body.design-beta .page[data-page-id="dashboard"] .kanban-title {
    font-size: var(--beta-font-meta);
    color: var(--beta-text-muted);
}

@media (max-width: 1180px) {
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="quick-time-entry"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="quick-actions"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="approval-inbox"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="missing-time-entries"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="research-institutional-funding"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="research-public-funded-compliance"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="my-work-plan"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="company-tasks-kanban"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="open-checklist-items"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="company-news"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="recent-projects"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="recent-activity"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="mini-calendar"] {
        grid-column: span 6;
    }
}

@media (max-width: 860px) {
    body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header {
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="quick-time-entry"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="quick-actions"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="approval-inbox"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="missing-time-entries"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="research-institutional-funding"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="research-public-funded-compliance"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="my-work-plan"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="company-tasks-kanban"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="open-checklist-items"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="company-news"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="recent-projects"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="recent-activity"],
    body.design-beta .page[data-page-id="dashboard"] [data-widget-id="mini-calendar"] {
        grid-column: span 12;
    }

    body.design-beta .page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-field--project,
    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-secondary,
    body.design-beta .page[data-page-id="dashboard"] #quickEntryIntervalFields {
        grid-column: 1 / -1;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-secondary,
    body.design-beta .page[data-page-id="dashboard"] #quickEntryIntervalFields {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="dashboard"] .widget-metrics,
    body.design-beta .page[data-page-id="dashboard"] .dashboard-actions,
    body.design-beta .page[data-page-id="dashboard"] #companyTasksKanban {
        grid-template-columns: 1fr !important;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-top {
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-actions {
        width: 100%;
        margin-left: 0;
    }
}

body.design-beta .page[data-page-id="projects"] .project-workspace-view-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
}

body.design-beta .page[data-page-id="projects"] .project-list-filters-shell,
body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell,
body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card,
body.design-beta .page[data-page-id="budget"] .budget-toolbar-card,
body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-card,
body.design-beta .page[data-page-id="offers"] .offers-section-card:nth-of-type(2),
body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar,
body.design-beta .page[data-page-id="crm"] .crm-filters-card,
body.design-beta .page[data-page-id="crm"] .crm-toolbar-card,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell,
body.design-beta .page[data-page-id="reports"] .reports-controls {
    position: sticky;
    top: 10px;
    z-index: 5;
}

body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .form-input,
body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .form-select,
body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .form-input,
body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .form-select,
body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .form-input,
body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .form-select,
body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .form-input,
body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .form-select,
body.design-beta .page[data-page-id="crm"] .crm-filters-card .form-input,
body.design-beta .page[data-page-id="crm"] .crm-filters-card .form-select,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .form-input,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .form-select,
body.design-beta .page[data-page-id="reports"] .reports-controls .form-input,
body.design-beta .page[data-page-id="reports"] .reports-controls .form-select,
body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .form-input,
body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .form-select,
body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .form-input,
body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .form-select,
body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .form-input,
body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .form-select,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .form-input,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .form-select {
    min-height: var(--beta-control-height-compact);
    padding-inline: 9px;
}

body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .btn,
body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .btn,
body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .btn,
body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .btn,
body.design-beta .page[data-page-id="crm"] .crm-filters-card .btn,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .btn,
body.design-beta .page[data-page-id="reports"] .reports-controls .btn,
body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .btn,
body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .btn,
body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .btn,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .btn {
    min-height: 32px;
    border-radius: 8px;
}

body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .card-header,
body.design-beta .page[data-page-id="offers"] .offers-section-card .project-tab-card-description,
body.design-beta .page[data-page-id="crm"] .crm-filters-card .project-tab-card-description,
body.design-beta .page[data-page-id="reports"] .reports-controls .project-tab-card-description {
    display: none;
}

body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .card-body,
body.design-beta .page[data-page-id="offers"] .offers-section-card .card-body,
body.design-beta .page[data-page-id="crm"] .crm-filters-card .card-body,
body.design-beta .page[data-page-id="reports"] .reports-controls .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="projects"] .project-list-filters-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="projects"] .project-list-beta-views {
    flex: 1 1 auto;
}

body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="projects"] .project-list-filter--search,
body.design-beta .page[data-page-id="projects"] .project-list-filter--sort {
    grid-column: span 2;
}

body.design-beta .page[data-page-id="projects"] .project-list-results-shell .card-body {
    padding-top: 10px;
}

body.design-beta .page[data-page-id="projects"] .project-list-results-shell--beta .card-body {
    padding: 8px 0 0;
}

body.design-beta .page[data-page-id="offers"] .offers-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="offers"] .offers-section-card--metrics-beta .card-body,
body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

body.design-beta .page[data-page-id="offers"] .offers-filters-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="offers"] .offers-filter-span-2 {
    grid-column: span 2;
}

body.design-beta .page[data-page-id="offers"] .offers-section-card--register-beta .card-body {
    padding-top: 8px;
}

body.design-beta .project-list-results-actions,
body.design-beta .offers-results-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .offers-results-actions .form-select {
    width: auto;
    min-width: 152px;
    flex: 0 0 auto;
}

body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top .btn-primary {
    align-self: flex-start;
}

body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .card-body,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="invoices"] .billing-beta-toolbar-top,
body.design-beta .page[data-page-id="bills"] .billing-beta-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary {
    margin-left: auto;
}

body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary .form-select,
body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary .form-select {
    width: auto;
    min-width: 150px;
    flex: 0 0 auto;
}

body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--beta,
body.design-beta .page[data-page-id="bills"] .billing-filters-grid--beta {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--invoices {
    grid-template-columns: minmax(112px, 0.9fr) minmax(136px, 1fr) minmax(168px, 1.2fr) minmax(108px, 0.9fr) minmax(124px, 0.95fr) minmax(124px, 0.95fr) minmax(220px, 1.5fr);
}

body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--invoices .billing-filter-span-2 {
    grid-column: auto;
}

body.design-beta .page[data-page-id="bills"] .billing-filters-grid--bills {
    grid-template-columns: minmax(112px, 0.9fr) minmax(144px, 1.1fr) minmax(150px, 1fr) minmax(124px, 0.95fr) minmax(124px, 0.95fr) minmax(232px, 1.6fr);
}

body.design-beta .page[data-page-id="bills"] .billing-filters-grid--bills .billing-filter-span-2 {
    grid-column: auto;
}

body.design-beta .page[data-page-id="invoices"] .billing-results-card--beta .card-body,
body.design-beta .page[data-page-id="bills"] .billing-results-card--beta .card-body {
    padding: 6px 0 0;
}

body.design-beta .page[data-page-id="costs"] .costs-overview-card--beta .card-body,
body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .card-body {
    padding: 10px 14px;
}

body.design-beta .page[data-page-id="costs"] .costs-context-bar {
    display: none;
}

body.design-beta .page[data-page-id="costs"] .costs-workspace-tabs-shell .card-body {
    padding: 8px 12px;
}

body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.design-beta .page[data-page-id="costs"] .costs-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions--primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions--primary .form-select {
    width: auto;
    min-width: 168px;
    flex: 0 0 auto;
}

body.design-beta .page[data-page-id="costs"] .costs-filter-grid--beta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

body.design-beta .page[data-page-id="costs"] .costs-results-card--beta .card-body {
    padding: 8px 0 0;
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-card {
    margin-bottom: 12px;
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px;
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="budget"] .budget-scope-pills--beta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 520px;
}

body.design-beta .page[data-page-id="budget"] .budget-scope-pills--beta .budget-scope-pill {
    min-height: 0;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="budget"] .budget-scope-pills--beta .budget-scope-pill strong {
    font-size: 11px;
    letter-spacing: 0.08em;
}

body.design-beta .page[data-page-id="budget"] .budget-scope-pills--beta .budget-scope-pill span {
    font-size: 13px;
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-controls .form-select {
    width: auto;
    min-width: 164px;
    flex: 0 0 auto;
}

body.design-beta .page[data-page-id="budget"] .budget-filter-layout--beta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.design-beta .page[data-page-id="budget"] .budget-filter-grid--beta-compact {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.85fr 1.25fr;
    gap: 10px;
    align-items: end;
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-footer {
    padding-top: 10px;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="budget"] .budget-toolbar-footer--filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 0;
    border-top: 0;
}

body.design-beta .page[data-page-id="budget"] .budget-inline-actions--toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="budget"] .budget-inline-actions--primary {
    margin-left: auto;
}

body.design-beta .page[data-page-id="budget"] .budget-results-card--beta .card-body {
    padding: 8px 0 0;
}

body.design-beta .page[data-page-id="budget"] .budget-results-card--beta #budgetTableContainer {
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="budget"] .budget-page-tabs {
    background: rgba(148, 163, 184, 0.12);
    border-color: var(--beta-border);
}

body.design-beta .page[data-page-id="budget"] .budget-page-tab.is-active {
    background: var(--beta-ink);
}

body.design-beta .page[data-page-id="crm"] .crm-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="crm"] .crm-workspace.crm-workspace--beta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.design-beta .page[data-page-id="crm"] .crm-workspace.crm-workspace--beta > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.design-beta .page[data-page-id="crm"] .crm-filters-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="crm"] .crm-toolbar-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="crm"] .crm-form-grid {
    display: grid;
    gap: 10px 12px;
}

body.design-beta .page[data-page-id="crm"] .crm-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="crm"] .crm-form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="crm"] .crm-client-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="crm"] .crm-filter-chip-row--beta {
    flex: 1 1 420px;
}

body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="crm"] .crm-search-grid {
    gap: 10px;
}

body.design-beta .page[data-page-id="crm"] .crm-search-grid--beta {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(180px, 1fr) minmax(150px, 0.8fr);
    gap: 10px;
    align-items: end;
}

body.design-beta .page[data-page-id="crm"] .crm-toolbar-row {
    margin-top: 6px;
}

body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0;
}

body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta .crm-toolbar-actions {
    flex: 1 1 auto;
}

body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta .crm-selection-indicator {
    margin-left: auto;
}

body.design-beta .page[data-page-id="crm"] .crm-results-card--beta {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.design-beta .page[data-page-id="crm"] .crm-results-card--beta .card-body {
    padding: 8px 0 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

body.design-beta .page[data-page-id="crm"] .crm-results-card--beta .crm-table-frame {
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="crm"] #clientsTabulator,
body.design-beta .page[data-page-id="crm"] .crm-table-frame .tabulator {
    width: 100%;
    min-width: 0;
    max-width: none;
}

body.design-beta .page[data-page-id="crm"] .crm-results-card--beta .pagination-container {
    padding: 0 16px 16px;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] .stat-card {
    padding: 10px 11px;
    min-height: 0;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] .stat-title {
    font-size: 11px;
    line-height: 1.25;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] .stat-value {
    font-size: 20px;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-period {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--beta-border);
    border-radius: 999px;
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-section-card .card-header,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-tab-stack .card-header {
    padding-bottom: 12px;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-week-card .card-body,
body.design-beta .page[data-page-id="time-tracking"] .time-tracking-entries-card .card-body {
    padding-top: 12px;
}

body.design-beta .page[data-page-id="time-tracking"] .time-tracking-entries-card .card-header {
    gap: 8px;
}

body.design-beta .page[data-page-id="reports"] .reports-controls {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="reports"] .reports-workspace-tabs-shell .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="reports"] .reports-controls .card-body {
    gap: 10px;
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="reports"] .reports-controls--beta #reportsLookupStatus {
    display: none !important;
}

body.design-beta .page[data-page-id="reports"] .reports-controls-row--primary {
    gap: 8px;
}

body.design-beta .page[data-page-id="reports"] .reports-controls-row--filters {
    padding-top: 8px;
    gap: 10px;
}

body.design-beta .page[data-page-id="reports"] .reports-advanced-panel {
    margin-top: 4px;
    padding: 12px;
    border-radius: 14px;
    background: var(--beta-surface-subtle);
    box-shadow: inset 0 0 0 1px rgba(215, 221, 229, 0.9);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-body {
    padding: 12px;
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.05), transparent 34%),
        radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.05), transparent 28%),
        linear-gradient(180deg, rgba(250, 251, 252, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-layout {
    gap: 12px;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-grid {
    gap: 12px;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel {
    border: 1px solid rgba(213, 220, 229, 0.9);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.96) 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
    padding: 18px;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero {
    background:
        radial-gradient(circle at 92% 12%, rgba(16, 185, 129, 0.1), transparent 28%),
        radial-gradient(circle at 4% 100%, rgba(249, 115, 22, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 249, 251, 0.98) 100%);
    border-color: rgba(213, 220, 229, 0.95);
    color: var(--beta-text-strong);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--budget-runway {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.09), transparent 24%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.98) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-panel-kicker,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-panel-title,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-panel-copy {
    color: inherit;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #98a2b3;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel-title {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    color: var(--beta-text-strong);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel-copy {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-kpi,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-card {
    border-color: rgba(213, 220, 229, 0.92);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-kpi--positive {
    background: linear-gradient(180deg, rgba(240, 253, 248, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-kpi--negative {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-card--budget {
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-card--risk {
    background:
        radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 250, 245, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-card-title,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-kpi-label {
    color: #667085;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-kpi-value,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-card-value,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-quarter-label,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-payout-name,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-payout-value {
    color: var(--beta-text-strong);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-card-copy,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-kpi-meta,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-legend,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-meter-label,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-payout-head {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-progress {
    background: rgba(226, 232, 240, 0.88);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-segment.is-actual,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-actual,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-quarter-bar.is-actual {
    background: linear-gradient(180deg, #344054 0%, #1f2937 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-segment.is-remaining,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-remaining,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-quarter-bar.is-planned {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.7) 0%, rgba(37, 99, 235, 0.2) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-segment.is-positive,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-positive {
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-segment.is-neutral,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-neutral,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-projected {
    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-segment.is-negative,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-negative {
    background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-segment.is-muted,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-dot.is-muted {
    background: rgba(148, 163, 184, 0.62);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-marker {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-quarter-bars,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-overview-statline > span {
    border-color: rgba(213, 220, 229, 0.9);
    background: rgba(255, 255, 255, 0.82);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-payout-bar-fill {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.86) 0%, rgba(37, 99, 235, 0.96) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-signal {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-signal-label,
body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-signal-meta {
    color: rgba(226, 232, 240, 0.78);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-panel--hero .reports-dashboard-signal-value {
    color: #f8fafc;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-meter {
    background: rgba(226, 232, 240, 0.14);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-meter-fill.is-positive {
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-meter-fill.is-negative {
    background: linear-gradient(90deg, #fb7185 0%, #f97316 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-meter-fill.is-neutral {
    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-summary-chip,
body.design-beta .page[data-page-id="reports"] .reports-balance-lane {
    border-color: rgba(213, 220, 229, 0.9);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-summary-chip strong {
    font-size: 1rem;
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-legend {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-legend-dot.is-planned {
    background: rgba(37, 99, 235, 0.34);
}

body.design-beta .page[data-page-id="reports"] .reports-dashboard-legend-dot.is-actual {
    background: #0f172a;
}

body.design-beta .page[data-page-id="reports"] .reports-domain-runway-range,
body.design-beta .page[data-page-id="reports"] .reports-domain-legend-item,
body.design-beta .page[data-page-id="reports"] .reports-domain-period-card {
    border-color: rgba(213, 220, 229, 0.9);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.design-beta .page[data-page-id="reports"] .reports-domain-section-copy,
body.design-beta .page[data-page-id="reports"] .reports-domain-runway-copy,
body.design-beta .page[data-page-id="reports"] .reports-domain-runway-range span,
body.design-beta .page[data-page-id="reports"] .reports-domain-runway-range small,
body.design-beta .page[data-page-id="reports"] .reports-domain-legend-item,
body.design-beta .page[data-page-id="reports"] .reports-domain-view-title {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-domain-legend-label,
body.design-beta .page[data-page-id="reports"] .reports-domain-period-label,
body.design-beta .page[data-page-id="reports"] .reports-domain-runway-range strong,
body.design-beta .page[data-page-id="reports"] .reports-domain-period-top strong {
    color: var(--beta-text-strong);
}

body.design-beta .page[data-page-id="reports"] .reports-domain-stack {
    background: rgba(226, 232, 240, 0.88);
}

body.design-beta .page[data-page-id="reports"] .reports-domain-stack.is-empty {
    border-color: rgba(213, 220, 229, 0.9);
    background: rgba(248, 250, 252, 0.92);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-track {
    height: 230px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(226, 232, 240, 0.7) 100%),
        repeating-linear-gradient(
            to top,
            rgba(148, 163, 184, 0.1) 0,
            rgba(148, 163, 184, 0.1) 1px,
            transparent 1px,
            transparent 25%
        );
    border-color: rgba(213, 220, 229, 0.92);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-bar--planned {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.9) 0%, rgba(37, 99, 235, 0.28) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-bar--actual {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-values,
body.design-beta .page[data-page-id="reports"] .reports-balance-item-top,
body.design-beta .page[data-page-id="reports"] .reports-reimbursement-head {
    font-variant-numeric: tabular-nums;
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight {
    border-color: rgba(213, 220, 229, 0.9);
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-focus,
body.design-beta .page[data-page-id="reports"] .reports-budget-period-card {
    border-color: rgba(213, 220, 229, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-focus-toggle {
    border-color: rgba(213, 220, 229, 0.9);
    background: rgba(248, 250, 252, 0.92);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-focus-toggle-btn {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-focus-toggle-btn.is-active {
    background: linear-gradient(180deg, #344054 0%, #1f2937 100%);
    color: #fff;
}

body.design-beta .page[data-page-id="reports"] .reports-budget-focus-control-label,
body.design-beta .page[data-page-id="reports"] .reports-budget-period-row,
body.design-beta .page[data-page-id="reports"] .reports-budget-period-note {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-period-card-label,
body.design-beta .page[data-page-id="reports"] .reports-budget-period-row strong,
body.design-beta .page[data-page-id="reports"] .reports-budget-period-note strong {
    color: var(--beta-text-strong);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-period-bar.is-planned > span {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.95) 0%, rgba(37, 99, 235, 0.3) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-period-bar.is-actual > span {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-kicker,
body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-value span {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-track {
    background: rgba(37, 99, 235, 0.1);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-track-shell {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.32) 0%, rgba(37, 99, 235, 0.18) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-value {
    border-color: rgba(213, 220, 229, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-note {
    background: rgba(15, 23, 42, 0.05);
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-budget-spotlight-note.is-empty {
    background: rgba(249, 115, 22, 0.08);
    color: #b45309;
}

body.design-beta .page[data-page-id="reports"] .reports-time-overview-card {
    border-color: rgba(213, 220, 229, 0.92);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: var(--beta-shadow-3);
}

body.design-beta .page[data-page-id="reports"] .reports-time-chart-panel {
    border-color: rgba(213, 220, 229, 0.88);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.design-beta .page[data-page-id="reports"] .reports-time-chart-panel .card-subtitle {
    color: var(--beta-text-strong);
}

body.design-beta .page[data-page-id="reports"] .reports-time-trend-empty-kicker,
body.design-beta .page[data-page-id="reports"] .reports-time-trend-value span,
body.design-beta .page[data-page-id="reports"] .reports-time-trend-spotlight-kicker {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="reports"] .reports-time-trend-value {
    border-color: rgba(213, 220, 229, 0.88);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

body.design-beta .page[data-page-id="reports"] .reports-time-trend-track {
    background: rgba(37, 99, 235, 0.1);
}

body.design-beta .page[data-page-id="reports"] .reports-time-trend-track-billable {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.92) 0%, rgba(5, 150, 105, 0.94) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-time-trend-track-nonbillable {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.74) 0%, rgba(239, 68, 68, 0.62) 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-balance-bar,
body.design-beta .page[data-page-id="reports"] .reports-reimbursement-bar {
    background: rgba(148, 163, 184, 0.14);
}

body.design-beta .page[data-page-id="reports"] .reports-balance-bar-fill.is-positive {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, #10b981 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-balance-bar-fill.is-negative {
    background: linear-gradient(90deg, rgba(244, 114, 182, 0.16) 0%, #f97316 100%);
}

body.design-beta .page[data-page-id="reports"] .reports-reimbursement-bar-fill {
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
}

body.design-beta .search-results {
    top: calc(100% + 8px);
    border: 1px solid var(--beta-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--beta-shadow-3);
    max-height: min(72vh, 640px);
    padding: 8px;
}

body.design-beta .search-section {
    border-bottom: 0;
}

body.design-beta .search-title {
    padding: 8px 10px 6px;
    font-size: var(--beta-font-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #98a2b3;
}

body.design-beta .search-section-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.design-beta .search-item {
    width: 100%;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
}

body.design-beta .search-item:hover,
body.design-beta .search-item.active {
    background: #f2f4f7;
}

body.design-beta .search-item-icon {
    color: #667085;
}

body.design-beta .search-item-icon svg {
    width: 16px;
    height: 16px;
}

body.design-beta .search-item-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.design-beta .search-item-label {
    font-size: var(--beta-font-md);
    font-weight: 500;
    color: var(--beta-text);
}

body.design-beta .search-item-subtitle,
body.design-beta .search-item-meta,
body.design-beta .search-empty {
    font-size: var(--beta-font-sm);
    color: var(--beta-text-muted);
}

body.design-beta .search-item mark {
    padding: 0;
    background: transparent;
    color: var(--beta-navy);
    font-weight: 700;
}

body.design-beta .search-empty {
    padding: 12px;
}

body.design-beta .modal,
body.design-beta .modal-overlay {
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(6px);
    padding: 8px;
}

body.design-beta .modal-content {
    width: min(680px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 16px;
    box-shadow: var(--beta-shadow-3);
}

body.design-beta .modal-header {
    padding: 12px 14px 8px;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .modal-title {
    margin: 0;
    color: var(--beta-text);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

body.design-beta .modal-body {
    padding: 10px 14px 12px;
    max-height: calc(100vh - 108px);
    background: var(--beta-surface);
}

body.design-beta .modal-footer {
    padding: 8px 14px 10px;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 16px;
}

body.design-beta .modal-content .btn {
    min-height: 32px;
    height: 32px;
    font-size: var(--beta-font-sm);
}

body.design-beta .modal-content .form-input,
body.design-beta .modal-content .form-select {
    min-height: 32px;
    height: 32px;
    font-size: var(--beta-font-md);
}

body.design-beta .modal-content .form-textarea {
    min-height: 64px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--beta-font-md);
}

body.design-beta .modal-content .form-label {
    margin-bottom: 4px;
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
    font-weight: 600;
}

body.design-beta .modal-content .form-group {
    margin-bottom: 8px;
}

body.design-beta .modal-content .form-group:last-child {
    margin-bottom: 0;
}

body.design-beta .modal-content .form-hint,
body.design-beta .modal-content .muted,
body.design-beta .modal-content .text-muted,
body.design-beta .modal-content .text-gray,
body.design-beta .modal-content small {
    font-size: var(--beta-font-meta);
    line-height: 1.45;
    color: var(--beta-text-muted);
}

body.design-beta .modal-panel,
body.design-beta .modal-content .modal-panel > form,
body.design-beta .modal-content form {
    display: grid;
    gap: 8px;
}

body.design-beta .modal-content .form-section {
    margin-bottom: 0;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta .modal-content .form-section-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
}

body.design-beta .modal-content .form-section-header h6 {
    font-size: var(--beta-font-md);
}

body.design-beta .modal-content .card {
    margin: 0;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta .modal-content .card-header {
    min-height: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--beta-border);
    background: transparent;
}

body.design-beta .modal-content .card-body,
body.design-beta .modal-content .card-footer {
    padding: 8px 10px;
}

body.design-beta .modal-content .card-title {
    font-size: var(--beta-font-sm);
    letter-spacing: 0;
}

body.design-beta .modal-content .table thead th {
    padding: 8px 10px;
    font-size: var(--beta-font-meta);
}

body.design-beta .modal-content .table tbody td {
    padding: 8px 10px;
    font-size: var(--beta-font-md);
}

body.design-beta .modal-list {
    max-height: 34vh;
    padding: 8px;
    border-color: var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    gap: 8px;
}

body.design-beta .modal-content.modal-compact {
    width: min(640px, calc(100vw - 16px));
}

body.design-beta .modal-content.modal-lg {
    width: min(1040px, calc(100vw - 16px));
}

body.design-beta .modal-content.modal-lg .modal-body {
    max-height: calc(100vh - 104px);
}

body.design-beta .modal-content.modal-compact > .modal-body > .offer-form-card,
body.design-beta .modal-content.modal-compact > .modal-body > .modal-panel > .offer-form-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.design-beta .modal-content.modal-compact .validation-error:empty,
body.design-beta .modal-content.modal-compact .form-hint:empty {
    display: none;
}

body.design-beta .modal-content.modal-compact [style*="grid-template-columns"] {
    gap: 10px !important;
}

body.design-beta .modal-content.modal-compact [style*="margin-top: 1rem"],
body.design-beta .modal-content.modal-compact [style*="margin-top:1rem"] {
    margin-top: 8px !important;
}

body.design-beta .modal-content.modal-compact [style*="margin-top:16px"] {
    margin-top: 10px !important;
}

body.design-beta .modal-content.modal-compact .btn-sm {
    min-height: 30px;
    height: 30px;
}

body.design-beta #projectDetailModal,
body.design-beta #createProjectModal,
body.design-beta #projectInfoModal,
body.design-beta #teamModal,
body.design-beta #tasksModal,
body.design-beta #timeEntriesModal,
body.design-beta #costsModal,
body.design-beta #invoicesModal,
body.design-beta #plannerCardModal,
body.design-beta #plannerTrashModal,
body.design-beta #invoiceModal,
body.design-beta #einvoiceDetailsModal,
body.design-beta #billModal,
body.design-beta #reimbursement-modal,
body.design-beta #reimbursement-receipts-modal,
body.design-beta #viewOfferModal,
body.design-beta #createOfferModal,
body.design-beta #offerDocModal,
body.design-beta #clientDetailModal,
body.design-beta #timeEntryModal {
    justify-content: flex-end;
    padding: 10px 12px 10px 24px;
}

    body.design-beta .project-detail-modal,
    body.design-beta .project-create-modal,
    body.design-beta .project-info-modal,
    body.design-beta .project-team-modal,
    body.design-beta .project-tasks-modal,
    body.design-beta .project-time-modal,
    body.design-beta .project-costs-modal,
    body.design-beta .project-invoices-modal,
    body.design-beta .project-planner-card-modal,
    body.design-beta .project-planner-trash-modal,
    body.design-beta .invoice-modal,
    body.design-beta .einvoice-modal,
body.design-beta .bill-modal,
body.design-beta .reimbursement-modal,
body.design-beta .reimbursement-receipts-modal,
body.design-beta .offer-detail-modal,
body.design-beta .offer-create-modal,
body.design-beta .offer-doc-modal,
body.design-beta .crm-client-detail-modal,
body.design-beta .time-entry-modal {
    width: min(820px, calc(100vw - 20px)) !important;
    max-width: 820px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    margin-left: auto;
    border-radius: 20px 16px 16px 20px;
    transform: translateX(20px);
}

body.design-beta .modal.active .project-detail-modal,
body.design-beta .modal.active .project-create-modal,
body.design-beta .modal.active .project-info-modal,
body.design-beta .modal.active .project-team-modal,
body.design-beta .modal.active .project-tasks-modal,
body.design-beta .modal.active .project-time-modal,
body.design-beta .modal.active .project-costs-modal,
body.design-beta .modal.active .project-invoices-modal,
body.design-beta .modal.active .project-planner-card-modal,
body.design-beta .modal.active .project-planner-trash-modal,
body.design-beta .modal.active .invoice-modal,
body.design-beta .modal.active .einvoice-modal,
body.design-beta .modal.active .bill-modal,
body.design-beta .modal.active .reimbursement-modal,
body.design-beta .modal.active .reimbursement-receipts-modal,
body.design-beta .modal.active .offer-detail-modal,
body.design-beta .modal.active .offer-create-modal,
body.design-beta .modal.active .offer-doc-modal,
body.design-beta .modal.active .crm-client-detail-modal,
body.design-beta .modal.active .time-entry-modal {
    transform: translateX(0);
}

body.design-beta #assistantFab {
    display: none !important;
}

body.design-beta #bugReportFab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    width: 54px;
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(201, 110, 27, 0.2);
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    color: #9a3412;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
}

body.design-beta #bugReportFab:hover,
body.design-beta #bugReportFab:focus-visible {
    transform: none;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.16);
    background: linear-gradient(180deg, #fffaf4 0%, #fed7aa 100%);
}

body.design-beta #timeEntryModal #timeEntryForm,
body.design-beta #expenseModal #expenseForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta #timeEntryModal .form-group:has(input[type="hidden"][name="project_id"]),
body.design-beta #timeEntryModal .form-group:has(textarea),
body.design-beta #timeEntryModal .form-group:has(.time-entry-flags),
body.design-beta #expenseModal .form-group:has(textarea) {
    grid-column: 1 / -1;
}

body.design-beta #timeEntryModal #timeEntryIntervalFields {
    gap: 10px !important;
}

body.design-beta #timeEntryModal .time-entry-flags {
    gap: 10px;
}

body.design-beta .page[data-page-id="costs"] #costDetailModal .modal-body,
body.design-beta .page[data-page-id="costs"] #costModal .modal-body,
body.design-beta .page[data-page-id="costs"] #rejectCostModal .modal-body,
body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-body,
body.design-beta .page[data-page-id="invoices"] #einvoiceDetailsModal .einvoice-modal-body {
    background: transparent;
    gap: 10px;
}

body.design-beta .page[data-page-id="costs"] .cost-form-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.design-beta .page[data-page-id="costs"] #costForm {
    gap: 10px;
}

body.design-beta .page[data-page-id="costs"] .cost-form-grid {
    gap: 10px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal form {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.92fr);
    gap: 10px 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid,
body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-details,
body.design-beta .page[data-page-id="invoices"] #invoiceModal .line-items-container {
    gap: 8px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .form-section,
body.design-beta .page[data-page-id="invoices"] #einvoiceDetailsBody {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal {
    width: min(1120px, calc(100vw - 16px)) !important;
    max-width: 1120px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .modal-body {
    padding-top: 10px;
    max-height: calc(100vh - 132px);
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-details {
    grid-column: 1 / -1;
    border-radius: 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-items-section {
    grid-column: 1;
    align-self: start;
    border-radius: 14px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-sidebar {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-self: start;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-notes-section,
body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-card {
    margin: 0;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-card .card-header,
body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-card .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .line-item .row {
    gap: 6px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .line-items-container {
    max-height: min(34vh, 340px);
    overflow: auto;
    padding-right: 2px;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-upload {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(24vh, 220px);
    overflow: auto;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-list .list-item {
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-list .list-item:last-child {
    border-bottom: 0;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .totals-section {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .totals-row {
    padding: 4px 0;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .totals-row.total-row {
    margin-top: 6px;
    padding-top: 8px;
    font-size: var(--beta-font-lg);
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--secondary {
    align-items: start;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoiceStatusBadge,
body.design-beta .page[data-page-id="invoices"] #invoiceStatusBadge {
    margin-left: auto;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .modal-footer {
    padding-top: 10px;
}

body.design-beta #billModal .bill-modal {
    width: min(1120px, calc(100vw - 16px)) !important;
    max-width: 1120px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
}

body.design-beta #billModal .modal-body {
    padding-top: 10px;
    max-height: calc(100vh - 132px);
    background: transparent !important;
}

body.design-beta #billModal .bill-modal-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.95fr) !important;
    gap: 12px !important;
}

body.design-beta #billModal .bill-modal-grid {
    display: grid;
    gap: 10px;
}

body.design-beta #billModal .bill-modal-details {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta #billModal .bill-modal-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
}

body.design-beta #billModal .bill-line-items-section {
    grid-column: 1;
    align-self: start;
    margin: 0;
    border-radius: 14px;
}

body.design-beta #billModal .bill-modal-sidebar {
    grid-column: 2;
    grid-template-columns: 1fr;
    align-self: start;
}

body.design-beta #billModal .bill-notes-section,
body.design-beta #billModal .bill-receipts-card,
body.design-beta #billModal .bill-status-section {
    margin: 0;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta #billModal .bill-notes-section,
body.design-beta #billModal .bill-status-section,
body.design-beta #billModal .bill-receipts-card .card-header,
body.design-beta #billModal .bill-receipts-card .card-body {
    padding: 10px 12px;
}

body.design-beta #billModal .bill-line-items-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

body.design-beta #billModal .bill-totals-section {
    text-align: right;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta #billModal .line-items-container {
    max-height: min(34vh, 340px);
    overflow: auto;
    padding-right: 2px;
}

body.design-beta #billModal .bill-line-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 118px 92px auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

body.design-beta #billModal .bill-line-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-label,
body.design-beta #billModal .bill-line-item-label {
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-row {
    align-items: end;
}

body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.design-beta #billModal .bill-receipts-upload {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

body.design-beta #billModal .bill-receipts-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(24vh, 220px);
    overflow: auto;
}

body.design-beta #billModal .modal-footer {
    padding-top: 10px;
}

@media (max-width: 1180px) {
    body.design-beta .page[data-page-id="invoices"] #invoiceModal form {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-items-section,
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-sidebar {
        grid-column: auto;
    }

    body.design-beta #billModal .bill-modal-form {
        grid-template-columns: 1fr !important;
    }

    body.design-beta #billModal .bill-line-items-section,
    body.design-beta #billModal .bill-modal-sidebar {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta #billModal .bill-modal-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta #billModal .bill-line-item {
        grid-template-columns: minmax(0, 1fr) 88px 100px 84px auto;
    }
}

@media (max-width: 720px) {
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--compact {
        grid-template-columns: 1fr;
    }

    body.design-beta #billModal .bill-modal-grid--compact,
    body.design-beta #billModal .bill-modal-details,
    body.design-beta #billModal .bill-line-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.design-beta #invoiceModal,
    body.design-beta #billModal,
    body.design-beta #arCreateModal,
    body.design-beta #arEditModal,
    body.design-beta #mtTypesModal,
    body.design-beta #mtProtocolModal {
        justify-content: stretch;
        align-items: stretch;
        padding: 0;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal,
    body.design-beta #billModal .bill-modal,
    body.design-beta .project-ar-create-modal,
    body.design-beta .project-ar-edit-modal,
    body.design-beta .project-mt-types-modal,
    body.design-beta .project-mt-protocol-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .modal-header,
    body.design-beta #billModal .modal-header,
    body.design-beta #arCreateModal .modal-header,
    body.design-beta #arEditModal .modal-header,
    body.design-beta #mtTypesModal .modal-header,
    body.design-beta #mtProtocolModal .modal-header {
        padding-inline: 14px;
        gap: 8px;
        flex-wrap: wrap;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceStatusBadge,
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoiceStatusBadge {
        margin-left: 0;
        order: 3;
        width: 100%;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .modal-body,
    body.design-beta #billModal .modal-body,
    body.design-beta #arCreateModal .modal-body,
    body.design-beta #arEditModal .modal-body,
    body.design-beta #mtTypesModal .modal-body,
    body.design-beta #mtProtocolModal .modal-body {
        padding: 0 12px 12px;
        max-height: none;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .modal-footer,
    body.design-beta #billModal .modal-footer,
    body.design-beta #arCreateModal .modal-footer,
    body.design-beta #arEditModal .modal-footer,
    body.design-beta #mtTypesModal .modal-footer,
    body.design-beta #mtProtocolModal .modal-footer {
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
        gap: 8px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .modal-footer .btn,
    body.design-beta #billModal .modal-footer .btn,
    body.design-beta #arCreateModal .modal-footer .btn,
    body.design-beta #arEditModal .modal-footer .btn,
    body.design-beta #mtTypesModal .modal-footer .btn,
    body.design-beta #mtProtocolModal .modal-footer .btn {
        width: 100%;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal form,
    body.design-beta #billModal .bill-modal-form {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-details,
    body.design-beta #billModal .bill-modal-details {
        grid-template-columns: 1fr;
        padding: 10px;
        border-radius: 12px;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-grid--compact,
    body.design-beta #billModal .bill-modal-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-items-section,
    body.design-beta #billModal .bill-line-items-section,
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-modal-sidebar,
    body.design-beta #billModal .bill-modal-sidebar {
        grid-column: auto;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .line-items-container,
    body.design-beta #billModal .line-items-container,
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-receipts-list,
    body.design-beta #billModal .bill-receipts-list {
        max-height: none;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .line-item,
    body.design-beta #billModal .bill-line-item {
        padding: 10px;
        border: 1px solid var(--beta-border);
        border-radius: 12px;
        background: var(--beta-surface);
        margin-bottom: 8px;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: initial;
        padding: 0;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-field--description,
    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-field--actions,
    body.design-beta #billModal .bill-line-item-field--description,
    body.design-beta #billModal .bill-line-item-actions {
        grid-column: 1 / -1;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .invoice-line-item-actions,
    body.design-beta #billModal .bill-line-item-actions {
        justify-content: space-between;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .form-section-header,
    body.design-beta #billModal .form-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="invoices"] #invoiceModal .form-section-header .btn,
    body.design-beta #billModal .form-section-header .btn {
        width: 100%;
    }

    body.design-beta #arCreateForm,
    body.design-beta #arEditForm,
    body.design-beta #mtTypesModal .card > div[style*="grid-template-columns"],
    body.design-beta #mtProtocolModal #mtProtocolWizardSteps,
    body.design-beta #mtProtocolModal div[style*="grid-template-columns: 160px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    body.design-beta #mtProtocolModal #mtProtocolWizardSteps {
        gap: 8px !important;
    }

    body.design-beta #arCreateForm > div[style*="grid-column:1 / span 2;"],
    body.design-beta #arEditForm > div[style*="grid-column:1 / span 2;"] {
        grid-column: auto !important;
    }

    body.design-beta .page[data-page-id="projects"] #meetingsTab .project-tab-card-actions,
    body.design-beta .page[data-page-id="projects"] #phasesTab .project-tab-card-actions,
    body.design-beta .page[data-page-id="projects"] #milestonesTab .project-tab-card-actions {
        width: 100%;
    }

    body.design-beta .page[data-page-id="projects"] #meetingsTab .project-tab-card-actions .btn,
    body.design-beta .page[data-page-id="projects"] #meetingsTab .project-tab-card-actions .form-select,
    body.design-beta .page[data-page-id="projects"] #phasesTab .project-tab-card-actions .btn,
    body.design-beta .page[data-page-id="projects"] #milestonesTab .project-tab-card-actions .btn {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="projects"] #meetingsTab .table-container,
    body.design-beta .page[data-page-id="projects"] #phasesTab .table-container,
    body.design-beta .page[data-page-id="projects"] #milestonesTab .table-container,
    body.design-beta .page[data-page-id="projects"] #notesTab .table-container,
    body.design-beta .page[data-page-id="projects"] #rfisTab .table-container,
    body.design-beta .page[data-page-id="projects"] #budgetTab .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
}

body.design-beta #createProjectModal .project-create-modal {
    width: min(980px, calc(100vw - 20px)) !important;
    max-width: 980px !important;
}

body.design-beta #projectInfoModal {
    justify-content: flex-end;
    align-items: stretch;
    padding: 10px 12px 10px 24px;
}

body.design-beta #projectInfoModal .project-info-modal {
    width: min(1080px, calc(100vw - 16px)) !important;
    max-width: 1080px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
}

body.design-beta #projectInfoModal .modal-body {
    background: transparent !important;
    padding-top: 10px;
}

body.design-beta #projectInfoModal .project-info-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.design-beta #projectInfoModal #projectEditForm {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
}

body.design-beta #projectInfoModal #projectEditForm > div,
body.design-beta #projectInfoModal #projectEditForm > .form-group {
    min-width: 0;
    margin-bottom: 0 !important;
}

body.design-beta #projectInfoModal #projectEditForm > :nth-child(1),
body.design-beta #projectInfoModal #projectEditForm > :nth-child(2),
body.design-beta #projectInfoModal #projectEditForm > :nth-child(5),
body.design-beta #projectInfoModal #projectEditForm > :nth-child(8) {
    grid-column: 1 / -1;
}

body.design-beta #projectInfoModal #projectEditForm > :nth-child(4) {
    grid-column: span 2;
}

body.design-beta #projectInfoModal #projectEditForm > div[style*="grid-template-columns"] {
    display: contents;
}

body.design-beta #projectInfoModal #projectEditForm textarea[name="description"] {
    min-height: 76px;
}

body.design-beta #projectInfoModal #projectEditForm .form-label {
    margin-bottom: 3px;
}

body.design-beta #projectInfoModal #projectEditForm .form-hint,
body.design-beta #projectInfoModal #projectEditForm small.text-gray {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}

body.design-beta #projectInfoModal #projectEditForm [data-i18n="phrases.Prefilled from company settings."],
body.design-beta #projectInfoModal #projectEditForm [data-i18n="projects.defaultBillableHint"],
body.design-beta #projectInfoModal #projectEditForm small.text-gray {
    display: none;
}

body.design-beta #projectInfoModal .modal-footer .btn {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

body.design-beta #projectInfoModal .btn-primary {
    background: #112033;
    color: #fff;
}

body.design-beta #projectInfoModal .btn-primary:hover {
    background: #1d2c43;
}

body.design-beta #plannerCardModal,
body.design-beta #plannerTrashModal {
    justify-content: flex-end;
    align-items: stretch;
    padding: 10px 12px 10px 24px;
}

body.design-beta #plannerCardModal .project-planner-card-modal {
    width: min(1180px, calc(100vw - 16px)) !important;
    max-width: 1180px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
    overflow: hidden !important;
}

body.design-beta #plannerCardModal .modal-body,
body.design-beta #plannerTrashModal .modal-body {
    background: transparent;
    padding-top: 10px;
}

body.design-beta #plannerCardModal .project-planner-card-panel,
body.design-beta #plannerTrashModal .project-planner-trash-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.design-beta #plannerCardModal .planner-modal-grid {
    grid-template-columns: minmax(0, 1.68fr) minmax(320px, 0.96fr) !important;
    gap: 12px;
    align-items: start;
}

body.design-beta #plannerCardModal .planner-modal-col {
    gap: 8px;
}

body.design-beta #plannerCardModal .planner-modal-col > .card,
body.design-beta #plannerCardModal .planner-modal-full {
    margin: 0 !important;
    border-radius: 14px;
    background: var(--beta-surface);
}

body.design-beta #plannerCardModal .planner-modal-full {
    margin-top: 8px !important;
}

body.design-beta #plannerCardModal .planner-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

body.design-beta #plannerCardModal .planner-modal-col:first-child > .card:nth-child(2) .planner-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.design-beta #plannerCardModal .planner-form-grid .form-group {
    margin-bottom: 0;
}

body.design-beta #plannerCardModal .planner-chip-select {
    min-height: 34px;
    padding: 4px 6px;
    gap: 4px;
    border-radius: 10px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta #plannerCardModal .planner-chip-list {
    gap: 4px;
}

body.design-beta #plannerCardModal .planner-chip-select .chip {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta #plannerCardModal .planner-chip-input {
    min-width: 120px;
    padding: 4px 2px;
    font-size: 13px;
    line-height: 1.35;
}

body.design-beta #plannerCardModal .planner-chip-suggestions {
    border-radius: 12px;
    box-shadow: var(--beta-shadow-3);
}

body.design-beta #plannerCardModal .planner-chip-suggestion {
    padding: 8px 10px;
}

body.design-beta #plannerCardModal .planner-chip-empty,
body.design-beta #plannerCardModal .planner-chip-suggestion .muted {
    font-size: 11px;
}

body.design-beta #plannerCardModal .form-hint {
    display: none;
}

body.design-beta #plannerCardModal #plannerDescription {
    min-height: 76px;
}

body.design-beta #plannerCardModal .planner-attachments-list,
body.design-beta #plannerCardModal #plannerCommentsList,
body.design-beta #plannerTrashList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
    padding-right: 2px;
}

body.design-beta #plannerCardModal .planner-attachment-row,
body.design-beta #plannerTrashModal .planner-trash-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta #plannerCardModal .planner-attachment-preview {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--beta-text-muted);
    font-size: 14px;
}

body.design-beta #plannerCardModal .planner-attachment-preview img {
    width: 72px !important;
    height: 52px !important;
}

body.design-beta #plannerCardModal .planner-attachment-meta,
body.design-beta #plannerTrashModal .planner-trash-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.design-beta #plannerCardModal .planner-attachment-name,
body.design-beta #plannerTrashModal .planner-trash-meta strong {
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.design-beta #plannerCardModal .planner-attachment-type,
body.design-beta #plannerTrashModal .planner-trash-meta span {
    font-size: 11px;
    color: var(--beta-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.design-beta #plannerCardModal .planner-attachment-actions,
body.design-beta #plannerTrashModal .planner-trash-actions,
body.design-beta #plannerCardModal .planner-comment-compose {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.design-beta #plannerCardModal .planner-comment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta #plannerCardModal .planner-comment-row:last-child {
    border-bottom: 0;
}

body.design-beta #plannerCardModal .planner-comment-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

body.design-beta #plannerCardModal .planner-comment-meta {
    font-size: 11px;
    color: var(--beta-text-muted);
}

body.design-beta #plannerCardModal .planner-comment-compose {
    margin-top: 8px;
}

body.design-beta #plannerCardModal .planner-comment-compose .form-input {
    min-width: 0;
    flex: 1;
}

body.design-beta #plannerCardModal #plannerCardGantt {
    max-height: 220px;
    overflow: auto;
}

body.design-beta #plannerCardModal .modal-footer .btn,
body.design-beta #plannerTrashModal .modal-footer .btn,
body.design-beta #plannerCardModal .planner-attachment-actions .btn,
body.design-beta #plannerTrashModal .planner-trash-actions .btn,
body.design-beta #plannerCardModal .planner-comment-row .btn {
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

body.design-beta #plannerTrashModal .project-planner-trash-modal {
    width: min(760px, calc(100vw - 16px)) !important;
    max-width: 760px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
}

body.design-beta #plannerTrashModal #plannerTrashList {
    max-height: min(46vh, 420px);
}

@media (max-width: 1100px) {
    body.design-beta #projectInfoModal #projectEditForm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta #plannerCardModal .planner-modal-grid {
        grid-template-columns: 1fr !important;
    }

    body.design-beta #plannerCardModal .planner-modal-col:first-child > .card:nth-child(2) .planner-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body.design-beta #projectInfoModal #projectEditForm {
        grid-template-columns: 1fr;
    }

    body.design-beta #projectInfoModal #projectEditForm > :nth-child(4) {
        grid-column: auto;
    }

    body.design-beta #plannerCardModal .planner-form-grid,
    body.design-beta #plannerCardModal .planner-modal-col:first-child > .card:nth-child(2) .planner-form-grid {
        grid-template-columns: 1fr !important;
    }

    body.design-beta #plannerCardModal .planner-attachment-row,
    body.design-beta #plannerTrashModal .planner-trash-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.design-beta #plannerCardModal .planner-attachment-actions,
    body.design-beta #plannerTrashModal .planner-trash-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

body.design-beta #createProjectModal .modal-body {
    background: transparent;
}

body.design-beta #createProjectModal .project-create-panel,
body.design-beta #createProjectModal #createProjectForm {
    gap: 10px;
}

body.design-beta #createProjectModal #createProjectForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}

body.design-beta #createProjectModal #createProjectForm > .form-group,
body.design-beta #createProjectModal #createProjectForm > .card,
body.design-beta #createProjectModal #createProjectForm > div {
    min-width: 0;
}

body.design-beta #createProjectModal #createProjectForm > .form-group:has(#projectClientAutocomplete),
body.design-beta #createProjectModal #createProjectForm > .form-group:has(textarea[name="title"]),
body.design-beta #createProjectModal #createProjectForm > .form-group:has(textarea[name="description"]),
body.design-beta #createProjectModal #createProjectForm > .card,
body.design-beta #createProjectModal #createProjectForm > #createProjectProfitDistributionEditor,
body.design-beta #createProjectModal #createProjectForm > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-column: 1 / -1;
}

body.design-beta #createProjectModal #createProjectForm > div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 10px !important;
}

body.design-beta #createProjectModal textarea[name="title"],
body.design-beta #createProjectModal textarea[name="description"] {
    min-height: 64px;
}

body.design-beta #createProjectModal .project-create-modal .card {
    border-radius: 12px;
}

body.design-beta #createProjectModal .project-create-modal .card-header {
    padding: 10px 12px 8px;
    gap: 8px;
}

body.design-beta #createProjectModal .project-create-modal .card-body {
    padding: 8px 10px 10px;
}

body.design-beta #createProjectModal [data-role="phase-hint"] {
    display: none;
}

body.design-beta .page[data-page-id="reimbursements"] #reimbursement-modal #reimbursementForm,
body.design-beta .page[data-page-id="reimbursements"] #reimbursementExportModal .reimbursement-export-panel,
body.design-beta .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .reimbursement-receipts-panel {
    gap: 10px;
}

body.design-beta #teamModal .project-team-modal {
    width: min(980px, calc(100vw - 16px)) !important;
    max-width: 980px !important;
}

body.design-beta #tasksModal .project-tasks-modal {
    width: min(1100px, calc(100vw - 16px)) !important;
    max-width: 1100px !important;
}

body.design-beta #timeEntriesModal .project-time-modal,
body.design-beta #costsModal .project-costs-modal,
body.design-beta #invoicesModal .project-invoices-modal {
    width: min(1000px, calc(100vw - 16px)) !important;
    max-width: 1000px !important;
}

body.design-beta #einvoiceDetailsModal .einvoice-modal {
    width: min(900px, calc(100vw - 16px)) !important;
    max-width: 900px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
}

body.design-beta #createOfferModal .offer-create-modal {
    width: min(1120px, calc(100vw - 16px)) !important;
    max-width: 1120px !important;
}

body.design-beta #offerDocModal .offer-doc-modal {
    width: min(1120px, calc(100vw - 16px)) !important;
    max-width: 1120px !important;
}

body.design-beta #teamModal .modal-body,
body.design-beta #tasksModal .modal-body,
body.design-beta #timeEntriesModal .modal-body,
body.design-beta #costsModal .modal-body,
body.design-beta #invoicesModal .modal-body,
body.design-beta #einvoiceDetailsModal .modal-body,
body.design-beta #createOfferModal .modal-body,
body.design-beta #followUpModal .modal-body,
body.design-beta #createClientInlineModal .modal-body,
body.design-beta #offerClientViewModal .modal-body,
body.design-beta #offerDocModal .modal-body,
body.design-beta #viewOfferModal .modal-body {
    background: transparent;
}

body.design-beta #teamModal .modal-body,
body.design-beta #tasksModal .modal-body,
body.design-beta #timeEntriesModal .modal-body,
body.design-beta #costsModal .modal-body,
body.design-beta #invoicesModal .modal-body,
body.design-beta #einvoiceDetailsModal .modal-body {
    padding-top: 10px;
}

body.design-beta #createOfferModal .offer-create-card,
body.design-beta #followUpModal .offer-form-card,
body.design-beta #createClientInlineModal .offer-form-card,
body.design-beta #offerClientViewModal .offer-form-card,
body.design-beta #offerDocModal .offer-form-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.design-beta #createOfferModal #createOfferForm {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
}

body.design-beta #createOfferModal #createOfferForm > .form-group,
body.design-beta #createOfferModal #createOfferForm > .card,
body.design-beta #createOfferModal #createOfferForm > div {
    min-width: 0;
}

body.design-beta #createOfferModal #createOfferForm > :nth-child(1),
body.design-beta #createOfferModal #createOfferForm > :nth-child(2),
body.design-beta #createOfferModal #createOfferForm > :nth-child(3),
body.design-beta #createOfferModal #createOfferForm > :nth-child(7),
body.design-beta #createOfferModal #createOfferForm > :nth-child(13),
body.design-beta #createOfferModal #createOfferForm > :nth-child(14),
body.design-beta #createOfferModal #createOfferForm > :nth-child(15),
body.design-beta #createOfferModal #createOfferForm > :nth-child(16),
body.design-beta #createOfferModal #createOfferForm > :nth-child(17),
body.design-beta #createOfferModal #createOfferForm > :nth-child(19) {
    grid-column: span 2;
}

body.design-beta #createOfferModal #createOfferForm > #phasesSection,
body.design-beta #createOfferModal #createOfferForm > #hoursSection {
    grid-column: 1 / -1;
}

body.design-beta #createOfferModal #createOfferForm textarea {
    min-height: 56px;
}

body.design-beta #createOfferModal #createOfferForm > :nth-child(7) textarea,
body.design-beta #createOfferModal #createOfferForm > :nth-child(17) textarea {
    min-height: 72px;
}

body.design-beta #createOfferModal #createOfferForm .form-label {
    margin-bottom: 3px;
}

body.design-beta #createOfferModal #createOfferForm .form-hint {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}

body.design-beta #createOfferModal #createOfferForm .checkbox {
    min-height: 32px;
    font-size: 12px;
}

body.design-beta #createOfferModal #createOfferForm .checkbox span + .form-hint,
body.design-beta #createOfferModal #createOfferForm #phasesSection > .form-hint,
body.design-beta #createOfferModal #createOfferForm [data-i18n="offersPage.attachmentsHint"] {
    display: none;
}

body.design-beta #createOfferModal #createOfferForm #offerAdditionalCostsSection > div[style*="grid-template-columns"],
body.design-beta #createOfferModal #createOfferForm #hoursSection > div[style*="grid-template-columns"],
body.design-beta #createOfferModal #createOfferForm > :nth-child(1) > div[style*="grid-template-columns"],
body.design-beta #createOfferModal #createOfferForm > :nth-child(13),
body.design-beta #createOfferModal #createOfferForm > :nth-child(14) {
    gap: 8px !important;
}

body.design-beta #createOfferModal #createOfferForm #offerPaymentTermsCustomWrap {
    margin-top: 6px !important;
}

body.design-beta #createOfferModal #createOfferForm #offerTotalsCard {
    align-self: start;
}

body.design-beta #createOfferModal #createOfferForm #phasesList {
    padding: 6px !important;
}

body.design-beta #createOfferModal #offerTotalsCard .card-body {
    padding: 8px 10px;
    gap: 6px !important;
}

body.design-beta #createOfferModal #offerTotalsCard [style*="font-size:1.1rem"] {
    font-size: var(--beta-font-lg) !important;
}

body.design-beta #offerDocModal .modal-header {
    padding-bottom: 10px;
}

body.design-beta #offerDocModal .modal-body {
    padding-top: 10px;
}

body.design-beta #offerDocModal .offer-doc-panel,
body.design-beta #offerDocModal .offer-doc-grid > div {
    min-width: 0;
}

body.design-beta #viewOfferModal {
    justify-content: flex-end;
    align-items: stretch;
    padding: 10px 12px 10px 24px;
}

body.design-beta #viewOfferModal .offer-detail-modal {
    width: min(1120px, calc(100vw - 16px)) !important;
    max-width: 1120px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    margin-left: auto;
    border-radius: 20px 16px 16px 20px;
    transform: translateX(20px);
}

body.design-beta .modal.active #viewOfferModal .offer-detail-modal,
body.design-beta #viewOfferModal.active .offer-detail-modal {
    transform: translateX(0);
}

body.design-beta #viewOfferModal .modal-header {
    padding-bottom: 10px;
}

body.design-beta #viewOfferModal .modal-body {
    padding-top: 10px;
}

body.design-beta #viewOfferModal #offerDetails {
    gap: 10px;
}

body.design-beta #viewOfferModal .offer-detail-card {
    min-width: 0;
}

body.design-beta #viewOfferModal .offer-detail-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(300px, 0.92fr);
    gap: 12px;
    align-items: start;
}

body.design-beta #viewOfferModal .offer-detail-main,
body.design-beta #viewOfferModal .offer-detail-sidebar,
body.design-beta #viewOfferModal #offerFinancial {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

body.design-beta #viewOfferModal #offerFollowUps {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.design-beta #viewOfferModal .offer-detail-summary,
body.design-beta #viewOfferModal .offer-detail-section,
body.design-beta #viewOfferModal .offer-followups-card {
    margin: 0;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta #viewOfferModal .offer-detail-summary {
    padding: 12px 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta #viewOfferModal .offer-detail-summary-main {
    align-items: flex-start;
    gap: 12px;
}

body.design-beta #viewOfferModal .offer-detail-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.design-beta #viewOfferModal .offer-detail-number {
    font-size: 11px;
    letter-spacing: 0.1em;
}

body.design-beta #viewOfferModal .offer-detail-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--beta-text-strong);
}

body.design-beta #viewOfferModal .offer-detail-summary-secondary {
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta #viewOfferModal .offer-detail-summary-amount {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

body.design-beta #viewOfferModal .offer-detail-summary-amount label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--beta-text-muted);
}

body.design-beta #viewOfferModal .offer-detail-amount {
    font-size: 24px;
    line-height: 1.1;
    color: var(--beta-text-strong);
}

body.design-beta #viewOfferModal .offer-detail-badges {
    margin-top: 8px;
    gap: 6px;
}

body.design-beta #viewOfferModal .offer-detail-summary-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    margin-top: 12px;
}

body.design-beta #viewOfferModal .offer-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.design-beta #viewOfferModal .offer-detail-summary-meta label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--beta-text-muted);
}

body.design-beta #viewOfferModal .offer-detail-summary-meta span {
    font-size: 13px;
    line-height: 1.35;
    color: var(--beta-text-strong);
}

body.design-beta #viewOfferModal .offer-detail-section-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta #viewOfferModal .offer-detail-section {
    padding: 12px 14px;
}

body.design-beta #viewOfferModal .offer-detail-section h4 {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.design-beta #viewOfferModal .offer-detail-grid {
    gap: 10px 12px;
}

body.design-beta #viewOfferModal .offer-detail-item {
    gap: 3px;
}

body.design-beta #viewOfferModal .offer-detail-item label {
    font-size: 11px;
    letter-spacing: 0.05em;
}

body.design-beta #viewOfferModal .offer-detail-item span,
body.design-beta #viewOfferModal .offer-detail-description {
    font-size: 13px;
    line-height: 1.45;
}

body.design-beta #viewOfferModal .offer-detail-total {
    font-size: 15px;
    color: var(--beta-text-strong);
}

body.design-beta #viewOfferModal .table-container {
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    overflow: hidden;
}

body.design-beta #viewOfferModal .table th,
body.design-beta #viewOfferModal .table td {
    padding: 8px 10px;
    font-size: 12px;
}

body.design-beta #viewOfferModal .offer-followups-card .card-header,
body.design-beta #viewOfferModal .offer-followups-card .card-body {
    padding: 12px 14px;
}

body.design-beta #viewOfferModal .offer-followups-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta #viewOfferModal .offer-followups-header .card-title {
    font-size: 13px;
    font-weight: 600;
}

body.design-beta #viewOfferModal .offer-followups-body {
    gap: 8px;
}

body.design-beta #viewOfferModal .offer-followup-row {
    padding: 10px 12px;
    border-radius: 12px;
    gap: 10px;
    background: var(--beta-surface-subtle);
    border-color: var(--beta-border);
}

body.design-beta #viewOfferModal .offer-followup-note {
    font-size: 13px;
    font-weight: 600;
}

body.design-beta #viewOfferModal .offer-followup-meta {
    font-size: 12px;
    line-height: 1.4;
}

body.design-beta #viewOfferModal .offer-followup-actions {
    gap: 6px;
}

body.design-beta #viewOfferModal .offer-followup-actions .btn,
body.design-beta #viewOfferModal .offer-followups-header .btn,
body.design-beta #offerActions .btn {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

body.design-beta #viewOfferModal .modal-footer {
    padding-top: 10px;
}

body.design-beta #offerActions {
    justify-content: flex-end;
    gap: 8px;
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-panel,
body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-grid > div > .card {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-intro-card {
    background:
        radial-gradient(circle at top right, rgba(10, 184, 166, 0.1), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,252,0.98));
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-context-kicker {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--beta-text-muted);
    font-weight: 700;
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-context-line {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--beta-text-strong);
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions {
    width: 100%;
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions-status {
    flex: 1 1 360px;
}

body.design-beta #viewOfferModal.offer-detail-modal--doc-mode #offerDocStorageNote,
body.design-beta #viewOfferModal.offer-detail-modal--doc-mode #offerDocTeamsStatus {
    line-height: 1.45;
    color: var(--beta-text-muted) !important;
}

@media (max-width: 1100px) {
    body.design-beta #viewOfferModal .offer-detail-modal-body,
    body.design-beta #viewOfferModal .offer-detail-section-group,
    body.design-beta #viewOfferModal .offer-detail-summary-meta {
        grid-template-columns: 1fr;
    }

    body.design-beta #viewOfferModal #offerFollowUps {
        position: static;
    }

    body.design-beta #viewOfferModal.offer-detail-modal--doc-mode .offer-doc-actions-status {
        min-width: 100%;
    }
}

body.design-beta #timeEntryModal {
    justify-content: center;
    align-items: center;
    padding: 8px;
}

body.design-beta #timeEntryModal .time-entry-modal {
    width: min(760px, calc(100vw - 16px)) !important;
    max-width: 760px !important;
    height: auto;
    max-height: calc(100vh - 16px) !important;
    margin: 0;
    border-radius: 16px;
    transform: translateY(14px);
}

body.design-beta .modal.active #timeEntryModal .time-entry-modal,
body.design-beta #timeEntryModal.active .time-entry-modal {
    transform: translateY(0);
}

body.design-beta #timeEntryModal .modal-body {
    max-height: calc(100vh - 148px);
}

body.design-beta #reimbursement-modal .modal-body,
body.design-beta #reimbursementExportModal .modal-body,
body.design-beta #reimbursement-receipts-modal .modal-body,
body.design-beta #vehicle-modal .modal-body,
body.design-beta #receipt-cropper-modal .modal-body {
    background: transparent;
}

body.design-beta #reimbursement-modal .reimbursement-modal,
body.design-beta #reimbursement-receipts-modal .reimbursement-receipts-modal {
    width: min(1120px, calc(100vw - 16px)) !important;
    max-width: 1120px !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px 16px 16px 20px;
}

body.design-beta #reimbursement-modal .modal-body,
body.design-beta #reimbursement-receipts-modal .modal-body {
    padding-top: 10px;
}

body.design-beta #reimbursement-modal #reimbursementForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}

body.design-beta #reimbursement-modal #reimbursementForm > .form-group,
body.design-beta #reimbursement-modal #reimbursementForm > .card {
    min-width: 0;
}

body.design-beta #reimbursement-modal #reimbursementForm > .form-group:has(#reimbProjectPickerWrap),
body.design-beta #reimbursement-modal #reimbursementForm > .form-group:has(#reimbAmountBlock),
body.design-beta #reimbursement-modal #reimbursementForm > .form-group:has(textarea),
body.design-beta #reimbursement-modal #reimbursementForm > .form-group:has(input[type="file"]),
body.design-beta #reimbursement-modal #reimbursementForm > #mileageCard,
body.design-beta #reimbursement-modal #reimbursementForm > #reimbAiSuggestions {
    grid-column: 1 / -1;
}

body.design-beta #reimbursement-modal .reimbursement-form-panel,
body.design-beta #reimbursementExportModal .reimbursement-export-panel,
body.design-beta #reimbursement-receipts-modal .reimbursement-receipts-panel,
body.design-beta #vehicle-modal .vehicle-panel {
    gap: 8px;
}

body.design-beta #reimbursement-modal #reimbScanBtn {
    min-height: 34px;
}

body.design-beta #reimbursement-modal #mileageCard .card-body,
body.design-beta #reimbursement-modal #reimbAiSuggestions .card-body {
    padding: 8px 10px;
}

body.design-beta #reimbursement-modal #mileageMap {
    height: 220px !important;
}

body.design-beta #reimbursementExportModal #reimbursementExportForm,
body.design-beta #timeEntryModal #timeEntryForm,
body.design-beta #timesheetExportModal #timesheetExportForm,
body.design-beta #contactModal #contactForm {
    gap: 10px 12px;
}

body.design-beta #contactModal #contactForm,
body.design-beta #createClientInlineModal #createClientInlineForm,
body.design-beta #followUpModal #followUpForm {
    gap: 8px;
}

body.design-beta #contactModal .modal-body,
body.design-beta #contactActivityModal .modal-body,
body.design-beta #createClientModal .modal-body,
body.design-beta #manageProductsModal .modal-body,
body.design-beta #clientProductModal .modal-body,
body.design-beta #outlookLinkClientModal .modal-body,
body.design-beta #clientReportModal .modal-body,
body.design-beta #projectCreateClientModal .modal-body,
body.design-beta #projectClientViewModal .modal-body,
body.design-beta #projectEvaluationExportModal .modal-body,
body.design-beta #phaseModal .modal-body,
body.design-beta #phaseBulkModal .modal-body,
body.design-beta #arCreateModal .modal-body,
body.design-beta #arEditModal .modal-body,
body.design-beta #mtTypesModal .modal-body,
body.design-beta #mtProtocolModal .modal-body,
body.design-beta #mtProtocolItemsModal .modal-body,
body.design-beta #mtProtocolCarryoverModal .modal-body,
body.design-beta #mtProtocolLineageModal .modal-body,
body.design-beta #uploadModal .modal-body,
body.design-beta #teamsFilesModal .modal-body,
body.design-beta #teamsLinkModal .modal-body,
body.design-beta #teamsSyncMembersModal .modal-body,
body.design-beta #teamsCreateModal .modal-body,
body.design-beta #metadataModal .modal-body,
body.design-beta #outlookLinkProjectModal .modal-body,
body.design-beta #projectPartnerDetailsModal .modal-body,
body.design-beta #timesheetExportModal .modal-body,
body.design-beta #dayEntriesModal .modal-body,
body.design-beta #reportsTimesheetExportModal .modal-body,
body.design-beta #reportsReimbursementsExportModal .modal-body,
body.design-beta #reportsDashboardExportModal .modal-body,
body.design-beta #invoiceDocModal .modal-body {
    background: transparent;
}

body.design-beta #contactModal .crm-contact-panel,
body.design-beta #contactActivityModal .crm-contact-activity-panel,
body.design-beta #createClientModal .crm-create-client-panel,
body.design-beta #manageProductsModal .crm-manage-products-panel,
body.design-beta #clientProductModal .crm-client-product-panel,
body.design-beta #outlookLinkClientModal .crm-outlook-link-panel,
body.design-beta #clientReportModal .crm-client-report-panel,
body.design-beta #projectCreateClientModal .project-create-client-panel,
body.design-beta #projectClientViewModal .modal-panel,
body.design-beta #projectEvaluationExportModal .reports-export-panel,
body.design-beta #phaseModal .project-phase-panel,
body.design-beta #phaseBulkModal .project-phase-bulk-panel,
body.design-beta #arCreateModal .project-ar-create-panel,
body.design-beta #arEditModal .project-ar-edit-panel,
body.design-beta #mtTypesModal .project-mt-types-panel,
body.design-beta #mtProtocolModal .project-mt-protocol-panel,
body.design-beta #mtProtocolItemsModal .project-mt-open-items-panel,
body.design-beta #mtProtocolCarryoverModal .modal-panel,
body.design-beta #mtProtocolLineageModal .modal-panel,
body.design-beta #uploadModal .project-upload-panel,
body.design-beta #teamsFilesModal .project-teams-files-panel,
body.design-beta #teamsLinkModal .project-teams-link-panel,
body.design-beta #teamsSyncMembersModal .project-teams-sync-panel,
body.design-beta #teamsCreateModal .project-teams-create-panel,
body.design-beta #metadataModal .project-metadata-panel,
body.design-beta #outlookLinkProjectModal .project-outlook-link-panel,
body.design-beta #projectPartnerDetailsModal .modal-panel,
body.design-beta #timesheetExportModal .timesheet-export-panel,
body.design-beta #dayEntriesModal .day-entries-panel,
body.design-beta #reportsTimesheetExportModal .reports-export-panel,
body.design-beta #reportsReimbursementsExportModal .reports-export-panel,
body.design-beta #reportsDashboardExportModal .reports-export-panel,
body.design-beta #invoiceDocModal .invoice-doc-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.design-beta #invoiceDocModal .invoice-doc-grid > div {
    min-width: 0;
}

body.design-beta .newsletter-modal .modal-body,
body.design-beta .settings-template-modal .modal-body,
body.design-beta .settings-template-panel {
    gap: 8px;
}

body.design-beta .newsletter-modal .modal-body .card,
body.design-beta .settings-template-modal .modal-body .card {
    border-radius: 12px;
}

body.design-beta .page[data-page-id="reimbursements"] #reimbursement-modal #mileageCard,
body.design-beta .page[data-page-id="reimbursements"] #reimbursement-modal #reimbAiSuggestions {
    border-color: var(--beta-border);
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="reimbursements"] #reimbursement-modal #mileageMap {
    height: 240px !important;
    border-color: var(--beta-border) !important;
    border-radius: 12px !important;
}

body.design-beta .page[data-page-id="reimbursements"] #reimbursement-modal #mileageAutocomplete {
    border-color: var(--beta-border);
    border-radius: 12px;
    box-shadow: none;
}

body.design-beta .page[data-page-id="reimbursements"] #reimbursement-modal #mileageWaypoints,
body.design-beta .page[data-page-id="reimbursements"] #reimbursement-receipts-modal .receipt-edit-grid {
    gap: 10px;
}

body.design-beta .offer-doc-modal .offer-doc-grid {
    gap: 10px !important;
}

body.design-beta .offer-doc-modal .offer-doc-grid > div,
body.design-beta .offer-doc-modal .offer-doc-panel {
    gap: 10px !important;
}

body.design-beta #assistantPanelV3 {
    --assistant-surface: var(--beta-surface);
    --assistant-ink: var(--beta-text);
    --assistant-muted: var(--beta-text-muted);
    --assistant-stroke: rgba(229, 231, 235, 0.96);
    --assistant-accent: var(--beta-cyan);
    --assistant-accent-strong: var(--beta-navy);
    --assistant-accent-soft: rgba(0, 178, 204, 0.1);
    --assistant-teal: var(--beta-cyan);
    --assistant-orange: var(--beta-orange);
    --assistant-panel-shadow: var(--beta-shadow-3);
    top: var(--assistant-shell-top, 72px);
    right: 12px;
    bottom: 12px;
    width: min(var(--assistant-shell-width), calc(100vw - 28px));
    height: auto;
    max-height: calc(100vh - var(--assistant-shell-top, 72px) - 24px);
    border-radius: 20px;
    border: 1px solid rgba(229, 231, 235, 0.96);
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-3);
}

body.design-beta #assistantFabV3 {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(229, 231, 235, 0.96);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.1);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    backdrop-filter: blur(16px);
}

body.design-beta #assistantFabV3:hover,
body.design-beta #assistantFabV3:focus-visible {
    transform: none;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.98);
}

body.design-beta #assistantFabV3 .assistant-v3-mark-fab {
    width: 30px;
    height: 30px;
}

body.design-beta #assistantFabV3 .assistant-v3-mark-fab,
body.design-beta #assistantPanelV3 .assistant-v3-mark-panel {
    border-color: rgba(17, 24, 39, 0.08);
    background:
        center / 66% 66% no-repeat url('/icons/kionov-logo-square.svg'),
        var(--beta-surface-subtle);
}

body.design-beta #assistantFabV3 .assistant-v3-launcher-label {
    display: none;
}

body.design-beta #assistantFabV3[data-badge]:not([data-badge=""])::after {
    top: -5px;
    right: -5px;
    left: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--beta-surface);
    background: var(--beta-navy);
    font-size: 9px;
    line-height: 12px;
}

body.design-beta #assistantPanelV3 .assistant-v3-header {
    padding: 10px 12px 8px;
    gap: 8px;
    background: var(--beta-surface);
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta #assistantPanelV3 .assistant-v3-brand {
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

body.design-beta #assistantPanelV3 .assistant-v3-mark-panel {
    width: 28px;
    height: 28px;
}

body.design-beta #assistantPanelV3 .assistant-title {
    font-size: var(--beta-font-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-v3-subtitle,
body.design-beta #assistantPanelV3 .assistant-v3-empty-art,
body.design-beta #assistantPanelV3 .assistant-v3-memory-kicker {
    display: none;
}

body.design-beta #assistantPanelV3 .assistant-header-actions {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

body.design-beta #assistantPanelV3 .assistant-v3-runlog-btn,
body.design-beta #assistantPanelV3 .assistant-v3-approval-btn,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn,
body.design-beta #assistantPanelV3 .assistant-v3-skill-btn,
body.design-beta #assistantPanelV3 .assistant-v3-memory-btn,
body.design-beta #assistantPanelV3 .assistant-v3-connector-btn {
    min-height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-runlog-btn::before,
body.design-beta #assistantPanelV3 .assistant-v3-approval-btn::before,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn::before,
body.design-beta #assistantPanelV3 .assistant-v3-skill-btn::before,
body.design-beta #assistantPanelV3 .assistant-v3-memory-btn::before,
body.design-beta #assistantPanelV3 .assistant-v3-connector-btn::before {
    display: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-runlog-btn:hover,
body.design-beta #assistantPanelV3 .assistant-v3-approval-btn:hover,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn:hover,
body.design-beta #assistantPanelV3 .assistant-v3-skill-btn:hover,
body.design-beta #assistantPanelV3 .assistant-v3-memory-btn:hover,
body.design-beta #assistantPanelV3 .assistant-v3-connector-btn:hover,
body.design-beta #assistantPanelV3 .assistant-v3-runlog-btn:focus-visible,
body.design-beta #assistantPanelV3 .assistant-v3-approval-btn:focus-visible,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn:focus-visible,
body.design-beta #assistantPanelV3 .assistant-v3-skill-btn:focus-visible,
body.design-beta #assistantPanelV3 .assistant-v3-memory-btn:focus-visible,
body.design-beta #assistantPanelV3 .assistant-v3-connector-btn:focus-visible {
    background: #eef2f6;
    border-color: var(--beta-border-strong);
    color: var(--beta-text);
    box-shadow: none;
    transform: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-runlog-btn.active {
    background: rgba(17, 32, 51, 0.08);
    border-color: rgba(17, 32, 51, 0.16);
    color: var(--beta-navy);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-approval-btn[data-badge]:not([data-badge=""])::after,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn[data-badge]:not([data-badge=""])::after,
body.design-beta #assistantPanelV3 .assistant-v3-skill-btn[data-badge]:not([data-badge=""])::after,
body.design-beta #assistantPanelV3 .assistant-v3-memory-btn[data-badge]:not([data-badge=""])::after,
body.design-beta #assistantPanelV3 .assistant-v3-connector-btn[data-badge]:not([data-badge=""])::after {
    top: -4px;
    right: -4px;
    height: 14px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--beta-navy);
    box-shadow: none;
    font-size: 9px;
    line-height: 14px;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn[data-badge-tone="new"][data-badge]:not([data-badge=""])::after {
    background: #0f766e;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn[data-badge-tone="urgent"][data-badge]:not([data-badge=""])::after {
    background: var(--beta-danger);
}

body.design-beta #assistantPanelV3 .assistant-v3-close {
    margin-left: auto;
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-close:hover,
body.design-beta #assistantPanelV3 .assistant-v3-close:focus-visible {
    background: #eef2f6;
    border-color: var(--beta-border-strong);
    color: var(--beta-text);
    box-shadow: none;
    transform: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-close-text {
    display: none;
}

body.design-beta #assistantPanelV3 .assistant-body {
    padding: 10px 12px 6px;
    background: var(--beta-surface);
}

body.design-beta #assistantPanelV3 .assistant-content-row {
    gap: 10px;
}

body.design-beta #assistantPanelV3 .assistant-messages {
    gap: 8px;
    padding: 0 2px 6px;
}

body.design-beta #assistantPanelV3 .assistant-msg,
body.design-beta #assistantPanelV3 .assistant-v3-confirm {
    max-width: 92%;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--beta-border);
    box-shadow: none;
    font-size: var(--beta-font-sm);
    line-height: 1.5;
}

body.design-beta #assistantPanelV3 .assistant-msg.user {
    background: rgba(0, 178, 204, 0.08);
    border-color: rgba(0, 178, 204, 0.16);
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-msg.bot,
body.design-beta #assistantPanelV3 .assistant-v3-confirm {
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-msg.bot .assistant-v3-md-heading {
    margin: 4px 0 3px;
    color: var(--beta-navy);
}

body.design-beta #assistantPanelV3 .assistant-msg.bot .assistant-v3-md-list {
    margin: 4px 0 6px 16px;
}

body.design-beta #assistantPanelV3 .assistant-msg.bot code {
    background: rgba(17, 32, 51, 0.06);
    border-color: rgba(17, 32, 51, 0.08);
}

body.design-beta #assistantPanelV3 .assistant-v3-confirm-message,
body.design-beta #assistantPanelV3 .assistant-v3-empty-body,
body.design-beta #assistantPanelV3 .assistant-v3-skill-note,
body.design-beta #assistantPanelV3 .assistant-v3-skill-studio-note,
body.design-beta #assistantPanelV3 .assistant-v3-memory-card-note,
body.design-beta #assistantPanelV3 .assistant-v3-memory-summary-meta,
body.design-beta #assistantPanelV3 .assistant-v3-memory-summary-body {
    font-size: var(--beta-font-meta);
    color: var(--beta-text-muted);
}

body.design-beta #assistantPanelV3 .assistant-v3-next-actions {
    gap: 4px;
}

body.design-beta #assistantPanelV3 .assistant-v3-next-label,
body.design-beta #assistantPanelV3 .assistant-runlog-heading,
body.design-beta #assistantPanelV3 .assistant-v3-connector-title {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--beta-text-soft);
}

body.design-beta #assistantPanelV3 .assistant-v3-next-action,
body.design-beta #assistantPanelV3 .assistant-v3-suggestion,
body.design-beta #assistantPanelV3 .assistant-v3-confirm-btn {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface);
    color: var(--beta-text);
    font-size: var(--beta-font-meta);
    box-shadow: none;
    transform: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-next-action:hover,
body.design-beta #assistantPanelV3 .assistant-v3-suggestion:hover,
body.design-beta #assistantPanelV3 .assistant-v3-confirm-btn:hover {
    border-color: var(--beta-border-strong);
    background: #f8fafc;
    box-shadow: none;
    transform: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-confirm-btn.confirm.danger {
    border-color: rgba(194, 65, 58, 0.24);
    background: rgba(194, 65, 58, 0.08);
    color: var(--beta-danger);
}

body.design-beta #assistantPanelV3 .assistant-v3-empty {
    gap: 6px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-empty-title {
    font-size: var(--beta-font-md);
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-v3-suggestions {
    gap: 4px;
}

body.design-beta #assistantPanelV3 .assistant-runcol {
    border-left: 1px solid transparent;
}

body.design-beta #assistantPanelV3.assistant-v3-runlog-open .assistant-runcol {
    flex-basis: 176px;
    width: 176px;
    max-width: 176px;
    padding-left: 10px;
    border-left-color: var(--beta-border);
}

body.design-beta #assistantPanelV3 .assistant-runlog-item,
body.design-beta #assistantPanelV3 .assistant-runlog-details {
    border-radius: 10px;
    border-color: var(--beta-border);
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-runlog-item {
    padding: 6px;
    margin-bottom: 5px;
    font-size: var(--beta-font-meta);
}

body.design-beta #assistantPanelV3 .assistant-runlog-header {
    font-size: 10px;
}

body.design-beta #assistantPanelV3 .assistant-runlog-tag {
    padding: 1px 5px;
    font-size: 9px;
    backdrop-filter: none;
}

body.design-beta #assistantPanelV3 .assistant-footer {
    padding: 8px 12px 10px;
    border-top: 1px solid var(--beta-border);
    background: var(--beta-surface);
}

body.design-beta #assistantPanelV3 .assistant-v3-compose {
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-modebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 8px;
    align-items: center;
}

body.design-beta #assistantPanelV3 .assistant-v3-mode-summary {
    grid-column: 1 / 2;
    font-size: 10px;
    color: var(--beta-text-muted);
}

body.design-beta #assistantPanelV3 .assistant-v3-reasoning-wrap,
body.design-beta #assistantPanelV3 .assistant-v3-autonomy-wrap {
    gap: 3px;
    font-size: 10px;
    color: var(--beta-text-muted);
}

body.design-beta #assistantPanelV3 .assistant-v3-reasoning-select,
body.design-beta #assistantPanelV3 .assistant-v3-autonomy-select,
body.design-beta #assistantPanelV3 .assistant-v3-skill-input,
body.design-beta #assistantPanelV3 .assistant-v3-skill-select {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border-color: var(--beta-border);
    background: var(--beta-surface);
    font-size: var(--beta-font-sm);
}

body.design-beta #assistantPanelV3 .assistant-v3-input {
    min-height: 44px;
    max-height: 120px;
    font-size: var(--beta-font-sm);
    line-height: 1.45;
}

body.design-beta #assistantPanelV3 .assistant-v3-actions {
    gap: 4px;
}

body.design-beta #assistantPanelV3 .assistant-v3-speak,
body.design-beta #assistantPanelV3 .assistant-v3-stop,
body.design-beta #assistantPanelV3 .assistant-v3-send,
body.design-beta #assistantPanelV3 .assistant-v3-refresh,
body.design-beta #assistantPanelV3 .assistant-v3-apply {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: var(--beta-font-meta);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-speak,
body.design-beta #assistantPanelV3 .assistant-v3-refresh {
    border-color: var(--beta-border);
    background: var(--beta-surface);
    color: var(--beta-text-muted);
}

body.design-beta #assistantPanelV3 .assistant-v3-speak:hover:not(:disabled),
body.design-beta #assistantPanelV3 .assistant-v3-refresh:hover,
body.design-beta #assistantPanelV3 .assistant-v3-apply:hover {
    border-color: var(--beta-border-strong);
    background: #f8fafc;
    color: var(--beta-text);
    box-shadow: none;
    transform: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-speak.active {
    border-color: rgba(0, 178, 204, 0.24);
    background: rgba(0, 178, 204, 0.1);
    color: var(--beta-navy);
}

body.design-beta #assistantPanelV3 .assistant-v3-stop {
    border-color: rgba(194, 65, 58, 0.22);
    background: rgba(194, 65, 58, 0.08);
    color: var(--beta-danger);
}

body.design-beta #assistantPanelV3 .assistant-v3-send,
body.design-beta #assistantPanelV3 .assistant-v3-apply,
body.design-beta #assistantPanelV3 .assistant-v3-skill-save {
    border-color: var(--beta-navy);
    background: var(--beta-navy);
    color: #fff;
}

body.design-beta #assistantPanelV3 .assistant-v3-send:hover,
body.design-beta #assistantPanelV3 .assistant-v3-skill-save:hover {
    background: var(--beta-navy-soft);
    border-color: var(--beta-navy-soft);
    color: #fff;
}

body.design-beta #assistantPanelV3 .assistant-v3-connector-tray {
    left: 12px;
    right: 12px;
    padding: 10px;
    gap: 8px;
    background: var(--beta-surface);
    backdrop-filter: none;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    box-shadow: var(--beta-shadow-2);
    max-height: min(320px, calc(100% - var(--assistant-tray-top, 88px) - 168px));
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-tray {
    max-height: min(420px, calc(100% - var(--assistant-tray-top, 88px) - 132px));
}

body.design-beta #assistantPanelV3 .assistant-v3-connector-header,
body.design-beta #assistantPanelV3 .assistant-v3-skill-card-head,
body.design-beta #assistantPanelV3 .assistant-v3-memory-card-head,
body.design-beta #assistantPanelV3 .assistant-v3-skill-check-header {
    gap: 8px;
}

body.design-beta #assistantPanelV3 .assistant-v3-connector-list,
body.design-beta #assistantPanelV3 .assistant-v3-skill-studio-list,
body.design-beta #assistantPanelV3 .assistant-v3-memory-list {
    gap: 6px;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
}

body.design-beta #assistantPanelV3 .assistant-v3-connector-item,
body.design-beta #assistantPanelV3 .assistant-v3-skill-card,
body.design-beta #assistantPanelV3 .assistant-v3-skill-form,
body.design-beta #assistantPanelV3 .assistant-v3-skill-chip,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-card,
body.design-beta #assistantPanelV3 .assistant-v3-memory-summary,
body.design-beta #assistantPanelV3 .assistant-v3-memory-card,
body.design-beta #assistantPanelV3 .assistant-v3-memory-item {
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-card.is-new {
    border-color: rgba(15, 118, 110, 0.2);
    background: rgba(236, 253, 245, 0.7);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-card.urgent {
    border-color: rgba(194, 65, 58, 0.2);
    background: rgba(254, 242, 242, 0.92);
}

body.design-beta #assistantPanelV3 .assistant-v3-skill-card-title,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-kind,
body.design-beta #assistantPanelV3 .assistant-v3-memory-card-title,
body.design-beta #assistantPanelV3 .assistant-v3-memory-item-title {
    font-size: var(--beta-font-sm);
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy {
    gap: 8px;
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy-title,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-why {
    font-size: var(--beta-font-meta);
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy-note,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy-summary,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy-notice {
    font-size: 10px;
    color: var(--beta-text-muted);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-policy-actions {
    display: flex;
    justify-content: flex-end;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-band {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--beta-text-muted);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-band.band-critical {
    background: rgba(194, 65, 58, 0.12);
    color: var(--beta-danger);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-band.band-high {
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-band.band-medium {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
}

body.design-beta #assistantPanelV3 .assistant-v3-skill-card-subtitle,
body.design-beta #assistantPanelV3 .assistant-v3-skill-card-meta,
body.design-beta #assistantPanelV3 .assistant-v3-memory-item-body,
body.design-beta #assistantPanelV3 .assistant-v3-memory-chip,
body.design-beta #assistantPanelV3 .assistant-v3-skill-helper,
body.design-beta #assistantPanelV3 .assistant-v3-skill-chip-note {
    font-size: 10px;
}

body.design-beta #assistantPanelV3 .assistant-v3-skill-form-grid,
body.design-beta #assistantPanelV3 .assistant-v3-memory-grid,
body.design-beta #assistantPanelV3 .assistant-v3-memory-form-grid {
    gap: 8px;
}

body.design-beta #assistantPanelV3 .assistant-v3-skill-textarea {
    min-height: 60px;
    padding: 8px;
}

body.design-beta #assistantPanelV3 .assistant-v3-skill-textarea-lg {
    min-height: 108px;
}

body.design-beta #assistantPanelV3 .assistant-v3-skill-checklist {
    gap: 6px;
    max-height: 132px;
}

body.design-beta #assistantPanelV3 .assistant-v3-memory-actions,
body.design-beta #assistantPanelV3 .assistant-v3-skill-form-actions,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-actions,
body.design-beta #assistantPanelV3 .assistant-v3-connector-footer {
    gap: 6px;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-open,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-run {
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 11px;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-open {
    border: 1px solid var(--beta-border-strong, rgba(148, 163, 184, 0.28));
    background: #ffffff;
    color: var(--beta-text);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-open:hover {
    background: var(--beta-surface);
    border-color: rgba(71, 85, 105, 0.22);
}

body.design-beta #assistantPanelV3 .assistant-v3-approval-action.approve-always {
    background: rgba(15, 23, 42, 0.04);
    color: var(--beta-text);
    border-color: rgba(148, 163, 184, 0.26);
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-inline-actions,
body.design-beta #assistantPanelV3 .assistant-v3-proactive-inline-list {
    display: grid;
    gap: 6px;
}

body.design-beta #assistantPanelV3 .assistant-v3-proactive-inline-open {
    justify-self: flex-start;
}

body.design-beta #assistantPanelV3 .assistant-v3-memory-tray {
    max-height: min(360px, calc(100% - var(--assistant-tray-top, 88px) - 132px));
}

@media (min-width: 1180px) {
    body.design-beta #headerCopilotBtn {
        display: none !important;
    }
}

@media (max-width: 1179px) {
    body.design-beta.assistant-v3-shell-open .main-content {
        margin-right: 0;
    }

    body.design-beta #assistantFabV3 {
        display: none !important;
    }

    body.design-beta #bugReportFab {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }
}

@media (max-width: 760px) {
    body.design-beta #headerCopilotBtn {
        display: none !important;
    }

    body.design-beta #assistantFabV3 {
        display: inline-flex !important;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        width: 52px;
        height: 52px;
        border-radius: 16px;
        border-color: rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.2);
    }

    body.design-beta #assistantFabV3 .assistant-v3-mark-fab {
        width: 32px;
        height: 32px;
    }

    body.design-beta #bugReportFab {
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    body.design-beta #assistantPanelV3 {
        top: calc(env(safe-area-inset-top, 0px) + 74px);
        right: 8px;
        left: 8px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        width: auto;
        height: auto;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 82px);
        border-radius: 20px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-header {
        padding: 10px 12px 8px;
        gap: 8px;
        align-items: flex-start;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-brand {
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-titleblock {
        gap: 1px;
    }

    body.design-beta #assistantPanelV3 .assistant-title {
        font-size: 14px;
        letter-spacing: -0.01em;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-subtitle {
        font-size: 10px;
        line-height: 1.25;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-close {
        min-width: 32px;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 10px;
        justify-content: center;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-close-text {
        display: none;
    }

    body.design-beta #assistantPanelV3 .assistant-header-actions {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin: 0 -2px;
    }

    body.design-beta #assistantPanelV3 .assistant-header-actions::-webkit-scrollbar {
        display: none;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-runlog-btn,
    body.design-beta #assistantPanelV3 .assistant-v3-approval-btn,
    body.design-beta #assistantPanelV3 .assistant-v3-proactive-btn,
    body.design-beta #assistantPanelV3 .assistant-v3-skill-btn,
    body.design-beta #assistantPanelV3 .assistant-v3-memory-btn,
    body.design-beta #assistantPanelV3 .assistant-v3-connector-btn {
        flex: 0 0 auto;
        padding: 0 10px;
        min-height: 28px;
        font-size: 10px;
        letter-spacing: 0.01em;
    }

    body.design-beta #assistantPanelV3 .assistant-body {
        padding: 10px 10px 6px;
    }

    body.design-beta #assistantPanelV3 .assistant-content-row {
        gap: 8px;
    }

    body.design-beta #assistantPanelV3.assistant-v3-runlog-open .assistant-content-row {
        flex-direction: column;
    }

    body.design-beta #assistantPanelV3.assistant-v3-runlog-open .assistant-runcol {
        order: -1;
        flex-basis: auto;
        width: 100%;
        max-width: none;
        max-height: 124px;
        padding-left: 0;
        padding-bottom: 2px;
        border-left: none;
        border-bottom: 1px solid var(--beta-border);
    }

    body.design-beta #assistantPanelV3 .assistant-runlog {
        padding-right: 0;
    }

    body.design-beta #assistantPanelV3 .assistant-msg,
    body.design-beta #assistantPanelV3 .assistant-v3-confirm,
    body.design-beta #assistantPanelV3 .assistant-v3-next-actions {
        max-width: 92%;
    }

    body.design-beta #assistantPanelV3 .assistant-msg {
        padding: 9px 10px;
        font-size: 12px;
        line-height: 1.45;
        border-radius: 12px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-next-buttons,
    body.design-beta #assistantPanelV3 .assistant-v3-confirm-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-next-action,
    body.design-beta #assistantPanelV3 .assistant-v3-confirm-btn {
        width: 100%;
        justify-content: center;
    }

    body.design-beta #assistantPanelV3 .assistant-footer {
        padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
    }

    body.design-beta #assistantPanelV3 .assistant-v3-compose {
        gap: 7px;
        padding: 8px;
        border-radius: 14px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-modebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-mode-summary {
        grid-column: 1 / -1;
        white-space: normal;
        line-height: 1.3;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-input {
        min-height: 50px;
        max-height: 112px;
        font-size: 13px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-stop {
        grid-column: 1 / -1;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-speak,
    body.design-beta #assistantPanelV3 .assistant-v3-send,
    body.design-beta #assistantPanelV3 .assistant-v3-stop {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-connector-tray {
        left: 8px;
        right: 8px;
        top: var(--assistant-tray-top, 84px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
        max-height: none;
        padding: 8px;
        border-radius: 14px;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-connector-header {
        gap: 8px;
        align-items: center;
    }

    body.design-beta #assistantPanelV3 .assistant-v3-connector-title {
        font-size: 10px;
    }
}
}
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-workspace--beta,
body.design-beta .page[data-page-id="operations-hub"],
body.design-beta .page[data-page-id="calendar"],
body.design-beta .page[data-page-id="team"],
body.design-beta .page[data-page-id="departments"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card,
body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card,
body.design-beta .page[data-page-id="team"] .team-beta-toolbar,
body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar {
    position: sticky;
    top: 10px;
    z-index: 5;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .form-input,
body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .form-select,
body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .form-input,
body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .form-select,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .form-input,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .form-select,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-inline-toolbar .form-input,
body.design-beta .page[data-page-id="team"] .team-beta-toolbar .form-input,
body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .form-input,
body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .form-select {
    min-height: var(--beta-control-height-compact);
    padding-inline: 9px;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .btn,
body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .btn,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .btn,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-inline-toolbar .btn,
body.design-beta .page[data-page-id="team"] .team-beta-toolbar .btn,
body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .btn {
    min-height: 32px;
    border-radius: 8px;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-section-card--metrics-beta .card-body,
body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-beta-toolbar-top,
body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-actions--primary {
    margin-left: auto;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-filters-grid--beta {
    display: grid;
    grid-template-columns: minmax(124px, 0.9fr) minmax(156px, 1fr) minmax(260px, 1.6fr);
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-filters-grid--beta .reimbursements-filter-span-2 {
    grid-column: auto;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-section-card--metrics-beta .card-header {
    display: none;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-section-card--metrics-beta .reimbursements-metrics-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-results-card--beta .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="reimbursements"] .reimbursements-results-card--beta .card-body {
    padding: 6px 0 0;
}

body.design-beta .page[data-page-id="calendar"] .calendar-beta-period {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .card-body,
body.design-beta .page[data-page-id="calendar"] .calendar-surface-card .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-row,
body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-cluster,
body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-filters,
body.design-beta .page[data-page-id="calendar"] .calendar-nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-filters {
    width: 100%;
}

body.design-beta .page[data-page-id="calendar"] .calendar-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--beta-control-height-compact);
    padding: 0 9px;
    border: 1px solid var(--beta-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #475467;
    font-size: 12px;
}

body.design-beta .page[data-page-id="calendar"] .calendar-surface-card {
    overflow: hidden;
}

body.design-beta .page[data-page-id="calendar"] #calendarLocaleBanner,
body.design-beta .page[data-page-id="calendar"] #calendarTodayDetails {
    margin-bottom: 8px !important;
}

body.design-beta .page[data-page-id="team"] .team-insights-grid--beta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="team"] .team-insight-card {
    min-height: 86px;
}

body.design-beta .page[data-page-id="team"] .team-insight-label {
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="team"] .team-insight-body {
    font-size: 13px;
}

body.design-beta .page[data-page-id="team"] .team-results-body--beta {
    padding: 0 12px 12px;
}

body.design-beta .page[data-page-id="team"] .team-beta-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .page[data-page-id="team"] .team-beta-toolbar-main,
body.design-beta .page[data-page-id="team"] .team-beta-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="team"] .team-beta-toolbar-main {
    flex: 1 1 520px;
}

body.design-beta .page[data-page-id="team"] .team-beta-toolbar-main #teamSearch {
    min-width: 220px;
    flex: 1 1 260px;
}

body.design-beta .page[data-page-id="team"] .team-beta-toolbar-actions {
    margin-left: auto;
}

body.design-beta .page[data-page-id="team"] .team-selected-count-beta,
body.design-beta .page[data-page-id="team"] .team-beta-toolbar-count {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="departments"] .departments-results-body--beta {
    padding: 0 12px 12px;
}

body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar-copy {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .card-body,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(132px, 0.9fr) minmax(132px, 0.9fr) minmax(148px, 1fr) auto;
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-apply {
    display: flex;
    align-items: flex-end;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-footer,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-range-list,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-inline-toolbar,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-chip-row,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-view-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-footer {
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-selected-user {
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-card {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-label {
    color: #475467;
    font-size: var(--beta-font-meta);
    font-weight: 600;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-value {
    font-size: var(--beta-font-kpi);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(340px, 0.92fr);
    gap: 10px;
    align-items: start;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-main-column,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-side-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-secondary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-inline-toolbar input {
    min-width: 220px;
    flex: 1 1 260px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-inline-toolbar--secondary input {
    min-width: 0;
    flex: 1 1 auto;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card {
    overflow: hidden;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--actions {
    position: static;
    top: auto;
    z-index: auto;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card .card-header {
    padding: 10px 12px 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card .card-title {
    font-size: 14px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-chip-row {
    gap: 6px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-period-summary {
    margin-top: 2px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions .btn {
    width: 100%;
    justify-content: center;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-selected-user {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 24px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-selected-user .badge {
    min-height: 22px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions-hint {
    color: var(--beta-text-muted);
    font-size: 11px;
    line-height: 1.35;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame {
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--approvals,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems {
    max-height: min(52vh, 540px);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--time {
    max-height: min(62vh, 700px);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--secondary {
    max-height: min(30vh, 320px);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--tasks .operations-hub-table-frame--workitems {
    max-height: min(42vh, 470px);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .table-container {
    border: 0;
    border-radius: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .table {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .table td,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .table th {
    padding: 7px 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .tabulator {
    border: 0;
    background: transparent;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .tabulator .tabulator-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .tabulator-row {
    min-height: 40px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .tabulator-row .tabulator-cell,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame .tabulator-col {
    padding-top: 7px;
    padding-bottom: 7px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--secondary .card-body {
    padding-top: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--secondary .operations-hub-inline-toolbar {
    gap: 6px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--secondary .operations-hub-inline-toolbar .btn {
    min-width: 0;
    padding-inline: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--secondary .card-title {
    font-size: 13px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-list {
    display: none;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item {
    display: grid;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--beta-text);
    line-height: 1.35;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item-meta {
    font-size: 12px;
    color: var(--beta-text);
    line-height: 1.35;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item-meta--muted,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-empty {
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-mobile-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-projects-shell {
    display: grid;
    gap: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-inline-toolbar--projects {
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-focus-card {
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 12px;
    text-align: left;
    display: grid;
    gap: 4px;
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-focus-card strong {
    font-size: 18px;
    line-height: 1;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-focus-card span {
    font-size: 13px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-focus-card small {
    font-size: 11px;
    line-height: 1.4;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-focus-card.is-active {
    border-color: var(--beta-primary, #2e6cf6);
    background: rgba(46, 108, 246, 0.08);
    box-shadow: inset 0 0 0 1px rgba(46, 108, 246, 0.12);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-list {
    display: grid;
    gap: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-queue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-queue-card {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-queue-head,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-results-head,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-browser-head,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-queue-title,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-results-title,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-browser-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-queue-copy,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-results-copy,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-browser-copy {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-summary {
    margin-top: 10px;
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-block {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
    min-width: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-block--entries {
    grid-column: 1 / -1;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-table-frame {
    min-width: 0;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-table-frame .tabulator {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-fallback-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-fallback-table th,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-fallback-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    text-align: left;
    vertical-align: top;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-fallback-table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-fallback-table td.is-numeric {
    text-align: right;
    white-space: nowrap;
}

body.design-beta .page[data-page-id="operations-hub"] #operationsHubProjectInsightsEntriesTable .tabulator-cell[tabulator-field="id"] {
    white-space: nowrap;
}

body.design-beta .page[data-page-id="operations-hub"] #operationsHubProjectInsightsEntriesTable .tabulator-cell[tabulator-field="id"] .btn + .btn {
    margin-left: 6px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insight-list,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-list {
    display: grid;
    gap: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insight-row,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insight-row {
    display: grid;
    gap: 3px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insight-row span,
body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insight-row small {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insight-row strong {
    color: var(--beta-text);
    font-size: 14px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--beta-text);
    line-height: 1.35;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-hours {
    font-size: 13px;
    font-weight: 600;
    color: var(--beta-text);
    white-space: nowrap;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-list--queue .operations-hub-project-row {
    padding: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 10px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row.is-selected {
    border-color: var(--beta-primary, #2e6cf6);
    box-shadow: 0 0 0 1px rgba(46, 108, 246, 0.12);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--beta-text);
    line-height: 1.35;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-copy {
    font-size: 12px;
    line-height: 1.45;
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-stat {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    padding: 8px 10px;
    display: grid;
    gap: 3px;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-stat span {
    font-size: 11px;
    font-weight: 600;
    color: var(--beta-text-muted);
    letter-spacing: 0.02em;
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-stat strong {
    font-size: 14px;
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-container--beta {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-card .card-header,
body.design-beta .page[data-page-id="settings-profile"] .settings-profile-card .card-body {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-card .card-title {
    font-size: 15px;
}

body.design-beta .page[data-page-id="settings-profile"] #profileManagerCard {
    grid-column: span 4;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard {
    grid-column: span 8;
}

body.design-beta .page[data-page-id="settings-profile"] #profilePersonalInfoCard,
body.design-beta .page[data-page-id="settings-profile"] #profilePasswordCard,
body.design-beta .page[data-page-id="settings-profile"] #teamsPersonalCard {
    grid-column: span 7;
}

body.design-beta .page[data-page-id="settings-profile"] #aiAvatarCard,
body.design-beta .page[data-page-id="settings-profile"] #profilePreferencesCard,
body.design-beta .page[data-page-id="settings-profile"] #excelTenantSyncCard {
    grid-column: span 5;
}

body.design-beta .page[data-page-id="settings-profile"] #apiKeysCard {
    grid-column: span 8;
}

body.design-beta .page[data-page-id="settings-profile"] #officeAddinCard {
    grid-column: span 4;
}

body.design-beta .page[data-page-id="settings-profile"] #profileManagerCard .card-body {
    display: flex;
    align-items: center;
    min-height: 100%;
}

body.design-beta .page[data-page-id="settings-profile"] #profileManagerBox {
    color: var(--beta-text);
    font-size: var(--beta-font-md);
    line-height: 1.5;
}

body.design-beta .page[data-page-id="settings-profile"] #profileManagerBox strong {
    display: block;
    margin-bottom: 4px;
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.design-beta .page[data-page-id="settings-profile"] .form-group {
    margin-bottom: 12px;
}

body.design-beta .page[data-page-id="settings-profile"] .form-footer {
    margin-top: 14px;
    padding-top: 12px;
}

body.design-beta .page[data-page-id="settings-profile"] .form-control,
body.design-beta .page[data-page-id="settings-profile"] .form-input,
body.design-beta .page[data-page-id="settings-profile"] .form-select {
    min-height: 34px;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard .stats-container.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard .stats-card {
    min-height: 0;
    padding: 12px 14px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: #f8fafc;
    box-shadow: none;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard .stat-icon {
    display: none;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard .stat-number {
    font-size: var(--beta-font-xl);
    line-height: 1.1;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard .stat-label {
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan {
    gap: 8px !important;
}

body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan > div {
    border-color: var(--beta-border) !important;
    border-radius: 12px !important;
    background: #f8fafc;
    padding: 10px 8px !important;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-api-creator {
    display: grid;
    grid-template-columns: minmax(180px, 1.15fr) minmax(152px, 0.9fr) minmax(220px, 1.7fr) auto;
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions.settings-profile-inline-actions--excel {
    grid-template-columns: minmax(220px, 1.4fr) auto;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions .form-group {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-api-creator .btn,
body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions .btn {
    width: 100%;
    justify-content: center;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions .form-hint {
    grid-column: 1 / -1;
    margin-top: 0;
}

body.design-beta .page[data-page-id="settings-profile"] .settings-profile-teams-recipient {
    max-width: none !important;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-beta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.95fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-section-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-main-stack,
body.design-beta .page[data-page-id="admin-access"] .admin-access-side-stack {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .card-body {
    padding: 12px 0 0;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .admin-access-section-head {
    padding-left: 14px;
    padding-right: 14px;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .table-container {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-section-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-section-note {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-user-role-layout {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-role-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-assignments-table {
    margin-top: 12px;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-delegation-row {
    margin-bottom: 8px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="admin-access"] .admin-access-delegation-row__body {
    padding: 12px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-toolbar-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-toolbar-main {
    flex: 1 1 320px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-toolbar-main .form-input {
    max-width: 420px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-beta-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-table-card,
body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-table-card .card-body {
    padding: 0;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-table-card .table-container {
    border: 0;
    border-radius: 16px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-card {
    position: sticky;
    top: calc(var(--beta-header-height) + 18px);
    min-height: 280px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-title {
    margin: 0;
    font-size: 16px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-empty-title {
    color: var(--beta-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-empty-copy {
    color: var(--beta-text-muted);
    font-size: 13px;
}

body.design-beta .page[data-page-id="admin-companies"] .admin-companies-row-actions {
    display: flex;
    justify-content: flex-end;
}

body.design-beta .page[data-page-id="admin-companies"] .table tbody tr.is-selected {
    background: rgba(17, 32, 51, 0.05);
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-overview-card,
body.design-beta .page[data-page-id="admin-billing"] .admin-billing-modules-card,
body.design-beta .page[data-page-id="admin-billing"] .admin-billing-invoices-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-overview-card .card-body,
body.design-beta .page[data-page-id="admin-billing"] .admin-billing-modules-card .card-body,
body.design-beta .page[data-page-id="admin-billing"] .admin-billing-invoices-card .card-body {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-metric {
    padding: 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-metric-label {
    color: #475467;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-metric-value {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-metric-note {
    margin-top: 4px;
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-beta-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-section-head {
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-section-title {
    margin: 0;
    font-size: 16px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-warning {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(201, 110, 27, 0.24);
    border-radius: 12px;
    background: rgba(201, 110, 27, 0.08);
    color: #8a4d12;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-modules-list {
    display: grid;
    gap: 8px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-name {
    font-size: 14px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-note {
    margin-top: 4px;
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-status--active {
    background: rgba(15, 139, 95, 0.12);
    color: var(--beta-success);
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-status--trial {
    background: rgba(201, 110, 27, 0.12);
    color: #9a5a1c;
}

body.design-beta .page[data-page-id="admin-billing"] .admin-billing-module-status--inactive {
    background: rgba(107, 114, 128, 0.12);
    color: #475467;
}

body.design-beta .page[data-page-id="settings-templates"] .page-header {
    align-items: center;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-guide-link {
    min-height: var(--beta-control-height-compact);
    padding: 0 12px;
    font-size: 12px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-tab-shell--beta {
    position: sticky;
    top: calc(var(--beta-header-height) + 12px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-tab-shell--beta .btn {
    min-height: var(--beta-control-height-compact);
    padding: 0 12px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-tab-content--beta {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-card--beta {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-card--beta .card-header {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-card--beta .card-body {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-card-header--beta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-inline-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-inline-tools .form-select,
body.design-beta .page[data-page-id="settings-templates"] .settings-templates-inline-tools .btn,
body.design-beta .page[data-page-id="settings-templates"] .form-input,
body.design-beta .page[data-page-id="settings-templates"] .form-select,
body.design-beta .page[data-page-id="settings-templates"] .btn:not(.modal-close) {
    min-height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="settings-templates"] .form-input,
body.design-beta .page[data-page-id="settings-templates"] .form-select {
    padding-top: 6px;
    padding-bottom: 6px;
}

body.design-beta .page[data-page-id="settings-templates"] .form-textarea {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-register-card--beta .table-container {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-branding-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-preview-card {
    margin-top: 0 !important;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-partials-card {
    grid-column: 1 / -1;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-report-layout--beta {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-report-upload-card {
    position: sticky;
    top: calc(var(--beta-header-height) + 72px);
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-report-stack {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="settings-templates"] .settings-templates-report-stack > .settings-templates-register-card {
    margin-top: 0 !important;
}

body.design-beta .page[data-page-id="settings-templates"] #documentsTab > .card + .card {
    border-style: dashed;
    background: #fbfcfd;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-results-card--beta {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-results-card--beta .card-body {
    padding: 12px 14px 0;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar--beta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 320px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar-main #hrSearch,
body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar-filters .btn,
body.design-beta .page[data-page-id="hr-management"] .table .btn {
    min-height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar-main #hrSearch {
    width: min(320px, 100%);
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar-count {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-table-container {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    margin: 0 -14px;
}

body.design-beta .page[data-page-id="hr-management"] .hr-management-table-container .table td {
    vertical-align: middle;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-card--beta,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plans-card,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-features-card,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-card {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-card--beta .card-body,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plans-card .card-body,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-features-card .card-body,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-card .card-body {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: end;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid > :first-child {
    grid-column: span 2;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid > :last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-company-plan-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-preview-card {
    padding: 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-preview-head {
    margin-bottom: 8px;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-beta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.9fr);
    gap: 12px;
    align-items: start;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-side-stack {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plan-card {
    border-color: var(--beta-border) !important;
    border-radius: 14px !important;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plan-form {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    width: min(100%, 720px);
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plan-form .form-input,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid .form-input,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-grid .form-input,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-feature-form .form-input,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plan-form .btn,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid .btn,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-grid .btn,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-filters .form-input,
body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-filters .form-select {
    min-height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-feature-stack {
    gap: 12px !important;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-feature-item {
    gap: 10px;
    border: 1px solid var(--beta-border) !important;
    background: #f8fafc;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-feature-form {
    gap: 10px !important;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-grid {
    gap: 10px !important;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-filters {
    gap: 8px;
}

body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-stripe-table {
    table-layout: fixed;
}

body.design-beta .page[data-page-id="settings-company"] .page-header {
    margin-bottom: 4px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar--beta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar-main,
body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-1);
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-mode-tabs .btn,
body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar-actions .btn {
    min-height: var(--beta-control-height-compact);
    padding: 0 12px;
    border-radius: 10px;
}

body.design-beta .page[data-page-id="settings-company"][data-active-tab="general"] .settings-company-toolbar-action--configuration,
body.design-beta .page[data-page-id="settings-company"][data-active-tab="configuration"] .settings-company-toolbar-action--general {
    display: none !important;
}

body.design-beta .page[data-page-id="settings-company"] .settings-layout--beta {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta {
    top: 8px;
    padding: 8px;
    border-radius: 12px;
    border-color: var(--beta-border);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
    max-height: calc(100vh - 104px);
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-title {
    margin-bottom: 6px;
    color: var(--beta-text-soft);
    font-size: 11px;
    letter-spacing: 0.08em;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-search {
    margin-bottom: 8px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-search-label,
body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-status {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-search-row {
    gap: 6px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-search-input,
body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-search-clear {
    min-height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta .settings-subnav-empty {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border-color: var(--beta-border);
    background: var(--beta-surface-subtle);
    font-size: 12px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta a.settings-subnav-link {
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    color: var(--beta-text-muted);
    font-size: 13px;
    line-height: 1.35;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta a.settings-subnav-link.sub {
    padding-left: 16px;
    font-size: 12px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta a.settings-subnav-link:hover {
    background: rgba(17, 32, 51, 0.06);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta a.settings-subnav-link.active {
    background: rgba(17, 32, 51, 0.08);
    color: var(--beta-navy);
    box-shadow: inset 0 0 0 1px rgba(17, 32, 51, 0.08);
}

body.design-beta .page[data-page-id="settings-company"] .settings-content--beta {
    display: grid;
    gap: 10px;
    align-content: start;
}

body.design-beta .page[data-page-id="settings-company"] .settings-content--beta > .card,
body.design-beta .page[data-page-id="settings-company"] > .card {
    margin: 0;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
    overflow: hidden;
}

body.design-beta .page[data-page-id="settings-company"] .settings-content--beta > .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] > .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta > .card-body > .card > .card-header {
    min-height: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="settings-company"] .settings-content--beta > .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] > .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta > .card-body > .card > .card-body {
    padding: 12px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-content--beta > .card > .card-header .card-title,
body.design-beta .page[data-page-id="settings-company"] > .card > .card-header .card-title,
body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta > .card-body > .card > .card-header .card-title {
    font-size: 16px;
    letter-spacing: -0.01em;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta > .card-header {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta > .card-body {
    display: grid;
    gap: 12px;
    padding: 0;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta > .card-body > .card {
    margin: 0 !important;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
    overflow: hidden;
}

body.design-beta .page[data-page-id="settings-company"] .form-label {
    margin-bottom: 6px;
    color: var(--beta-text);
    font-size: 12px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="settings-company"] .form-hint {
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="settings-company"] .form-input,
body.design-beta .page[data-page-id="settings-company"] .form-select,
body.design-beta .page[data-page-id="settings-company"] .form-textarea,
body.design-beta .page[data-page-id="settings-company"] .btn {
    min-height: 32px;
    height: 32px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="settings-company"] .form-textarea {
    min-height: 76px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

body.design-beta .page[data-page-id="settings-company"] .table th,
body.design-beta .page[data-page-id="settings-company"] .table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.design-beta .page[data-page-id="settings-company"] .table .btn {
    min-height: 30px;
}

body.design-beta .page[data-page-id="settings-company"] .logo-upload-section {
    gap: 12px;
    padding: 12px 14px;
    border-color: var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="settings-company"] .logo-placeholder {
    width: 176px;
    height: 84px;
    border-radius: 12px;
    border-color: var(--beta-border-strong);
}

body.design-beta .page[data-page-id="settings-company"] .logo-placeholder .logo-icon {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] .logo-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

body.design-beta .page[data-page-id="settings-company"] .section-header,
body.design-beta .page[data-page-id="settings-company"] .form-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="settings-company"] .settings-company-section-note,
body.design-beta .page[data-page-id="settings-company"] #section-function-visibility > .card-body > .form-hint {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] .card-header-actions .btn,
body.design-beta .page[data-page-id="settings-company"] .logo-actions .btn,
body.design-beta .page[data-page-id="settings-company"] .form-actions .btn {
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
}

body.design-beta .page[data-page-id="settings-company"] #section-platform-access .card,
body.design-beta .page[data-page-id="settings-company"] #section-newsletter .card,
body.design-beta .page[data-page-id="settings-company"] #section-azure .card,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card,
body.design-beta .page[data-page-id="settings-company"] #localSyncCard .card,
body.design-beta .page[data-page-id="settings-company"] #section-superbill .card,
body.design-beta .page[data-page-id="settings-company"] #section-locale .card,
body.design-beta .page[data-page-id="settings-company"] #companyAuditCard {
    margin-top: 10px !important;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    box-shadow: none;
    overflow: hidden;
}

body.design-beta .page[data-page-id="settings-company"] #section-platform-access .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #section-newsletter .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #section-azure .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #localSyncCard .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #section-superbill .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #section-locale .card > .card-header,
body.design-beta .page[data-page-id="settings-company"] #companyAuditCard > .card-header {
    padding: 9px 12px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="settings-company"] #section-platform-access .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #section-newsletter .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #section-azure .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #localSyncCard .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #section-superbill .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #section-locale .card > .card-body,
body.design-beta .page[data-page-id="settings-company"] #companyAuditCard > .card-body {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-inline-card {
    margin-top: 10px !important;
    border-color: var(--beta-border);
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-newsletter-form {
    display: grid;
    gap: 10px;
    margin-top: 0 !important;
}

body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-newsletter-form .form-grid,
body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-webhook-form {
    gap: 10px !important;
}

body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-webhook-table {
    margin-top: 10px !important;
}

body.design-beta .page[data-page-id="settings-company"] #section-email .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #section-azure .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #localSyncCard .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #section-superbill .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #section-locale .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #section-platform-access .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #section-newsletter .card-header-actions,
body.design-beta .page[data-page-id="settings-company"] #companyAuditCard .form-actions,
body.design-beta .page[data-page-id="settings-company"] #companyAuditCard #coAuditPagination,
body.design-beta .page[data-page-id="settings-company"] .azure-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .integration-setup,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .integration-setup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .integration-icon,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .integration-icon,
body.design-beta .page[data-page-id="settings-company"] #section-azure .integration-benefits,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .integration-benefits {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .integration-content,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .integration-content {
    display: grid;
    gap: 8px;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .integration-content h4,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .integration-content h4 {
    margin: 0;
    color: var(--beta-text);
    font-size: 15px;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .integration-content p,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .integration-content p {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .benefit-item,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .benefit-item {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .card-subsection,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card-subsection {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--beta-border) !important;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .card-subsection h4,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card-subsection h4 {
    margin: 0;
    color: var(--beta-text);
    font-size: 14px;
}

body.design-beta .page[data-page-id="settings-company"] #section-azure .card-subsection .form-hint,
body.design-beta .page[data-page-id="settings-company"] #teamsCard .card-subsection .form-hint {
    margin-top: 0;
}

body.design-beta .page[data-page-id="settings-company"] #section-branding .color-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="settings-company"] #section-branding .color-picker-item {
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="settings-company"] #section-branding .form-help {
    margin-top: 6px;
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="settings-company"] #section-branding .color-input-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

body.design-beta .page[data-page-id="settings-company"] #section-branding .color-picker {
    width: 36px;
    min-width: 36px;
    height: 32px;
    border-radius: 10px;
}

body.design-beta .page[data-page-id="settings-company"] #section-security .security-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="settings-company"] #section-security .security-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="settings-company"] #section-security .toggle-info h5 {
    margin: 0;
    color: var(--beta-text);
    font-size: 13px;
}

body.design-beta .page[data-page-id="settings-company"] #section-security .toggle-info p {
    display: none;
}

body.design-beta .page[data-page-id="settings-company"] #section-security .disabled-hint {
    margin-top: 6px;
    font-size: 11px;
}

body.design-beta .page[data-page-id="settings-company"] #section-locale .section-header {
    align-items: center;
}

body.design-beta .page[data-page-id="settings-company"] #companyAuditCard #coAuditFilterForm {
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="settings-company"] #companyAuditCard #coAuditFilterForm .form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.design-beta .page[data-page-id="project-planner"] {
    gap: 14px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-header {
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-header-copy {
    gap: 2px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-header-copy .page-title {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-header-actions,
body.design-beta .page[data-page-id="project-planner"] .project-planner-header-meta,
body.design-beta .page[data-page-id="project-planner"] .project-planner-view-switch,
body.design-beta .page[data-page-id="project-planner"] .project-planner-primary-actions,
body.design-beta .page[data-page-id="project-planner"] .project-planner-row-actions,
body.design-beta .page[data-page-id="project-planner"] .project-planner-comment-actions,
body.design-beta .page[data-page-id="project-planner"] .project-planner-sidebar-head-actions,
body.design-beta .page[data-page-id="project-planner"] .project-planner-sidebar-meta,
body.design-beta .page[data-page-id="project-planner"] .project-planner-board-card-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-card {
    border-color: var(--beta-border);
    border-radius: 16px;
    box-shadow: none;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-card,
body.design-beta .page[data-page-id="project-planner"] .project-planner-sidebar-card,
body.design-beta .page[data-page-id="project-planner"] .project-planner-column,
body.design-beta .page[data-page-id="project-planner"] .project-planner-comment-item,
body.design-beta .page[data-page-id="project-planner"] .project-planner-task-item,
body.design-beta .page[data-page-id="project-planner"] .project-planner-board-card {
    border-radius: 14px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-card {
    padding: 14px 16px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-primary-controls {
    align-items: flex-end;
    gap: 12px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-search .form-label {
    display: none;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-search {
    min-width: min(420px, 42vw);
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-summary-bar,
body.design-beta .page[data-page-id="project-planner"] .project-planner-advanced-filters {
    padding-top: 10px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-pill {
    padding: 5px 10px;
    border-color: var(--beta-border);
    border-radius: 999px;
    font-size: 12px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-status-toggle {
    min-height: 32px;
    padding: 0 12px;
    border-color: var(--beta-border);
    border-radius: 999px;
    font-size: 12px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-shell {
    gap: 16px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-shell.is-sidebar-open {
    grid-template-columns: minmax(0, 1fr) 340px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-table th,
body.design-beta .page[data-page-id="project-planner"] .project-planner-table td {
    padding-top: 11px;
    padding-bottom: 11px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-board {
    gap: 12px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-column-head {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-column-body {
    padding: 10px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-task-modal .form-input,
body.design-beta .page[data-page-id="project-planner"] .project-planner-task-modal .form-select,
body.design-beta .page[data-page-id="project-planner"] .project-planner-task-modal .form-textarea,
body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-card .form-input,
body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-card .form-select,
body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-card .btn,
body.design-beta .page[data-page-id="project-planner"] .project-planner-header .btn,
body.design-beta .page[data-page-id="project-planner"] .project-planner-sidebar .btn,
body.design-beta .page[data-page-id="project-planner"] .project-planner-main .btn {
    min-height: 34px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="project-planner"] .project-planner-task-modal .form-textarea,
body.design-beta .page[data-page-id="project-planner"] .project-planner-sidebar .form-textarea {
    min-height: 88px;
}

body.design-beta .page[data-page-id="utilization-v3"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-page-header {
    align-items: center;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-page-header .page-title {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-page-header-actions .btn {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-workspace-shell {
    background: var(--beta-surface);
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-workspace-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-agg,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-grid-wrap,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-user-chart {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    box-shadow: none;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-agg {
    background: var(--beta-surface-subtle);
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-agg-head {
    gap: 10px;
    align-items: center;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-agg-head strong {
    font-size: 13px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-agg-head small,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-agg-help {
    display: none;
}

body.design-beta .page[data-page-id="utilization-v3"] #utilV3FiltersBlock {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-toolbar {
    gap: 8px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-filter-group {
    gap: 8px;
    min-width: 0;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-input-wrap {
    min-height: 34px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-input-wrap .form-input,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-toolbar .form-select,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-toolbar .btn,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-week-menu .btn {
    min-height: 34px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-input-wrap .form-input {
    padding-right: 34px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-clear {
    width: 28px;
    height: 28px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-view-mode {
    border-color: var(--beta-border);
    border-radius: 10px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-toolbar .form-checkbox {
    min-height: 32px;
    font-size: 12px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-grid-wrap {
    background: var(--beta-surface);
    margin-top: 0 !important;
    padding: 10px 10px 12px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-user-chart {
    background: var(--beta-surface);
    margin-top: 0;
    padding: 12px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-table th,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-table td,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-table.util-v3-table-compact th,
body.design-beta .page[data-page-id="utilization-v3"] .util-v3-table.util-v3-table-compact td {
    padding: 2px 3px;
}

body.design-beta .page[data-page-id="utilization-v3"] .util-v3-filters-inline {
    top: var(--beta-header-height);
    background: var(--beta-bg);
    border-bottom: 0;
    box-shadow: none;
    padding: 8px 0 10px;
}

body.design-beta .page[data-page-id="insights-studio"] {
    gap: 14px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-studio-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-studio-header-copy .page-title {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-studio-actions .btn,
body.design-beta .page[data-page-id="insights-studio"] .insights-directory-toolbar .form-input,
body.design-beta .page[data-page-id="insights-studio"] .insights-catalog-toolbar .form-input,
body.design-beta .page[data-page-id="insights-studio"] .form-input,
body.design-beta .page[data-page-id="insights-studio"] .form-select,
body.design-beta .page[data-page-id="insights-studio"] .form-textarea,
body.design-beta .page[data-page-id="insights-studio"] .btn {
    min-height: 34px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="insights-studio"] .form-textarea {
    min-height: 88px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-studio-shell {
    gap: 12px;
    grid-template-columns: 248px minmax(0, 1fr) 288px;
    min-height: calc(100vh - 196px);
}

body.design-beta .page[data-page-id="insights-studio"] .insights-panel {
    background: var(--beta-surface) !important;
    border: 1px solid var(--beta-border) !important;
    border-radius: 16px;
    box-shadow: none !important;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-panel-head {
    gap: 10px;
    padding: 14px 16px 12px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-panel-head h2,
body.design-beta .page[data-page-id="insights-studio"] .insights-section-head h3,
body.design-beta .page[data-page-id="insights-studio"] .insights-board-card-head h3,
body.design-beta .page[data-page-id="insights-studio"] .insights-drilldown-head h3 {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-panel-kicker,
body.design-beta .page[data-page-id="insights-studio"] .insights-panel-head p,
body.design-beta .page[data-page-id="insights-studio"] .insights-section-note {
    display: none !important;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-metric-chip {
    gap: 6px;
    padding: 5px 9px;
    border-color: var(--beta-border);
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="insights-studio"] .insights-directory-toolbar,
body.design-beta .page[data-page-id="insights-studio"] .insights-catalog-toolbar {
    padding: 0 16px 12px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-directory-templates {
    gap: 6px;
    padding: 0 16px 10px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-template-chip,
body.design-beta .page[data-page-id="insights-studio"] .insights-path-chip {
    padding: 7px 10px;
    border-color: var(--beta-border);
}

body.design-beta .page[data-page-id="insights-studio"] .insights-template-card {
    background: linear-gradient(180deg, var(--beta-surface), var(--beta-surface-subtle));
    border-radius: 14px;
    gap: 6px;
    max-width: 240px;
    min-height: 112px;
    min-width: 170px;
    padding: 11px 12px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-template-card small {
    display: block !important;
    font-size: 12px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-template-card span {
    color: var(--beta-text-2);
    display: inline-flex;
    font-size: 10px;
    letter-spacing: 0.06em;
    margin-top: auto;
    text-transform: uppercase;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-template-card::before {
    opacity: 0.95;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-directory-list {
    gap: 8px;
    padding: 0 12px 12px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-directory-item {
    border-radius: 12px;
    border-color: var(--beta-border);
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-directory-item p,
body.design-beta .page[data-page-id="insights-studio"] .insights-source-row p,
body.design-beta .page[data-page-id="insights-studio"] .insights-function-row p {
    display: none;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-workspace-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-section {
    background: var(--beta-surface);
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    box-shadow: none;
    padding: 14px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-board-shell {
    border-color: var(--beta-border);
    border-radius: 14px;
    box-shadow: none;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-widgets-list {
    gap: 10px;
}

body.design-beta .page[data-page-id="insights-studio"] .insights-widget-card,
body.design-beta .page[data-page-id="insights-studio"] .insights-board-card,
body.design-beta .page[data-page-id="insights-studio"] .insights-drilldown-drawer {
    border-radius: 14px;
    box-shadow: none;
}

body.design-beta .page[data-page-id="automations"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="automations"] .automations-header {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="automations"] .automations-header .page-header-content h1 {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="automations"] .automations-workspace-context {
    display: none;
}

body.design-beta .page[data-page-id="automations"] .automations-workspace-tabs-shell,
body.design-beta .page[data-page-id="automations"] .automations-sidebar,
body.design-beta .page[data-page-id="automations"] .automations-builder,
body.design-beta .page[data-page-id="automations"] .automations-palette,
body.design-beta .page[data-page-id="automations"] .automations-inspector,
body.design-beta .page[data-page-id="automations"] .automations-executions,
body.design-beta .page[data-page-id="automations"] .automations-overview-hero,
body.design-beta .page[data-page-id="automations"] .automations-overview-detail {
    background: var(--beta-surface) !important;
    border: 1px solid var(--beta-border) !important;
    border-radius: 16px;
    box-shadow: none !important;
}

body.design-beta .page[data-page-id="automations"] .automations-workspace-tabs-body {
    gap: 8px;
    padding: 10px 14px;
}

body.design-beta .page[data-page-id="automations"] .automations-workspace-tab-button,
body.design-beta .page[data-page-id="automations"] .automations-overview-hero .btn,
body.design-beta .page[data-page-id="automations"] .automations-sidebar .btn,
body.design-beta .page[data-page-id="automations"] .automations-builder .btn,
body.design-beta .page[data-page-id="automations"] .automations-inspector .btn,
body.design-beta .page[data-page-id="automations"] .automations-executions .btn,
body.design-beta .page[data-page-id="automations"] .automations-page .form-input,
body.design-beta .page[data-page-id="automations"] .automations-page .form-select,
body.design-beta .page[data-page-id="automations"] .automations-page .form-textarea {
    min-height: 34px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="automations"] .automations-page .form-textarea {
    min-height: 88px;
}

body.design-beta .page[data-page-id="automations"] .automations-overview-hero {
    gap: 10px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 16px;
}

body.design-beta .page[data-page-id="automations"] .automations-panel-kicker,
body.design-beta .page[data-page-id="automations"] .automations-section-copy,
body.design-beta .page[data-page-id="automations"] .automations-overview-hero-copy p,
body.design-beta .page[data-page-id="automations"] .automations-panel-intro p,
body.design-beta .page[data-page-id="automations"] .automations-workspace-tab-copy {
    display: none !important;
}

body.design-beta .page[data-page-id="automations"] .automations-overview-meta,
body.design-beta .page[data-page-id="automations"] .automations-panel-meta {
    gap: 6px;
}

body.design-beta .page[data-page-id="automations"] .automations-overview-shell {
    gap: 12px;
}

body.design-beta .page[data-page-id="automations"] .automations-sidebar-section {
    padding: 12px;
}

body.design-beta .page[data-page-id="automations"] .automations-sidebar-section + .automations-sidebar-section {
    margin-top: 8px;
}

body.design-beta .page[data-page-id="automations"] .automations-panel-intro {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="automations"] .automations-builder-grid {
    gap: 12px;
}

body.design-beta .page[data-page-id="meeting-protocols"],
body.design-beta .page[data-page-id="admin-core"],
body.design-beta .page[data-page-id="admin-bug-reports"],
body.design-beta .page[data-page-id="admin-whats-new"],
body.design-beta .page[data-page-id="news"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .page-header,
body.design-beta .page[data-page-id="admin-core"] .page-header,
body.design-beta .page[data-page-id="admin-bug-reports"] .page-header,
body.design-beta .page[data-page-id="admin-whats-new"] .page-header,
body.design-beta .page[data-page-id="news"] .page-header {
    margin-bottom: 2px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
    gap: 16px;
    align-items: start;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-workspace-card,
body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-docs-card,
body.design-beta .page[data-page-id="admin-core"] .admin-core-card,
body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-card,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-card,
body.design-beta .page[data-page-id="news"] .news-toolbar-card,
body.design-beta .page[data-page-id="news"] .news-list-card {
    border: 1px solid var(--beta-border);
    border-radius: var(--beta-radius-lg);
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-workspace-body,
body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-docs-body,
body.design-beta .page[data-page-id="admin-core"] .admin-core-card > .card-body,
body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-card > .card-body,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-card > .card-body,
body.design-beta .page[data-page-id="news"] .news-toolbar-card > .card-body,
body.design-beta .page[data-page-id="news"] .news-list-card > .card-body {
    padding: 16px 18px;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-card > .card-header,
body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-card > .card-header,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-card > .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--beta-border);
    background: transparent;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-list-card > .card-header {
    display: none;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-card > .card-header .card-title,
body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-card > .card-header .card-title,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-card > .card-header .card-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

body.design-beta .page[data-page-id="meeting-protocols"] label,
body.design-beta .page[data-page-id="admin-core"] .form-label,
body.design-beta .page[data-page-id="admin-bug-reports"] .form-label,
body.design-beta .page[data-page-id="admin-whats-new"] .form-label {
    margin-bottom: 6px;
    color: var(--beta-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.design-beta .page[data-page-id="meeting-protocols"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.design-beta .page[data-page-id="meeting-protocols"] select,
body.design-beta .page[data-page-id="meeting-protocols"] .btn,
body.design-beta .page[data-page-id="admin-core"] .form-input,
body.design-beta .page[data-page-id="admin-core"] .btn,
body.design-beta .page[data-page-id="admin-bug-reports"] .form-input,
body.design-beta .page[data-page-id="admin-bug-reports"] .btn,
body.design-beta .page[data-page-id="admin-whats-new"] .form-input,
body.design-beta .page[data-page-id="admin-whats-new"] .btn,
body.design-beta .page[data-page-id="news"] .btn {
    min-height: var(--beta-control-height-compact);
    height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="meeting-protocols"] textarea,
body.design-beta .page[data-page-id="admin-core"] .form-textarea,
body.design-beta .page[data-page-id="admin-bug-reports"] .form-textarea,
body.design-beta .page[data-page-id="admin-whats-new"] .form-textarea,
body.design-beta .page[data-page-id="news"] .form-textarea {
    border-radius: 12px;
    border-color: var(--beta-border);
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-config-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-workspace-body,
body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-docs-body {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-toolbar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1.1fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-date-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-search-field {
    min-width: 0;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-action-group,
body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-docs-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-docs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-table-frame {
    margin-top: 0;
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    overflow: hidden;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-feedback {
    display: grid;
    gap: 8px;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-status:empty,
body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-result:empty {
    display: none;
}

body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-section-title {
    margin: 0;
    color: var(--beta-text);
    font-size: 14px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="meeting-protocols"] #jbDocInfoBottom {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-smtp-card,
body.design-beta .page[data-page-id="admin-core"] .admin-core-audit-card {
    overflow: hidden;
}

body.design-beta .page[data-page-id="admin-core"] #coreSmtpForm,
body.design-beta .page[data-page-id="admin-core"] #auditFilterForm {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-core"] #coreSmtpForm .form-input,
body.design-beta .page[data-page-id="admin-core"] #coreSmtpForm .btn,
body.design-beta .page[data-page-id="admin-core"] #auditFilterForm .form-input,
body.design-beta .page[data-page-id="admin-core"] #auditFilterForm .btn {
    min-height: 32px;
    height: 32px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="admin-core"] #coreSmtpForm .form-textarea,
body.design-beta .page[data-page-id="admin-core"] #auditFilterForm .form-textarea {
    min-height: 76px;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-smtp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-smtp-grid .switch {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-audit-form {
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="admin-core"] #auditFilterForm .form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-table-container .table thead th {
    font-size: 12px;
}

body.design-beta .page[data-page-id="admin-core"] .admin-core-table-container .table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="admin-core"] .form-actions,
body.design-beta .page[data-page-id="admin-core"] #auditPagination,
body.design-beta .page[data-page-id="admin-bug-reports"] .form-actions,
body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor .form-group:last-child,
body.design-beta .page[data-page-id="news"] .news-toolbar-pagination,
body.design-beta .page[data-page-id="news"] .news-item-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="admin-core"] #auditTableContainer,
body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportList {
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="admin-core"] #auditTableContainer {
    margin-top: 2px;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.95fr);
    gap: 16px;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-sidebar {
    display: grid !important;
    gap: 12px !important;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-editor-card {
    order: 1;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-codex-card {
    order: 2;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-deploy-card {
    order: 3;
}

body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-token-card {
    order: 4;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportFilters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportFilters .form-grid-4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportPagination,
body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportTokenResult > .form-group > div {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportForm,
body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportCodexForm {
    display: grid;
    gap: 10px;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportForm .form-row,
body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportCodexForm .form-row {
    gap: 12px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportForm img {
    border-radius: 14px;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #deployProdBtn,
body.design-beta .page[data-page-id="admin-bug-reports"] #deployLogsLatestProdBtn {
    display: none;
}

body.design-beta .page[data-page-id="admin-bug-reports"] #deployLogOutput {
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-grid {
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnList > table,
body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor form {
    width: 100%;
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnList > .loading-placeholder,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-editor-placeholder {
    margin: 0;
    color: var(--beta-text-muted);
    font-size: 13px;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-table thead th {
    font-size: 12px;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-edit-btn {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor form,
body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor #wnBlockForm {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor .form-input,
body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor .btn {
    min-height: 32px;
    height: 32px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor .form-textarea {
    min-height: 88px;
    padding-top: 8px;
    padding-bottom: 8px;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-editor-form--campaign {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--title,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--intro,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--block-title,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--block-image,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--block-body,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--block-roles {
    grid-column: 1 / -1;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--actions,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-field--block-actions {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-divider {
    height: 1px;
    margin: 2px 0;
    background: var(--beta-border);
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-blocks-shell,
body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-blocks-list {
    display: grid;
    gap: 12px;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-blocks-title {
    margin: 0 !important;
    color: var(--beta-text);
    font-size: 14px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-editor-form--block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-upload-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px !important;
    align-items: end !important;
}

body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-role-grid {
    gap: 10px !important;
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor hr {
    margin: 18px 0 4px;
    border: 0;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="admin-whats-new"] #wnEditor .item {
    margin: 0;
    padding: 12px 14px !important;
    border: 1px solid var(--beta-border) !important;
    border-radius: 14px !important;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="news"] .news-toolbar-card,
body.design-beta .page[data-page-id="news"] .news-list-card {
    overflow: hidden;
}

body.design-beta .page[data-page-id="news"] .news-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="news"] .news-toolbar-filters {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="news"] .news-toolbar-pagination {
    color: var(--beta-text-muted);
    font-size: 13px;
}

body.design-beta .page[data-page-id="news"] .news-item--beta + .news-item--beta {
    margin-top: 10px;
}

body.design-beta .page[data-page-id="news"] .news-item--beta {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="news"] .news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

body.design-beta .page[data-page-id="news"] .news-item-title {
    color: var(--beta-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

body.design-beta .page[data-page-id="news"] .news-item-content {
    color: var(--beta-text-muted);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}

body.design-beta .page[data-page-id="news"] .news-item-meta {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="news"] .news-page-modal {
    width: min(760px, calc(100vw - 24px));
    border-radius: 20px;
}

body.design-beta .page[data-page-id="news"] .news-page-modal .modal-panel {
    padding: 0;
    border: 0;
    box-shadow: none;
}

body.design-beta .page[data-page-id="news"] .news-page-modal .form-group:last-child {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="news"] .news-page-modal .form-input,
body.design-beta .page[data-page-id="news"] .news-page-modal .btn {
    min-height: var(--beta-control-height-compact);
    height: var(--beta-control-height-compact);
}

@media (max-width: 1360px) {
    body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-toolbar-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-newsletter-form .form-grid,
    body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-webhook-form,
    body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-shell,
    body.design-beta .page[data-page-id="admin-bug-reports"] .admin-bug-reports-grid,
    body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="admin-core"] .admin-core-smtp-grid,
    body.design-beta .page[data-page-id="admin-core"] #auditFilterForm .form-grid-4,
    body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportFilters .form-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportFilters {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="news"] .news-item-header {
        flex-direction: column;
    }
}

@media (max-width: 860px) {
    body.design-beta #timeEntryModal #timeEntryForm,
    body.design-beta #expenseModal #expenseForm,
    body.design-beta #createProjectModal #createProjectForm,
    body.design-beta .offer-doc-modal .offer-doc-grid {
        grid-template-columns: 1fr !important;
    }

    body.design-beta #createProjectModal #createProjectForm > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-config-grid,
    body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-toolbar-row,
    body.design-beta .page[data-page-id="admin-core"] .admin-core-smtp-grid,
    body.design-beta .page[data-page-id="admin-core"] #auditFilterForm .form-grid-4,
    body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-editor-form--campaign,
    body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-editor-form--block,
    body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-row,
    body.design-beta .page[data-page-id="admin-bug-reports"] #bugReportFilters .form-grid-4 {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="admin-whats-new"] .admin-whats-new-upload-row {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="meeting-protocols"] .meeting-protocols-docs-actions,
    body.design-beta .page[data-page-id="news"] .news-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 1360px) {
    body.design-beta .page[data-page-id="project-planner"] .project-planner-shell.is-sidebar-open,
    body.design-beta .page[data-page-id="insights-studio"] .insights-studio-shell,
    body.design-beta .page[data-page-id="automations"] .automations-overview-shell {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="project-planner"] .project-planner-sidebar {
        position: static;
    }

    body.design-beta .page[data-page-id="insights-studio"] .insights-studio-directory,
    body.design-beta .page[data-page-id="insights-studio"] .insights-studio-catalog {
        order: 2;
    }
}

@media (max-width: 1180px) {
    body.design-beta .page[data-page-id="utilization-v3"] .util-v3-toolbar,
    body.design-beta .page[data-page-id="project-planner"] .project-planner-primary-controls,
    body.design-beta .page[data-page-id="project-planner"] .project-planner-advanced-filters-footer {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="utilization-v3"] .util-v3-filter-group,
    body.design-beta .page[data-page-id="project-planner"] .project-planner-toolbar-search {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="insights-studio"] .insights-workspace-grid,
    body.design-beta .page[data-page-id="automations"] .automations-builder-grid,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-insights-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    body.design-beta .page[data-page-id="utilization-v3"] .util-v3-page-header,
    body.design-beta .page[data-page-id="project-planner"] .project-planner-header,
    body.design-beta .page[data-page-id="insights-studio"] .insights-studio-header,
    body.design-beta .page[data-page-id="automations"] .automations-overview-hero {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="project-planner"] .project-planner-header-actions,
    body.design-beta .page[data-page-id="insights-studio"] .insights-studio-actions {
        width: 100%;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-row {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-project-entry-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1200px) {
    body.design-beta .page[data-page-id="settings-templates"] .settings-templates-branding-grid,
    body.design-beta .page[data-page-id="settings-templates"] .settings-templates-report-layout--beta,
    body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-beta-grid,
    body.design-beta .page[data-page-id="settings-company"] .settings-layout--beta {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="settings-templates"] .settings-templates-report-upload-card {
        position: static;
    }

    body.design-beta .page[data-page-id="settings-company"] .settings-subnav--beta {
        position: static;
        max-height: min(360px, calc(100vh - 180px));
    }
}

@media (max-width: 1280px) {
    body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid,
    body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-plan-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-assignment-grid > :first-child,
    body.design-beta .page[data-page-id="admin-subscriptions"] .admin-subscriptions-company-plan-info {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="settings-templates"] .settings-templates-inline-tools,
    body.design-beta .page[data-page-id="hr-management"] .hr-management-toolbar-main,
    body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar-main,
    body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.design-beta .page[data-page-id="settings-company"] .settings-company-toolbar--beta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 1440px) {
    body.design-beta .page[data-page-id="projects"] .project-list-filters-grid,
    body.design-beta .page[data-page-id="offers"] .offers-filters-grid,
    body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--beta,
    body.design-beta .page[data-page-id="bills"] .billing-filters-grid--beta,
    body.design-beta .page[data-page-id="costs"] .costs-filter-grid--beta,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-filters-grid--beta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="projects"] .project-list-filter--search,
    body.design-beta .page[data-page-id="projects"] .project-list-filter--sort,
    body.design-beta .page[data-page-id="invoices"] .billing-filter-span-2,
    body.design-beta .page[data-page-id="bills"] .billing-filter-span-2,
    body.design-beta .page[data-page-id="offers"] .offers-filter-span-2 {
        grid-column: span 2;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-top,
    body.design-beta .page[data-page-id="costs"] .costs-toolbar-top,
    body.design-beta .page[data-page-id="budget"] .budget-toolbar-top,
    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-top,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-top,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-beta-toolbar-top,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-footer {
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.design-beta .command-bar-shortcut {
        display: none;
    }
}

@media (max-width: 1280px) {
    body.design-beta .page[data-page-id="projects"] .project-list-filters-grid,
    body.design-beta .page[data-page-id="offers"] .offers-filters-grid,
    body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--invoices,
    body.design-beta .page[data-page-id="bills"] .billing-filters-grid--bills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="projects"] .project-list-filter--search,
    body.design-beta .page[data-page-id="projects"] .project-list-filter--sort,
    body.design-beta .page[data-page-id="offers"] .offers-filter-span-2,
    body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--invoices .billing-filter-span-2,
    body.design-beta .page[data-page-id="bills"] .billing-filters-grid--bills .billing-filter-span-2 {
        grid-column: span 2;
    }

    body.design-beta .page[data-page-id="crm"] .crm-search-grid--beta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="settings-profile"] #profileManagerCard,
    body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard,
    body.design-beta .page[data-page-id="settings-profile"] #profilePersonalInfoCard,
    body.design-beta .page[data-page-id="settings-profile"] #profilePreferencesCard,
    body.design-beta .page[data-page-id="settings-profile"] #aiAvatarCard,
    body.design-beta .page[data-page-id="settings-profile"] #profilePasswordCard,
    body.design-beta .page[data-page-id="settings-profile"] #officeAddinCard,
    body.design-beta .page[data-page-id="settings-profile"] #excelTenantSyncCard {
        grid-column: span 6;
    }

    body.design-beta .page[data-page-id="settings-profile"] #apiKeysCard,
    body.design-beta .page[data-page-id="settings-profile"] #teamsPersonalCard {
        grid-column: span 12;
    }

    body.design-beta .page[data-page-id="admin-billing"] .admin-billing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-workspace-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-secondary-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--actions {
        position: static;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="team"] .team-beta-toolbar-actions {
        margin-left: 0;
    }

    body.design-beta .page[data-page-id="budget"] .budget-toolbar-controls {
        margin-left: 0;
    }

    body.design-beta .header-company-cluster {
        max-width: 210px;
    }
}

@media (max-width: 1120px) {
    body.design-beta .page[data-page-id="costs"] .costs-filter-grid--beta,
    body.design-beta .page[data-page-id="budget"] .budget-filter-grid--beta-compact,
    body.design-beta .page[data-page-id="budget"] .budget-scope-pills--beta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    body.design-beta .command-bar {
        min-width: min(520px, 48vw);
    }

    body.design-beta .header-actions-cluster .btn:not(.design-toggle-btn):not(.header-btn) span:last-child,
    body.design-beta .header-company-cluster .company-label {
        display: none;
    }

    body.design-beta .page[data-page-id="crm"] .crm-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-beta-grid,
    body.design-beta .page[data-page-id="admin-companies"] .admin-companies-beta-layout,
    body.design-beta .page[data-page-id="admin-billing"] .admin-billing-beta-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid,
    body.design-beta .page[data-page-id="offers"] .offers-metrics-grid,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid:not([data-mode="hours"]),
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-section-card--metrics-beta .reimbursements-metrics-grid,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid,
    body.design-beta .page[data-page-id="team"] .team-insights-grid--beta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] .stat-card {
        padding: 9px 10px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] .stat-title {
        font-size: 10px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid[data-mode="hours"] .stat-value {
        font-size: 18px;
    }

    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-actions,
    body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions--primary,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta .crm-selection-indicator,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-actions--primary {
        margin-left: 0;
    }

    body.design-beta .page[data-page-id="admin-companies"] .admin-companies-detail-card {
        position: static;
    }
}

@media (max-width: 1024px) {
    body.design-beta .main-header {
        padding: 10px 16px;
    }

    body.design-beta .page-container {
        padding: 14px 16px 20px;
    }

    body.design-beta .command-bar {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .header-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.design-beta .header-right {
        gap: 8px;
        flex-wrap: wrap;
    }

    body.design-beta .header-company-cluster,
    body.design-beta .header-actions-cluster {
        width: 100%;
    }

    body.design-beta .header-actions-cluster {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
    }

    body.design-beta .page[data-page-id="projects"] .project-workspace-view-body {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-filters,
    body.design-beta .page[data-page-id="team"] .team-beta-toolbar-main,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-range-list,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions {
        width: 100%;
    }

    body.design-beta .page[data-page-id="settings-profile"] .settings-container--beta {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="settings-profile"] #profileManagerCard,
    body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard,
    body.design-beta .page[data-page-id="settings-profile"] #profilePersonalInfoCard,
    body.design-beta .page[data-page-id="settings-profile"] #profilePreferencesCard,
    body.design-beta .page[data-page-id="settings-profile"] #aiAvatarCard,
    body.design-beta .page[data-page-id="settings-profile"] #profilePasswordCard,
    body.design-beta .page[data-page-id="settings-profile"] #apiKeysCard,
    body.design-beta .page[data-page-id="settings-profile"] #officeAddinCard,
    body.design-beta .page[data-page-id="settings-profile"] #teamsPersonalCard,
    body.design-beta .page[data-page-id="settings-profile"] #excelTenantSyncCard {
        grid-column: auto;
    }

    body.design-beta .page[data-page-id="settings-profile"] .settings-profile-api-creator,
    body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions,
    body.design-beta .page[data-page-id="settings-profile"] .settings-profile-inline-actions.settings-profile-inline-actions--excel {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-role-checkboxes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body.design-beta .page[data-page-id="projects"] .project-list-filters-grid,
    body.design-beta .page[data-page-id="offers"] .offers-filters-grid,
    body.design-beta .page[data-page-id="invoices"] .billing-filters-grid--beta,
    body.design-beta .page[data-page-id="bills"] .billing-filters-grid--beta,
    body.design-beta .page[data-page-id="costs"] .costs-filter-grid--beta,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-filters-grid--beta,
    body.design-beta .page[data-page-id="dashboard"] .stats-grid,
    body.design-beta .page[data-page-id="offers"] .offers-metrics-grid,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid,
    body.design-beta .page[data-page-id="crm"] .crm-search-grid--beta,
    body.design-beta .page[data-page-id="admin-billing"] .admin-billing-summary-grid,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid,
    body.design-beta .page[data-page-id="team"] .team-insights-grid--beta,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid,
    body.design-beta .page[data-page-id="offers"] .offers-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="offers"] .offers-metrics-grid .stat-title {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
        min-height: 2.5em;
        line-height: 1.2;
    }

    body.design-beta .page[data-page-id="dashboard"] .widget-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.design-beta .main-header {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .header-right {
        justify-content: flex-start;
    }

    body.design-beta .company-context {
        max-width: none;
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-user-actions,
    body.design-beta .page[data-page-id="admin-billing"] .admin-billing-actions,
    body.design-beta .page[data-page-id="admin-companies"] .admin-companies-toolbar-card .card-body {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="admin-billing"] .admin-billing-warning {
        flex-direction: column;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-filters-shell,
    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell,
    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-card {
        position: static;
    }

    body.design-beta .page[data-page-id="dashboard"] .stat-card,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .stat-card,
    body.design-beta .page[data-page-id="offers"] .offers-metrics-grid .stat-card {
        min-height: 104px;
        padding: 12px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stat-value,
    body.design-beta .page[data-page-id="offers"] .offers-metrics-grid .stat-value {
        font-size: 24px;
    }

    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table th,
    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table td {
        padding: 8px 10px;
    }

    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table th:nth-child(2),
    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table th:nth-child(3),
    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table td:nth-child(2),
    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table td:nth-child(3) {
        width: 72px;
        text-align: right;
        white-space: nowrap;
    }

    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table th:first-child,
    body.design-beta .page[data-page-id="dashboard"] #myWorkPlanWidget .table td:first-child {
        width: auto;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-top,
    body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-views,
    body.design-beta .page[data-page-id="projects"] .project-list-results-actions,
    body.design-beta .page[data-page-id="offers"] .offers-results-actions,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-views::-webkit-scrollbar,
    body.design-beta .page[data-page-id="projects"] .project-list-results-actions::-webkit-scrollbar,
    body.design-beta .page[data-page-id="offers"] .offers-results-actions::-webkit-scrollbar,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions::-webkit-scrollbar,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions::-webkit-scrollbar {
        display: none;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-views > *,
    body.design-beta .page[data-page-id="projects"] .project-list-results-actions > *,
    body.design-beta .page[data-page-id="offers"] .offers-results-actions > *,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions > *,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions > * {
        flex: 0 0 auto;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-actions,
    body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top .btn-primary,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary {
        width: 100%;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 0;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-actions .btn-primary,
    body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top .btn-primary {
        width: 100%;
        justify-content: center;
    }

    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary .form-select,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary .form-select {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="crm"] .crm-results-card--beta .crm-table-frame,
    body.design-beta .page[data-page-id="offers"] .offers-table-frame,
    body.design-beta .page[data-page-id="invoices"] .billing-results-card--beta .card-body,
    body.design-beta .page[data-page-id="bills"] .billing-results-card--beta .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator,
    body.design-beta .page[data-page-id="offers"] .tabulator,
    body.design-beta .page[data-page-id="invoices"] .tabulator,
    body.design-beta .page[data-page-id="bills"] .tabulator {
        min-width: 100%;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse {
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--beta-border);
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0 6px;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse tr {
        display: grid;
        grid-template-columns: minmax(88px, 116px) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        background: transparent;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse td {
        width: auto !important;
        min-width: 0;
        padding: 0;
        border: 0;
        font-size: var(--beta-font-sm);
        white-space: normal;
        word-break: break-word;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse td:first-child {
        color: var(--beta-text-muted);
        font-size: var(--beta-font-meta);
    }

    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions .btn,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions .btn {
        min-height: 30px;
        padding-inline: 8px;
        font-size: 11px;
    }

    body.design-beta .page[data-page-id="offers"] .tabulator-header,
    body.design-beta .page[data-page-id="invoices"] .tabulator-header {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    body.design-beta .project-detail-modal,
    body.design-beta .project-create-modal,
    body.design-beta .project-info-modal,
    body.design-beta .project-team-modal,
    body.design-beta .project-tasks-modal,
    body.design-beta .project-time-modal,
    body.design-beta .project-costs-modal,
    body.design-beta .project-invoices-modal,
    body.design-beta .project-planner-card-modal,
    body.design-beta .project-planner-trash-modal,
    body.design-beta .invoice-modal,
    body.design-beta .einvoice-modal,
    body.design-beta .bill-modal,
    body.design-beta .reimbursement-modal,
    body.design-beta .reimbursement-receipts-modal,
    body.design-beta .offer-detail-modal,
    body.design-beta .offer-create-modal,
    body.design-beta .offer-doc-modal,
    body.design-beta .crm-client-detail-modal,
    body.design-beta .time-entry-modal {
        width: calc(100vw - 12px) !important;
        border-radius: 18px;
    }
}

body.design-beta .page[data-page-id="mail"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="mail"] .mail-page-header {
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="mail"] .mail-page-intro {
    gap: 6px;
}

body.design-beta .page[data-page-id="mail"] .mail-context-bar {
    margin-top: 0;
}

body.design-beta .page[data-page-id="mail"] .mail-context-bar .project-detail-context-chip--strong {
    display: none;
}

body.design-beta .page[data-page-id="mail"] .mail-context-bar .project-detail-context-chip {
    min-height: 24px;
    padding: 0 8px;
    border-color: var(--beta-border);
    background: var(--beta-surface);
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="mail"] .mail-page-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body.design-beta .page[data-page-id="mail"] .mail-page-status {
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
    line-height: 1.35;
}

body.design-beta .page[data-page-id="mail"] .mail-page-action-row,
body.design-beta .page[data-page-id="mail"] .mail-list-actions,
body.design-beta .page[data-page-id="mail"] .mail-search-wrap,
body.design-beta .page[data-page-id="mail"] .mail-detail-categories,
body.design-beta .page[data-page-id="mail"] .mail-action-bar,
body.design-beta .page[data-page-id="mail"] .mail-compose-toolbar,
body.design-beta .page[data-page-id="mail"] .mail-compose-modes,
body.design-beta .page[data-page-id="mail"] .mail-compose-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="mail"] .mail-page-action-row .btn,
body.design-beta .page[data-page-id="mail"] .mail-list-actions .btn,
body.design-beta .page[data-page-id="mail"] .mail-detail-categories .btn,
body.design-beta .page[data-page-id="mail"] .mail-action-bar .btn,
body.design-beta .page[data-page-id="mail"] .mail-compose-modes .btn,
body.design-beta .page[data-page-id="mail"] .mail-compose-actions .btn,
body.design-beta .page[data-page-id="mail"] .mail-action-bar .form-select,
body.design-beta .page[data-page-id="mail"] .mail-search-wrap .form-input,
body.design-beta .page[data-page-id="mail"] .mail-detail-categories .form-input {
    min-height: 32px;
}

body.design-beta .page[data-page-id="mail"] .mail-grid {
    grid-template-columns: 208px 312px minmax(0, 1fr);
    gap: 10px;
}

body.design-beta .page[data-page-id="mail"] .mail-workspace {
    gap: 10px;
}

body.design-beta .page[data-page-id="mail"] .mail-grid .card {
    min-height: calc(100vh - 170px);
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="mail"] .mail-grid .card-header,
body.design-beta .page[data-page-id="mail"] .mail-grid .card-body {
    padding-left: 14px;
    padding-right: 14px;
}

body.design-beta .page[data-page-id="mail"] .mail-grid .card-header {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="mail"] .mail-grid .card-body {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 12px;
}

body.design-beta .page[data-page-id="mail"] .mail-list .card-footer,
body.design-beta .page[data-page-id="mail"] .mail-detail .card-footer {
    padding: 10px 12px 12px;
    background: transparent;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="mail"] .mail-detail .card-body {
    padding: 10px 12px 12px;
}

body.design-beta .page[data-page-id="mail"] .mail-detail .form-textarea {
    min-height: 84px;
    border-color: var(--beta-border-strong);
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="mail"] .mail-pane-title,
body.design-beta .page[data-page-id="mail"] .mail-detail-header {
    font-size: var(--beta-font-lg);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="mail"] .mail-pane-meta,
body.design-beta .page[data-page-id="mail"] .mail-detail-context,
body.design-beta .page[data-page-id="mail"] .mail-detail-meta,
body.design-beta .page[data-page-id="mail"] .mail-meta-line,
body.design-beta .page[data-page-id="mail"] .mail-attachment-size,
body.design-beta .page[data-page-id="mail"] .mail-empty-state-description {
    color: var(--beta-text-muted);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="mail"] .mail-section-title {
    font-size: var(--beta-font-meta);
    color: var(--beta-text-soft);
}

body.design-beta .page[data-page-id="mail"] .mail-count-chip {
    min-width: 24px;
    min-height: 24px;
    padding: 0 7px;
    border: 1px solid var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="mail"] .mail-folders,
body.design-beta .page[data-page-id="mail"] .mail-messages,
body.design-beta .page[data-page-id="mail"] .mail-thread,
body.design-beta .page[data-page-id="mail"] .mail-attachment-list {
    gap: 8px;
}

body.design-beta .page[data-page-id="mail"] .mail-folder,
body.design-beta .page[data-page-id="mail"] .mail-message,
body.design-beta .page[data-page-id="mail"] .mail-thread-item,
body.design-beta .page[data-page-id="mail"] .mail-attachment {
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="mail"] .mail-folder:hover,
body.design-beta .page[data-page-id="mail"] .mail-message:hover,
body.design-beta .page[data-page-id="mail"] .mail-thread-item:hover,
body.design-beta .page[data-page-id="mail"] .mail-attachment:hover {
    border-color: rgba(17, 32, 51, 0.16);
    background: #fbfcfd;
}

body.design-beta .page[data-page-id="mail"] .mail-folder.active,
body.design-beta .page[data-page-id="mail"] .mail-message.active,
body.design-beta .page[data-page-id="mail"] .mail-thread-item.active {
    border-color: rgba(17, 32, 51, 0.2);
    background: rgba(17, 32, 51, 0.04);
    box-shadow: inset 2px 0 0 var(--beta-cyan);
}

body.design-beta .page[data-page-id="mail"] .mail-message.unread {
    box-shadow: inset 2px 0 0 var(--beta-cyan);
}

body.design-beta .page[data-page-id="mail"] .mail-folder-glyph,
body.design-beta .page[data-page-id="mail"] .mail-message-avatar {
    background: var(--beta-surface-subtle);
    color: var(--beta-navy);
    box-shadow: none;
}

body.design-beta .page[data-page-id="mail"] .mail-folder.active .mail-folder-glyph,
body.design-beta .page[data-page-id="mail"] .mail-message.active .mail-message-avatar {
    background: rgba(17, 32, 51, 0.1);
    color: var(--beta-navy);
}

body.design-beta .page[data-page-id="mail"] .mail-unread {
    background: var(--beta-navy);
}

body.design-beta .page[data-page-id="mail"] .mail-empty-state {
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="mail"] .mail-empty-state-icon {
    display: none;
}

body.design-beta .page[data-page-id="mail"] .mail-empty-state-title {
    font-size: var(--beta-font-md);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="mail"] .mail-attachment-preview {
    border-color: var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="whatsapp"] {
    gap: 10px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-header {
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-actions {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-actions .btn,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-actions .form-input,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-actions .form-select,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar .form-input,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar .form-select,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-thread-actions .btn,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-tabs .btn,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-composer .form-input,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-composer .btn,
body.design-beta .page[data-page-id="whatsapp"] #waDetails .btn,
body.design-beta .page[data-page-id="whatsapp"] #waDetails .form-select,
body.design-beta .page[data-page-id="whatsapp"] #waTemplates .btn,
body.design-beta .page[data-page-id="whatsapp"] #waTemplates .form-textarea {
    min-height: 32px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-workspace {
    grid-template-columns: 292px minmax(0, 1fr) !important;
    gap: 10px !important;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main {
    min-height: calc(100vh - 168px);
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar-body,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-header,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-body,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-footer,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar .card-footer {
    padding-left: 12px;
    padding-right: 12px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar-body,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-header,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-body,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-footer,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar .card-footer {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar .divider,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .divider,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main .card-header {
    border-color: var(--beta-border);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-thread-title {
    color: var(--beta-text);
    font-size: var(--beta-font-lg);
    font-weight: 600;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-tabs {
    padding: 0 12px 10px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-tabs-row {
    gap: 6px !important;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-tabs .btn {
    padding: 0 10px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main-body {
    gap: 0;
}

body.design-beta .page[data-page-id="whatsapp"] .wa-tab-messages,
body.design-beta .page[data-page-id="whatsapp"] .wa-tab-media {
    height: calc(100vh - 312px) !important;
    background: var(--beta-surface-subtle) !important;
}

body.design-beta .page[data-page-id="whatsapp"] .wa-tab-details,
body.design-beta .page[data-page-id="whatsapp"] .wa-tab-templates {
    background: transparent;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-list {
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-list .empty-state,
body.design-beta .page[data-page-id="whatsapp"] #waMessages .empty-state,
body.design-beta .page[data-page-id="whatsapp"] #waMediaList .empty-state {
    padding: 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
    transition: border-color 120ms ease, background-color 120ms ease;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation:hover {
    border-color: rgba(17, 32, 51, 0.16);
    background: #fbfcfd;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation.active {
    border-color: rgba(17, 32, 51, 0.18);
    background: rgba(17, 32, 51, 0.04);
    box-shadow: inset 2px 0 0 var(--beta-cyan);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-phone {
    color: var(--beta-text);
    font-size: 13px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-time,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-meta,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-bubble-meta,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-media-meta,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-media-caption,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-compose-hint {
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-tags {
    display: flex;
    gap: 6px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-tags .badge {
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid var(--beta-border);
    border-radius: 999px;
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: 11px;
    font-weight: 600;
}

body.design-beta .page[data-page-id="whatsapp"] #waMessages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-message {
    display: flex;
    margin: 0;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-message--out {
    justify-content: flex-end;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-message--in {
    justify-content: flex-start;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-bubble {
    max-width: min(68%, 560px);
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-message--out .whatsapp-bubble {
    border-color: rgba(17, 32, 51, 0.14);
    background: rgba(17, 32, 51, 0.92);
    color: #f8fafc;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-bubble-text {
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-message--out .whatsapp-bubble-meta {
    color: rgba(248, 250, 252, 0.72);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-media-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-media-thumb {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--beta-border);
    border-radius: 10px;
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-detail-grid {
    gap: 10px !important;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-detail-inline,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-detail-actions,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-quick-links,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-template-list,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-template-actions,
body.design-beta .page[data-page-id="whatsapp"] .whatsapp-compose-form {
    gap: 8px !important;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-quick-links-hint {
    display: none;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.design-beta .page[data-page-id="whatsapp"] .whatsapp-compose-form .form-input {
    flex: 1 1 auto;
}

body.design-beta .page[data-page-id="newsletter"] {
    gap: 8px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-page-header {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-page-subtitle {
    display: none;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-context-bar {
    margin-top: 2px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-shell-card,
body.design-beta .page[data-page-id="newsletter"] .newsletter-group-card {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-shell-card > .card-header,
body.design-beta .page[data-page-id="newsletter"] .newsletter-group-card > .card-header {
    min-height: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-shell-card > .card-body,
body.design-beta .page[data-page-id="newsletter"] .newsletter-group-card > .card-body {
    gap: 10px;
    padding: 10px 12px 12px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-workspace-tabs-shell {
    margin-bottom: 4px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-workspace-tabs-shell .card-body {
    padding: 6px 8px;
}

body.design-beta .page[data-page-id="newsletter"] .project-tab-card-description {
    display: none;
}

body.design-beta .page[data-page-id="newsletter"] .project-tab-card-meta {
    margin-top: 4px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-panel-stack {
    gap: 12px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-group-header {
    align-items: center;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-group-card .card-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .btn,
body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-input,
body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-select,
body.design-beta .page[data-page-id="newsletter"] .newsletter-settings-body .btn,
body.design-beta .page[data-page-id="newsletter"] .newsletter-settings-body .form-input,
body.design-beta .page[data-page-id="newsletter"] .newsletter-settings-body .form-select {
    min-height: 32px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-input,
body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-select {
    min-width: 160px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-stats-row {
    gap: 8px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-stats-row .badge {
    padding: 5px 9px;
    border: 1px solid var(--beta-border);
    border-radius: 999px;
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-weight: 600;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-table-frame {
    border-color: var(--beta-border);
    border-radius: 14px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-table-frame .table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f9fafb;
    color: var(--beta-text-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-table-frame .table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-table-actions .btn {
    min-height: 32px;
    padding: 0 10px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state {
    min-height: 120px;
    padding: 18px 12px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state-icon {
    display: none;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state-title {
    font-size: var(--beta-font-md);
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state-description {
    max-width: 42ch;
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-settings-body {
    gap: 10px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-card {
    margin-bottom: 0;
    padding: 8px 10px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-description,
body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-code {
    display: none;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-header {
    align-items: center;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-title,
body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-meta,
body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-actions .btn {
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-actions .btn {
    min-height: 32px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-secondary-stack {
    margin-top: 8px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-secondary-stack .newsletter-setup-restore {
    display: flex;
    justify-content: flex-start;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-secondary-stack .newsletter-setup-header {
    align-items: center;
    gap: 8px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-secondary-stack .newsletter-setup-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-secondary-stack .newsletter-setup-actions {
    gap: 6px;
}

body.design-beta .page[data-page-id="newsletter"] .newsletter-secondary-stack .newsletter-setup-actions .btn {
    min-height: 30px;
    padding: 0 10px;
}

body.design-beta .page[data-page-id="documentation"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="documentation"] .documentation-page-header {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="documentation"] .documentation-container {
    grid-template-columns: 220px minmax(0, 1fr) 210px;
    gap: 14px;
    margin-top: 8px;
    min-height: calc(100vh - 132px);
}

body.design-beta .page[data-page-id="documentation"] .doc-sidebar,
body.design-beta .page[data-page-id="documentation"] .doc-content,
body.design-beta .page[data-page-id="documentation"] .doc-toc {
    top: 8px;
    max-height: calc(100vh - 104px);
    padding: 14px 16px;
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="documentation"] .doc-search {
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="documentation"] .doc-search input {
    min-height: var(--beta-control-height-compact);
    padding: 0 10px;
    border: 1px solid var(--beta-border-strong);
    border-radius: 10px;
    background: var(--beta-surface);
    color: var(--beta-text);
    font-size: 13px;
}

body.design-beta .page[data-page-id="documentation"] .doc-nav {
    gap: 12px;
}

body.design-beta .page[data-page-id="documentation"] .doc-section h4,
body.design-beta .page[data-page-id="documentation"] .doc-toc h4 {
    margin-bottom: 6px;
    color: var(--beta-text-soft);
    font-size: var(--beta-font-meta);
    letter-spacing: 0.08em;
}

body.design-beta .page[data-page-id="documentation"] .doc-link {
    margin-bottom: 2px;
    padding: 7px 9px;
    border-radius: 10px;
    color: var(--beta-text-muted);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="documentation"] .doc-link:hover {
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="documentation"] .doc-link.active {
    background: rgba(17, 32, 51, 0.08);
    color: var(--beta-navy);
}

body.design-beta .page[data-page-id="documentation"] .doc-content {
    padding: 18px 22px 20px;
}

body.design-beta .page[data-page-id="documentation"] .doc-context-hint {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-color: var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="documentation"] .doc-article {
    max-width: none;
}

body.design-beta .page[data-page-id="documentation"] .doc-article h1 {
    margin-bottom: 14px;
    color: var(--beta-text);
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

body.design-beta .page[data-page-id="documentation"] .doc-article h2 {
    margin-bottom: 12px;
    color: var(--beta-text);
    font-size: 24px;
    letter-spacing: -0.02em;
}

body.design-beta .page[data-page-id="documentation"] .doc-article h3 {
    margin-top: 24px;
    margin-bottom: 10px;
    padding-top: 16px;
    border-top-color: var(--beta-border);
    color: var(--beta-text);
    font-size: 18px;
}

body.design-beta .page[data-page-id="documentation"] .feature-grid {
    gap: 12px;
    margin: 14px 0 18px;
}

body.design-beta .page[data-page-id="documentation"] .feature-card {
    padding: 14px 16px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface-subtle);
    text-align: left;
}

body.design-beta .page[data-page-id="documentation"] .feature-icon {
    display: none;
}

body.design-beta .page[data-page-id="documentation"] .feature-card h4 {
    margin-bottom: 4px;
    color: var(--beta-text);
    font-size: 14px;
}

body.design-beta .page[data-page-id="documentation"] .feature-card p {
    color: var(--beta-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

body.design-beta .page[data-page-id="documentation"] .doc-article h4 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: var(--beta-font-lg);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="documentation"] .doc-article p,
body.design-beta .page[data-page-id="documentation"] .doc-article li,
body.design-beta .page[data-page-id="documentation"] .doc-article dd {
    color: #374151;
    font-size: var(--beta-font-md);
    line-height: 1.65;
}

body.design-beta .page[data-page-id="documentation"] .doc-article p.lead {
    margin-bottom: 14px;
    font-size: var(--beta-font-md);
    color: var(--beta-text-muted);
}

body.design-beta .page[data-page-id="documentation"] .doc-article code {
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--beta-surface-subtle);
    color: var(--beta-navy);
}

body.design-beta .page[data-page-id="documentation"] .doc-article pre {
    padding: 12px 14px;
    border-radius: 12px;
    background: #111827;
}

body.design-beta .page[data-page-id="documentation"] .toc-list a {
    padding: 4px 0;
    color: var(--beta-text-muted);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="documentation"] .toc-list a:hover {
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="industry-workspace"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-header {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-header-content {
    align-items: flex-end;
    gap: 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-subtitle,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-panel-kicker,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-panel-head .industry-workspace-panel-copy,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-flow-highlight,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-head,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-overview {
    display: none;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-context {
    margin-top: 4px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-context .project-detail-context-chip {
    min-height: 24px;
    padding: 0 8px;
    border-color: var(--beta-border);
    background: var(--beta-surface);
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-header-actions,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-command-row,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-inline-actions,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-actions,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-drawer-actions,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-hero-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-header-actions .btn,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-command-row .btn,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-inline-actions .btn,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-actions .btn,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-drawer-actions .btn,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-hero-actions .btn,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-filters .form-input,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-filters .form-select,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-inline-field .form-input,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-inline-field .form-select {
    min-height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-shell,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-flow,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project {
    gap: 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-view-switch {
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-view-button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    color: #475467;
    font-size: var(--beta-font-sm);
    font-weight: 500;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-view-button:hover {
    background: var(--beta-surface-subtle);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-view-button.is-active {
    background: rgba(17, 32, 51, 0.08);
    color: var(--beta-navy);
    box-shadow: none;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-metrics,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-metrics {
    gap: 10px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-metric,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-metric,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-metric,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-metric {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-stat-label {
    color: var(--beta-text-soft);
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-stat-value {
    color: var(--beta-text);
    font-size: 18px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-flow-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.95fr);
    gap: 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-grid,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-snapshot-grid {
    gap: 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-panel,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-row {
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-panel {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-panel-head {
    gap: 8px;
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-panel-title {
    font-size: var(--beta-font-xl);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-title {
    font-size: var(--beta-font-hero);
    letter-spacing: -0.02em;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-list,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-list {
    gap: 8px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-row {
    border-color: var(--beta-border);
    border-radius: 12px;
    background: #fbfcfd;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-row:hover,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card:hover,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card:hover {
    border-color: rgba(17, 32, 51, 0.16);
    background: #f8fafc;
    box-shadow: none;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card.is-active {
    border-color: rgba(17, 32, 51, 0.18);
    background: rgba(17, 32, 51, 0.04);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-row-meta,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-meta,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-summary-copy,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-empty-copy {
    color: var(--beta-text-muted);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-row-amount {
    font-size: var(--beta-font-lg);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-badge {
    min-height: 24px;
    padding: 0 8px;
    border-color: var(--beta-border);
    background: var(--beta-surface-subtle);
    color: var(--beta-text-muted);
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(140px, 1fr));
    gap: 8px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus {
    padding-top: 2px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card {
    min-height: 0;
    padding: 10px 12px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-focus-card small,
body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-snapshot-card small {
    display: none;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-summary {
    gap: 6px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-drawer {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--beta-border);
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-edit {
    gap: 8px;
}

body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-inline-field span {
    margin-bottom: 4px;
    color: var(--beta-text-soft);
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="research-workspace"] {
    gap: 12px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-header {
    margin-bottom: 0;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-header-content {
    align-items: flex-end;
    gap: 12px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-subtitle,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-panel-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-lane-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-kicker,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-head,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-overview {
    display: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-context {
    margin-top: 4px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-context .project-detail-context-chip {
    min-height: 24px;
    padding: 0 8px;
    border-color: var(--beta-border);
    background: var(--beta-surface);
    color: var(--beta-text-muted);
    font-size: 12px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-header-actions,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-headline,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-desk-top,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-focus-actions,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-actions {
    gap: 8px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-header-actions .btn,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-card .btn,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-panel .btn,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-lane .btn,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-actions .btn,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-edit .form-input,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-edit .form-select,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-toolbar .form-input,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-toolbar .form-select,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-toolbar .btn,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-form-grid .form-input,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-form-grid .form-select,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-form-grid .btn {
    min-height: var(--beta-control-height-compact);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-shell,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-flow,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning {
    gap: 12px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-view-switch {
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--beta-border);
    border-radius: 12px;
    background: var(--beta-surface);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-view-button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    background: transparent;
    color: #475467;
    font-size: var(--beta-font-sm);
    font-weight: 500;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-view-button:hover {
    background: var(--beta-surface-subtle);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-view-button.is-active {
    background: rgba(17, 32, 51, 0.08);
    color: var(--beta-navy);
    box-shadow: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-shell {
    top: 72px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-launcher {
    min-width: 180px;
    max-width: 220px;
    padding: 8px 10px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-2);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(17, 32, 51, 0.08);
    color: var(--beta-navy);
    box-shadow: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-title {
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-launcher-meta {
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot {
    top: 72px;
    border: 1px solid var(--beta-border);
    border-radius: 20px;
    background: var(--beta-surface);
    box-shadow: var(--beta-shadow-3);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot::after {
    display: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-meta,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-card,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-workbench,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-workbench-preview,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-copilot-option {
    border-color: var(--beta-border);
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-deck {
    gap: 10px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-card {
    min-height: 0;
    padding: 12px 14px;
    border: 1px solid var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: none;
    gap: 6px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-step {
    color: var(--beta-text-soft);
    font-size: var(--beta-font-meta);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-title {
    font-size: var(--beta-font-md);
    line-height: 1.35;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-status {
    padding-top: 0;
    color: var(--beta-text-muted);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-flow-top,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-flow-lanes {
    gap: 12px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-desk,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-panel,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-lane,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-row,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-client-desk,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-summary,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-summary-state,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-budget-card,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-window-card,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-capacity-panel,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-summary,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-form,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-preview,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-recommendation-card,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-metric,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-column,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-item,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-lane,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-month-card,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-card {
    border-color: var(--beta-border);
    border-radius: 16px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-desk,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-panel,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-client-desk {
    padding: 12px 14px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-panel-head,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-lane-head {
    gap: 8px;
    margin-bottom: 10px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-panel-title,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-lane-title,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-title,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-focus-title {
    font-size: var(--beta-font-xl);
    color: var(--beta-text);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-title {
    font-size: var(--beta-font-hero);
    letter-spacing: -0.02em;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-client-desk-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-summary-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-summary-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-summary-copy--muted,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-focus-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-window-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-budget-mix-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-capacity-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-reassign-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-fast-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-recommendations-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-scenario-board-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-lane-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-lane-row-copy,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-empty-copy {
    color: var(--beta-text-muted);
    font-size: var(--beta-font-sm);
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-filters,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-toolbar,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-quickadd-grid,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-budget-strip,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-window-grid,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-summary-grid,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-planning-metrics,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-metrics,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-grid {
    gap: 10px;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card {
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface);
    box-shadow: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-portfolio-focus-card small {
    display: none;
}

body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-metric,
body.design-beta .page[data-page-id="research-workspace"] .research-workspace-proposal-metric {
    border: 1px solid var(--beta-border);
    border-radius: 14px;
    background: var(--beta-surface-subtle);
    box-shadow: none;
}

body.design-beta .page[data-page-id="research-workspace"] #researchWorkspaceProjectQuickForms .research-workspace-panel-head {
    margin-bottom: 8px;
}

@media (max-width: 1380px) {
    body.design-beta .page[data-page-id="mail"] .mail-grid {
        grid-template-columns: 216px minmax(0, 1fr);
    }

    body.design-beta .page[data-page-id="mail"] .mail-detail {
        grid-column: 1 / -1;
    }

    body.design-beta .page[data-page-id="documentation"] .documentation-container {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    body.design-beta .page[data-page-id="documentation"] .doc-toc {
        display: none;
    }

    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-workspace {
        grid-template-columns: 272px minmax(0, 1fr) !important;
    }

    body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-deck {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    body.design-beta .page[data-page-id="mail"] .mail-page-header,
    body.design-beta .page[data-page-id="mail"] .mail-page-actions,
    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-header,
    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-page-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.design-beta .page[data-page-id="mail"] .mail-grid,
    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-workspace,
    body.design-beta .page[data-page-id="documentation"] .documentation-container,
    body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-flow-grid,
    body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-project-grid,
    body.design-beta .page[data-page-id="research-workspace"] .research-workspace-flow-top,
    body.design-beta .page[data-page-id="research-workspace"] .research-workspace-flow-lanes,
    body.design-beta .page[data-page-id="research-workspace"] .research-workspace-project-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="documentation"] .doc-sidebar,
    body.design-beta .page[data-page-id="documentation"] .doc-content {
        position: static;
        max-height: none;
    }

    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-sidebar,
    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-main,
    body.design-beta .page[data-page-id="whatsapp"] .wa-tab-messages,
    body.design-beta .page[data-page-id="whatsapp"] .wa-tab-media {
        min-height: 0;
        height: auto !important;
    }

    body.design-beta .page[data-page-id="industry-workspace"] .industry-workspace-portfolio-filters,
    body.design-beta .page[data-page-id="research-workspace"] .research-workspace-command-deck {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions,
    body.design-beta .page[data-page-id="newsletter"] .newsletter-setup-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-input,
    body.design-beta .page[data-page-id="newsletter"] .newsletter-toolbar-actions .form-select {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    body.design-beta .mobile-menu-toggle span {
        width: auto;
        height: auto;
        margin: 0;
        position: static;
        background: transparent;
    }

    body.design-beta .mobile-menu-toggle {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 10px;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: 13px;
        background: rgba(17, 24, 39, 0.96);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
        color: #fff;
        z-index: 41;
    }

    body.design-beta .mobile-menu-toggle .mobile-menu-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        line-height: 0;
    }

    body.design-beta .mobile-menu-toggle .mobile-menu-toggle-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        overflow: visible;
    }

    body.design-beta.login-overlay-open .mobile-menu-toggle,
    body.design-beta.login-overlay-open .mobile-overlay {
        display: none !important;
    }

    body.design-beta .app-container {
        position: relative;
        overflow: hidden;
    }

    body.design-beta .sidebar,
    body.design-beta .app-container.sidebar-collapsed .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 140;
        width: min(82vw, 304px);
        max-width: 304px;
        height: 100dvh;
        transform: translateX(-104%);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        box-shadow: none;
    }

    body.design-beta .app-container.sidebar-expanded .sidebar,
    body.design-beta .app-container:not(.sidebar-collapsed) .sidebar {
        transform: translateX(0);
        box-shadow: 0 24px 48px rgba(15, 23, 42, 0.26);
    }

    body.design-beta .app-container.sidebar-collapsed .sidebar-header {
        padding: 14px 14px 12px;
        gap: 0;
    }

    body.design-beta .app-container.sidebar-collapsed .logo-text-block,
    body.design-beta .app-container.sidebar-collapsed .logo-subtext,
    body.design-beta .app-container.sidebar-collapsed .nav-label,
    body.design-beta .app-container.sidebar-collapsed .nav-section-title {
        display: block !important;
        width: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.design-beta .app-container.sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding: 8px 10px 8px 12px;
    }

    body.design-beta .app-container.sidebar-collapsed .nav-item::before {
        left: 5px;
    }

    body.design-beta .main-content,
    body.design-beta .app-container.sidebar-collapsed .main-content {
        width: 100%;
        margin-left: 0;
    }

    body.design-beta.assistant-v3-shell-open .main-content {
        margin-right: 0;
    }

    body.design-beta .main-header {
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
        padding-left: 64px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body.design-beta .header-left,
    body.design-beta .header-right,
    body.design-beta .header-company-cluster,
    body.design-beta .header-actions-cluster {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    body.design-beta .header-left {
        flex: 0 0 auto;
        align-items: stretch;
    }

    body.design-beta .header-right {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
    }

    body.design-beta .header-company-cluster {
        order: 2;
        flex: 1 1 100%;
    }

    body.design-beta .header-actions-cluster {
        order: 1;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.design-beta #headerCopilotBtn,
    body.design-beta #quickLogTimeBtn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 11px;
    }

    body.design-beta #headerCopilotBtn {
        background: var(--beta-surface-subtle);
        border: 1px solid var(--beta-border);
        color: var(--beta-navy);
    }

    body.design-beta #quickLogTimeBtn {
        background: rgba(17, 24, 39, 0.96);
        border: 1px solid rgba(17, 24, 39, 0.96);
        color: #fff;
    }

    body.design-beta #headerCopilotBtn .btn-icon-shell,
    body.design-beta #quickLogTimeBtn .btn-icon-shell {
        width: 17px;
        height: 17px;
    }

    body.design-beta #quickLogTimeBtn .quick-log-btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        line-height: 0;
        color: currentColor;
    }

    body.design-beta #quickLogTimeBtn .quick-log-btn-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        overflow: visible;
    }

    body.design-beta .command-bar {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .command-bar-shortcut {
        display: none;
    }

    body.design-beta .page-container {
        padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    body.design-beta .page {
        min-width: 0;
    }

    body.design-beta .page-header,
    body.design-beta .dashboard-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body.design-beta .page-header-actions,
    body.design-beta .dashboard-page-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.design-beta .page-header-actions .btn,
    body.design-beta .dashboard-page-header-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-page-title-row {
        justify-content: space-between;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .card,
    body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > .stats-grid,
    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-card,
    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-content {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-grid > [data-widget-id] {
        grid-column: 1 / -1 !important;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-card {
        align-items: flex-start;
    }

    body.design-beta .page[data-page-id="dashboard"] #timeEntryWidgetForm .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="dashboard"] #quickEntryIntervalFields {
        grid-column: auto;
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    body.design-beta .page[data-page-id="dashboard"] .widget-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-card,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric {
        min-height: 76px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-field,
    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-submit,
    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flags {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flags {
        padding: 10px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flags .form-label {
        margin-bottom: 0;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flag-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-submit .btn {
        width: 100%;
    }

    body.design-beta .page[data-page-id="dashboard"] .quick-action-card {
        min-height: 0;
        padding: 9px 10px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 7px;
    }

    body.design-beta .page[data-page-id="dashboard"] .quick-action-label {
        font-size: 12px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell {
        position: static;
        top: auto;
        z-index: auto;
    }

    body.design-beta .time-tracking-mode-switch {
        display: block;
        width: 100%;
    }

    body.design-beta .time-tracking-mode-select {
        width: 100%;
    }

    body.design-beta .page[data-page-id="time-tracking"] #timeTabs {
        display: none;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-period {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-actions .btn {
        width: 100%;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-review-card-header,
    body.design-beta .page[data-page-id="time-tracking"] .time-review-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-review-actions .btn {
        width: 100%;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-review-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .card-body,
    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-top,
    body.design-beta .page[data-page-id="crm"] .crm-filter-chip-row--beta,
    body.design-beta .page[data-page-id="crm"] .client-filters,
    body.design-beta .page[data-page-id="crm"] #clientTypeFilters {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .card-body,
    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-top,
    body.design-beta .page[data-page-id="crm"] .crm-filter-chip-row--beta {
        max-width: 100%;
        overflow: hidden;
    }

    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-top {
        display: block;
    }

    body.design-beta .page[data-page-id="crm"] .crm-filter-chip-row--beta {
        flex: none;
    }

    body.design-beta .page[data-page-id="crm"] .client-filters,
    body.design-beta .page[data-page-id="crm"] #clientTypeFilters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
        scrollbar-width: none;
    }

    body.design-beta .page[data-page-id="crm"] .client-filters::-webkit-scrollbar,
    body.design-beta .page[data-page-id="crm"] #clientTypeFilters::-webkit-scrollbar {
        display: none;
    }

    body.design-beta .page[data-page-id="crm"] .filter-chip {
        min-width: 0;
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
    }

    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-actions {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-actions .btn {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="crm"] .crm-search-field--compact {
        display: none;
    }

    body.design-beta .page[data-page-id="crm"] .crm-search-grid--beta {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="crm"] .crm-form-grid--two,
    body.design-beta .page[data-page-id="crm"] .crm-form-grid--three {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="crm"] .crm-table-actions,
    body.design-beta .page[data-page-id="offers"] .col-actions,
    body.design-beta .page[data-page-id="invoices"] .btn-group.btn-group-sm,
    body.design-beta .page[data-page-id="bills"] .btn-group.btn-group-sm {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.design-beta .page[data-page-id="crm"] .crm-table-actions .btn,
    body.design-beta .page[data-page-id="offers"] .col-actions .btn,
    body.design-beta .page[data-page-id="invoices"] .btn-group.btn-group-sm .btn,
    body.design-beta .page[data-page-id="bills"] .btn-group.btn-group-sm .btn {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="dashboard"] .table-container,
    body.design-beta .page[data-page-id="projects"] .table-container,
    body.design-beta .page[data-page-id="offers"] .table-container,
    body.design-beta .page[data-page-id="invoices"] .table-container,
    body.design-beta .page[data-page-id="bills"] .table-container,
    body.design-beta .page[data-page-id="time-tracking"] .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    body.design-beta .page[data-page-id="offers"] .tabulator,
    body.design-beta .page[data-page-id="invoices"] .tabulator,
    body.design-beta .page[data-page-id="time-tracking"] .tabulator {
        max-width: 100%;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-entry-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        overflow: visible;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-entry-grid > .day-card {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="time-tracking"] .day-card {
        padding: 12px;
        text-align: left;
    }

    body.design-beta .page[data-page-id="time-tracking"] .day-card > div {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="time-tracking"] .hours-display {
        font-size: 20px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .day-card .btn {
        min-height: 32px;
    }

    body.design-beta #clientDetailModal,
    body.design-beta #contactModal,
    body.design-beta #contactActivityModal,
    body.design-beta #createClientModal {
        justify-content: stretch;
        align-items: stretch;
        padding: 0;
    }

    body.design-beta .crm-client-detail-modal,
    body.design-beta .crm-contact-modal,
    body.design-beta .crm-contact-activity-modal,
    body.design-beta .crm-create-client-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0;
        transform: translateY(14px);
    }

    body.design-beta #clientDetailModal.active .crm-client-detail-modal,
    body.design-beta #contactModal.active .crm-contact-modal,
    body.design-beta #contactActivityModal.active .crm-contact-activity-modal,
    body.design-beta #createClientModal.active .crm-create-client-modal {
        transform: translateY(0);
    }

    body.design-beta .crm-client-detail-modal .modal-header,
    body.design-beta .crm-contact-modal .modal-header,
    body.design-beta .crm-contact-activity-modal .modal-header,
    body.design-beta .crm-create-client-modal .modal-header {
        padding-inline: 14px;
    }

    body.design-beta .crm-client-detail-modal .modal-body,
    body.design-beta .crm-contact-modal .modal-body,
    body.design-beta .crm-contact-activity-modal .modal-body,
    body.design-beta .crm-create-client-modal .modal-body {
        padding: 0 12px 12px;
    }

    body.design-beta .crm-client-detail-modal .modal-footer,
    body.design-beta .crm-contact-modal .modal-footer,
    body.design-beta .crm-contact-activity-modal .modal-footer,
    body.design-beta .crm-create-client-modal .modal-footer {
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
        gap: 8px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    body.design-beta .crm-client-detail-modal .modal-footer .btn,
    body.design-beta .crm-contact-modal .modal-footer .btn,
    body.design-beta .crm-contact-activity-modal .modal-footer .btn,
    body.design-beta .crm-create-client-modal .modal-footer .btn {
        width: 100%;
    }

    body.design-beta .crm-client-detail-panel,
    body.design-beta .crm-contact-panel,
    body.design-beta .crm-contact-activity-panel,
    body.design-beta .crm-create-client-panel {
        padding: 0;
        gap: 8px;
    }

    body.design-beta .crm-client-detail-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.design-beta .crm-client-detail-main,
    body.design-beta .crm-client-detail-side,
    body.design-beta .crm-client-detail-wide {
        display: grid;
        gap: 10px;
    }

    body.design-beta .crm-client-detail-card {
        margin: 0 !important;
        border-radius: 12px;
    }

    body.design-beta .crm-client-detail-card .card-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    body.design-beta .crm-client-detail-header-actions,
    body.design-beta .crm-client-detail-card .card-header > div:last-child {
        width: 100%;
    }

    body.design-beta .crm-client-detail-header-actions .btn,
    body.design-beta .crm-client-detail-card .card-header > div:last-child .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics,
    body.design-beta .page[data-page-id="dashboard"] .dashboard-actions,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-snapshot-grid,
    body.design-beta .page[data-page-id="time-tracking"] .time-review-metrics {
        grid-template-columns: 1fr !important;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flags {
        padding: 9px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-quick-entry-flag-list {
        grid-template-columns: 1fr;
    }

    body.design-beta .card-header {
        padding: 9px 9px 7px;
    }

    body.design-beta .card-title {
        font-size: 13px;
    }

    body.design-beta .card-body {
        padding: 9px;
    }

    body.design-beta .project-detail-tab-button,
    body.design-beta .reports-tab-button,
    body.design-beta .time-tracking-tab-button,
    body.design-beta .crm-products-tab-button {
        min-height: 28px;
        padding: 0 8px;
        font-size: 10px;
        border-radius: 8px;
    }

    body.design-beta .table th,
    body.design-beta .table td,
    body.design-beta .tabulator .tabulator-cell {
        padding: 7px 8px;
        font-size: 12px;
    }

    body.design-beta .tabulator .tabulator-header .tabulator-col {
        min-height: 32px;
        padding: 0 7px;
        font-size: 10px;
    }

    body.design-beta .offers-metrics-grid,
    body.design-beta .billing-metrics-grid,
    body.design-beta .time-tracking-snapshot-grid,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-metrics-grid,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    body.design-beta .offers-metrics-grid .stat-card,
    body.design-beta .billing-metrics-grid .stat-card,
    body.design-beta .time-tracking-snapshot-grid .stat-card,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-card,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid .stat-card {
        min-height: 70px;
        padding: 9px 10px;
        border-radius: 12px;
    }

    body.design-beta .offers-metrics-grid .stat-value,
    body.design-beta .billing-metrics-grid .stat-value,
    body.design-beta .time-tracking-snapshot-grid .stat-value,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-value,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid .stat-value {
        font-size: 20px;
    }

    body.design-beta .offers-metrics-grid .stat-title,
    body.design-beta .billing-metrics-grid .stat-title,
    body.design-beta .time-tracking-snapshot-grid .stat-title,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-metrics-grid .stat-title,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-summary-grid .stat-title {
        font-size: 10px;
        line-height: 1.25;
    }

    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-actions {
        grid-template-columns: 1fr;
    }

    body.design-beta .page-container {
        padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    body.design-beta .page-title,
    body.design-beta .page-header h1 {
        font-size: 20px;
    }

    body.design-beta .main-header {
        gap: 6px;
    }

    body.design-beta .command-bar {
        min-height: 38px;
        padding: 0 4px 0 7px;
        border-radius: 11px;
    }

    body.design-beta .search-btn,
    body.design-beta .search-clear,
    body.design-beta .header-btn {
        width: 30px;
        height: 30px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-card,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric {
        min-height: 70px;
        padding: 9px 10px;
        border-radius: 12px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-icon,
    body.design-beta .page[data-page-id="dashboard"] .quick-action-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stat-value,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric-value {
        font-size: 20px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stat-title,
    body.design-beta .page[data-page-id="dashboard"] .stat-label,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric-label {
        font-size: 10px;
        line-height: 1.25;
    }

    body.design-beta .page[data-page-id="dashboard"] .quick-action-card {
        padding: 8px 9px;
        border-radius: 12px;
    }

    body.design-beta .page[data-page-id="dashboard"] .quick-action-label {
        font-size: 11px;
        line-height: 1.25;
    }

    body.design-beta #pwa-install-cta {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
        border: 1px solid var(--beta-border) !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18) !important;
        padding: 8px 9px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        backdrop-filter: blur(12px);
    }

    body.design-beta #pwa-install-cta > div {
        max-width: none !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body.design-beta #pwa-install-cta button.btn {
        min-height: 30px;
        border-radius: 9px;
        font-size: 11px;
    }

    body.design-beta #pwa-install-cta button.btn-outline {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    body.design-beta #pwa-install-cta div:first-child {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 768px) {
    body.design-beta .company-context {
        display: none;
    }

    body.design-beta .company-switcher-btn {
        min-width: 34px;
        padding: 0 9px;
    }

    body.design-beta .company-switcher-btn .company-label,
    body.design-beta #quickLogTimeBtn span:not(.btn-icon-shell):not(.quick-log-btn-icon) {
        display: none;
    }

    body.design-beta .page-title,
    body.design-beta .page-header h1 {
        font-size: 21px;
    }

    body.design-beta .project-detail-context-bar,
    body.design-beta .dashboard-context-bar,
    body.design-beta .offers-context-bar,
    body.design-beta .crm-context-bar,
    body.design-beta .reports-context-bar,
    body.design-beta .time-tracking-context-bar {
        gap: 4px;
        margin-top: 4px;
    }

    body.design-beta .project-detail-context-chip,
    body.design-beta .project-detail-context-bar .project-model-pill,
    body.design-beta .badge,
    body.design-beta .tag,
    body.design-beta .chip {
        min-height: 22px;
        padding: 0 7px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.2;
        background: rgba(255, 255, 255, 0.88);
    }

    body.design-beta .project-detail-context-chip--strong {
        background: rgba(17, 32, 51, 0.05);
    }

    body.design-beta .page[data-page-id="dashboard"] .page-header,
    body.design-beta .page[data-page-id="projects"] .page-header,
    body.design-beta .page[data-page-id="offers"] .page-header,
    body.design-beta .page[data-page-id="crm"] .page-header,
    body.design-beta .page[data-page-id="time-tracking"] .page-header {
        gap: 8px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="dashboard"] .stats-grid .stat-card,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric {
        min-height: 74px;
        padding: 9px 10px;
    }

    body.design-beta .page[data-page-id="dashboard"] .stat-value,
    body.design-beta .page[data-page-id="dashboard"] .widget-metrics .metric-value {
        font-size: 20px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-layout-shell {
        display: none;
    }

    body.design-beta .page[data-page-id="dashboard"].customize-mode .dashboard-layout-shell {
        display: block;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-page-header-actions {
        display: none;
    }

    body.design-beta .card-header {
        padding: 10px 10px 8px;
        gap: 8px;
    }

    body.design-beta .card-title {
        font-size: 14px;
        line-height: 1.25;
    }

    body.design-beta .card-body {
        padding: 10px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-empty-state,
    body.design-beta .page[data-page-id="mail"] .mail-empty-state,
    body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state,
    body.design-beta .page[data-page-id="whatsapp"] .whatsapp-conversation-list .empty-state,
    body.design-beta .page[data-page-id="whatsapp"] #waMessages .empty-state,
    body.design-beta .page[data-page-id="whatsapp"] #waMediaList .empty-state {
        padding: 8px 9px;
        border-radius: 10px;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-empty-state-title,
    body.design-beta .page[data-page-id="mail"] .mail-empty-state-title,
    body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state-title {
        font-size: 12px;
        line-height: 1.25;
    }

    body.design-beta .page[data-page-id="dashboard"] .dashboard-empty-state-copy,
    body.design-beta .page[data-page-id="mail"] .mail-empty-state-description,
    body.design-beta .page[data-page-id="newsletter"] .newsletter-empty-state-description,
    body.design-beta .page[data-page-id="whatsapp"] .empty-state {
        font-size: 11px;
        line-height: 1.35;
    }

    body.design-beta .project-detail-tabs-shell .card-body,
    body.design-beta .reports-workspace-tabs-shell .card-body,
    body.design-beta .time-tracking-tabs-shell .card-body,
    body.design-beta .crm-products-tabs-shell .card-body,
    body.design-beta .costs-workspace-tabs-shell .card-body,
    body.design-beta .billing-workspace-tabs-shell .card-body,
    body.design-beta .newsletter-workspace-tabs-shell .card-body {
        padding: 8px 10px;
    }

    body.design-beta .project-detail-tabs-list,
    body.design-beta .reports-tabs,
    body.design-beta .time-tracking-tabs,
    body.design-beta .crm-products-tabs {
        gap: 4px;
    }

    body.design-beta .project-detail-tab-button,
    body.design-beta .reports-tab-button,
    body.design-beta .time-tracking-tab-button,
    body.design-beta .crm-products-tab-button {
        min-height: 30px;
        padding: 0 9px;
        font-size: 11px;
        border-radius: 9px;
    }

    body.design-beta .form-group {
        gap: 4px;
        margin-bottom: 0;
    }

    body.design-beta .form-label {
        font-size: 11px;
        line-height: 1.2;
    }

    body.design-beta .table-container,
    body.design-beta .table-responsive,
    body.design-beta .tabulator {
        border-radius: 12px;
    }

    body.design-beta .table th,
    body.design-beta .table td,
    body.design-beta .tabulator .tabulator-cell {
        padding: 8px 9px;
    }

    body.design-beta .tabulator .tabulator-header .tabulator-col {
        min-height: 34px;
        padding: 0 8px;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .card-body,
    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .card-body,
    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .card-body,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .card-body,
    body.design-beta .page[data-page-id="crm"] .crm-filters-card .card-body,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .card-body,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .card-body,
    body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .card-body,
    body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .card-body,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .card-body,
    body.design-beta .page[data-page-id="reports"] .reports-controls .card-body,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .card-body,
    body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .card-body,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .card-body,
    body.design-beta .page[data-page-id="team"] .team-beta-toolbar .card-body,
    body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .card-body {
        padding: 8px 10px;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .btn,
    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .btn,
    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .btn,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .btn,
    body.design-beta .page[data-page-id="crm"] .crm-filters-card .btn,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .btn,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .btn,
    body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .btn,
    body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .btn,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .btn,
    body.design-beta .page[data-page-id="reports"] .reports-controls .btn,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .btn,
    body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .btn,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .btn,
    body.design-beta .page[data-page-id="team"] .team-beta-toolbar .btn,
    body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .btn {
        min-height: 30px;
        border-radius: 8px;
        font-size: 11px;
    }

    body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .form-input,
    body.design-beta .page[data-page-id="projects"] .project-list-filters-shell .form-select,
    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .form-input,
    body.design-beta .page[data-page-id="projects"] .project-list-beta-toolbar-shell .form-select,
    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .form-input,
    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .form-select,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .form-input,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-card .form-select,
    body.design-beta .page[data-page-id="crm"] .crm-filters-card .form-input,
    body.design-beta .page[data-page-id="crm"] .crm-filters-card .form-select,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .form-input,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-card .form-select,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .form-input,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-card .form-select,
    body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .form-input,
    body.design-beta .page[data-page-id="costs"] .costs-project-toolbar-card .form-select,
    body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .form-input,
    body.design-beta .page[data-page-id="budget"] .budget-toolbar-card .form-select,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .form-input,
    body.design-beta .page[data-page-id="time-tracking"] .time-tracking-toolbar-shell .form-select,
    body.design-beta .page[data-page-id="reports"] .reports-controls .form-input,
    body.design-beta .page[data-page-id="reports"] .reports-controls .form-select,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .form-input,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-toolbar-card .form-select,
    body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .form-input,
    body.design-beta .page[data-page-id="calendar"] .calendar-toolbar-card .form-select,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .form-input,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-toolbar-card .form-select,
    body.design-beta .page[data-page-id="team"] .team-beta-toolbar .form-input,
    body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .form-input,
    body.design-beta .page[data-page-id="departments"] .departments-beta-toolbar .form-select {
        min-height: 30px;
        padding-inline: 8px;
        font-size: 12px;
    }

    body.design-beta .tabulator .tabulator-footer {
        padding: 4px 6px;
        min-height: 34px;
    }

    body.design-beta .tabulator .tabulator-footer .tabulator-page,
    body.design-beta .tabulator .tabulator-footer .tabulator-footer-contents,
    body.design-beta .tabulator .tabulator-footer .tabulator-paginator {
        font-size: 11px;
        min-height: 28px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-page-header--beta {
        gap: 6px;
        margin-bottom: 6px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-breadcrumb {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-context-bar {
        display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px;
        margin-top: 4px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tabs-shell {
        position: static;
        top: auto;
        margin-bottom: 6px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tabs-body {
        padding: 8px 10px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tabs-mobile-switch {
        display: block;
        margin-bottom: 6px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tabs-mobile-select {
        width: 100%;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-context-chip,
    body.design-beta .page[data-page-id="projects"] .project-detail-context-bar .project-model-pill {
        min-height: 24px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tabs-list {
        display: none;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-toolbar {
        justify-content: flex-start !important;
        margin-bottom: 8px !important;
        padding-inline: 2px;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-scroll {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 8px;
        background: transparent;
        border-radius: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-grid {
        display: flex;
        width: max-content;
        min-width: 0;
        gap: 8px;
        grid-template-columns: none;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-column {
        width: min(252px, 74vw);
        min-width: min(252px, 74vw);
        max-width: min(252px, 74vw);
        flex: 0 0 min(252px, 74vw);
        scroll-snap-align: start;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-card {
        padding: 10px;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-summary-item {
        padding: 8px 10px;
        border-radius: 10px;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-summary-value {
        font-size: 14px;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-section-head {
        padding: 9px 10px;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-section-head .card-title {
        font-size: 16px;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-section-card > .card-body {
        padding: 10px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tab-panel--beta {
        gap: 8px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tab-panel--beta > .card,
    body.design-beta .page[data-page-id="projects"] .project-detail-tab-panel--beta .card,
    body.design-beta .page[data-page-id="projects"] .project-overview-section-card {
        border-radius: 12px;
    }

    body.design-beta .page[data-page-id="projects"] .project-tab-card-header,
    body.design-beta .page[data-page-id="projects"] .project-overview-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="projects"] .project-tab-card-actions {
        width: 100%;
        margin-left: 0;
        gap: 6px;
    }

    body.design-beta .page[data-page-id="projects"] .project-tab-card-actions .btn,
    body.design-beta .page[data-page-id="projects"] .project-overview-section-head .btn {
        width: 100%;
        justify-content: center;
    }

    body.design-beta .page[data-page-id="projects"] .project-overview-beta-grid,
    body.design-beta .page[data-page-id="projects"] .project-overview-beta-main,
    body.design-beta .page[data-page-id="projects"] .project-overview-beta-side {
        gap: 8px;
    }

    body.design-beta .card-header,
    body.design-beta .card-body,
    body.design-beta .card-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions .btn,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions .btn {
        width: 100%;
        min-height: 30px;
        padding-inline: 8px;
        font-size: 11px;
    }

    body.design-beta .page[data-page-id="invoices"] #exportInvoicesPdf,
    body.design-beta .page[data-page-id="invoices"] #exportInvoicesExcel,
    body.design-beta .page[data-page-id="invoices"] #resetInvoicesColumns,
    body.design-beta .page[data-page-id="bills"] #exportBillsPdf,
    body.design-beta .page[data-page-id="bills"] #exportBillsExcel,
    body.design-beta .page[data-page-id="bills"] #resetBillsColumns {
        display: none;
    }

    body.design-beta .page[data-page-id="invoices"] .tabulator .tabulator-cell,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="bills"] .tabulator .tabulator-cell,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse td {
        white-space: normal;
        word-break: break-word;
        line-height: 1.35;
    }

    body.design-beta .page[data-page-id="invoices"] .tabulator-cell strong,
    body.design-beta .page[data-page-id="invoices"] .tabulator-cell a,
    body.design-beta .page[data-page-id="bills"] .tabulator-cell strong,
    body.design-beta .page[data-page-id="bills"] .tabulator-cell a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse {
        margin-top: 6px;
        padding-top: 6px;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse table,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse table {
        border-spacing: 0 4px;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse tr,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse tr {
        grid-template-columns: minmax(74px, 96px) minmax(0, 1fr);
        gap: 6px;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse td,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse td {
        font-size: 12px;
        line-height: 1.3;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse td:first-child,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse td:first-child {
        font-size: 10px;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse .badge,
    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse .tag,
    body.design-beta .page[data-page-id="crm"] .tabulator-responsive-collapse .chip,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse .badge,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse .tag,
    body.design-beta .page[data-page-id="offers"] .tabulator-responsive-collapse .chip,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse .badge,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse .tag,
    body.design-beta .page[data-page-id="invoices"] .tabulator-responsive-collapse .chip,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse .badge,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse .tag,
    body.design-beta .page[data-page-id="bills"] .tabulator-responsive-collapse .chip,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse .badge,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse .tag,
    body.design-beta .page[data-page-id="costs"] .tabulator-responsive-collapse .chip,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse .badge,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse .tag,
    body.design-beta .page[data-page-id="budget"] .tabulator-responsive-collapse .chip {
        min-height: 20px;
        padding: 0 6px;
        border-radius: 7px;
        font-size: 10px;
    }

    body.design-beta .page[data-page-id="offers"] .offers-results-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        gap: 8px;
        padding-bottom: 0;
    }

    body.design-beta .page[data-page-id="offers"] .offers-results-actions > * {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="offers"] #offersTableGroupBy,
    body.design-beta .page[data-page-id="offers"] button[data-action="export-offers"] {
        grid-column: 1 / -1;
    }

    body.design-beta .page[data-page-id="offers"] #offersItemsPerPage,
    body.design-beta .page[data-page-id="offers"] #offersTableGroupBy {
        display: none;
    }

    body.design-beta .page[data-page-id="offers"] #resetOffersColumns {
        display: none;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-range-list,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-range-list > *,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions > * {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions .btn:disabled {
        display: none;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table {
        table-layout: fixed;
        min-width: 100%;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table th:nth-child(1),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table td:nth-child(1),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table th:nth-child(3),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table td:nth-child(3) {
        display: none;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table th:nth-child(2),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table td:nth-child(2) {
        width: auto;
        white-space: normal;
        word-break: break-word;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table th:nth-child(4),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table td:nth-child(4),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table th:nth-child(5),
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-table-frame--workitems .table td:nth-child(5) {
        width: 88px;
        white-space: normal;
    }

    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-header-filter {
        display: none;
    }

    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-col-content {
        padding-bottom: 0;
    }

    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-col[tabulator-field="source"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-cell[tabulator-field="source"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-col[tabulator-field="decision_by_name"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-cell[tabulator-field="decision_by_name"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-col[tabulator-field="decision_at"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-cell[tabulator-field="decision_at"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-col[tabulator-field="bucket"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-cell[tabulator-field="bucket"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-col[tabulator-field="updated_at"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubApprovalsTable .tabulator-cell[tabulator-field="updated_at"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubTimeEntriesTable .tabulator-col[tabulator-field="phase_label"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubTimeEntriesTable .tabulator-cell[tabulator-field="phase_label"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubTimeEntriesTable .tabulator-col[tabulator-field="description"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubTimeEntriesTable .tabulator-cell[tabulator-field="description"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubAbsencesTable .tabulator-col[tabulator-field="type"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubAbsencesTable .tabulator-cell[tabulator-field="type"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubAbsencesTable .tabulator-col[tabulator-field="notes"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubAbsencesTable .tabulator-cell[tabulator-field="notes"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubHomeOfficeTable .tabulator-col[tabulator-field="notes"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubHomeOfficeTable .tabulator-cell[tabulator-field="notes"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubZeitkontoTable .tabulator-col[tabulator-field="start_time"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubZeitkontoTable .tabulator-cell[tabulator-field="start_time"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubZeitkontoTable .tabulator-col[tabulator-field="reason"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubZeitkontoTable .tabulator-cell[tabulator-field="reason"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsTable .tabulator-col[tabulator-field="month_key"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsTable .tabulator-cell[tabulator-field="month_key"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsTable .tabulator-col[tabulator-field="reason"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsTable .tabulator-cell[tabulator-field="reason"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsTable .tabulator-col[tabulator-field="updated_at"],
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsTable .tabulator-cell[tabulator-field="updated_at"] {
        display: none !important;
    }

    body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta .crm-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta .crm-toolbar-actions .btn {
        width: 100%;
    }

    body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions,
    body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions--primary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions > *,
    body.design-beta .page[data-page-id="costs"] .costs-toolbar-actions--primary > * {
        min-width: 0;
        width: 100%;
    }

    body.design-beta .page[data-page-id="costs"] [data-action="reset-columns"] {
        display: none;
    }

    body.design-beta .page[data-page-id="costs"] .costs-filter-grid--beta,
    body.design-beta .page[data-page-id="budget"] .budget-filter-grid--beta-compact,
    body.design-beta .page[data-page-id="budget"] .budget-filter-grid--advanced {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="budget"] .budget-toolbar-controls,
    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--toolbar,
    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--primary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="budget"] .budget-toolbar-controls > *,
    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--toolbar > *,
    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--primary > * {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="budget"] .budget-multi-select {
        min-height: 6rem;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-legend-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-legend-item {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-people-day {
        --year-sticky-width: 92px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-header .day-header-sticky,
    body.design-beta .page[data-page-id="calendar"] .calendar-day-row .day-row-sticky {
        padding-inline: 6px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-row .day-row-sticky {
        gap: 4px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-row .day-row-sticky .avatar,
    body.design-beta .page[data-page-id="calendar"] .calendar-day-row .day-row-notes {
        display: none;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-row .day-row-sticky .name,
    body.design-beta .page[data-page-id="calendar"] .calendar-day-header .day-label,
    body.design-beta .page[data-page-id="calendar"] .calendar-day-header .day-hour {
        font-size: 10px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-block {
        top: 3px;
        height: 20px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-block-code {
        min-width: 16px;
        padding: 0 3px;
        font-size: 9px;
    }

    body.design-beta .page[data-page-id="calendar"] .calendar-day-block-text {
        font-size: 10px;
    }

    body.design-beta .page[data-page-id="budget"] .budget-filter-grid--advanced .budget-inline-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="budget"] .budget-saved-view-row,
    body.design-beta .page[data-page-id="budget"] .budget-threshold-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.design-beta .page[data-page-id="costs"] .tabulator,
    body.design-beta .page[data-page-id="budget"] .tabulator {
        min-width: 100%;
    }

    body.design-beta .page[data-page-id="crm"] .crm-results-card--beta .crm-table-frame {
        overflow-x: hidden;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator {
        width: 100% !important;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-col.tabulator-responsive-collapse-toggle {
        width: 34px !important;
        min-width: 34px !important;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-col[data-field="name"],
    body.design-beta .page[data-page-id="crm"] .tabulator-cell[tabulator-field="name"] {
        min-width: 0 !important;
        width: auto !important;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator-col[data-field="status"],
    body.design-beta .page[data-page-id="crm"] .tabulator-cell[tabulator-field="status"] {
        width: 104px !important;
        min-width: 104px !important;
    }

    body.design-beta .page[data-page-id="crm"] .tabulator .tabulator-cell {
        padding-inline: 8px;
    }

    body.design-beta .project-detail-tabs-list,
    body.design-beta .project-workspace-view-list,
    body.design-beta .reports-tabs,
    body.design-beta .time-tracking-tabs,
    body.design-beta .crm-products-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    body.design-beta.pwa-standalone .main-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }

    body.design-beta.pwa-standalone .page-container {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    body.design-beta .page[data-page-id="projects"] .project-detail-page-header--beta {
        gap: 4px;
        margin-bottom: 4px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-breadcrumb {
        font-size: 12px;
        margin-bottom: 2px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tabs-list {
        gap: 2px;
    }

    body.design-beta .page[data-page-id="projects"] .project-detail-tab-button {
        min-height: 28px;
        padding: 0 7px;
        font-size: 11px;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-toolbar label {
        font-size: 12px !important;
    }

    body.design-beta .page[data-page-id="projects"] #plannerTab .kanban-column {
        width: min(238px, 72vw);
        min-width: min(238px, 72vw);
        max-width: min(238px, 72vw);
        flex-basis: min(238px, 72vw);
    }

    body.design-beta .page[data-page-id="budget"] .budget-toolbar-controls {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="crm"] #clientTypeFilters {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="crm"] .crm-beta-toolbar-actions,
    body.design-beta .page[data-page-id="crm"] .crm-toolbar-row--beta .crm-toolbar-actions,
    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="invoices"] .billing-toolbar-actions--primary,
    body.design-beta .page[data-page-id="bills"] .billing-toolbar-actions--primary {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-range-list,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-quick-actions,
    body.design-beta .page[data-page-id="calendar"] .calendar-legend-list {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="operations-hub"] #operationsHubWorkItemsMobileList,
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubAbsencesMobileList,
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubHomeOfficeMobileList,
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubZeitkontoMobileList,
    body.design-beta .page[data-page-id="operations-hub"] #operationsHubPayoutsMobileList {
        display: grid;
        margin-top: 4px;
    }

    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--tasks .operations-hub-table-frame--workitems,
    body.design-beta .page[data-page-id="operations-hub"] .operations-hub-section-card--secondary .operations-hub-table-frame--secondary {
        display: none;
    }

    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--primary {
        grid-template-columns: 1fr 1fr;
    }

    body.design-beta .page[data-page-id="budget"] .budget-inline-actions--primary > :last-child {
        grid-column: 1 / -1;
    }

    body.design-beta .page[data-page-id="budget"] .budget-filter-grid--advanced .budget-inline-actions {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="budget"] .budget-multi-select {
        min-height: 4.75rem;
    }

    body.design-beta .page[data-page-id="time-tracking"] .tabulator .tabulator-footer,
    body.design-beta .page[data-page-id="costs"] .tabulator .tabulator-footer,
    body.design-beta .page[data-page-id="budget"] .tabulator .tabulator-footer,
    body.design-beta .page[data-page-id="invoices"] .tabulator .tabulator-footer,
    body.design-beta .page[data-page-id="bills"] .tabulator .tabulator-footer,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-footer {
        padding: 8px 10px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .tabulator .tabulator-footer-contents,
    body.design-beta .page[data-page-id="costs"] .tabulator .tabulator-footer-contents,
    body.design-beta .page[data-page-id="budget"] .tabulator .tabulator-footer-contents,
    body.design-beta .page[data-page-id="invoices"] .tabulator .tabulator-footer-contents,
    body.design-beta .page[data-page-id="bills"] .tabulator .tabulator-footer-contents,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-footer-contents {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    body.design-beta .page[data-page-id="time-tracking"] .tabulator .tabulator-footer-contents > *,
    body.design-beta .page[data-page-id="costs"] .tabulator .tabulator-footer-contents > *,
    body.design-beta .page[data-page-id="budget"] .tabulator .tabulator-footer-contents > *,
    body.design-beta .page[data-page-id="invoices"] .tabulator .tabulator-footer-contents > *,
    body.design-beta .page[data-page-id="bills"] .tabulator .tabulator-footer-contents > *,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-footer-contents > * {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="time-tracking"] .tabulator .tabulator-paginator,
    body.design-beta .page[data-page-id="costs"] .tabulator .tabulator-paginator,
    body.design-beta .page[data-page-id="budget"] .tabulator .tabulator-paginator,
    body.design-beta .page[data-page-id="invoices"] .tabulator .tabulator-paginator,
    body.design-beta .page[data-page-id="bills"] .tabulator .tabulator-paginator,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-paginator {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
        margin-left: auto;
    }

    body.design-beta .page[data-page-id="time-tracking"] .tabulator .tabulator-page,
    body.design-beta .page[data-page-id="costs"] .tabulator .tabulator-page,
    body.design-beta .page[data-page-id="budget"] .tabulator .tabulator-page,
    body.design-beta .page[data-page-id="invoices"] .tabulator .tabulator-page,
    body.design-beta .page[data-page-id="bills"] .tabulator .tabulator-page,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-page {
        min-width: 28px;
        height: 28px;
        line-height: 26px;
        padding: 0 6px;
    }

    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-paginator label,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-page-size,
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-page[data-page="first"],
    body.design-beta .page[data-page-id="operations-hub"] .tabulator .tabulator-page[data-page="last"] {
        display: none;
    }
}

/* Offers beta toolbar refinements */
body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

body.design-beta .page[data-page-id="offers"] .offers-results-actions {
    justify-content: flex-start;
    width: 100%;
}

body.design-beta .page[data-page-id="offers"] .offers-results-actions > * {
    flex: 0 0 auto;
}

body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .offers-filters-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .offers-filters-grid > * {
    min-width: 0;
}

body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .offers-filter-span-2 {
    grid-column: span 2;
}

body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top .btn-primary {
    min-width: 160px;
}

@media (max-width: 900px) {
    body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="offers"] .offers-beta-toolbar-top .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    body.design-beta .page[data-page-id="offers"] .offers-results-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
    }

    body.design-beta .page[data-page-id="offers"] .offers-results-actions > * {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="offers"] button[data-action="export-offers"] {
        grid-column: auto;
    }

    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .offers-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    body.design-beta .page[data-page-id="offers"] .offers-results-actions,
    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .offers-filters-grid {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="offers"] .offers-section-card--toolbar .offers-filter-span-2 {
        grid-column: span 1;
    }
}

@media (max-width: 1024px) {
    body.design-beta .mobile-menu-toggle {
        z-index: 181;
    }
}

@media (max-width: 768px) {
    body.design-beta .mobile-card-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
    }

    body.design-beta .mobile-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.design-beta .mobile-card-table tbody {
        display: block;
    }

    body.design-beta .mobile-card-table tbody tr {
        display: grid;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid var(--beta-border);
        background: #fff;
    }

    body.design-beta .mobile-card-table tbody tr:last-child {
        border-bottom: 0;
    }

    body.design-beta .mobile-card-table tbody td {
        display: grid;
        gap: 4px;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
        text-align: left !important;
    }

    body.design-beta .mobile-card-table tbody td::before {
        content: attr(data-label);
        color: var(--beta-text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.design-beta .mobile-card-table tbody td > * {
        min-width: 0;
    }

    body.design-beta .mobile-card-table tbody td[colspan] {
        display: block;
    }

    body.design-beta .mobile-card-table tbody td[colspan]::before,
    body.design-beta .mobile-card-table tbody td.mobile-card-wide::before {
        display: none;
    }

    body.design-beta .mobile-card-table tbody td.mobile-card-wide {
        display: block;
        padding-top: 2px;
    }

    body.design-beta .mobile-card-table tbody td.mobile-card-bool {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    body.design-beta .mobile-card-table tbody td.mobile-card-actions {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.design-beta .mobile-card-table tbody td.mobile-card-actions::before {
        width: 100%;
        max-width: none;
        flex: 0 0 100%;
    }

    body.design-beta .page[data-page-id="newsletter"] .newsletter-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.design-beta .page[data-page-id="newsletter"] .newsletter-tabs::-webkit-scrollbar {
        display: none;
    }

    body.design-beta .page[data-page-id="newsletter"] .newsletter-tab-button {
        white-space: nowrap;
    }

    body.design-beta .page[data-page-id="newsletter"] .newsletter-table-frame {
        overflow: visible;
    }

    body.design-beta .page[data-page-id="newsletter"] .newsletter-table-actions,
    body.design-beta .page[data-page-id="project-planner"] .project-planner-row-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-beta-grid,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-main-stack,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-side-stack,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .card-body,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .table-container {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .card-body {
        padding: 12px;
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-matrix-card .table-container {
        margin: 0;
        overflow: visible;
        border: 0;
    }

    body.design-beta .page[data-page-id="admin-access"] .admin-access-assignments-card,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-assignments-card .card-body,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-user-role-layout,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-user-role-layout .form-group,
    body.design-beta .page[data-page-id="admin-access"] #acUserSelect,
    body.design-beta .page[data-page-id="admin-access"] #acRoleCheckboxes,
    body.design-beta .page[data-page-id="admin-access"] .admin-access-user-actions {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="settings-profile"] .settings-container--beta,
    body.design-beta .page[data-page-id="settings-profile"] .settings-container--beta > .card,
    body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard,
    body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan,
    body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan > div {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="settings-profile"] #profileWorkTimeCard .stats-container.compact {
        grid-template-columns: 1fr;
    }

    body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan input,
    body.design-beta .page[data-page-id="settings-profile"] #profileWeekdayPlan select {
        width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="settings-profile"] .settings-profile-teams-recipient,
    body.design-beta .page[data-page-id="settings-profile"] .settings-profile-teams-recipient .form-control,
    body.design-beta .page[data-page-id="settings-profile"] .settings-profile-teams-recipient .form-select,
    body.design-beta .page[data-page-id="settings-profile"] #teamsDelegatedTestRecipient {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.design-beta .page[data-page-id="settings-company"] .settings-content--beta,
    body.design-beta .page[data-page-id="settings-company"] .settings-content--beta > .card,
    body.design-beta .page[data-page-id="settings-company"] .settings-company-config-card--beta,
    body.design-beta .page[data-page-id="settings-company"] #companyAuditCard,
    body.design-beta .page[data-page-id="settings-company"] #companyAuditCard #coAuditFilterForm,
    body.design-beta .page[data-page-id="settings-company"] #companyAuditCard #coAuditFilterForm .form-grid-4 {
        min-width: 0;
    }

    body.design-beta .page[data-page-id="settings-company"] #companyAuditCard #coAuditFilterForm .form-grid-4,
    body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-newsletter-form .form-grid,
    body.design-beta .page[data-page-id="settings-company"] #section-newsletter .settings-company-webhook-form {
        grid-template-columns: 1fr !important;
    }

    body.design-beta .page[data-page-id="settings-company"] .section-header,
    body.design-beta .page[data-page-id="settings-company"] .card-header-actions,
    body.design-beta .page[data-page-id="settings-company"] .logo-actions,
    body.design-beta .page[data-page-id="settings-company"] .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.design-beta .page[data-page-id="projects"] .projects-table-container,
    body.design-beta .page[data-page-id="team"] .team-table-container,
    body.design-beta .page[data-page-id="reimbursements"] .reimbursements-register-frame,
    body.design-beta .page[data-page-id="departments"] .table-container,
    body.design-beta .page[data-page-id="hr-management"] .hr-management-table-container,
    body.design-beta .page[data-page-id="project-planner"] .project-planner-table-wrap {
        overflow: visible;
    }

    body.design-beta .page[data-page-id="projects"] .project-quality-cell::before {
        align-self: center;
    }
}