@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --app-font: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --app-primary: #7c3aed;
    --app-primary-2: #a855f7;
    --app-primary-3: #c084fc;

    --app-success: #22c55e;
    --app-danger: #ef4444;
    --app-warning: #f59e0b;

    --app-radius: 22px;
    --app-radius-sm: 14px;
    --app-navbar-height: 76px;
}

html[data-bs-theme="dark"] {
    --app-bg: #0d0d16;
    --app-bg-2: #151522;
    --app-surface: rgba(31, 31, 47, 0.72);
    --app-surface-strong: rgba(37, 37, 59, 0.92);
    --app-border: rgba(255, 255, 255, 0.10);
    --app-text: #f8fafc;
    --app-muted: #a1a1aa;
    --app-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
    --app-glow: rgba(124, 58, 237, 0.32);
}

html[data-bs-theme="light"] {
    --app-bg: #f5f3ff;
    --app-bg-2: #ffffff;
    --app-surface: rgba(255, 255, 255, 0.78);
    --app-surface-strong: rgba(255, 255, 255, 0.96);
    --app-border: rgba(91, 33, 182, 0.12);
    --app-text: #171326;
    --app-muted: #6b7280;
    --app-shadow: 0 22px 50px rgba(91, 33, 182, 0.12);
    --app-glow: rgba(124, 58, 237, 0.16);
}

* {
    font-family: var(--app-font);
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: var(--app-text);
    background:
        radial-gradient(circle at top right, var(--app-glow), transparent 34rem),
        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.12), transparent 28rem),
        linear-gradient(135deg, var(--app-bg), var(--app-bg-2));
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

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

/* Public navbar */

.app-navbar {
    min-height: var(--app-navbar-height);
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--app-shadow);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--app-text) !important;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.app-brand-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.35);
}

.app-brand-text {
    font-size: 1.15rem;
}

.app-nav-links {
    gap: 0.35rem;
}

.app-nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    color: var(--app-muted);
    font-weight: 600;
    transition: 0.2s ease;
}

.app-nav-links .nav-link:hover,
.app-nav-links .nav-link.active {
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.14);
}

/* Buttons */

.app-theme-btn,
.app-user-btn,
.app-btn-ghost,
.app-btn-primary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid var(--app-border);
}

.app-theme-btn,
.app-user-btn,
.app-btn-ghost {
    color: var(--app-text);
    background: var(--app-surface);
}

.app-theme-btn:hover,
.app-user-btn:hover,
.app-btn-ghost:hover {
    color: var(--app-text);
    border-color: rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.14);
}

.app-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.30);
}

.app-btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
}

.app-user-avatar {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
}

.app-dropdown {
    padding: 0.6rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--app-shadow);
}

.app-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font-weight: 600;
}

.app-navbar-toggler,
.app-mobile-menu-btn,
.app-mobile-theme-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
}

/* Mobile offcanvas */

.app-offcanvas {
    color: var(--app-text);
    background:
        radial-gradient(circle at top right, var(--app-glow), transparent 22rem),
        var(--app-bg);
    border-left: 1px solid var(--app-border);
}

.mobile-menu-list {
    display: grid;
    gap: 0.55rem;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    font-weight: 700;
}

.mobile-menu-link:hover {
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.18);
}

.mobile-menu-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
}

/* Main layout */

.app-main {
    padding-bottom: 2rem;
}

.app-public .app-main {
    padding-top: calc(var(--app-navbar-height) + 26px);
}

.app-authenticated {
    --app-sidebar-width: 290px;
}

.app-authenticated .app-main {
    padding-top: 1rem;
    padding-right: var(--app-sidebar-width);
}

.app-container {
    max-width: 1440px;
    padding-inline: 1rem;
}

/* Cards */

.app-card {
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--app-shadow);
}

.app-card-solid {
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.app-page-title {
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--app-text);
}

.app-page-subtitle {
    color: var(--app-muted);
    font-weight: 500;
}

.app-messages {
    position: relative;
    z-index: 10;
    margin-bottom: 1rem;
}

.app-alert {
    border-radius: 16px;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
}

/* Forms */

.form-control,
.form-select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--app-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.18);
}

/* Home hero */

.app-hero-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
    padding: 0.55rem 0.85rem;
    font-weight: 700;
}

.app-hero-title {
    max-width: 760px;
    color: var(--app-text);
    font-size: clamp(2rem, 4vw, 4.2rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -1px;
}

.app-hero-text {
    max-width: 680px;
    color: var(--app-muted);
    font-size: 1.05rem;
    line-height: 2;
}

.app-stat-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);
}

.app-preview-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid var(--app-border);
}

.app-preview-stat span {
    color: var(--app-muted);
    font-weight: 600;
}

.app-preview-stat strong {
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

/* Authenticated sidebar */

.app-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--app-sidebar-width);
    height: 100vh;
    padding: 1rem;
    z-index: 1040;
}

.app-sidebar-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.app-sidebar-brand {
    padding: 1.1rem 1.1rem 0.8rem;
}

.app-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.6rem 1rem 1rem;
    padding: 0.9rem;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.12);
}

.app-user-avatar-lg {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.30);
}

.app-sidebar-user-name {
    max-width: 155px;
    color: var(--app-text);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-user-label {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.app-sidebar-nav {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0 0.85rem;
    overflow-y: auto;
}

.app-sidebar-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    color: var(--app-muted);
    font-weight: 750;
    transition: 0.2s ease;
}

.app-sidebar-link i {
    width: 22px;
    font-size: 1.05rem;
}

.app-sidebar-link:hover,
.app-sidebar-link.active {
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.16);
}

.app-sidebar-footer {
    padding: 0.85rem;
    border-top: 1px solid var(--app-border);
}

/* Mobile topbar only for authenticated users */

