body.module-page {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: #f4f7fb;
    color: #12213a;
}

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

.module-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #1e2340 0%, #232b4f 100%);
    color: #fff;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.module-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 15px;
    font-weight: 700;
}

.module-brand img {
    width: 34px;
    height: 34px;
}

.module-nav {
    display: grid;
    gap: 8px;
    padding: 0 12px 18px;
}

.module-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #d9e3ff;
    text-decoration: none;
    font-weight: 600;
}

.module-nav a.active,
.module-nav a:hover {
    background: #4385ff;
    color: #fff;
}

.module-sidebar-scroll {
    flex: 1;
    overflow: auto;
    padding: 14px 0 0;
}

.module-sidebar-section {
    padding: 0 12px 14px;
}

.module-getting-started {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    padding: 14px 14px 16px;
}

.module-gs-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #fff3be;
}

.module-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    margin-top: 14px;
    overflow: hidden;
}

.module-progress-fill {
    width: 62%;
    height: 100%;
    background: #5fa0ff;
    border-radius: inherit;
}

.module-sidebar-footer {
    padding: 0 12px 16px;
}

.module-support-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    text-decoration: none;
    padding: 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
}

.module-support-tile {
    margin: 0 12px 12px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.module-support-tile.alt {
    padding: 14px 16px;
}

.module-support-title {
    color: #fff;
    line-height: 1.45;
    font-size: 13px;
    font-weight: 600;
}

.module-support-action {
    display: inline-block;
    margin-top: 10px;
    color: #5fa0ff;
    text-decoration: none;
    font-weight: 600;
}

.module-main {
    flex: 1;
    padding: 28px;
    box-sizing: border-box;
}

.module-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.module-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #d9e1ef;
    border-radius: 14px;
    padding: 12px 14px;
}

.module-search input {
    border: 0;
    outline: none;
    width: 100%;
    background: transparent;
    font-size: 14px;
}

.module-user {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4d5d78;
}

.module-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1e2340;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.hero-card,
.panel-card,
.stat-card,
.empty-card {
    background: #fff;
    border: 1px solid #e3e9f3;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(26, 38, 60, 0.06);
}

.hero-card {
    padding: 24px;
    margin-bottom: 24px;
}

.hero-head,
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-title,
.section-title {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: #14233f;
}

.hero-copy {
    margin: 10px 0 0;
    color: #5f6f88;
    max-width: 760px;
    line-height: 1.6;
}

.actions-row,
.filter-row,
.stats-grid,
.two-col,
.three-col {
    display: grid;
    gap: 18px;
}

.actions-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
    margin-top: 18px;
}

.filter-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 18px;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: 24px;
}

.two-col {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-bottom: 24px;
}

