/* Consistent borders for list, report and expense-detail grids. */
@media (min-width: 701px) {
    .client-list .table-wrap > table,
    .report-results .table-wrap > table {
        border: 1px solid #cfd8e6 !important;
        border-collapse: collapse !important;
    }

    .client-list .table-wrap > table th,
    .client-list .table-wrap > table td,
    .report-results .table-wrap > table th,
    .report-results .table-wrap > table td {
        border: 1px solid #cfd8e6 !important;
    }

    .client-list .table-wrap > table th,
    .report-results .table-wrap > table th {
        padding: 12px;
        background: #f8fbff;
    }

    /* Expense Details: wrapper provides the outer border; each cell draws one separator. */
    .expense-lines-card .table-wrap {
        border: 1px solid #cfd8e6 !important;
        border-radius: 8px;
        overflow-x: auto;
    }

    .expense-lines-card .table-wrap .expense-lines-table {
        border: 0 !important;
        box-shadow: none !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .expense-lines-card .expense-lines-table th,
    .expense-lines-card .expense-lines-table td {
        border: 0 !important;
        border-right: 1px solid #cfd8e6 !important;
        border-bottom: 1px solid #cfd8e6 !important;
    }

    .expense-lines-card .expense-lines-table th:last-child,
    .expense-lines-card .expense-lines-table td:last-child {
        border-right: 0 !important;
    }

    .expense-lines-card .expense-lines-table tfoot tr:last-child th,
    .expense-lines-card .expense-lines-table tfoot tr:last-child td {
        border-bottom: 0 !important;
    }
}

/* Use a consistent, centered heading alignment for every application grid. */
table thead th {
    text-align: center !important;
}

/* Keep master forms as compact as the Add Expense form. */
.client-form-card .form-grid {
    row-gap: 6px;
}
.client-form-card .field {
    margin-top: 7px;
    margin-bottom: 7px;
}

/* Tighter vertical rhythm between master-form rows. */
.client-form-card .form-grid {
    row-gap: 2px !important;
}
.client-form-card .field {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Use the same comfortable compact spacing in Report Filters. */
.report-filter .form-grid {
    row-gap: 2px !important;
}
.report-filter .field {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Navigation: icons are reserved for the four top-level menu headings. */
.nav-group-items .nav-icon {
    display: none !important;
}
.nav-group-items .nav-link {
    color: #a7f3d0 !important;
    padding-left: 20px;
    font-size: 13px;
}
.nav-group-items .nav-link:hover,
.nav-group-items .nav-link.active {
    color: #ffffff !important;
}

/* Required field markers. */
.required-mark,
.field b {
    color: #dc2626 !important;
}

/* Report reset action. */
#resetFilters {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}
#resetFilters:hover {
    border-color: #fdba74;
    background: #ffedd5;
    color: #9a3412;
}

/* Grid search and paging. */
.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 10px;
}
.grid-page-size,
.grid-search {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #486057;
    font-size: 13px;
}
.grid-page-size select {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 36px;
    padding: 6px 5px;
    border: 1px solid #cfe0d6;
    border-radius: 8px;
    background: #fcfffd;
    color: #263238;
    outline: 0;
}
.grid-search {
    justify-content: flex-end;
    margin: 0;
}
.grid-search input {
    width: min(100%, 260px);
    height: 36px;
    padding: 8px 12px;
    border: 1px solid #cfe0d6;
    border-radius: 9px;
    background: #fcfffd;
    color: #263238;
    outline: 0;
}
.grid-search input:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px #10b9811a;
}
.grid-page-size select:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px #10b9811a;
}
.grid-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 13px 0 0;
    color: #486057;
    font-size: 13px;
}
.grid-page-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.grid-page-button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #176b57;
    font: inherit;
    cursor: pointer;
}
.grid-page-button:hover:not(:disabled),
.grid-page-button.active {
    border-color: #a9dfca;
    background: #e7f7ef;
    color: #057a5c;
}
.grid-page-button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}
.grid-page-dots {
    padding: 0 4px;
    color: #718278;
}

.global-error-message {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 15px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff1f2;
    color: #b91c1c;
    box-shadow: 0 12px 28px #7f1d1d24;
    font-weight: 600;
}
.logout-form {
    margin: 0;
}