.app-mobile-topbar {
    min-height: var(--app-navbar-height);
    padding: 0.75rem 0;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--app-shadow);
    z-index: 1030;
}

/* Footer */

.app-footer {
    padding: 1rem 1rem 1.5rem;
}

.app-authenticated .app-footer {
    padding-right: calc(var(--app-sidebar-width) + 1rem);
}

.app-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 22px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--app-shadow);
}

.app-footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-footer-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.25);
}

.app-footer-title {
    color: var(--app-text);
    font-weight: 900;
}

.app-footer-subtitle {
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.app-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
}

.app-footer-links a {
    color: var(--app-muted);
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.2s ease;
}

.app-footer-links a:hover {
    color: var(--app-primary-3);
}

.app-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.app-footer-bottom strong {
    color: var(--app-text);
}

.app-footer-version {
    white-space: nowrap;
}

/* Responsive */

@media (max-width: 991.98px) {
    .app-brand-text {
        font-size: 1rem;
    }

    .app-container {
        padding-inline: 0.85rem;
    }

    .app-authenticated .app-main {
        padding-right: 0;
        padding-top: calc(var(--app-navbar-height) + 18px);
    }

    .app-public .app-main {
        padding-top: calc(var(--app-navbar-height) + 18px);
    }

    .app-authenticated .app-footer {
        padding-right: 1rem;
    }

    .app-footer-main,
    .app-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    :root {
        --app-navbar-height: 68px;
    }

    .app-brand-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .app-main {
        padding-bottom: 1rem;
    }

    .app-authenticated .app-main,
    .app-public .app-main {
        padding-top: calc(var(--app-navbar-height) + 16px);
    }

    .app-preview-stat {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-hero-text {
        font-size: 0.98rem;
    }

    .app-footer {
        padding: 0.75rem 0.85rem 1rem;
    }

    .app-footer-inner {
        padding: 1rem;
        border-radius: 18px;
    }

    .app-footer-links {
        width: 100%;
    }

    .app-footer-bottom {
        font-size: 0.8rem;
    }
}

.app-sidebar-button,
.mobile-menu-button {
    border: 0;
    text-align: right;
    cursor: pointer;
}

.app-sidebar-button {
    background: transparent;
}

.mobile-menu-button {
    background: var(--app-surface);
}

.app-sidebar-button:hover,
.mobile-menu-button:hover {
    color: var(--app-text);
}

/* Auth pages */

/* Auth pages */

.auth-page {
    min-height: calc(100vh - var(--app-navbar-height) - 140px);
    width: 100%;
    padding-block: 2rem;
}

.auth-page > .row {
    width: 100%;
    margin-inline: 0;
}

.app-authenticated .auth-page {
    min-height: calc(100vh - 160px);
}

.auth-card {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.auth-card-wide {
    max-width: 920px;
}

.auth-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: #fff;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 18px 40px rgba(124, 58, 237, 0.32);
}

.auth-title {
    color: var(--app-text);
    font-weight: 900;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: var(--app-muted);
    font-weight: 600;
    line-height: 1.9;
    margin-bottom: 0;
}

.auth-footer {
    color: var(--app-muted);
    font-weight: 600;
}

.auth-footer a {
    color: var(--app-primary-3);
    font-weight: 900;
}

.form-label {
    color: var(--app-text);
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.form-error {
    margin-top: 0.45rem;
    color: var(--app-danger);
    font-size: 0.84rem;
    font-weight: 700;
}

.form-error span {
    display: block;
}

.helptext {
    display: block;
    margin-top: 0.45rem;
    color: var(--app-muted);
    font-size: 0.8rem;
    line-height: 1.7;
}

@media (max-width: 575.98px) {
    .auth-page {
        padding-block: 1rem;
    }

    .auth-title {
        font-size: 1.45rem;
    }

    .auth-card {
        max-width: 100%;
    }
}

/* User avatar image */

.app-user-avatar,
.app-user-avatar-lg {
    overflow: hidden;
}

.app-user-avatar img,
.app-user-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Profile pages */

.profile-page {
    padding-block: 1rem 2rem;
}

.profile-card {
    position: sticky;
    top: 1rem;
}

.profile-avatar,
.profile-edit-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 18px 40px rgba(124, 58, 237, 0.30);
}

.profile-avatar {
    width: 118px;
    height: 118px;
    border-radius: 36px;
    font-size: 3rem;
}

.profile-edit-avatar {
    width: 92px;
    height: 92px;
    border-radius: 28px;
    font-size: 2.4rem;
}

.profile-avatar img,
.profile-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-name {
    color: var(--app-text);
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

.profile-username {
    color: var(--app-muted);
    font-weight: 700;
    margin-bottom: 0;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.profile-info-item {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.profile-info-item span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.profile-info-item strong {
    display: block;
    color: var(--app-text);
    font-weight: 900;
    word-break: break-word;
}

@media (max-width: 991.98px) {
    .profile-card {
        position: static;
    }
}

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

    .profile-avatar {
        width: 104px;
        height: 104px;
        border-radius: 32px;
    }
}

/* Better auth form layout */

.auth-form-stack {
    display: grid;
    gap: 1rem;
}

.auth-field {
    width: 100%;
}

.form-hint {
    margin-top: 0.45rem;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.7;
}

.auth-card .form-control {
    width: 100%;
}

.auth-card .helptext ul,
.auth-card ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-right: 1.2rem;
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.8;
}

.mobile-user-box {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.12);
}
.auth-small-link {
    color: var(--app-primary-3);
    font-size: 0.88rem;
    font-weight: 800;
}

.auth-small-link:hover {
    color: var(--app-text);
}

/* Wallet pages */

.wallet-page {
    padding-block: 1rem 2rem;
}

.wallet-card {
    transition: 0.2s ease;
}

.wallet-card:hover {
    transform: translateY(-3px);
}

.wallet-icon,
.wallet-detail-icon,
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.28);
}