.three-col {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stat-card,
.panel-card {
    padding: 22px;
}

.stat-label {
    color: #70819d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-value {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 800;
}

.stat-note {
    margin-top: 8px;
    color: #6f7f98;
    font-size: 14px;
}

.btn-primary,
.btn-secondary,
.btn-link {
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #4385ff;
    color: #fff;
}

.btn-secondary {
    background: #eef3fb;
    color: #26405f;
}

.btn-link {
    background: transparent;
    color: #4385ff;
    padding-left: 0;
    padding-right: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.field-group {
    display: grid;
    gap: 8px;
}

.field-group.full {
    grid-column: 1 / -1;
}

.field-group label {
    font-weight: 700;
    color: #21324f;
}

.field-group input,
.field-group select,
.field-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dfec;
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    background: #fbfcfe;
}

.field-group textarea {
    min-height: 110px;
    resize: vertical;
}

.field-inline {
    display: flex;
    gap: 10px;
    align-items: center;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge.open,
.badge.active {
    background: #e3f6ea;
    color: #117647;
}

.badge.paused {
    background: #fff4d6;
    color: #986800;
}

.badge.closed,
.badge.completed {
    background: #ebeff8;
    color: #4a5d7d;
}

.alert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-weight: 600;
}

.alert.ok {
    background: #eaf8ef;
    color: #1d7a49;
}

.alert.err {
    background: #fff0f0;
    color: #b83333;
}

.table-wrap {
    overflow-x: auto;
}

table.module-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

table.module-table th,
table.module-table td {
    padding: 14px 10px;
    text-align: left;
    border-bottom: 1px solid #ebeff5;
    vertical-align: top;
}

table.module-table th {
    color: #63748f;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.empty-card {
    padding: 38px 24px;
    text-align: center;
    color: #6f7f98;
}

.empty-card h3 {
    margin-top: 0;
    color: #22314d;
}

.list-links {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.list-links a {
    color: #2860cf;
    text-decoration: none;
    font-weight: 700;
}

.muted {
    color: #73839b;
}

@media (max-width: 980px) {
    .module-shell {
        display: block;
    }

    .module-sidebar {
        width: auto;
    }

    .module-main {
        padding: 18px;
    }

    .hero-title,
    .section-title {
        font-size: 28px;
    }
}

.loans-main {
    background: #fff;
    min-height: 100vh;
    padding: 0 0 32px;
}

.loans-topbar {
    padding: 16px 28px;
    margin-bottom: 0;
    border-bottom: 1px solid #e6ebf2;
}

.loan-page {
    padding: 18px 28px 0;
}

.loan-toolbar,
.loan-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.loan-page-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1a2b49;
}

.loan-back-title,
.loan-actions,
.loan-head-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loan-status-dropdown,
.toolbar-menu-wrap {
    position: relative;
}

.status-chip {
    border: none;
    background: #fff;
    color: #183258;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.status-chip i {
    color: #3f80ea;
    font-size: 16px;
}

.status-menu,
.toolbar-pop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
    padding: 10px;
    display: none;
    z-index: 40;
}

.status-menu.open,
.toolbar-pop.open {
    display: grid;
}

.status-menu a,
.toolbar-pop a {
    padding: 12px 14px;
    border-radius: 10px;
    color: #2c3e5f;
    text-decoration: none;
    font-weight: 500;
}

.status-menu a.active,
.status-menu a:hover,
.toolbar-pop a:hover {
    background: #eaf2ff;
    color: #2263d4;
}

.toolbar-pop {
    left: auto;
    right: 0;
    min-width: 180px;
}

.toolbar-pop a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-link-primary {
    color: #2d73ea;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.btn-primary.compact {
    padding: 10px 18px;
    border-radius: 10px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #d9e1ee;
    background: #fff;
    color: #304662;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-btn.ghost {
    background: #f3f6fb;
    border-color: #f3f6fb;
    border-radius: 50%;
}

.icon-btn.subtle {
    background: #eef5ff;
    border-color: #eef5ff;
    color: #2d73ea;
}

.empty-state {
    min-height: 540px;
    border-top: 1px solid #ebeff5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 22px;
    text-align: center;
    padding: 40px 24px;
}

.empty-state p {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
    color: #111827;
}

.empty-illustration {
    position: relative;
    width: 180px;
    height: 220px;
}

.empty-illustration.loans-box::before {
    content: "";
    position: absolute;
    inset: 30px 18px 28px;
    background: linear-gradient(180deg, #edf4ff 0%, #dce8f7 100%);
    border-radius: 18px;
}

.empty-illustration.loans-box::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 42px;
    bottom: 6px;
    height: 86px;
    background: linear-gradient(135deg, #ffe891 0%, #ffd0a8 100%);
    clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%);
    border-radius: 8px;
}

.empty-illustration.loans-ghost {
    width: 170px;
    height: 210px;
}