/* Mobile: keep complex report and expense grids readable with a simple horizontal scroll. */
@media (max-width: 700px) {
    .global-error-message {
        right: 14px;
        bottom: 14px;
        max-width: calc(100vw - 28px);
    }
    .grid-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }
    .grid-page-size,
    .grid-search {
        justify-content: space-between;
    }
    .grid-search input {
        width: 64%;
    }
    .grid-pagination {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
    .grid-page-nav {
        flex-wrap: wrap;
    }
    .client-list .table-wrap,
    .expense-lines-card .table-wrap,
    .report-results .table-wrap,
    .dashboard-recent-grid .table-wrap {
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #cfd8e6;
        border-radius: 10px;
        background: #fff;
    }

    .client-list .table-wrap > table,
    .expense-lines-card .table-wrap > table,
    .report-results .table-wrap > table,
    .dashboard-recent-grid .table-wrap > table {
        display: table !important;
        min-width: 720px !important;
        width: 100%;
        border-collapse: collapse !important;
    }

    .client-list .table-wrap thead,
    .expense-lines-card .table-wrap thead,
    .report-results .table-wrap thead,
    .dashboard-recent-grid .table-wrap thead {
        display: table-header-group !important;
    }
    .client-list .table-wrap tbody,
    .expense-lines-card .table-wrap tbody,
    .report-results .table-wrap tbody,
    .dashboard-recent-grid .table-wrap tbody {
        display: table-row-group !important;
    }
    .client-list .table-wrap tfoot,
    .expense-lines-card .table-wrap tfoot,
    .report-results .table-wrap tfoot {
        display: table-footer-group !important;
    }
    .client-list .table-wrap tr,
    .expense-lines-card .table-wrap tr,
    .report-results .table-wrap tr,
    .dashboard-recent-grid .table-wrap tr {
        display: table-row !important;
        padding: 0 !important;
    }
    .client-list .table-wrap th,
    .client-list .table-wrap td,
    .expense-lines-card .table-wrap th,
    .expense-lines-card .table-wrap td,
    .report-results .table-wrap th,
    .report-results .table-wrap td,
    .dashboard-recent-grid .table-wrap th,
    .dashboard-recent-grid .table-wrap td {
        display: table-cell !important;
        padding: 10px 9px !important;
        white-space: nowrap;
        border: 1px solid #d8e1eb !important;
        font-size: 12px;
    }
    .client-list .table-wrap td:before,
    .expense-lines-card .table-wrap td:before,
    .report-results .table-wrap td:before,
    .dashboard-recent-grid .table-wrap td:before {
        display: none !important;
        content: none !important;
    }
    .expense-lines-card .grid-actions {
        display: table-cell !important;
        text-align: center !important;
    }

    /* Give long mobile headings their own readable column space. */
    .client-list:not(.expense-lines-card) .table-wrap > table {
        min-width: 680px !important;
    }
    .report-results .table-wrap > table {
        min-width: 860px !important;
    }
    .dashboard-recent-grid .table-wrap > table {
        min-width: 650px !important;
    }
    .expense-lines-card .table-wrap > table {
        min-width: 980px !important;
    }
    .expense-lines-card .table-wrap th:nth-child(2) {
        min-width: 150px;
    }
    .expense-lines-card .table-wrap th:nth-child(7),
    .expense-lines-card .table-wrap th:nth-child(8) {
        min-width: 105px;
    }
    .expense-lines-card .table-wrap th:nth-child(9) {
        min-width: 130px;
    }
}

/* Rose Sky compact data-grid system.  Standard list grids use compact card rows;
   wide expense/detail grids retain a conventional table for easy scanning. */