.wallet-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 20px;
    font-size: 1.35rem;
}

.wallet-detail-icon,
.empty-state-icon {
    width: 96px;
    height: 96px;
    border-radius: 32px;
    font-size: 2.5rem;
}

.wallet-title {
    max-width: 220px;
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-subtitle,
.wallet-detail-subtitle {
    color: var(--app-muted);
    font-weight: 700;
}

.wallet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.wallet-badge-success {
    color: #fff;
    background: rgba(34, 197, 94, 0.85);
}

.wallet-badge-muted {
    color: var(--app-text);
    background: rgba(148, 163, 184, 0.28);
}

.wallet-amount,
.wallet-detail-amount {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.wallet-amount span,
.wallet-detail-amount span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.wallet-amount strong,
.wallet-detail-amount strong {
    display: block;
    color: var(--app-text);
    font-size: 1.4rem;
    font-weight: 950;
}

.wallet-amount small,
.wallet-detail-amount small {
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.wallet-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wallet-meta div {
    padding: 0.8rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.04);
}

.wallet-meta span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.wallet-meta strong {
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 900;
}

.wallet-danger-btn,
.wallet-success-btn {
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid var(--app-border);
}

.wallet-danger-btn {
    color: #fff;
    background: rgba(239, 68, 68, 0.85);
}

.wallet-danger-btn:hover {
    color: #fff;
    background: rgba(220, 38, 38, 0.95);
}

.wallet-success-btn {
    color: #fff;
    background: rgba(34, 197, 94, 0.85);
}

.wallet-success-btn:hover {
    color: #fff;
    background: rgba(22, 163, 74, 0.95);
}

.wallet-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.wallet-page-number {
    color: var(--app-muted);
    font-weight: 800;
}

.wallet-check-item {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.wallet-check-item label {
    color: var(--app-text);
    font-weight: 800;
    cursor: pointer;
}

.wallet-detail-title {
    color: var(--app-text);
    font-size: 1.5rem;
    font-weight: 950;
    margin-bottom: 0.35rem;
}

.wallet-detail-card {
    position: sticky;
    top: 1rem;
}

.wallet-description {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.wallet-description span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.wallet-description p {
    color: var(--app-text);
    line-height: 2;
    margin-bottom: 0;
}

.empty-state {
    max-width: 720px;
    margin-inline: auto;
}

@media (max-width: 991.98px) {
    .wallet-detail-card {
        position: static;
    }
}

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

    .wallet-amount strong,
    .wallet-detail-amount strong {
        font-size: 1.15rem;
    }
}

/* Transaction pages */

.transaction-page {
    padding-block: 1rem 2rem;
}

.transaction-type-card {
    min-height: 160px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 24px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--app-shadow);
    transition: 0.2s ease;
}

.transaction-type-card:hover {
    transform: translateY(-4px);
    color: var(--app-text);
}

.transaction-type-icon,
.transaction-form-icon,
.transaction-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.28);
}

.transaction-type-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 20px;
    font-size: 1.45rem;
}

.transaction-form-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 22px;
    font-size: 1.55rem;
}

.transaction-detail-icon {
    width: 96px;
    height: 96px;
    border-radius: 32px;
    font-size: 2.5rem;
}

.transaction-type-content {
    display: grid;
    gap: 0.4rem;
}

.transaction-type-content strong {
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 950;
}

.transaction-type-content small {
    color: var(--app-muted);
    line-height: 1.8;
    font-weight: 650;
}