.empty-illustration.loans-ghost::before {
    content: "";
    position: absolute;
    inset: 28px 20px 24px;
    background: linear-gradient(180deg, #eef4ff 0%, #dfe7f5 100%);
    border-radius: 20px;
}

.empty-illustration.loans-ghost::after {
    content: "";
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 2px;
    height: 78px;
    background: linear-gradient(135deg, #ffeaa7 0%, #ffd3b6 100%);
    clip-path: polygon(0 15%, 52% 0, 100% 16%, 100% 100%, 0 100%);
    border-radius: 8px;
}

.loan-form-page {
    max-width: 1040px;
}

.loan-create-form {
    border-top: 1px solid #edf1f6;
    padding-top: 22px;
}

.field-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 38px;
    margin-top: 26px;
}

.helper-text {
    font-size: 14px;
    color: #28344f;
}

.currency-field {
    display: grid;
    grid-template-columns: 42px 1fr;
}

.currency-field span {
    border: 1px solid #d7dfec;
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: #fbfcfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22314d;
}

.currency-field input {
    border-radius: 0 12px 12px 0;
}

.helper-copy {
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
    max-width: 620px;
    margin-left: 28px;
}

.note-checkbox {
    align-items: flex-start;
}

.note-checkbox input {
    margin-top: 3px;
}

.loan-inline-hidden {
    display: none;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #e9edf3;
}

.mand-note {
    margin-left: auto;
    color: #ef4444;
    font-size: 13px;
}

.mand-note span,
.req {
    color: #ef4444;
}

.repayment-filter-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0 18px;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
}

.filter-pill {
    background: #fff;
    border: 1px solid #d7dfec;
    border-radius: 10px;
    padding: 10px 12px;
    color: #22314d;
}

.repayments-empty {
    min-height: 500px;
}

.loan-summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.summary-card {
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 18px;
    background: #fbfcff;
}

.summary-card span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.summary-card strong {
    display: block;
    margin-top: 8px;
    color: #16233d;
    font-size: 22px;
}

.loan-table-wrap {
    border: 1px solid #edf1f6;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 70;
}

.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -12px 0 24px rgba(15, 23, 42, 0.15);
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 75;
    border-left: 1px solid #e5e7eb;
}

.filter-drawer.open {
    transform: translateX(0);
}

.filter-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.filter-head h3 {
    margin: 0;
    font-size: 16px;
}

.sheet-dialog {
    width: min(750px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.2);
}

.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid #edf1f6;
}

.sheet-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.loan-type-table-head,
.loan-type-row,
.loan-type-inline-form {
    display: grid;
    grid-template-columns: 1fr 180px 110px 110px;
    gap: 20px;
    align-items: center;
    padding: 16px 28px;
}

.loan-type-table-head {
    grid-template-columns: 1fr 180px;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
}

.manage-empty,
.loan-type-list {
    padding: 8px 0 0;
}

.loan-type-row {
    grid-template-columns: 1fr 180px;
    border-top: 1px solid #edf1f6;
    color: #22314d;
}

.create-loan-type-link {
    display: inline-block;
    padding: 18px 28px;
    color: #2d73ea;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.create-loan-type-link.inline {
    padding-top: 12px;
}

.loan-type-inline-form input {
    border: 1px solid #d7dfec;
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
}

.manage-note {
    margin: 14px 20px 20px;
    background: #fff6dd;
    color: #48546c;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 10px;
    line-height: 1.45;
}

.loan-filter-grid {
    display: grid;
    gap: 18px;
    padding: 10px 0 18px;
}

.filter-body {
    padding: 14px 16px 0;
    overflow: auto;
    flex: 1;
}

.danger-link {
    color: #ef4444;
}

@media (max-width: 980px) {
    .loan-page,
    .loans-topbar {
        padding-left: 18px;
        padding-right: 18px;
    }

    .field-grid-2,
    .loan-summary-row {
        grid-template-columns: 1fr;
    }

    .loan-toolbar,
    .loan-page-head,
    .footer-actions {
        flex-wrap: wrap;
    }

    .mand-note {
        margin-left: 0;
        width: 100%;
    }

    .loan-type-table-head,
    .loan-type-row,
    .loan-type-inline-form {
        grid-template-columns: 1fr;
    }
}

.giving-page .loan-toolbar {
    margin-bottom: 0;
}

.giving-list-shell {
    border-top: 1px solid #ebeff5;
    margin-top: 18px;
}

.giving-form-page {
    max-width: none;
}

.giving-form-page .loan-page-head {
    margin-bottom: 0;
}