@media (min-width: 701px) {
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap,
    .report-results .table-wrap {
        padding: 7px 10px;
        overflow: hidden;
        border: 1px solid #cfe0f2;
        border-radius: 14px;
        background: #eef7ff;
        box-shadow: inset 0 1px 0 #ffffffaa;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table,
    .report-results .table-wrap > table {
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 5px !important;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        thead
        th,
    .report-results .table-wrap > table thead th {
        padding: 7px 12px 8px !important;
        border: 0 !important;
        background: transparent !important;
        color: #304b70 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.025em;
        text-transform: uppercase;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        tbody
        td,
    .report-results .table-wrap > table tbody td {
        padding: 7px 12px !important;
        border-top: 1px solid #e3ebf4 !important;
        border-bottom: 1px solid #e3ebf4 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: #fff !important;
        color: #3e5271 !important;
        vertical-align: middle;
        white-space: nowrap;
        transition:
            background 0.16s ease,
            box-shadow 0.16s ease;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        tbody
        td:first-child,
    .report-results .table-wrap > table tbody td:first-child {
        padding-left: 16px !important;
        border-left: 1px solid #e3ebf4 !important;
        border-radius: 10px 0 0 10px;
        box-shadow: inset 4px 0 0 #fb7185;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        tbody
        td:last-child,
    .report-results .table-wrap > table tbody td:last-child {
        padding-right: 14px !important;
        border-right: 1px solid #e3ebf4 !important;
        border-radius: 0 10px 10px 0;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        tbody
        tr:hover
        td,
    .report-results .table-wrap > table tbody tr:hover td {
        background: #fff6f8 !important;
        border-color: #fbd4dc !important;
    }

    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        tbody
        td
        strong,
    .report-results .table-wrap > table tbody td strong {
        color: #243b53 !important;
    }

    .expense-lines-card .table-wrap,
    .project-expense-details .table-wrap {
        border-color: #cfe0f2 !important;
        border-radius: 12px !important;
        background: #eef7ff !important;
    }

    .expense-lines-card .expense-lines-table th,
    .project-expense-details .table-wrap th {
        padding: 7px 8px !important;
        border-color: #d7e5f1 !important;
        background: #e7f2ff !important;
        color: #304b70 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase;
    }

    .expense-lines-card .expense-lines-table td,
    .project-expense-details .table-wrap td {
        padding: 7px 8px !important;
        border-color: #dce7f1 !important;
        background: #fff !important;
        color: #344c67 !important;
    }
}

.client-list .grid-toolbar,
.report-results .grid-toolbar {
    margin: 0 0 10px;
    padding: 9px 11px;
    border: 1px solid #d7e5f1;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff, #f7fbff);
    box-shadow: 0 5px 14px #243b5308;
}
.client-list .grid-page-size,
.client-list .grid-search,
.client-list .grid-pagination,
.report-results .grid-page-size,
.report-results .grid-search,
.report-results .grid-pagination {
    color: #4f6581 !important;
}
.client-list .grid-page-size select,
.client-list .grid-search input,
.report-results .grid-page-size select,
.report-results .grid-search input {
    border-color: #cddded !important;
    background: #fff !important;
    color: #243b53 !important;
}
.client-list .grid-search input:focus,
.client-list .grid-page-size select:focus,
.report-results .grid-search input:focus,
.report-results .grid-page-size select:focus {
    border-color: #087ec7 !important;
    box-shadow: 0 0 0 3px #087ec71c !important;
}
.client-list .grid-page-button,
.report-results .grid-page-button {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #435e81 !important;
}
.client-list .grid-page-button:hover:not(:disabled),
.client-list .grid-page-button.active,
.report-results .grid-page-button:hover:not(:disabled),
.report-results .grid-page-button.active {
    border-color: #fbc0ca !important;
    background: #fff0f3 !important;
    color: #df3c55 !important;
}
.user-actions {
    gap: 7px !important;
}
.user-actions .edit-link,
.delete-link {
    padding: 4px 9px !important;
    border-radius: 8px !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;
}
.user-actions .edit-link {
    background: #f1edff !important;
    color: #6947d4 !important;
}
.delete-link {
    background: #fff0f2 !important;
    color: #df3c55 !important;
}
.user-actions .edit-link:hover,
.delete-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px #243b5318;
}
.status {
    padding: 4px 10px !important;
    font-weight: 700 !important;
}
.status.active {
    background: #e1f8f0 !important;
    color: #087d61 !important;
}
.status.inactive {
    background: #fff0f2 !important;
    color: #df3c55 !important;
}

@media (max-width: 700px) {
    .client-list .grid-toolbar,
    .report-results .grid-toolbar {
        padding: 9px 10px;
        border-radius: 12px;
    }
    .client-list .grid-search input,
    .report-results .grid-search input {
        width: 70% !important;
    }
    .client-list .grid-pagination,
    .report-results .grid-pagination {
        margin: 10px 1px 0 !important;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap,
    .report-results .table-wrap {
        padding: 5px 7px !important;
        border-color: #cfe0f2 !important;
        border-radius: 12px !important;
        background: #eef7ff !important;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table,
    .report-results .table-wrap > table {
        min-width: 820px !important;
        border-collapse: separate !important;
        border-spacing: 0 5px !important;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        th,
    .report-results .table-wrap > table th {
        padding: 7px 10px !important;
        border: 0 !important;
        background: transparent !important;
        color: #304b70 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        text-transform: uppercase;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        td,
    .report-results .table-wrap > table td {
        padding: 7px 10px !important;
        border-top: 1px solid #e3ebf4 !important;
        border-bottom: 1px solid #e3ebf4 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: #fff !important;
        color: #3e5271 !important;
        white-space: nowrap;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        td:first-child,
    .report-results .table-wrap > table td:first-child {
        padding-left: 14px !important;
        border-left: 1px solid #e3ebf4 !important;
        border-radius: 9px 0 0 9px;
        box-shadow: inset 4px 0 0 #fb7185;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        td:last-child,
    .report-results .table-wrap > table td:last-child {
        border-right: 1px solid #e3ebf4 !important;
        border-radius: 0 9px 9px 0;
    }
    .expense-lines-card .table-wrap,
    .project-expense-details .table-wrap {
        border-color: #cfe0f2 !important;
        background: #eef7ff !important;
    }
    .expense-lines-card .table-wrap th,
    .project-expense-details .table-wrap th {
        background: #e7f2ff !important;
        border-color: #d7e5f1 !important;
        color: #304b70 !important;
    }
    .expense-lines-card .table-wrap td,
    .project-expense-details .table-wrap td {
        background: #fff !important;
        border-color: #dce7f1 !important;
        color: #344c67 !important;
    }
}

html[data-theme="dark"] .client-list .grid-toolbar,
html[data-theme="dark"] .report-results .grid-toolbar {
    border-color: #35506a !important;
    background: linear-gradient(135deg, #17283a, #1a3044) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .client-list .grid-page-size,
html[data-theme="dark"] .client-list .grid-search,
html[data-theme="dark"] .client-list .grid-pagination,
html[data-theme="dark"] .report-results .grid-page-size,
html[data-theme="dark"] .report-results .grid-search,
html[data-theme="dark"] .report-results .grid-pagination {
    color: #b9cde1 !important;
}
html[data-theme="dark"] .client-list .grid-page-size select,
html[data-theme="dark"] .client-list .grid-search input,
html[data-theme="dark"] .report-results .grid-page-size select,
html[data-theme="dark"] .report-results .grid-search input {
    background: #101d2b !important;
    border-color: #38516a !important;
    color: #edf5ff !important;
}
html[data-theme="dark"] .client-list .grid-page-button,
html[data-theme="dark"] .report-results .grid-page-button {
    color: #9bdcff !important;
}
html[data-theme="dark"] .client-list .grid-page-button:hover:not(:disabled),
html[data-theme="dark"] .client-list .grid-page-button.active,
html[data-theme="dark"] .report-results .grid-page-button:hover:not(:disabled),
html[data-theme="dark"] .report-results .grid-page-button.active {
    background: #4a293d !important;
    border-color: #b95776 !important;
    color: #fff !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap,
html[data-theme="dark"] .report-results .table-wrap,
html[data-theme="dark"] .expense-lines-card .table-wrap,
html[data-theme="dark"] .project-expense-details .table-wrap {
    background: #13263a !important;
    border-color: #314e68 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    th,
html[data-theme="dark"] .report-results .table-wrap th,
html[data-theme="dark"] .expense-lines-card .table-wrap th,
html[data-theme="dark"] .project-expense-details .table-wrap th {
    background: #1d334a !important;
    border-color: #314e68 !important;
    color: #cbdced !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    td,
html[data-theme="dark"] .report-results .table-wrap td,
html[data-theme="dark"] .expense-lines-card .table-wrap td,
html[data-theme="dark"] .project-expense-details .table-wrap td {
    background: #162b40 !important;
    border-color: #2d4861 !important;
    color: #dce8f5 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    td:first-child,
html[data-theme="dark"] .report-results .table-wrap td:first-child {
    box-shadow: inset 4px 0 0 #fb7185;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    td
    strong,
html[data-theme="dark"] .report-results .table-wrap td strong {
    color: #f2f7fd !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    tbody
    tr:hover
    td,
html[data-theme="dark"] .report-results .table-wrap tbody tr:hover td {
    background: #203950 !important;
    border-color: #47627c !important;
}
html[data-theme="dark"] .user-actions .edit-link {
    background: #302a50 !important;
    color: #c4b5fd !important;
}
html[data-theme="dark"] .delete-link {
    background: #4a2939 !important;
    color: #ffbec9 !important;
}
html[data-theme="dark"] .status.active {
    background: #153d3d !important;
    color: #7ae5cb !important;
}
html[data-theme="dark"] .status.inactive {
    background: #492a38 !important;
    color: #ffb7c4 !important;
}

/* Sample-matched status and action icons. */
.status.active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.status.active:before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px #10b98118;
}
.user-actions .edit-link,
.user-actions .delete-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.user-actions .edit-link:before,
.user-actions .delete-link:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.user-actions .edit-link:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm17.71-10.21a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm17.71-10.21a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/%3E%3C/svg%3E");
}
.user-actions .delete-link:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12ZM8 9h8v10H8V9Zm7.5-5-1-1h-5l-1 1H5v2h14V4h-3.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12ZM8 9h8v10H8V9Zm7.5-5-1-1h-5l-1 1H5v2h14V4h-3.5Z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .status.active:before {
    background: #34d399;
    box-shadow: 0 0 0 3px #34d3991c;
}

/* Semantic alignment is added by grid-search.js for every static application grid. */
table .grid-align-left {
    text-align: left !important;
}
table .grid-align-right {
    text-align: right !important;
}
table .grid-align-center {
    text-align: center !important;
}
td.grid-align-center .user-actions {
    justify-content: center !important;
}
td.grid-align-center .status {
    justify-content: center !important;
}

/* Exact compact card-grid composition from the approved preview. */
.client-list:not(.expense-lines-card):not(.project-expense-details),
.report-results {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #cfe0f2 !important;
    border-radius: 14px !important;
    background: #eef7ff !important;
    box-shadow: 0 7px 18px #243b5310 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-toolbar,
.report-results .grid-toolbar {
    margin: 0 !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #cfe0f2 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #fff, #fbfdff) !important;
    box-shadow: none !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details) .table-wrap,
.report-results .table-wrap {
    margin: 0 !important;
    padding: 6px 16px !important;
    overflow-x: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #eef7ff !important;
    box-shadow: none !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table,
.report-results .table-wrap > table {
    border-spacing: 0 5px !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    thead
    th,
.report-results .table-wrap > table thead th {
    padding: 7px 12px !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td,
.report-results .table-wrap > table tbody td {
    padding: 8px 12px !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-pagination,
.report-results .grid-pagination {
    margin: 0 !important;
    padding: 14px 18px !important;
    border-top: 1px solid #cfe0f2 !important;
    background: #eef7ff !important;
}
@media (max-width: 700px) {
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .grid-toolbar,
    .report-results .grid-toolbar {
        padding: 11px 12px !important;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap,
    .report-results .table-wrap {
        padding: 5px 8px !important;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .grid-pagination,
    .report-results .grid-pagination {
        padding: 11px 12px !important;
    }
    .client-list:not(.expense-lines-card):not(.project-expense-details)
        .table-wrap
        > table
        tbody
        td,
    .report-results .table-wrap > table tbody td {
        padding: 8px 10px !important;
    }
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details),
html[data-theme="dark"] .report-results {
    background: #13263a !important;
    border-color: #314e68 !important;
    box-shadow: none !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-toolbar,
html[data-theme="dark"] .report-results .grid-toolbar {
    border-color: #314e68 !important;
    background: #172b40 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap,
html[data-theme="dark"] .report-results .table-wrap,
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-pagination,
html[data-theme="dark"] .report-results .grid-pagination {
    background: #13263a !important;
    border-color: #314e68 !important;
}

/* Square grid surfaces; coral is reserved for the left row accent only. */
.client-list:not(.expense-lines-card):not(.project-expense-details),
.report-results,
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-toolbar,
.report-results .grid-toolbar,
.client-list:not(.expense-lines-card):not(.project-expense-details) .table-wrap,
.report-results .table-wrap {
    border-radius: 0 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child,
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:last-child,
.report-results .table-wrap > table tbody td:first-child,
.report-results .table-wrap > table tbody td:last-child {
    border-radius: 0 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child,
.report-results .table-wrap > table tbody td:first-child {
    box-shadow: inset 4px 0 0 #fb7185 !important;
}

/* Subtle row curves with the short rounded coral marker from the approved design. */
.client-list:not(.expense-lines-card):not(.project-expense-details),
.report-results {
    border-radius: 10px !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-toolbar,
.report-results .grid-toolbar {
    border-radius: 10px 10px 0 0 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details) .table-wrap,
.report-results .table-wrap {
    border-radius: 0 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child,
.report-results .table-wrap > table tbody td:first-child {
    position: relative;
    padding-left: 22px !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child:before,
.report-results .table-wrap > table tbody td:first-child:before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 7px;
    top: 7px;
    bottom: 7px;
    width: 4px;
    border-radius: 99px;
    background: #fb7185;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:last-child,
.report-results .table-wrap > table tbody td:last-child {
    border-radius: 0 8px 8px 0 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-pagination,
.report-results .grid-pagination {
    border-radius: 0 0 10px 10px !important;
}

/* Clear action emphasis and a visibly different Delete hover state. */
.user-actions .edit-link,
.user-actions .delete-link {
    font-weight: 600 !important;
}
.user-actions .edit-link:hover {
    background: #e4ddff !important;
    color: #5937c4 !important;
}
.user-actions .delete-link {
    background: #ffe0e6 !important;
    color: #cf3150 !important;
}
.user-actions .delete-link:hover {
    background: #e54862 !important;
    color: #fff !important;
    box-shadow: 0 5px 12px #e5486233 !important;
}
html[data-theme="dark"] .user-actions .delete-link {
    background: #552d3d !important;
    color: #ffc1cc !important;
}
html[data-theme="dark"] .user-actions .delete-link:hover {
    background: #df3c55 !important;
    color: #fff !important;
}

/* Dark-mode-only grid contrast refinement. */
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details),
html[data-theme="dark"] .report-results {
    background: #11243a !important;
    border-color: #36536f !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-toolbar,
html[data-theme="dark"] .report-results .grid-toolbar {
    background: #152b43 !important;
    border-bottom-color: #36536f !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap,
html[data-theme="dark"] .report-results .table-wrap,
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .grid-pagination,
html[data-theme="dark"] .report-results .grid-pagination {
    background: #11243a !important;
    border-color: #36536f !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    thead
    th,
html[data-theme="dark"] .report-results .table-wrap > table thead th {
    background: #203c59 !important;
    color: #d5e6f7 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td,
html[data-theme="dark"] .report-results .table-wrap > table tbody td {
    background: #173149 !important;
    border-color: #39566f !important;
    color: #e4eef8 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    tr:hover
    td,
html[data-theme="dark"] .report-results .table-wrap > table tbody tr:hover td {
    background: #20405d !important;
    border-color: #53728c !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child:before,
html[data-theme="dark"]
    .report-results
    .table-wrap
    > table
    tbody
    td:first-child:before {
    background: #fb7185 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td
    strong,
html[data-theme="dark"] .report-results .table-wrap > table tbody td strong {
    color: #fff !important;
}
html[data-theme="dark"] .user-actions .edit-link {
    background: #382b62 !important;
    color: #d0c3ff !important;
}
html[data-theme="dark"] .user-actions .edit-link:hover {
    background: #4d3a83 !important;
    color: #fff !important;
}
html[data-theme="dark"] .user-actions .delete-link {
    background: #5b3042 !important;
    color: #ffd0d7 !important;
}
html[data-theme="dark"] .user-actions .delete-link:hover {
    background: #e54862 !important;
    color: #fff !important;
}

/* Keep dark column headings clean and give inactive states the same dot cue. */
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    thead
    th,
html[data-theme="dark"] .report-results .table-wrap > table thead th {
    background: transparent !important;
}
.status.inactive {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.status.inactive:before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #f0526b;
    box-shadow: 0 0 0 3px #f0526b18;
}
html[data-theme="dark"] .status.inactive:before {
    background: #fb7185;
    box-shadow: 0 0 0 3px #fb71851c;
}

/* Expense Register is a report: retain a continuous, conventional table. */
.report-results .table-wrap {
    padding: 0 !important;
    overflow-x: auto !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 0 !important;
    background: #fff !important;
}
.report-results .table-wrap > table {
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.report-results .table-wrap > table thead th {
    padding: 10px 9px !important;
    border: 1px solid #cfd8e6 !important;
    background: #f8fbff !important;
    color: #42577b !important;
}
.report-results .table-wrap > table tbody td {
    padding: 10px 9px !important;
    border: 1px solid #d8e1eb !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
.report-results .table-wrap > table tbody td:first-child {
    padding-left: 9px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.report-results .table-wrap > table tbody td:first-child:before {
    display: none !important;
    content: none !important;
}
.report-results .table-wrap > table tbody td:last-child {
    border-radius: 0 !important;
}
.report-results .table-wrap > table tbody tr:hover td {
    border-color: #c8d8e7 !important;
    background: #f8fbff !important;
}
.report-results .table-wrap > table tfoot th,
.report-results .table-wrap > table tfoot td {
    padding: 10px 9px !important;
    border: 1px solid #cfd8e6 !important;
    background: #f8fbff !important;
    color: #304b70 !important;
}
.report-results .grid-pagination {
    border-radius: 0 0 10px 10px !important;
}
html[data-theme="dark"] .report-results .table-wrap {
    background: #162b40 !important;
    border-color: #36536f !important;
}
html[data-theme="dark"] .report-results .table-wrap > table thead th {
    background: #1d334a !important;
    border-color: #36536f !important;
    color: #d5e6f7 !important;
}
html[data-theme="dark"] .report-results .table-wrap > table tbody td {
    background: #162b40 !important;
    border-color: #2d4861 !important;
    color: #dce8f5 !important;
}
html[data-theme="dark"] .report-results .table-wrap > table tbody tr:hover td {
    background: #203950 !important;
    border-color: #47627c !important;
}
html[data-theme="dark"] .report-results .table-wrap > table tfoot th,
html[data-theme="dark"] .report-results .table-wrap > table tfoot td {
    background: #1d334a !important;
    border-color: #36536f !important;
    color: #dce8f5 !important;
}

/* Added at runtime by grid-search.js: this always wins over list card-row rules. */
.report-results .conventional-report-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.report-results .conventional-report-table tbody td {
    padding: 10px 9px !important;
    border: 1px solid #d8e1eb !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
.report-results .conventional-report-table tbody td:first-child {
    position: static !important;
    padding-left: 9px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.report-results .conventional-report-table tbody td:first-child:before {
    display: none !important;
    content: none !important;
}
.report-results .conventional-report-table tbody td:last-child {
    border-radius: 0 !important;
}
.report-results .conventional-report-table thead th {
    padding: 10px 9px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 0 !important;
    background: #f8fbff !important;
}
.report-results .conventional-report-table tfoot th,
.report-results .conventional-report-table tfoot td {
    padding: 10px 9px !important;
    border: 1px solid #cfd8e6 !important;
    background: #f8fbff !important;
}
html[data-theme="dark"] .report-results .conventional-report-table tbody td {
    background: #162b40 !important;
    border-color: #2d4861 !important;
    color: #dce8f5 !important;
}
html[data-theme="dark"] .report-results .conventional-report-table thead th,
html[data-theme="dark"] .report-results .conventional-report-table tfoot th,
html[data-theme="dark"] .report-results .conventional-report-table tfoot td {
    background: #1d334a !important;
    border-color: #36536f !important;
    color: #d5e6f7 !important;
}

/* Reports deliberately retain the original plain table presentation. */
.report-results {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.report-results .grid-title {
    margin-bottom: 14px;
}
.report-results .grid-toolbar {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.report-results .grid-pagination {
    margin: 13px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.report-results .table-wrap {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.report-results .conventional-report-table {
    border: 1px solid #cfd8e6 !important;
}
.report-results .conventional-report-table thead th {
    padding: 12px !important;
    border: 1px solid #cfd8e6 !important;
    background: #f8fbff !important;
    color: #42577b !important;
}
.report-results .conventional-report-table tbody td {
    padding: 14px 12px !important;
    border: 1px solid #cfd8e6 !important;
    background: #fff !important;
    color: #536076 !important;
}
.report-results .conventional-report-table tfoot th,
.report-results .conventional-report-table tfoot td {
    padding: 12px !important;
    border: 1px solid #cfd8e6 !important;
    background: #f8fbff !important;
}
.report-results .conventional-report-table tbody tr:hover td {
    background: #f8fbff !important;
    border-color: #cfd8e6 !important;
}
html[data-theme="dark"] .report-results {
    background: transparent !important;
    border: 0 !important;
}
html[data-theme="dark"] .report-results .grid-toolbar,
html[data-theme="dark"] .report-results .grid-pagination,
html[data-theme="dark"] .report-results .table-wrap {
    background: transparent !important;
    border: 0 !important;
}
html[data-theme="dark"] .report-results .conventional-report-table {
    border-color: #36536f !important;
}
html[data-theme="dark"] .report-results .conventional-report-table thead th,
html[data-theme="dark"] .report-results .conventional-report-table tfoot th,
html[data-theme="dark"] .report-results .conventional-report-table tfoot td {
    background: #1d334a !important;
    border-color: #36536f !important;
    color: #d5e6f7 !important;
}
html[data-theme="dark"] .report-results .conventional-report-table tbody td {
    background: #162b40 !important;
    border-color: #36536f !important;
    color: #dce8f5 !important;
}
.report-results .table-wrap > table {
    border: 1px solid #cfd8e6 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.report-results .table-wrap > table thead th {
    padding: 12px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 0 !important;
    background: #f8fbff !important;
    color: #42577b !important;
}
.report-results .table-wrap > table tbody td {
    padding: 14px 12px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #536076 !important;
    box-shadow: none !important;
}
.report-results .table-wrap > table tbody td:first-child {
    position: static !important;
    padding-left: 12px !important;
    box-shadow: none !important;
}
.report-results .table-wrap > table tbody td:first-child:before {
    display: none !important;
    content: none !important;
}
.report-results .table-wrap > table tbody tr:hover td {
    background: #f8fbff !important;
    border-color: #cfd8e6 !important;
}
html[data-theme="dark"] .report-results .table-wrap > table {
    border-color: #36536f !important;
}
html[data-theme="dark"] .report-results .table-wrap > table thead th {
    background: #1d334a !important;
    border-color: #36536f !important;
    color: #d5e6f7 !important;
}
html[data-theme="dark"] .report-results .table-wrap > table tbody td {
    background: #162b40 !important;
    border-color: #36536f !important;
    color: #dce8f5 !important;
}

/* Shared plain format for report-only screens. */
.plain-report-results {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #dbe5f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px #243b530b;
}
.plain-report-results .grid-title {
    margin: 0 0 14px;
}
.plain-report-results .grid-title h2 {
    color: #243b53;
}
.plain-report-results .grid-toolbar {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.plain-report-results .table-wrap {
    overflow-x: auto !important;
    background: transparent !important;
}
.plain-report-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse !important;
    border: 1px solid #cfd8e6 !important;
}
.plain-report-table th {
    padding: 12px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 0 !important;
    background: #f8fbff !important;
    color: #42577b !important;
}
.plain-report-table td {
    padding: 14px 12px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #536076 !important;
    box-shadow: none !important;
}
.plain-report-table td:first-child {
    position: static !important;
    box-shadow: none !important;
}
.plain-report-table td:first-child:before {
    display: none !important;
    content: none !important;
}
.plain-report-table tbody tr:hover td {
    background: #f8fbff !important;
    border-color: #cfd8e6 !important;
}
.plain-report-results .grid-pagination {
    margin: 13px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
@media (max-width: 700px) {
    .plain-report-results {
        padding: 12px;
        border-radius: 13px;
    }
}
html[data-theme="dark"] .plain-report-results {
    background: #162b40 !important;
    border-color: #36536f !important;
    box-shadow: 0 10px 24px #00000026 !important;
}
html[data-theme="dark"] .plain-report-results .grid-title h2 {
    color: #edf5ff !important;
}
html[data-theme="dark"] .plain-report-table {
    border-color: #36536f !important;
}
html[data-theme="dark"] .plain-report-table th {
    background: #1d334a !important;
    border-color: #36536f !important;
    color: #d5e6f7 !important;
}
html[data-theme="dark"] .plain-report-table td {
    background: #162b40 !important;
    border-color: #36536f !important;
    color: #dce8f5 !important;
}

/* Dark report filters and table hover share the report-panel navy surface. */
html[data-theme="dark"] .report-filter {
    background: #162b40 !important;
    border-color: #36536f !important;
    box-shadow: 0 10px 24px #00000026 !important;
}
html[data-theme="dark"] .report-filter .field input,
html[data-theme="dark"] .report-filter .field select {
    background: #101d2b !important;
    border-color: #38516a !important;
    color: #edf5ff !important;
}
html[data-theme="dark"] .plain-report-table tbody tr:hover td {
    background: #203950 !important;
    border-color: #47627c !important;
    color: #f2f7fd !important;
}

/* Grid Edit buttons use the same solid-hover feedback as Delete buttons. */
.user-actions .edit-link:hover {
    background: #6f4bd8 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px #6f4bd833 !important;
}
html[data-theme="dark"] .user-actions .edit-link:hover {
    background: #8b5cf6 !important;
    color: #fff !important;
    box-shadow: 0 5px 12px #8b5cf633 !important;
}