.transaction-type-income-card:hover,
.transaction-type-income {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.transaction-type-expense-card:hover,
.transaction-type-expense {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.transaction-type-transfer-card:hover,
.transaction-type-transfer {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.transaction-type-adjustment-increase-card:hover,
.transaction-type-adjustment-increase {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.transaction-type-adjustment-decrease-card:hover,
.transaction-type-adjustment-decrease {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.transaction-type-card:hover .transaction-type-content strong,
.transaction-type-card:hover .transaction-type-content small {
    color: #fff;
}

.transaction-form-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-table {
    color: var(--app-text);
}

.app-table thead th {
    color: var(--app-muted);
    background: rgba(124, 58, 237, 0.10);
    border-bottom: 1px solid var(--app-border);
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
}

.app-table tbody td {
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
    font-weight: 650;
    white-space: nowrap;
}

.transaction-badge,
.transaction-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.transaction-badge-income {
    color: #fff;
    background: rgba(34, 197, 94, 0.88);
}

.transaction-badge-expense {
    color: #fff;
    background: rgba(239, 68, 68, 0.88);
}

.transaction-badge-transfer {
    color: #fff;
    background: rgba(37, 99, 235, 0.88);
}

.transaction-badge-adjustment-increase {
    color: #fff;
    background: rgba(20, 184, 166, 0.88);
}

.transaction-badge-adjustment-decrease {
    color: #fff;
    background: rgba(245, 158, 11, 0.9);
}

.transaction-status-confirmed {
    color: #fff;
    background: rgba(34, 197, 94, 0.88);
}

.transaction-status-cancelled {
    color: #fff;
    background: rgba(239, 68, 68, 0.88);
}

.transaction-status-draft {
    color: var(--app-text);
    background: rgba(148, 163, 184, 0.28);
}

.transaction-detail-card {
    position: sticky;
    top: 1rem;
}

@media (max-width: 991.98px) {
    .transaction-detail-card {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .transaction-form-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .transaction-type-card {
        min-height: auto;
    }
}

/* Wallet summary cards */

.wallet-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 118px;
}

.wallet-summary-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.28);
}

.wallet-summary-card span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.wallet-summary-card strong {
    display: block;
    color: var(--app-text);
    font-size: 1.15rem;
    font-weight: 950;
    white-space: nowrap;
}

.wallet-currency-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.wallet-currency-item {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.wallet-currency-item span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.wallet-currency-item strong {
    display: block;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 950;
}

@media (max-width: 991.98px) {
    .wallet-currency-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .wallet-summary-card {
        min-height: auto;
    }

    .wallet-currency-summary {
        grid-template-columns: 1fr;
    }

    .wallet-summary-card strong {
        font-size: 1rem;
        white-space: normal;
    }
}

/* Category pages */

.category-page {
    padding-block: 1rem 2rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    transition: 0.2s ease;
}

.category-card:hover {
    transform: translateY(-3px);
}

.category-icon,
.category-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.22);
}

.category-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 20px;
    font-size: 1.35rem;
}

.category-detail-icon {
    width: 96px;
    height: 96px;
    border-radius: 32px;
    font-size: 2.5rem;
}

.category-title {
    max-width: 220px;
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-subtitle {
    color: var(--app-muted);
    font-weight: 700;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.category-badge-success {
    color: #fff;
    background: rgba(34, 197, 94, 0.85);
}

.category-badge-muted {
    color: var(--app-text);
    background: rgba(148, 163, 184, 0.28);
}

.category-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.category-meta div {
    padding: 0.8rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.category-meta span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.category-meta strong {
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 900;
}

.category-description {
    color: var(--app-muted);
    line-height: 1.9;
    font-weight: 600;
    margin-bottom: 1rem;
}

.category-preview-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.category-preview-box strong {
    display: block;
    color: var(--app-text);
    font-weight: 900;
    margin-bottom: 0.2rem;
}

.category-preview-box span {
    display: block;
    color: var(--app-muted);
    font-weight: 650;
    line-height: 1.7;
}

.category-detail-card {
    position: sticky;
    top: 1rem;
}

.category-color-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
    margin-left: 0.35rem;
    vertical-align: middle;
    border: 1px solid var(--app-border);
}

@media (max-width: 991.98px) {
    .category-detail-card {
        position: static;
    }
}

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

    .category-preview-box {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Reports */

.report-page {
    padding-block: 1rem 2rem;
}

.report-kpi-card {
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.report-kpi-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.24);
}

.report-kpi-income {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.report-kpi-expense {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.report-kpi-net {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.report-kpi-count {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.report-kpi-card span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.report-kpi-card strong {
    display: block;
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 950;
    white-space: nowrap;
}

.report-chart-card {
    min-height: 420px;
}

.report-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.report-chart-wrapper {
    position: relative;
    width: 100%;
    height: 310px;
}

.report-chart-wrapper-lg {
    height: 340px;
}

.report-empty-box {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    background: rgba(124, 58, 237, 0.10);
    font-weight: 800;
    text-align: center;
}

.report-list {
    display: grid;
    gap: 0.75rem;
}

.report-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.10);
    transition: 0.2s ease;
}

.report-list-item:hover {
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.18);
}

.report-list-item span {
    display: grid;
    gap: 0.2rem;
    color: var(--app-text);
    font-weight: 900;
}

.report-list-item small {
    color: var(--app-muted);
    font-weight: 700;
}

.report-list-item strong {
    color: var(--app-text);
    font-weight: 950;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .report-chart-card {
        min-height: auto;
    }

    .report-chart-wrapper,
    .report-chart-wrapper-lg {
        height: 300px;
    }
}

@media (max-width: 575.98px) {
    .report-kpi-card {
        min-height: auto;
    }

    .report-kpi-card strong {
        white-space: normal;
        font-size: 1rem;
    }

    .report-chart-wrapper,
    .report-chart-wrapper-lg {
        height: 260px;
    }

    .report-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-list-item strong {
        white-space: normal;
    }
}

/* Report filter layout fix */

.report-filter-card {
    overflow: visible;
}

.report-filter-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.report-filter-field {
    min-width: 0;
}

.report-filter-field .form-label {
    min-height: 24px;
    display: block;
    margin-bottom: 0.45rem;
}

.report-filter-field .form-control,
.report-filter-field .form-select {
    width: 100%;
}

.report-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.report-filter-errors {
    grid-column: 1 / -1;
}

/* Better report KPI alignment */

.report-kpi-card,
.wallet-summary-card {
    height: 100%;
}

.report-kpi-card {
    justify-content: flex-start;
}

.report-kpi-card > div:last-child,
.wallet-summary-card > div:last-child {
    min-width: 0;
}

.report-kpi-card strong,
.wallet-summary-card strong {
    direction: rtl;
    line-height: 1.7;
}

/* Responsive report filters */

@media (max-width: 1399.98px) {
    .report-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .report-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .report-filter-form {
        grid-template-columns: 1fr;
    }

    .report-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .report-filter-actions .btn {
        width: 100%;
    }
}

/* Debts / Parties */

.debt-page {
    padding-block: 1rem 2rem;
}

.debt-party-card {
    display: flex;
    flex-direction: column;
    transition: 0.2s ease;
}

.debt-party-card:hover {
    transform: translateY(-3px);
}

.debt-party-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.28);
}

.debt-party-title {
    max-width: 220px;
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debt-party-subtitle {
    color: var(--app-muted);
    font-weight: 700;
}

/* Debt operation colors */

.debt-operation-default {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-3));
}

.debt-operation-receivable {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.debt-operation-payable {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.debt-operation-collection {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.debt-operation-repayment {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* Debt transaction type cards */

.transaction-type-debt-given-card:hover {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.transaction-type-debt-received-card:hover {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.transaction-type-debt-collection-card:hover {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.transaction-type-debt-repayment-card:hover {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* Debt operation form sections */

.debt-form-section {
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
}

.debt-form-section-header {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--app-border);
}

@media (max-width: 575.98px) {
    .debt-form-section {
        padding: 0.85rem;
        border-radius: 18px;
    }
}

/* Debt records */

.debt-summary-card {
    height: 100%;
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.debt-summary-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.24);
}

.debt-summary-receivable {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.debt-summary-payable {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.debt-summary-net {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.debt-summary-due {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.debt-summary-card span {
    display: block;
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.debt-summary-card strong {
    display: block;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.7;
}

.debt-record-card {
    display: flex;
    flex-direction: column;
    transition: 0.2s ease;
}

.debt-record-card:hover {
    transform: translateY(-3px);
}

.debt-record-title {
    max-width: 250px;
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 950;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debt-record-subtitle {
    color: var(--app-muted);
    font-weight: 700;
    line-height: 1.7;
}

.debt-record-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.debt-record-meta div,
.debt-due-box {
    padding: 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.debt-record-meta span,
.debt-due-box span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.debt-record-meta strong,
.debt-due-box strong {
    display: block;
    color: var(--app-text);
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.7;
}

.debt-due-box small {
    display: block;
    color: var(--app-muted);
    font-weight: 800;
    margin-top: 0.25rem;
}

.debt-overdue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(239, 68, 68, 0.9);
    font-size: 0.78rem;
    font-weight: 900;
}

.debt-detail-card {
    position: sticky;
    top: 1rem;
}

.debt-detail-icon {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    color: #fff;
    font-size: 2.5rem;
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.24);
}

.debt-detail-receivable {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.debt-detail-payable {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.debt-detail-status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .debt-detail-card {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .debt-record-meta {
        grid-template-columns: 1fr;
    }

    .debt-summary-card {
        min-height: auto;
    }

    .debt-record-title {
        max-width: 200px;
    }
}

/* Debt installment summary */

.debt-installment-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.debt-installment-summary-item {
    padding: 0.95rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.debt-installment-summary-item span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.debt-installment-summary-item strong {
    display: block;
    color: var(--app-text);
    font-size: 0.95rem;
    font-weight: 950;
    line-height: 1.7;
}

.debt-installment-summary-item.success {
    background: rgba(34, 197, 94, 0.12);
}

.debt-installment-summary-item.warning {
    background: rgba(245, 158, 11, 0.12);
}

.debt-installment-summary-item.danger {
    background: rgba(239, 68, 68, 0.12);
}

.debt-next-installment-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.08);
}

.debt-next-installment-box span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.debt-next-installment-box strong {
    display: block;
    color: var(--app-text);
    font-weight: 950;
    line-height: 1.8;
}

@media (max-width: 1199.98px) {
    .debt-installment-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .debt-installment-summary-grid,
    .debt-next-installment-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .debt-installment-summary-grid,
    .debt-next-installment-box {
        grid-template-columns: 1fr;
    }
}

/* Debt dashboard */

.debt-summary-overdue {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.debt-summary-upcoming {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

/* Debt dashboard currency totals */

.debt-currency-card {
    min-height: 100%;
}

.debt-currency-list {
    display: grid;
    gap: 0.75rem;
}

.debt-currency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.debt-currency-row span {
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.debt-currency-row strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.7;
    text-align: left;
    direction: ltr;
}

.debt-currency-row.positive {
    background: rgba(20, 184, 166, 0.12);
}

.debt-currency-row.negative {
    background: rgba(245, 158, 11, 0.12);
}

.debt-currency-row.danger {
    background: rgba(239, 68, 68, 0.12);
}

.debt-currency-row.warning {
    background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 575.98px) {
    .debt-currency-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .debt-currency-row strong {
        text-align: right;
        direction: rtl;
    }
}

/* FinFlow brand logo */

.app-brand-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-decoration: none;
}

.app-brand-logo {
    display: block;
    width: auto;
    height: 42px;
    max-width: 180px;
    object-fit: contain;
}

.app-sidebar-brand .app-brand-logo {
    height: 46px;
    max-width: 190px;
}

.app-mobile-brand .app-brand-logo {
    height: 34px;
    max-width: 140px;
}

.offcanvas-header .app-brand-logo {
    height: 38px;
    max-width: 160px;
}

/* Default dark theme */
[data-bs-theme="dark"] .app-brand-logo-light {
    display: none;
}

[data-bs-theme="dark"] .app-brand-logo-dark {
    display: block;
}

/* Light theme */
[data-bs-theme="light"] .app-brand-logo-dark {
    display: none;
}

[data-bs-theme="light"] .app-brand-logo-light {
    display: block;
}

@media (max-width: 575.98px) {
    .app-mobile-brand .app-brand-logo {
        height: 30px;
        max-width: 124px;
    }

    .offcanvas-header .app-brand-logo {
        height: 34px;
        max-width: 145px;
    }
}

/* Sidebar and mobile report submenu */

.app-sidebar-dropdown {
    width: 100%;
}

.app-sidebar-dropdown-toggle {
    border: 0;
    background: transparent;
    text-align: right;
}

.app-sidebar-dropdown-arrow {
    margin-right: auto;
    font-size: 0.78rem;
    transition: transform 0.2s ease;
}

.app-sidebar-dropdown-toggle[aria-expanded="true"] .app-sidebar-dropdown-arrow {
    transform: rotate(180deg);
}

.app-sidebar-submenu {
    margin: 0.25rem 2.35rem 0.5rem 0;
    padding-right: 0.7rem;
    border-right: 1px solid var(--app-border);
}

.app-sidebar-submenu-link {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
    transition: 0.2s ease;
}

.app-sidebar-submenu-link:hover {
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.12);
}

.mobile-menu-dropdown-toggle {
    border: 0;
    background: transparent;
    width: 100%;
    text-align: right;
}

.mobile-menu-submenu {
    margin: 0.25rem 2.25rem 0.75rem 0;
    padding-right: 0.7rem;
    border-right: 1px solid var(--app-border);
}

.mobile-menu-submenu-link {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

.mobile-menu-submenu-link:hover {
    color: var(--app-text);
    background: rgba(124, 58, 237, 0.12);
}

.disabled-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Main dashboard */

.dashboard-kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 118px;
}

.dashboard-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.dashboard-kpi-wallet {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.dashboard-kpi-income {
    background: linear-gradient(135deg, #059669, #22c55e);
}

.dashboard-kpi-expense {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.dashboard-kpi-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.dashboard-kpi-card span {
    display: block;
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.dashboard-kpi-card strong {
    display: block;
    color: var(--app-text);
    font-size: 1.4rem;
    font-weight: 950;
    line-height: 1.5;
}

.dashboard-currency-list {
    display: grid;
    gap: 0.75rem;
}

.dashboard-currency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.dashboard-currency-row span {
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.dashboard-currency-row strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.7;
    text-align: left;
    direction: ltr;
}

.dashboard-currency-row.success {
    background: rgba(34, 197, 94, 0.12);
}

.dashboard-currency-row.danger {
    background: rgba(239, 68, 68, 0.12);
}

.dashboard-currency-row.warning {
    background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 575.98px) {
    .dashboard-currency-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-currency-row strong {
        text-align: right;
        direction: rtl;
    }
}

/* Financial report currency summaries */

.report-currency-card {
    min-height: 100%;
}

.report-currency-list {
    display: grid;
    gap: 0.75rem;
}

.report-currency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.10);
}

.report-currency-row span {
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.report-currency-row strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.7;
    text-align: left;
    direction: ltr;
}

.report-currency-row.positive {
    background: rgba(20, 184, 166, 0.12);
}

.report-currency-row.success {
    background: rgba(34, 197, 94, 0.12);
}

.report-currency-row.danger {
    background: rgba(239, 68, 68, 0.12);
}

.report-currency-row.warning {
    background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 575.98px) {
    .report-currency-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .report-currency-row strong {
        text-align: right;
        direction: rtl;
    }
}

/* Income / Expense detailed report */

.report-category-tree {
    display: grid;
    gap: 1rem;
}

.report-category-parent {
    border: 1px solid var(--app-border);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(124, 58, 237, 0.06);
}

.report-category-parent-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.report-category-parent-header strong {
    display: block;
    color: var(--app-text);
    font-weight: 950;
    margin-bottom: 0.25rem;
}

.report-category-parent-header small {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.report-category-parent-header span {
    color: var(--app-text);
    font-weight: 950;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.report-category-children {
    display: grid;
    gap: 0;
}

.report-category-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.report-category-child:last-child {
    border-bottom: 0;
}

.report-category-child span {
    color: var(--app-text);
    font-weight: 850;
}

.report-category-child small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.report-category-child strong {
    color: var(--app-text);
    font-weight: 950;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.report-kpi-card small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 750;
    margin-top: 0.2rem;
}

@media (max-width: 575.98px) {
    .report-category-parent-header,
    .report-category-child {
        flex-direction: column;
    }

    .report-category-parent-header span,
    .report-category-child strong {
        text-align: right;
        direction: rtl;
    }
}

/* Reports hub */

.report-hub-kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 118px;
}

.report-hub-kpi-card span {
    display: block;
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.report-hub-kpi-card strong {
    display: block;
    color: var(--app-text);
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1.5;
}

.report-hub-kpi-card small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.report-hub-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 190px;
    text-decoration: none;
    color: var(--app-text);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.report-hub-card:hover {
    transform: translateY(-3px);
    color: var(--app-text);
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.08);
}

.report-hub-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.report-hub-card-primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.report-hub-card-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.report-hub-card h3 {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    margin-bottom: 0.5rem;
}

.report-hub-card p {
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.9;
    margin-bottom: 0.75rem;
}

.report-hub-card span {
    color: #a855f7;
    font-size: 0.82rem;
    font-weight: 900;
}

.report-hub-card-disabled {
    opacity: 0.58;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .report-hub-card {
        min-height: auto;
    }
}

/* Income / Expense report advanced layout */

.income-expense-section {
    overflow: hidden;
}

.report-category-tree {
    display: grid;
    gap: 1rem;
}

.report-category-parent {
    border: 1px solid var(--app-border);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(124, 58, 237, 0.06);
}

.report-category-parent-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.report-category-parent-header strong {
    display: block;
    color: var(--app-text);
    font-weight: 950;
    margin-bottom: 0.25rem;
}

.report-category-parent-header small {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.report-category-parent-header span {
    color: var(--app-text);
    font-weight: 950;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.report-category-children {
    display: grid;
    gap: 0;
}

.report-category-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.report-category-child:last-child {
    border-bottom: 0;
}

.report-category-child span {
    color: var(--app-text);
    font-weight: 850;
}

.report-category-child small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.report-category-child strong {
    color: var(--app-text);
    font-weight: 950;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.report-mini-list {
    display: grid;
    gap: 0.75rem;
}

.report-mini-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.08);
}

.report-mini-list-item span {
    color: var(--app-text);
    font-weight: 850;
}

.report-mini-list-item small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.report-mini-list-item strong {
    color: var(--app-text);
    font-weight: 950;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.report-scroll-table {
    max-height: 460px;
    overflow: auto;
    border-radius: 18px;
    border: 1px solid var(--app-border);
}

.report-scroll-table table {
    margin-bottom: 0;
}

.report-scroll-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-card-bg);
}

.report-kpi-card small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 750;
    margin-top: 0.2rem;
}

@media (max-width: 575.98px) {
    .report-category-parent-header,
    .report-category-child,
    .report-mini-list-item {
        flex-direction: column;
    }

    .report-category-parent-header span,
    .report-category-child strong,
    .report-mini-list-item strong {
        text-align: right;
        direction: rtl;
    }

    .report-scroll-table {
        max-height: 520px;
    }
}

/* Dangs */

.dang-card {
    display: block;
    text-decoration: none;
    color: var(--app-text);
    min-height: 230px;
    transition: 0.2s ease;
}

.dang-card:hover {
    color: var(--app-text);
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.08);
}

.dang-card-stats {
    display: grid;
    gap: 0.75rem;
}

.dang-card-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
}

.dang-card-stats span {
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.dang-card-stats strong {
    color: var(--app-text);
    font-size: 0.92rem;
    font-weight: 950;
}

.dang-card-stats small {
    color: var(--app-muted);
    font-size: 0.72rem;
}

.dang-my-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.08);
}

.dang-my-balance.positive {
    background: rgba(34, 197, 94, 0.12);
}

.dang-my-balance.negative {
    background: rgba(245, 158, 11, 0.12);
}

.dang-my-balance span {
    color: var(--app-muted);
    font-weight: 850;
}

.dang-my-balance strong {
    color: var(--app-text);
    font-size: 1.2rem;
    font-weight: 950;
}

.dang-expense-list {
    display: grid;
    gap: 1rem;
}

.dang-expense-item {
    border: 1px solid var(--app-border);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(124, 58, 237, 0.06);
}

.dang-expense-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.dang-expense-main h3 {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    margin-bottom: 0.35rem;
}

.dang-expense-main p {
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0;
}

.dang-expense-main strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    white-space: nowrap;
}

.dang-expense-main small {
    color: var(--app-muted);
    font-size: 0.75rem;
}

.dang-share-list {
    display: grid;
}

.dang-share-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.dang-share-list div:last-child {
    border-bottom: 0;
}

.dang-share-list span {
    color: var(--app-text);
    font-weight: 850;
}

.dang-share-list strong {
    color: var(--app-text);
    font-weight: 950;
}

.dang-share-list small {
    color: var(--app-muted);
}

@media (max-width: 575.98px) {
    .dang-expense-main,
    .dang-my-balance {
        flex-direction: column;
    }

    .dang-share-list div,
    .dang-card-stats div {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dang create form - party checkbox list */

.dang-party-checkbox-box {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: rgba(124, 58, 237, 0.06);
}

.dang-party-checkbox-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.dang-party-checkbox-box li {
    margin: 0;
}

.dang-party-checkbox-box label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.dang-party-checkbox-box label:hover {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.45);
}

.dang-party-checkbox-box input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #7c3aed;
    flex: 0 0 auto;
}

.dang-party-checkbox-box input[type="checkbox"]:checked + span {
    color: var(--app-text);
}

/* Category visual icon/color picker */

.category-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.85rem;
    max-height: 420px;
    overflow-y: auto;
    padding: 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 22px;
    background: rgba(124, 58, 237, 0.06);
}

.category-icon-option {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    padding: 0.85rem 0.55rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    transition: 0.2s ease;
    min-height: 96px;
}

.category-icon-option:hover {
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.category-icon-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.category-icon-preview {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.16);
    color: var(--app-text);
    font-size: 1.35rem;
}

.category-icon-option small {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.6;
}

.category-icon-option:has(input:checked) {
    border-color: rgba(168, 85, 247, 0.9);
    background: rgba(124, 58, 237, 0.18);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.category-icon-option:has(input:checked) .category-icon-preview {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
}

.category-icon-option:has(input:checked) small {
    color: var(--app-text);
}

.category-color-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 22px;
    background: rgba(124, 58, 237, 0.06);
}

.category-color-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    transition: 0.2s ease;
}

.category-color-option:hover {
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.category-color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.category-color-preview {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    flex: 0 0 auto;
}

.category-color-option small {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.category-color-option:has(input:checked) {
    border-color: rgba(168, 85, 247, 0.9);
    background: rgba(124, 58, 237, 0.18);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.category-color-option:has(input:checked) small {
    color: var(--app-text);
}

@media (max-width: 575.98px) {
    .category-icon-picker {
        grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
        max-height: 460px;
    }

    .category-icon-option {
        min-height: 86px;
        padding: 0.7rem 0.45rem;
    }

    .category-icon-preview {
        width: 36px;
        height: 36px;
        font-size: 1.15rem;
    }

    .category-color-picker {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    }
}

/* Dang detail advanced */

.dang-detail-page .report-kpi-card {
    min-height: 118px;
}

.dang-member-balance-grid {
    display: grid;
    gap: 1rem;
}

.dang-member-balance-card {
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.06);
}

.dang-member-balance-card.creditor {
    background: rgba(34, 197, 94, 0.11);
    border-color: rgba(34, 197, 94, 0.24);
}

.dang-member-balance-card.debtor {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.24);
}

.dang-member-balance-card.settled {
    background: rgba(100, 116, 139, 0.10);
}

.dang-member-balance-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.dang-member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.18);
    color: var(--app-text);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.dang-member-balance-head strong {
    display: block;
    color: var(--app-text);
    font-size: 0.98rem;
    font-weight: 950;
}

.dang-member-balance-head small {
    display: block;
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 800;
    margin-top: 0.15rem;
}

.dang-member-balance-amount {
    color: var(--app-text);
    font-size: 1.3rem;
    font-weight: 950;
    margin-bottom: 0.9rem;
    direction: ltr;
    text-align: right;
}

.dang-member-balance-amount small {
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.dang-member-balance-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.dang-member-balance-meta div {
    padding: 0.65rem;
    border-radius: 14px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.035);
}

.dang-member-balance-meta span {
    display: block;
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.dang-member-balance-meta strong {
    display: block;
    color: var(--app-text);
    font-size: 0.84rem;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.dang-settlement-suggestions {
    display: grid;
    gap: 1rem;
}

.dang-settlement-suggestion {
    border: 1px solid var(--app-border);
    border-radius: 22px;
    padding: 1rem;
    background: rgba(124, 58, 237, 0.07);
}

.dang-settlement-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.dang-settlement-route div {
    padding: 0.8rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border);
}

.dang-settlement-route span {
    display: block;
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.dang-settlement-route strong {
    display: block;
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 950;
}

.dang-settlement-route i {
    color: #a855f7;
    font-size: 1.2rem;
}

.dang-settlement-suggestion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dang-settlement-suggestion-footer strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
}

.dang-settlement-suggestion-footer small {
    color: var(--app-muted);
    font-size: 0.75rem;
}

.dang-expense-title-area {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.dang-expense-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.18);
    color: var(--app-text);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.dang-expense-description {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1.9;
}

.category-visual-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--app-text);
    font-size: 0.82rem;
    font-weight: 850;
}

.category-visual-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--category-color);
    color: #ffffff;
    font-size: 0.9rem;
}

.dang-share-list small {
    display: inline-block;
    color: var(--app-muted);
    font-size: 0.72rem;
    margin-right: 0.25rem;
}

@media (max-width: 575.98px) {
    .dang-member-balance-meta {
        grid-template-columns: 1fr;
    }

    .dang-settlement-route {
        grid-template-columns: 1fr;
    }

    .dang-settlement-route i {
        transform: rotate(-90deg);
        justify-self: center;
    }

    .dang-settlement-suggestion-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .dang-expense-title-area {
        flex-direction: column;
    }
}

.dang-expense-actions {
    display: grid;
    justify-items: end;
    gap: 0.65rem;
    flex: 0 0 auto;
}

.dang-expense-actions strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    white-space: nowrap;
}

.dang-expense-actions small {
    color: var(--app-muted);
    font-size: 0.75rem;
}

@media (max-width: 575.98px) {
    .dang-expense-actions {
        justify-items: start;
        width: 100%;
    }
}

/* Dang report */

.dang-report-balance-card {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.08);
}

.dang-report-balance-card.positive {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.24);
}

.dang-report-balance-card.negative {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.24);
}

.dang-report-balance-card.settled {
    background: rgba(100, 116, 139, 0.10);
}

.dang-report-balance-card span {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.dang-report-balance-card strong {
    color: var(--app-text);
    font-size: 1.25rem;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.dang-report-list {
    display: grid;
    gap: 0.85rem;
}

.dang-report-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
    text-decoration: none;
    color: var(--app-text);
    transition: 0.2s ease;
}

.dang-report-list-item:hover {
    color: var(--app-text);
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.13);
    transform: translateY(-2px);
}

.dang-report-list-item strong {
    display: block;
    color: var(--app-text);
    font-weight: 950;
    margin-bottom: 0.25rem;
}

.dang-report-list-item small {
    display: block;
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.dang-report-amount {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.dang-report-amount.positive {
    color: #22c55e;
}

.dang-report-amount.negative {
    color: #f59e0b;
}

.dang-report-amount small {
    color: var(--app-muted);
    font-size: 0.72rem;
}

.dang-report-two-column {
    display: grid;
    gap: 1rem;
}

.dang-report-subtitle {
    font-size: 0.95rem;
    font-weight: 950;
    margin-bottom: 0.75rem;
}

.dang-report-person-list {
    display: grid;
    gap: 0.65rem;
}

.dang-report-person-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.035);
}

.dang-report-person-item span {
    color: var(--app-text);
    font-size: 0.86rem;
    font-weight: 900;
}

.dang-report-person-item small {
    display: block;
    color: var(--app-muted);
    font-size: 0.72rem;
    margin-top: 0.18rem;
}

.dang-report-person-item strong {
    color: var(--app-text);
    font-size: 0.88rem;
    font-weight: 950;
    direction: ltr;
    text-align: left;
}

@media (max-width: 575.98px) {
    .dang-report-list-item,
    .dang-report-person-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dang-report-amount,
    .dang-report-person-item strong {
        text-align: right;
        direction: rtl;
    }
}

/* Buildings */

.building-card {
    display: block;
    text-decoration: none;
    color: var(--app-text);
    min-height: 190px;
    transition: 0.2s ease;
}

.building-card:hover {
    color: var(--app-text);
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.08);
}

.building-card-stats {
    display: grid;
    gap: 0.75rem;
}

.building-card-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
}

.building-card-stats span {
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.building-card-stats strong {
    color: var(--app-text);
    font-size: 0.92rem;
    font-weight: 950;
}

.building-card-stats small {
    color: var(--app-muted);
    font-size: 0.72rem;
}

.building-category-list {
    display: grid;
    gap: 0.75rem;
}

.building-category-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
    color: var(--app-text);
    text-decoration: none;
    transition: 0.2s ease;
}

.building-category-item:hover {
    color: var(--app-text);
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.13);
}

.building-category-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.building-category-item span:last-child {
    font-weight: 900;
}

.building-category-item small {
    display: block;
    color: var(--app-muted);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}
.charge-live-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.charge-live-summary div {
    min-width: 180px;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
}

.charge-live-summary span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.charge-live-summary strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
}

/* Building expense form */

.expense-live-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.expense-live-summary div {
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: rgba(124, 58, 237, 0.07);
}

.expense-live-summary span {
    display: block;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.expense-live-summary strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 950;
}

.expense-method-help {
    background: rgba(124, 58, 237, 0.07);
}