.giving-create-form {
    max-width: 890px;
    padding-top: 26px;
}

.giving-field-row {
    margin-top: 26px;
}

.giving-field-row:first-of-type {
    margin-top: 0;
}

.giving-create-form label {
    font-size: 15px;
    font-weight: 500;
    color: #121f3d;
}

.giving-create-form input:not([type="checkbox"]),
.giving-create-form select,
.giving-create-form textarea {
    border: 1px solid #dbe3f0;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    color: #1e293b;
    box-shadow: none;
}

.giving-create-form input::placeholder,
.giving-create-form textarea::placeholder {
    color: #b4bfce;
}

.giving-create-form textarea {
    min-height: 106px;
    resize: none;
}

.giving-date-field {
    max-width: 428px;
    margin-top: 26px;
}

.giving-date-field input {
    max-width: 100%;
}

.giving-checkbox-row {
    margin-top: 24px;
    display: block;
}

.giving-checkbox-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    font-size: 15px;
    font-weight: 500;
    color: #121f3d;
    cursor: pointer;
}

.giving-checkbox-label input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0;
    padding: 0;
    border: 1px solid #c7d2e2;
    background: #fff;
    border-radius: 5px;
    box-shadow: none;
}

.giving-checkbox-label span {
    display: inline-block;
    line-height: 1.35;
}

.giving-note-card {
    margin-top: 42px;
    max-width: 890px;
    background: #fff4dc;
    border-radius: 16px;
    padding: 24px 30px 26px;
    color: #1f2a44;
}

.giving-note-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.giving-note-head i {
    color: #ff9a2f;
    font-size: 22px;
}

.giving-note-card p {
    margin: 0 0 10px;
    line-height: 1.55;
    font-size: 14px;
}

.giving-note-card p:last-child {
    margin-bottom: 0;
}

.giving-create-form .footer-actions {
    max-width: 890px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid #e8edf4;
}

.giving-create-form .btn-primary,
.giving-create-form .btn-secondary {
    min-width: 84px;
    justify-content: center;
    border-radius: 10px;
    padding: 11px 22px;
}

.giving-create-form .btn-secondary {
    background: #fff;
    border: 1px solid #d7dfec;
    color: #22314d;
}

.giving-create-form .mand-note {
    font-size: 13px;
    color: #ff4d63;
}

.giving-empty-state {
    min-height: 620px;
    gap: 18px;
}

.giving-empty-title {
    margin: 0;
    font-size: 22px;
    color: #17284a;
}

.giving-empty-copy {
    margin: 0;
    color: #6b7a92;
    font-size: 15px;
}

.empty-illustration.giving-box {
    width: 190px;
    height: 195px;
}

.empty-illustration.giving-box .giving-box-back,
.empty-illustration.giving-box .giving-box-front,
.empty-illustration.giving-box .giving-heart,
.empty-illustration.giving-box .giving-coin {
    position: absolute;
}

.empty-illustration.giving-box .giving-box-back {
    left: 34px;
    right: 20px;
    top: 34px;
    bottom: 26px;
    border-radius: 18px;
    background: linear-gradient(180deg, #eef0ff 0%, #e6def8 100%);
}

.empty-illustration.giving-box .giving-box-front {
    left: 76px;
    right: 38px;
    bottom: 18px;
    height: 72px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #d96dc1 0%, #bf5fbc 100%);
}

.empty-illustration.giving-box .giving-heart {
    left: 95px;
    bottom: 38px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd2ef;
    font-size: 16px;
}

.empty-illustration.giving-box .giving-coin {
    right: 44px;
    top: 62px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffd574;
    color: #c78505;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(255, 191, 71, 0.35);
}

@media (max-width: 980px) {
    .giving-create-form,
    .giving-note-card,
    .giving-create-form .footer-actions,
    .giving-date-field {
        max-width: none;
    }
}

.docs-shell {
    background: #eef3fb;
}

.docs-icon-rail {
    width: 88px;
    background: linear-gradient(180deg, #1b2140 0%, #232d54 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.docs-rail-top,
.docs-rail-bottom,
.docs-rail-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.docs-rail-brand,
.docs-rail-item {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

.docs-rail-brand img {
    width: 30px;
    height: 30px;
}

.docs-rail-item.active,
.docs-rail-link.active {
    background: rgba(88, 146, 255, 0.22);
}

.docs-rail-link {
    width: 100%;
    padding: 10px 8px;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
}

.docs-rail-link i {
    font-size: 22px;
}

.docs-folder-panel {
    width: 288px;
    background: #fff;
    border-right: 1px solid #dde5f0;
    display: flex;
    flex-direction: column;
}

.docs-folder-topbar {
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e6edf6;
}

.docs-search {
    max-width: none;
    background: #f3f6fd;
}

.docs-folder-content {
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.docs-folder-header h1 {
    margin: 6px 8px 20px;
    font-size: 21px;
    font-weight: 600;
    color: #17284a;
}

.docs-folder-all {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f4f7fd;
    color: #2359c7;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.docs-folder-all.active {
    background: #4586ee;
    color: #fff;
}

.docs-folder-group {
    margin-bottom: 18px;
}

.docs-folder-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 12px;
    color: #546786;
    font-size: 13px;
    font-weight: 700;
}

.docs-plus-btn {
    color: #354869;
    text-decoration: none;
    font-size: 18px;
}

.docs-folder-empty-box {
    border: 1px dashed #d4ddea;
    border-radius: 14px;
    padding: 28px 16px 24px;
    text-align: center;
}

.docs-folder-empty-icon {
    color: #8b94b2;
    font-size: 38px;
    margin-bottom: 10px;
}

.docs-folder-empty-box p {
    margin: 0 0 16px;
    color: #28344f;
    font-size: 16px;
}

.docs-light-btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    background: #edf4ff;
    color: #4185f5;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.docs-folder-list {
    display: grid;
    gap: 8px;
}

.docs-folder-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #203250;
    text-decoration: none;
}

.docs-folder-link:hover {
    background: #f5f8fe;
}

.docs-storage-card {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 12px;
    background: #f3f5fb;
    border: 1px solid #e0e7f2;
}

.docs-storage-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d5e1f3;
    color: #2c72e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.docs-storage-title {
    font-size: 14px;
    color: #17284a;
}

.docs-storage-copy {
    margin-top: 4px;
    font-size: 13px;
    color: #17284a;
    font-weight: 600;
}

.docs-trash-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 8px 0;
    color: #4888ef;
    text-decoration: none;
    font-size: 15px;
}

.docs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.docs-main-topbar {
    height: 66px;
    border-bottom: 1px solid #dfe7f3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
}

.docs-main-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.docs-user-name {
    color: #334968;
    font-size: 15px;
}

.docs-alert {
    margin: 16px 18px 0;
}

.docs-board {
    margin: 14px;
    background: #fff;
    border: 1px solid #dfe7f3;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 108px);
}

.docs-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e4ebf5;
}

.docs-board-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #17284a;
}

.docs-filter-icon,
.docs-close-filter {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #dde5f0;
    color: #3976df;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.docs-filter-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid #e4ebf5;
    position: relative;
}

.docs-filter-label {
    color: #6d7d99;
    font-size: 13px;
    font-weight: 700;
}

.docs-filter-block {
    position: relative;
}

.docs-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #5b6d8d;
    text-decoration: none;
    font-size: 15px;
}

.docs-filter-trigger > span {
    color: #4f6486;
}

.docs-filter-trigger .fa-angle-down {
    font-size: 12px;
}

.docs-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    width: 290px;
    background: #fff;
    border: 1px solid #dce5f2;
    border-radius: 14px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
    padding: 12px 10px;
    z-index: 40;
}

.docs-dropdown-menu-scroll {
    max-height: 270px;
    overflow: auto;
}

.docs-dropdown-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4d8cff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.docs-dropdown-search input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
}

.docs-dropdown-item {
    display: block;
    padding: 12px 12px;
    border-radius: 8px;
    color: #4d5f7b;
    text-decoration: none;
    font-size: 15px;
}

.docs-dropdown-item.active,
.docs-dropdown-item:hover {
    background: #4586ee;
    color: #fff;
}

.docs-close-filter {
    margin-left: auto;
}

.docs-board-body {
    flex: 1;
    background: #fff;
}

.docs-empty-state {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: center;
}

.docs-empty-state p {
    margin: 24px 0 0;
    color: #111827;
    font-size: 18px;
}

.docs-empty-figure {
    position: relative;
    width: 220px;
    height: 260px;
}

.docs-empty-shadow {
    position: absolute;
    inset: 42px 34px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ecf4ff 0%, #dbe7f4 100%);
}

.docs-empty-card {
    position: absolute;
    left: 74px;
    right: 46px;
    bottom: 24px;
    height: 74px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffe592 0%, #ffd0ab 100%);
    transform: skew(-12deg);
}

.docs-empty-box {
    position: absolute;
    left: 92px;
    bottom: 48px;
    width: 30px;
    height: 34px;
    border-radius: 6px;
    border: 2px solid #ffb79c;
    background: rgba(255, 255, 255, 0.35);
}

.docs-empty-person {
    position: absolute;
    left: 66px;
    top: 24px;
    width: 90px;
    height: 150px;
    border-radius: 44px 44px 36px 36px;
    background: linear-gradient(180deg, #7c7ae9 0%, #7065d6 100%);
}

.docs-empty-person::before {
    content: "";
    position: absolute;
    left: 16px;
    top: -10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #97abff;
    box-shadow: 54px 2px 0 -12px #afafff;
}

.docs-empty-person::after {
    content: "";
    position: absolute;
    left: 36px;
    top: 42px;
    width: 16px;
    height: 72px;
    border-radius: 999px;
    background: #93d8ff;
}

.docs-table-wrap {
    padding: 18px;
}

.docs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    padding: 20px;
}

.docs-modal {
    width: min(750px, 100%);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.28);
}

.docs-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 38px;
    border-bottom: 1px solid #e3eaf4;
}

.docs-modal-head h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: #2b3445;
}

.docs-modal-form {
    padding: 28px 38px 0;
}

.docs-modal-form .field-group {
    margin-bottom: 22px;
}

.docs-modal-form label {
    font-size: 16px;
    font-weight: 500;
    color: #2d3748;
}

.docs-modal-form input,
.docs-modal-form textarea,
.docs-modal-form select {
    border-radius: 10px;
    background: #fff;
}

.docs-modal-form textarea {
    min-height: 132px;
}

.docs-modal-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 0 24px;
    border-top: 1px solid #e3eaf4;
    margin-top: 12px;
}

@media (max-width: 1180px) {
    .docs-folder-panel {
        width: 260px;
    }
}

@media (max-width: 980px) {
    .docs-shell {
        display: block;
    }

    .docs-icon-rail {
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 10px;
        gap: 12px;
        overflow: auto;
    }

    .docs-rail-top,
    .docs-rail-nav,
    .docs-rail-bottom {
        flex-direction: row;
        width: auto;
    }

    .docs-folder-panel {
        width: auto;
        border-right: none;
        border-bottom: 1px solid #dde5f0;
    }

    .docs-main-topbar {
        justify-content: flex-start;
    }

    .docs-filter-row {
        flex-wrap: wrap;
    }

    .docs-close-filter {
        margin-left: 0;
    }
}

.reports-main {
    background: #fff;
}

.reports-hub-page {
    padding: 22px 30px 34px;
}

.reports-page-head {
    padding-bottom: 14px;
    border-bottom: 1px solid #e7edf5;
    margin-bottom: 34px;
    position: relative;
}

.reports-page-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 108px;
    height: 3px;
    border-radius: 999px;
    background: #4c88ff;
}

.reports-page-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #15284a;
}

.reports-grid-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 76px;
    margin-bottom: 52px;
}

.reports-list-card h2 {
    margin: 0 0 22px;
    font-size: 20px;
    font-weight: 500;
    color: #1d2f4d;
}

.reports-links {
    display: grid;
    gap: 26px;
}

.reports-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #2367e9;
    text-decoration: none;
    font-size: 16px;
}

.reports-links a i {
    color: #66758d;
    font-size: 14px;
}

.reports-detail-page {
    background: #fff;
    min-height: calc(100vh - 67px);
}

.reports-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 14px 14px 12px;
    border-bottom: 1px solid #e5ebf4;
}

.reports-detail-tools-left,
.reports-detail-tools-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reports-icon-square {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #d6deea;
    background: #fff;
    color: #22324d;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.reports-period-wrap {
    position: relative;
}

.reports-period-btn,
.reports-export-btn {
    border: 1px solid #d6deea;
    background: #fff;
    border-radius: 10px;
    height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #24344f;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.reports-period-btn {
    min-width: 214px;
    justify-content: space-between;
}

.reports-export-btn {
    min-width: 124px;
}

.reports-customize-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #2367e9;
    text-decoration: none;
    font-size: 16px;
}

.reports-customize-link i {
    color: #4f88ff;
}

.reports-period-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 198px;
    background: #fff;
    border: 1px solid #d8e1ee;
    border-radius: 10px;
    box-shadow: 0 18px 26px rgba(15, 23, 42, 0.1);
    padding: 8px 0;
    display: none;
    z-index: 40;
}

.reports-period-menu.open {
    display: block;
}

.reports-period-menu a {
    display: block;
    padding: 12px 14px;
    color: #202f4b;
    text-decoration: none;
    font-size: 15px;
}

.reports-period-menu a.active,
.reports-period-menu a:hover {
    background: #4586ee;
    color: #fff;
}

.reports-summary-sheet {
    max-width: 1090px;
    width: 100%;
    min-width: 0;
    margin: 34px auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
}

.reports-summary-head {
    text-align: center;
    color: #22314d;
}

.reports-summary-org {
    font-size: 20px;
}

.reports-summary-head h1 {
    margin: 10px 0 10px;
    font-size: 34px;
    font-weight: 500;
}

.reports-summary-range {
    font-size: 18px;
    color: #5f708b;
}

.reports-summary-table {
    margin-top: 34px;
}

.reports-summary-table-head,
.reports-summary-row {
    display: grid;
    grid-template-columns: 1fr 240px;
    column-gap: 20px;
    border-top: 1px solid #e7edf5;
}

.reports-summary-table-head {
    padding: 16px 30px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
}

.reports-summary-table-head span:last-child {
    text-align: right;
}

.reports-summary-row {
    padding: 24px 30px 18px;
    grid-template-areas:
        "label value"
        "empty value";
}

.reports-summary-label {
    grid-area: label;
    font-size: 17px;
    color: #27364f;
}

.reports-summary-empty {
    grid-area: empty;
    margin-top: 26px;
    font-size: 17px;
    color: #60718b;
}

.reports-summary-value {
    grid-area: value;
    align-self: end;
    justify-self: end;
    font-size: 19px;
    color: #111827;
}

@media (max-width: 1100px) {
    .reports-grid-row {
        gap: 34px;
    }
}

@media (max-width: 980px) {
    .reports-hub-page {
        padding: 18px;
    }

    .reports-grid-row {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 34px;
    }

    .reports-detail-toolbar {
        flex-wrap: wrap;
    }

    .reports-detail-tools-left,
    .reports-detail-tools-right {
        flex-wrap: wrap;
    }

    .reports-summary-table-head,
    .reports-summary-row {
        grid-template-columns: 1fr;
    }

    .reports-summary-table-head span:last-child,
    .reports-summary-value {
        text-align: left;
        justify-self: start;
    }

    .reports-summary-row {
        grid-template-areas:
            "label"
            "empty"
            "value";
    }
}

.reports-detail-canvas {
    display: block;
}

.reports-detail-canvas.with-menu {
    display: grid;
    grid-template-columns: 314px minmax(0, 1fr);
}

.reports-side-menu {
    border-right: 1px solid #e6ebf4;
    background: #fff;
    min-height: calc(100vh - 130px);
}

.reports-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    border-bottom: 1px solid #e6ebf4;
}

.reports-side-head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.reports-side-head a {
    color: #b3bccb;
    font-size: 28px;
    text-decoration: none;
}

.reports-side-search {
    margin: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d9e1ee;
    border-radius: 10px;
    padding: 12px 14px;
}

.reports-side-search input {
    border: none;
    outline: none;
    width: 100%;
}

.reports-side-scroll {
    padding: 0 18px 24px;
    max-height: calc(100vh - 230px);
    overflow: auto;
}

.reports-side-section-title {
    margin: 18px 0 12px;
    color: #4586ee;
    font-size: 14px;
    font-weight: 700;
}

.reports-side-link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: #17284a;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.45;
}

.reports-side-link.active,
.reports-side-link:hover {
    background: #4586ee;
    color: #fff;
}

.reports-view-shell {
    min-width: 0;
    overflow-x: hidden;
}

.reports-export-wrap,
.reports-inline-select-wrap {
    position: relative;
}

.reports-export-menu,
.reports-inline-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.14);
    min-width: 390px;
    display: none;
    z-index: 45;
    padding: 10px;
}

.reports-export-menu.open,
.reports-inline-menu.open {
    display: block;
}

.reports-export-menu a,
.reports-inline-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #2e3d59;
    text-decoration: none;
    font-size: 15px;
}

.reports-export-menu a.active,
.reports-inline-menu a.active,
.reports-export-menu a:hover,
.reports-inline-menu a:hover {
    background: #4586ee;
    color: #fff;
}

.reports-inline-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.reports-inline-label {
    color: #17284a;
    font-size: 15px;
}

.reports-inline-select {
    min-width: 314px;
    height: 50px;
    border: 1px solid #d6deea;
    background: #fff;
    border-radius: 10px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    color: #24344f;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.reports-inline-menu {
    left: 0;
    right: auto;
    min-width: 314px;
    max-height: 286px;
    overflow: auto;
}

.reports-dropdown-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4d8cff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.reports-dropdown-search input {
    width: 100%;
    border: none;
    outline: none;
}

.reports-inline-empty {
    padding: 14px;
    color: #7a879c;
    font-size: 14px;
}

.reports-checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #17284a;
    font-size: 15px;
}

.reports-empty-message {
    padding: 44px 0;
    text-align: center;
    color: #60718b;
    font-size: 18px;
}

.reports-generic-table {
    margin-top: 28px;
    overflow-x: auto;
    overflow-y: hidden;
}

.reports-generic-table table.module-table {
    margin-top: 0;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.reports-generic-table table.module-table th,
.reports-generic-table table.module-table td {
    font-size: 15px;
    white-space: nowrap;
}

.reports-table-empty {
    text-align: center !important;
    color: #60718b;
    padding: 54px 14px !important;
    white-space: normal !important;
}

.reports-customize-panel {
    min-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
}

.reports-customize-head {
    padding: 18px 26px;
    border-bottom: 1px solid #e6ebf4;
}

.reports-customize-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
}

.reports-customize-body {
    padding: 30px 32px;
    flex: 1;
}

.reports-customize-grid {
    max-width: 620px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px 26px;
    align-items: center;
}

.reports-customize-grid label {
    color: #111827;
    font-size: 16px;
}

.reports-customize-grid input,
.reports-customize-field {
    border: 1px solid #d9e1ee;
    border-radius: 10px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #8a95ab;
    background: #fff;
}

.reports-customize-grid input {
    width: 100%;
    box-sizing: border-box;
}

.reports-customize-foot {
    border-top: 1px solid #e6ebf4;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 980px) {
    .reports-detail-canvas.with-menu {
        grid-template-columns: 1fr;
    }

    .reports-side-menu {
        min-height: auto;
    }

    .reports-customize-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .reports-export-menu,
    .reports-inline-menu {
        min-width: 280px;
        max-width: calc(100vw - 36px);
    }
}
