html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--app-background);
    color: var(--app-text);
}

.app-main {
    flex: 1 0 auto;
}

.app-footer {
    flex-shrink: 0;
    background: var(--app-surface);
    padding: 1rem 0;
    border-color: var(--app-border) !important;
}

body,
.form-control,
.form-select,
.btn,
.card,
.nav-link {
    color: var(--app-text);
}

.text-muted,
.form-text,
small {
    color: var(--app-text-muted) !important;
}

.border,
.card,
.form-control,
.form-select,
.input-group-text,
.table,
.table > :not(caption) > * > * {
    border-color: var(--app-border) !important;
}

.bg-light {
    background: var(--app-background) !important;
}

.card-soft {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.05);
}

.app-form-shell {
    max-width: 640px;
    margin: 0 auto;
}

.auth-card,
.form-card-unified {
    max-width: 640px;
    margin: 0 auto;
}

.auth-screen-body {
    min-height: 100vh;
}

.auth-screen-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}

.brand-logo-wrap,
.auth-logo-wrap,
.dashboard-logo-wrap {
    width: 250px;
    height: 50px;
    max-width: 250px;
    max-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.auth-logo-wrap {
    justify-content: center;
}

.auth-logo,
.app-brand img,
.dashboard-logo {
    width: 250px !important;
    height: 50px !important;
    min-width: 250px;
    max-width: 250px !important;
    min-height: 50px;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block;
}

.app-navbar {
    background: var(--app-dark);
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.28);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18);
}

.navbar-toggler-icon {
    filter: invert(1);
}

.app-brand img {
    width: 250px;
    height: 50px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.88);
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: #fff;
}

.navbar .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.navbar .btn-outline-light:hover {
    background: #fff;
    color: var(--app-dark);
}

.btn-primary {
    background: #C7EAFB;
    border-color: #C7EAFB;
    color: #2E3192;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #b3e1f7 !important;
    border-color: #b3e1f7 !important;
    color: #2E3192 !important;
}

.btn-outline-primary {
    border-color: #2E3192;
    color: #2E3192;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: #C7EAFB !important;
    border-color: #C7EAFB !important;
    color: #2E3192 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--app-primary-rgb), 0.7) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), 0.18);
}

.password-toggle-btn {
    min-width: 52px;
}

.avatar-preview,
.profile-avatar-large {
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--app-secondary-rgb), 0.08);
    border: 2px solid rgba(var(--app-primary-rgb), 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--app-secondary);
}

.avatar-preview img,
.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-preview {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

.dashboard-avatar {
    width: 50px;
    height: 50px;
}

.profile-avatar-large {
    width: 96px;
    height: 96px;
    font-size: 2rem;
}

.profile-avatar-100 {
    width: 100px;
    height: 100px;
}

.dashboard-summary-grid {
    display: grid;
    gap: 1rem;
}

.stat-card {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: transparent;
    box-shadow: none;
}

.stat-card .card-body,
.stat-card .card-body div,
.stat-card .card-body small {
    color: var(--app-text) !important;
}

.dashboard-logo {
    flex-shrink: 0;
}

.app-surface-box {
    background: var(--app-surface);
}

.alert-info {
    color: #083344;
    background: rgba(var(--app-info-rgb), 0.12);
    border-color: rgba(var(--app-info-rgb), 0.25);
}

.toast.text-bg-success {
    background-color: var(--app-success) !important;
}

.toast.text-bg-danger {
    background-color: var(--app-error) !important;
}

.toast.text-bg-warning {
    background-color: var(--app-warning) !important;
    color: #1f2937 !important;
}

.toast.text-bg-info {
    background-color: var(--app-info) !important;
}

.app-toast-container {
    z-index: 1085;
}

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

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--app-text);
}

.user-manage-actions {
    min-width: 140px;
}

@media (max-width: 767.98px) {
    .brand-logo-wrap,
    .auth-logo-wrap,
    .dashboard-logo-wrap,
    .auth-logo,
    .app-brand img,
    .dashboard-logo {
        width: 220px !important;
        max-width: 220px !important;
    }
}

.user-list-avatar {
    width: 42px;
    height: 42px;
    font-size: 1rem;
    flex-shrink: 0;
}


.signup-amount-box {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: rgba(var(--app-primary-rgb), 0.08);
    padding: 1rem 1.25rem;
}

.signup-amount-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--app-text);
    margin-bottom: 0.25rem;
}

.signup-amount-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #2E3192;
}

.bkash-config-note {
    border: 1px dashed var(--app-border);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
}

.congrats-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--app-success-rgb), 0.12);
    color: var(--app-success);
    font-size: 2.25rem;
}

.tool-section-heading {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.dashboard-tools-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tool-item {
    width: 100%;
    min-height: 86px;
    border-radius: 1.1rem;
    padding: 1rem 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.18);
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(var(--app-primary-rgb), 0.08));
    color: var(--app-text);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.tool-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
    pointer-events: none;
}

.tool-item:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(var(--app-primary-rgb), 0.38);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255,255,255,0.95);
}

.tool-item:active {
    transform: translateY(-2px) scale(0.995);
}

.tool-item-label {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

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

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

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


.profile-action-row .btn {
    min-width: 160px;
}

.btn-bkash {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #DF146E;
    --bs-btn-border-color: #DF146E;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #c41264;
    --bs-btn-hover-border-color: #c41264;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #ab1057;
    --bs-btn-active-border-color: #ab1057;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #DF146E;
    color: #ffffff;
    border-color: #DF146E;
}

.bkash-button-logo {
    width: 28px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
}

.app-transactions-shell {
    max-width: 100%;
}

.app-table thead th {
    background: var(--app-surface);
    white-space: nowrap;
}

.pagination .page-link {
    color: var(--app-text);
    border-color: var(--app-border);
    background: var(--app-surface);
}

.pagination .page-item.active .page-link {
    background: var(--app-primary);
    border-color: #2E3192;
    color: #fff;
}

.amount-positive {
    color: #166534 !important;
}

.amount-negative {
    color: var(--app-error) !important;
}

.txn-info-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    border: 1px solid var(--app-border);
    color: var(--app-info);
    cursor: help;
    background: var(--app-surface);
    user-select: none;
}

.txn-info-icon:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--app-info-rgb), 0.16);
}


.btn-bkash {
    background: #DF146E;
    border-color: #DF146E;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-bkash:hover,
.btn-bkash:focus,
.btn-bkash:active {
    background: #c51261 !important;
    border-color: #c51261 !important;
    color: #fff !important;
}

.bkash-button-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.dashboard-transactions-preview {
    border-top: 1px solid var(--app-border);
    padding-top: 1rem;
}

.app-table-sm th,
.app-table-sm td {
    font-size: 0.92rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.credit-prompt-modal .modal-content {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1.2rem 2.5rem rgba(15, 23, 42, 0.16);
}

.credit-prompt-modal .modal-header,
.credit-prompt-modal .modal-footer {
    border-color: var(--app-border);
}

.credit-prompt-title {
    font-weight: 700;
}

.credit-prompt-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.credit-prompt-input {
    height: 52px;
    font-size: 1.05rem;
    text-align: center;
    border-radius: 0.85rem;
}

.credit-prompt-hint {
    text-align: center;
}


.btn-bkash {
    text-align: center;
}

.btn-bkash span {
    flex: 0 1 auto;
    text-align: center;
}

.dashboard-actions .btn-bkash,
.dashboard-credit-button {
    width: 100%;
    justify-content: center;
}

.profile-action-row .btn-bkash {
    justify-content: center;
}


.landing-page {
    display: grid;
    gap: 1.5rem;
}

.landing-hero,
.landing-section,
.landing-final-cta {
    padding: 2rem;
}

.landing-badge,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-secondary);
}

.landing-title,
.section-title {
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.12;
    margin: 0;
}

.section-title {
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
}

.landing-subtitle,
.section-text,
.landing-cta-text {
    color: var(--app-text-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 58rem;
}

.landing-micro-meta {
    display: grid;
    gap: 0.5rem;
    color: var(--app-text);
    font-size: 0.96rem;
}

.landing-hero-visual img,
.landing-benefit-card img,
.landing-section img {
    width: 100%;
    object-fit: cover;
}

.landing-feature-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.landing-feature-card {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: rgba(255,255,255,0.55);
    padding: 1rem;
    box-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.04);
}

.landing-feature-card i {
    font-size: 1.4rem;
    color: var(--app-accent);
}

.landing-feature-card h3,
.landing-benefit-card h3 {
    font-size: 1.1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.45rem;
}

.landing-feature-card p,
.landing-benefit-card p {
    margin-bottom: 0;
    color: var(--app-text-muted);
}

.landing-check-list {
    display: grid;
    gap: 0.95rem;
    margin-top: 1.25rem;
}

.landing-check-list div {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--app-text);
}

.landing-check-list i {
    color: var(--app-success);
    font-size: 1.1rem;
    line-height: 1.5;
}

.landing-final-cta {
    padding: 2.5rem 2rem;
}

@media (max-width: 991.98px) {
    .landing-hero,
    .landing-section,
    .landing-final-cta {
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    .landing-title,
    .section-title {
        font-size: 1.6rem;
    }
}


.create-account-page .landing-hero,
.create-account-page .landing-section > .card-soft,
.create-account-page .landing-copy-card,
.create-account-page .landing-signup-card {
    padding: 2rem;
}

.create-account-page .landing-hero {
    background:
        radial-gradient(circle at top right, rgba(130, 92, 245, 0.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(223, 20, 110, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,247,255,0.96));
}

.landing-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.landing-hero-points span,
.landing-price-strip div {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: rgba(255,255,255,0.72);
    box-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.05);
}

.landing-hero-points i {
    color: var(--app-success);
}

.landing-price-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.landing-hero-main-img {
    min-height: 320px;
    object-fit: cover;
}

.landing-feature-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-signup-card {
    position: relative;
}

.landing-signup-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(130, 92, 245, 0.35), rgba(223, 20, 110, 0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.landing-form-title {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.signup-amount-meta {
    color: var(--app-text-muted);
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

@media (max-width: 991.98px) {
    .landing-feature-grid-3 {
        grid-template-columns: 1fr;
    }

    .create-account-page .landing-hero,
    .create-account-page .landing-section > .card-soft,
    .create-account-page .landing-copy-card,
    .create-account-page .landing-signup-card {
        padding: 1.5rem;
    }
}


.landing-body {
    background:
        radial-gradient(circle at top left, rgba(130, 92, 245, 0.10), transparent 28%),
        radial-gradient(circle at top right, rgba(223, 20, 110, 0.08), transparent 24%),
        linear-gradient(180deg, #f7f8ff 0%, #ffffff 42%, #f9f7ff 100%);
}

.landing-conversion-page {
    flex: 1 0 auto;
}

.sales-hero,
.sales-story-section,
.sales-showcase-section,
.sales-final-cta-section {
    position: relative;
}

.sales-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sales-brand-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(130, 92, 245, 0.14);
    box-shadow: 0 1rem 2.2rem rgba(33, 39, 73, 0.08);
}

.sales-brand-pill img {
    width: 250px;
    height: 50px;
    object-fit: contain;
    display: block;
}

.sales-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    color: var(--app-dark);
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(130, 92, 245, 0.18);
    box-shadow: 0 1rem 2rem rgba(17, 24, 39, 0.05);
    font-weight: 700;
}

.sales-eyebrow i {
    color: var(--app-accent);
}

.sales-title {
    font-size: clamp(2.2rem, 4.2vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    max-width: 13ch;
    margin: 0;
}

.sales-subtitle {
    max-width: 60rem;
    color: var(--app-text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
}

.sales-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sales-proof-card {
    padding: 1rem 1.05rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(130, 92, 245, 0.12);
    background: rgba(255,255,255,0.84);
    box-shadow: 0 1rem 2.2rem rgba(17, 24, 39, 0.05);
}

.sales-proof-card strong,
.sales-module-card h3 {
    display: block;
    font-size: 1.02rem;
    margin-bottom: 0.45rem;
}

.sales-proof-card span,
.sales-module-card p,
.sales-benefit-list span {
    color: var(--app-text-muted);
}

.sales-scroll-note span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--app-secondary);
    font-weight: 600;
}

.sales-hero-visual {
    overflow: hidden;
    padding: 1rem;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,244,255,0.95));
    box-shadow: 0 1.5rem 3.5rem rgba(31, 38, 69, 0.12);
}

.sales-banner-img {
    min-height: 360px;
    object-fit: cover;
    width: 100%;
}

.sales-visual-overlay {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.9rem;
}

.sales-mini-stat {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: rgba(130, 92, 245, 0.06);
    border: 1px solid rgba(130, 92, 245, 0.10);
}

.sales-mini-stat .label {
    display: block;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    margin-bottom: 0.35rem;
}

.sales-copy-block,
.sales-signup-block,
.sales-final-cta,
.sales-module-card {
    padding: 2rem;
}

.sales-copy-block,
.sales-signup-block,
.sales-final-cta {
    box-shadow: 0 1.5rem 3rem rgba(31, 38, 69, 0.08);
}

.sales-benefit-list {
    display: grid;
    gap: 1rem;
}

.sales-benefit-list div {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.sales-benefit-list i {
    color: var(--app-success);
    font-size: 1.1rem;
    line-height: 1.5;
}

.sales-tool-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sales-tool-cluster span {
    display: inline-flex;
    align-items: center;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    background: rgba(130, 92, 245, 0.08);
    border: 1px solid rgba(130, 92, 245, 0.11);
    font-weight: 600;
}

.sales-signup-block {
    position: sticky;
    top: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(249,246,255,0.98));
}

.sales-form-heading {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.sales-price-card {
    border: 1px solid rgba(130, 92, 245, 0.14);
    border-radius: 1.1rem;
    background: rgba(130, 92, 245, 0.05);
    padding: 1rem 1rem 0.9rem;
}

.sales-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}

.sales-price-note {
    margin-top: 0.7rem;
    color: var(--app-text-muted);
    font-size: 0.92rem;
}

.sales-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sales-trust-row div {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--app-text-muted);
}

.sales-trust-row i {
    color: var(--app-accent);
}

.sales-section-head .section-text {
    max-width: 48rem;
}

.sales-module-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.sales-final-cta {
    background:
        radial-gradient(circle at top right, rgba(130, 92, 245, 0.14), transparent 26%),
        radial-gradient(circle at bottom left, rgba(223, 20, 110, 0.10), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,244,255,0.95));
}

.landing-footer-simple {
    background: transparent;
    padding-bottom: 1.5rem;
}

@media (max-width: 1199.98px) {
    .sales-proof-grid {
        grid-template-columns: 1fr;
    }

    .sales-title {
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    .sales-copy-block,
    .sales-signup-block,
    .sales-final-cta,
    .sales-module-card {
        padding: 1.5rem;
    }

    .sales-signup-block {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .sales-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .sales-brand-pill img {
        width: 210px;
        height: 42px;
    }

    .sales-title {
        font-size: 2rem;
    }

    .sales-visual-overlay {
        grid-template-columns: 1fr;
    }

    .sales-price-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


.app-form-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
}

.app-form-switch .form-check-input {
    cursor: pointer;
    float: none;
    margin: 0;
    flex-shrink: 0;
}

.app-form-switch .form-check-label {
    cursor: pointer;
    font-weight: 600;
    margin: 0;
}


.ticket-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.ticket-message-box{border:1px solid var(--app-border);border-radius:1rem;padding:1rem;background:var(--app-surface)}
.ticket-reply{border:1px solid var(--app-border);border-radius:1rem;padding:1rem;background:#fff}
.ticket-reply.admin{border-left:4px solid var(--app-primary)}
.ticket-reply.user{border-left:4px solid var(--app-accent)}
.ticket-attachments a{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid var(--app-border);border-radius:999px;text-decoration:none;color:var(--app-text);margin:.15rem .35rem .15rem 0;background:#fff}
.ticket-status-badge{padding:.35rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;border:1px solid var(--app-border);display:inline-block}
.ticket-status-Open{background:#eff6ff;color:#1d4ed8}.ticket-status-Answered{background:#ecfeff;color:#0f766e}.ticket-status-Customer-Reply{background:#fff7ed;color:#c2410c}.ticket-status-Closed{background:#f3f4f6;color:#374151}
.ticket-priority-Low{color:#0f766e}.ticket-priority-Medium{color:#c2410c}.ticket-priority-Heigh{color:#b91c1c}


.user-menu-dropdown .dropdown-toggle::after {
    display: none;
}

.user-avatar-toggle {
    padding: 0.15rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

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

.user-menu-panel {
    min-width: 242px;
    max-width: calc(100vw - 1.5rem);
    max-height: min(520px, calc(100vh - 1.5rem));
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: .9rem;
    padding: .38rem;
    background: var(--app-surface);
}

.user-menu-meta {
    padding: .38rem .45rem .25rem;
}

.user-menu-name {
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--app-text);
}

.user-menu-email {
    font-size: 0.9rem;
    color: var(--app-text-muted);
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.user-menu-divider {
    margin: 0.45rem 0 0.6rem;
}

.user-menu-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .7rem;
    font-size: .74rem;
    line-height: 1.35;
    margin-bottom: .48rem;
}

.user-menu-line .label {
    color: var(--app-text-muted);
    font-weight: 400;
    white-space: nowrap;
}

.user-menu-line .value {
    color: var(--app-text);
    font-weight: 400;
    text-align: right;
}

.user-menu-panel .dropdown-item {
    display: flex;
    align-items: center;
    gap: .48rem;
    min-height: 29px;
    border: 0;
    border-radius: .45rem;
    padding: .32rem .48rem;
    background: transparent;
    color: var(--app-text);
    font-size: .76rem;
    line-height: 1.2;
    text-align: left;
}

.user-menu-panel .dropdown-item i {
    width: .9rem;
    flex: 0 0 .9rem;
    margin: 0 !important;
    color: #111827;
    font-size: .76rem;
    text-align: center;
}

.user-menu-panel .dropdown-item.text-danger i { color: inherit; }
.user-menu-panel > .dropdown-divider { margin: .28rem .08rem; }

.user-menu-panel .dropdown-item.active,
.user-menu-panel .dropdown-item:active {
    background: rgba(var(--app-primary-rgb), 0.12);
    color: var(--app-text);
}


.ai-chat-shell{max-width:100%;margin:0 auto}.ai-chat-card{border-radius:1.25rem}.ai-chat-messages{min-height:420px;max-height:65vh;overflow-y:auto;padding:1rem;border:1px solid var(--app-border);border-radius:1rem;background:linear-gradient(180deg,rgba(130,92,245,.04),rgba(247,198,0,.04))}.ai-message-row{display:flex;margin-bottom:1rem}.ai-message-row.user{justify-content:flex-end}.ai-message-row.assistant{justify-content:flex-start}.ai-message-bubble{max-width:min(100%,780px);border-radius:1.15rem;padding:1rem 1rem .85rem;box-shadow:0 .5rem 1.2rem rgba(15,23,42,.06)}.ai-message-bubble.user{background:var(--app-dark);color:#fff;border-bottom-right-radius:.45rem}.ai-message-bubble.assistant{background:#fff;border:1px solid var(--app-border);border-bottom-left-radius:.45rem}.ai-message-meta{text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;font-weight:700;margin-bottom:.45rem;opacity:.85}.ai-message-content{line-height:1.7}.ai-message-content p:last-child{margin-bottom:0}.ai-message-content pre{background:#0f172a;color:#fff;padding:.9rem;border-radius:.85rem;overflow:auto}.ai-message-content code{background:rgba(15,23,42,.08);padding:.1rem .35rem;border-radius:.3rem}.ai-message-content pre code{background:transparent;padding:0}.ai-message-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}.ai-message-actions .btn-link{text-decoration:none}.ai-input-wrap{border:1px solid var(--app-border);border-radius:1rem;padding:.85rem;background:var(--app-surface)}.ai-chat-textarea{border:none!important;box-shadow:none!important;resize:none;min-height:120px;background:transparent!important}.ai-input-actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap;padding-top:.75rem;border-top:1px solid var(--app-border)}.ai-template-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.ai-template-btn{width:100%;white-space:normal;text-align:center;justify-content:center;min-height:44px}.ai-selected-files{display:flex;gap:.5rem;flex-wrap:wrap}.ai-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:320px;color:var(--app-text)}.ai-empty-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(130,92,245,.1);font-size:1.9rem;margin-bottom:1rem;color:var(--app-dark)}.ai-empty-image-wrap{overflow:hidden;padding:0;background:rgba(130,92,245,.08)}.ai-empty-image-wrap img{width:100%;height:100%;object-fit:contain;padding:14px}.ai-settings-shell{max-width:100%}@media (max-width:991.98px){.ai-template-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767.98px){.ai-chat-messages{min-height:340px;padding:.8rem}.ai-message-bubble{max-width:100%}.ai-input-actions{justify-content:stretch}.ai-input-actions .btn{flex:1 1 auto}.ai-template-strip{grid-template-columns:1fr}}
.ai-modal-open{overflow:hidden}.ai-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:1rem;z-index:1080}.ai-modal-backdrop.show{display:flex}.ai-modal-card{width:min(100%,480px);background:#fff;border-radius:1.25rem;padding:1.6rem 1.4rem;box-shadow:0 1.5rem 3rem rgba(15,23,42,.18);text-align:center;border:1px solid var(--app-border)}.ai-modal-icon{width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;background:linear-gradient(135deg,rgba(130,92,245,.15),rgba(247,198,0,.22));display:flex;align-items:center;justify-content:center;color:var(--app-dark);font-size:1.7rem}.ai-modal-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}@media (max-width:767.98px){.ai-modal-card{padding:1.25rem}.ai-modal-actions .btn{width:100%}}


.app-form-shell.app-transactions-shell,
.app-form-shell.ai-settings-shell {
    max-width: 100%;
}

.app-form-shell.app-transactions-shell .form-card-unified,
.app-form-shell.ai-settings-shell .form-card-unified {
    max-width: 100%;
}


.app-file-chip-list {
    margin-top: .65rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.app-file-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .62rem .9rem;
    border: 1px solid #d3dbe6;
    border-radius: .6rem;
    background: #f3f6fb;
    color: #1f2a44;
}
.app-file-chip-name {
    font-size: .925rem;
    font-weight: 500;
    word-break: break-word;
}
.app-file-chip-remove {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: #dc3545;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.app-file-chip-remove img {
    height: 1em;
    width: auto;
    display: block;
}
.app-file-chip-remove:hover {
    opacity: .8;
}

/* Chupkotha Panel 07_08 - requested topbar solid color and menu text color */
.navbar.app-navbar,
.topbar {
    background: #C7EAFB !important;
}

.navbar.app-navbar .navbar-nav .nav-link,
.navbar.app-navbar .navbar-nav .nav-link:visited,
.topbar .nav-link,
.topbar .nav-link:visited {
    color: #2E3192 !important;
    font-weight: 700;
    text-shadow: none;
}

.navbar.app-navbar .navbar-nav .nav-link:hover,
.navbar.app-navbar .navbar-nav .nav-link:focus,
.navbar.app-navbar .navbar-nav .nav-link.active,
.topbar .nav-link:hover,
.topbar .nav-link:focus,
.topbar .nav-link.active {
    color: #1f2378 !important;
    background: rgba(46, 49, 146, 0.10);
    border-radius: 10px;
}

@media (max-width: 991.98px) {
    .navbar.app-navbar .navbar-collapse {
        padding-top: 0.75rem;
    }

    .navbar.app-navbar .navbar-nav .nav-link {
        color: #2E3192 !important;
        font-weight: 700;
        padding: 0.65rem 0.75rem;
        border-radius: 10px;
        text-shadow: none;
    }

    .navbar.app-navbar .navbar-nav .nav-link:hover,
    .navbar.app-navbar .navbar-nav .nav-link:focus,
    .navbar.app-navbar .navbar-nav .nav-link.active {
        color: #1f2378 !important;
        background: rgba(46, 49, 146, 0.12);
    }
}


/* Chupkotha Panel 07_10 - requested button color update */
.btn-primary,
.btn-primary:visited,
button.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary,
a.btn-primary {
    background: #C7EAFB !important;
    border-color: #C7EAFB !important;
    color: #2E3192 !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.show {
    background: #b3e1f7 !important;
    border-color: #b3e1f7 !important;
    color: #2E3192 !important;
}

.btn-outline-primary {
    border-color: #C7EAFB !important;
    color: #2E3192 !important;
    font-weight: 700;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: #C7EAFB !important;
    border-color: #C7EAFB !important;
    color: #2E3192 !important;
}

/* Chupkotha Commercial V-01 - left sidebar interface */
body.has-app-sidebar {
    display: block;
    min-height: 100vh;
    overflow-x: hidden;
}

.app-shell {
    min-height: 100vh;
    background: var(--app-background);
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    width: 250px;
    padding: .65rem;
    background: #ffffff;
    border-right: 1px solid var(--app-border);
    transition: width .2s ease, transform .2s ease;
}

.app-sidebar-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.app-sidebar-top {
    min-height: 0;
}

.app-sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .65rem;
}

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

.sidebar-logo-wrap {
    width: 164px;
    max-width: 164px;
    height: 42px;
    max-height: 42px;
    transition: opacity .15s ease, width .2s ease;
}

.sidebar-logo-wrap img {
    width: 164px !important;
    max-width: 164px !important;
    height: 42px !important;
    min-height: 42px;
    max-height: 42px !important;
    object-fit: contain !important;
}

.app-sidebar-toggle,
.app-mobile-sidebar-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: #fff;
    color: #2E3192;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.app-sidebar-toggle:hover,
.app-mobile-sidebar-toggle:hover {
    background: #EAF8FF;
    border-color: #C7EAFB;
    color: #1f2378;
}

.app-mobile-sidebar-toggle {
    display: none;
    position: fixed;
    top: .85rem;
    left: .85rem;
    z-index: 1050;
    box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .12);
}

.app-sidebar-store-block {
    margin-bottom: .65rem;
    padding: .6rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #f8fafc;
}

.app-sidebar-label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .4rem;
}

.app-sidebar-store-select {
    border-radius: .8rem;
    font-weight: 700;
    color: #0f172a;
    background-color: #fff;
}

.app-sidebar-empty-store {
    padding: .75rem;
    border: 1px dashed var(--app-border);
    border-radius: 1rem;
    color: var(--app-text-muted);
    font-size: .9rem;
    font-weight: 700;
    background: #f8fafc;
}

.app-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    max-height: calc(100vh - 220px);
    padding-right: .1rem;
}

.app-sidebar-link {
    display: flex;
    align-items: center;
    gap: .62rem;
    min-height: 32px;
    padding: .34rem .55rem;
    border-radius: .55rem;
    color: #334155;
    text-decoration: none;
    font-weight: 400;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.app-sidebar-link i {
    width: 1.2rem;
    min-width: 1.2rem;
    text-align: center;
    color: #64748b;
    font-size: .92rem;
}

.app-sidebar-link:hover,
.app-sidebar-link:focus,
.app-sidebar-link.active {
    background: #EAF8FF;
    color: #1f2378;
}

.app-sidebar-link:hover i,
.app-sidebar-link:focus i,
.app-sidebar-link.active i {
    color: #2E3192;
}

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

.sidebar-user-dropdown .dropdown-toggle::after {
    display: none;
}

.sidebar-user-card {
    width: 100%;
    border: 0;
    border-radius: 1rem;
    background: #f4f5f7;
    padding: .48rem .55rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #111827;
    text-align: left;
    transition: background .15s ease, box-shadow .15s ease;
}

.sidebar-user-card:hover,
.sidebar-user-card:focus {
    background: #eef2f7;
    box-shadow: 0 .5rem 1.2rem rgba(15, 23, 42, .08);
}

.sidebar-user-avatar {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    background: #dbeafe;
    color: #1f2378;
    box-shadow: none;
}

.sidebar-user-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1 1 auto;
}

.sidebar-user-name {
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: .72rem;
    color: #6b7280;
    margin-top: .12rem;
}

.sidebar-user-menu-icon {
    color: #6b7280;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-user-dropdown .user-menu-panel {
    min-width: 242px;
    margin-bottom: .45rem !important;
}

.app-shell-content {
    min-height: 100vh;
    margin-left: 250px;
    width: calc(100% - 250px);
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease, width .2s ease;
}

.has-app-sidebar .app-main {
    flex: 1 0 auto;
}

.app-content-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

body.sidebar-collapsed .app-sidebar {
    width: 68px;
    padding-right: .45rem;
    padding-left: .45rem;
}

body.sidebar-collapsed .app-shell-content {
    margin-left: 68px;
    width: calc(100% - 68px);
}

body.sidebar-collapsed .sidebar-logo-wrap,
body.sidebar-collapsed .app-sidebar-store-block,
body.sidebar-collapsed .app-sidebar-empty-store,
body.sidebar-collapsed .app-sidebar-link span,
body.sidebar-collapsed .sidebar-user-meta,
body.sidebar-collapsed .sidebar-user-menu-icon {
    display: none;
}

body.sidebar-collapsed .app-sidebar-brand-row {
    justify-content: center;
}

body.sidebar-collapsed .app-sidebar-nav {
    align-items: center;
    max-height: calc(100vh - 155px);
}

body.sidebar-collapsed .app-sidebar-link {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed .app-sidebar-link i {
    margin: 0;
}

body.sidebar-collapsed .sidebar-user-card {
    justify-content: center;
    padding: .35rem;
}

body.sidebar-collapsed .sidebar-user-dropdown .user-menu-panel {
    min-width: 242px;
}


body.sidebar-collapsed .app-sidebar-toggle {
    width: 36px;
    height: 36px;
}

/* Chupcotha Commercial V-1.0.8 sidebar groups and full-width protected forms */
.app-sidebar-menu-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.app-sidebar-section-label {
    margin: .7rem .5rem .25rem;
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-sidebar-link {
    font-size: .86rem;
    line-height: 1.15;
}

.app-sidebar-link[data-toast-message] {
    cursor: pointer;
}

.has-app-sidebar .app-form-shell,
.has-app-sidebar .form-card-unified,
.has-app-sidebar .app-transactions-shell,
.has-app-sidebar .subscription-page-card,
.has-app-sidebar .purchase-credit-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.purchase-credit-form {
    width: 100%;
}

body.sidebar-collapsed .app-sidebar-section-label {
    display: none;
}

body.sidebar-collapsed .app-sidebar-menu-group {
    align-items: center;
}

/* V-1.0.5 sidebar account menu and optional dark mode */
body.app-dark-mode {
    --app-background: #111827;
    --app-surface: #1f2937;
    --app-text: #e5e7eb;
    --app-text-muted: #9ca3af;
    --app-border: #374151;
    color-scheme: dark;
    background: var(--app-background);
    color: var(--app-text);
}
body.app-dark-mode .app-sidebar,
body.app-dark-mode .app-sidebar-store-block,
body.app-dark-mode .sidebar-user-card,
body.app-dark-mode .user-menu-panel,
body.app-dark-mode .dropdown-menu,
body.app-dark-mode .app-footer,
body.app-dark-mode .app-surface-box,
body.app-dark-mode .card,
body.app-dark-mode .modal-content {
    background: var(--app-surface) !important;
    color: var(--app-text);
    border-color: var(--app-border) !important;
}
body.app-dark-mode .app-sidebar-link,
body.app-dark-mode .sidebar-user-card,
body.app-dark-mode .user-menu-panel .dropdown-item,
body.app-dark-mode .user-menu-panel .dropdown-item i,
body.app-dark-mode .form-label,
body.app-dark-mode .sidebar-user-name { color: var(--app-text); }
body.app-dark-mode .app-sidebar-link:hover,
body.app-dark-mode .app-sidebar-link:focus,
body.app-dark-mode .app-sidebar-link.active,
body.app-dark-mode .user-menu-panel .dropdown-item:hover,
body.app-dark-mode .user-menu-panel .dropdown-item:focus { background: #273449; color: #dbeafe; }
body.app-dark-mode .form-control,
body.app-dark-mode .form-select,
body.app-dark-mode .input-group-text {
    border-color: var(--app-border);
    background-color: #111827;
    color: var(--app-text);
}

.app-sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    body.has-app-sidebar {
        padding-top: 0;
    }

    .app-mobile-sidebar-toggle {
        display: inline-flex;
    }

    .app-sidebar {
        width: min(86vw, 300px);
        transform: translateX(-105%);
        box-shadow: 1rem 0 2rem rgba(15, 23, 42, .12);
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .36);
        z-index: 1035;
    }

    body.sidebar-open .app-sidebar-backdrop {
        display: block;
    }

    .app-shell-content,
    body.sidebar-collapsed .app-shell-content {
        margin-left: 0;
        width: 100%;
    }

    body.sidebar-collapsed .app-sidebar {
        width: min(86vw, 300px);
    }

    body.sidebar-collapsed .sidebar-logo-wrap,
    body.sidebar-collapsed .app-sidebar-store-block,
    body.sidebar-collapsed .app-sidebar-empty-store,
    body.sidebar-collapsed .app-sidebar-link span,
    body.sidebar-collapsed .sidebar-user-meta,
    body.sidebar-collapsed .sidebar-user-menu-icon {
        display: initial;
    }

    body.sidebar-collapsed .app-sidebar-store-block,
    body.sidebar-collapsed .app-sidebar-empty-store,
    body.sidebar-collapsed .sidebar-user-meta {
        display: block;
    }

    body.sidebar-collapsed .sidebar-user-menu-icon {
        display: inline-flex;
    }

    body.sidebar-collapsed .app-sidebar-brand-row {
        justify-content: space-between;
    }

    body.sidebar-collapsed .app-sidebar-nav {
        align-items: stretch;
        max-height: calc(100vh - 250px);
    }

    body.sidebar-collapsed .app-sidebar-menu-group {
        align-items: stretch;
    }

    body.sidebar-collapsed .app-sidebar-section-label {
        display: block;
    }

    body.sidebar-collapsed .app-sidebar-link {
        width: auto;
        height: auto;
        justify-content: flex-start;
        padding: .75rem .85rem;
    }

    body.sidebar-collapsed .sidebar-user-card {
        justify-content: flex-start;
        padding: .7rem .75rem;
    }

    .app-content-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .has-app-sidebar .app-main {
        padding-top: 4.2rem !important;
    }
}

@media (max-width: 575.98px) {
    .app-content-container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .sidebar-user-dropdown .user-menu-panel {
        min-width: 285px;
    }
}

@media print {
    .app-sidebar,
    .app-mobile-sidebar-toggle,
    .app-sidebar-backdrop,
    .app-footer,
    .toast-container {
        display: none !important;
    }

    .app-shell-content,
    body.sidebar-collapsed .app-shell-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .app-main,
    .has-app-sidebar .app-main {
        padding: 0 !important;
    }

    .app-content-container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Orders list refinements */
.orders-total-count {
    font-weight: 700;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
    border: 1px solid rgba(var(--bs-primary-rgb), .18);
    border-radius: 999px;
    padding: .45rem .85rem;
    line-height: 1.2;
    cursor: help;
    white-space: nowrap;
}
.orders-table th,
.orders-table td {
    vertical-align: middle;
}
.orders-platform-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f5f7fb;
    border: 1px solid #e7ebf2;
    color: #303846;
    font-size: 1.05rem;
}
.orders-address {
    max-width: 300px;
    white-space: normal;
}
.orders-ratio-progress {
    height: 6px;
    min-width: 92px;
}
.orders-status-form .form-select {
    min-width: 135px;
}
.orders-actions .btn {
    width: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 575.98px) {
    .orders-total-count {
        width: 100%;
        text-align: center;
    }
    .orders-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Chupkotha Commercial V-01 - custom colorful confirmation modal and 3D action buttons */
body.app-confirm-open {
    overflow: hidden;
}
.app-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(6px);
}
.app-confirm-backdrop.show {
    display: flex;
}
.app-confirm-card {
    width: min(100%, 440px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 1.5rem 3.5rem rgba(15, 23, 42, .28);
    padding: 1.65rem 1.35rem;
    text-align: center;
    transform: translateY(10px) scale(.96);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.app-confirm-backdrop.show .app-confirm-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.app-confirm-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #2E3192;
    background: linear-gradient(135deg, #eaf8ff, #c7eafb);
    box-shadow: inset 0 -4px 0 rgba(46, 49, 146, .12), 0 .75rem 1.25rem rgba(46, 49, 146, .12);
}
.app-confirm-backdrop[data-confirm-type="success"] .app-confirm-icon {
    color: #166534;
    background: linear-gradient(135deg, #dcfce7, #86efac);
}
.app-confirm-backdrop[data-confirm-type="warning"] .app-confirm-icon {
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
}
.app-confirm-backdrop[data-confirm-type="danger"] .app-confirm-icon {
    color: #991b1b;
    background: linear-gradient(135deg, #fee2e2, #fca5a5);
}
.app-confirm-backdrop[data-confirm-type="info"] .app-confirm-icon {
    color: #075985;
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
}
.app-confirm-title {
    margin-bottom: .45rem;
    font-weight: 800;
    color: #0f172a;
}
.app-confirm-message {
    color: #475569;
    line-height: 1.55;
    margin-bottom: 1.3rem;
}
.app-confirm-actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.btn-3d {
    border: 0 !important;
    border-radius: .85rem !important;
    font-weight: 800 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    box-shadow: 0 .35rem 0 rgba(15, 23, 42, .16), 0 .8rem 1.2rem rgba(15, 23, 42, .10) !important;
    transform: translateY(0);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-3d:hover,
.btn-3d:focus {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 .45rem 0 rgba(15, 23, 42, .18), 0 1rem 1.5rem rgba(15, 23, 42, .14) !important;
}
.btn-3d:active {
    transform: translateY(3px);
    box-shadow: 0 .12rem 0 rgba(15, 23, 42, .20), 0 .35rem .7rem rgba(15, 23, 42, .12) !important;
}
.btn-3d-primary {
    background: linear-gradient(135deg, #C7EAFB, #7dd3fc) !important;
    color: #1f2378 !important;
}
.btn-3d-success {
    background: linear-gradient(135deg, #86efac, #22c55e) !important;
    color: #052e16 !important;
}
.btn-3d-warning {
    background: linear-gradient(135deg, #fde68a, #f59e0b) !important;
    color: #4a2500 !important;
}
.btn-3d-danger {
    background: linear-gradient(135deg, #fecaca, #ef4444) !important;
    color: #fff !important;
}
.btn-3d-info {
    background: linear-gradient(135deg, #bae6fd, #38bdf8) !important;
    color: #082f49 !important;
}
.btn-3d-secondary {
    background: linear-gradient(135deg, #f1f5f9, #cbd5e1) !important;
    color: #1e293b !important;
}
.order-form-actions .btn-3d,
.invoice-actions-row .btn-3d,
.orders-actions .btn-3d,
.orders-status-form .btn-3d {
    min-height: 2.05rem;
}
.orders-actions .btn-3d {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
}
.orders-payment-method {
    color: #2E3192;
    font-weight: 700;
    margin-top: .1rem;
}
@media (max-width: 575.98px) {
    .app-confirm-actions .btn {
        width: 100%;
    }
}

.app-color-modal {
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3.5rem rgba(15, 23, 42, .24);
}
.app-color-modal .modal-header {
    background: linear-gradient(135deg, #C7EAFB, #fef3c7);
    color: #0f172a;
    border-bottom: 0;
}
.app-color-modal .modal-title {
    font-weight: 800;
}
.app-color-modal .modal-body {
    background: #ffffff;
}
.app-color-modal .modal-footer {
    border-top: 1px solid #e5edf5;
    background: #f8fbff;
}

/* V-01 bugfix - full project colorful 3D button polish */
.app-btn-iconized.btn-3d {
    line-height: 1.2;
    letter-spacing: .01em;
}
.app-btn-iconized.btn-3d i.bi {
    font-size: 1.02em;
    line-height: 1;
}
.btn-3d.btn-sm {
    border-radius: .65rem !important;
    box-shadow: 0 .22rem 0 rgba(15, 23, 42, .16), 0 .55rem .9rem rgba(15, 23, 42, .10) !important;
}
.btn-3d.btn-lg {
    border-radius: 1rem !important;
    box-shadow: 0 .45rem 0 rgba(15, 23, 42, .16), 0 1rem 1.4rem rgba(15, 23, 42, .12) !important;
}

/* Chupkotha Commercial V-01 - SIP Dialer */
.sip-dialer-card {
    overflow: hidden;
}
.sip-format-badge {
    font-size: .85rem;
    padding: .65rem .95rem;
    box-shadow: 0 10px 24px rgba(13, 202, 240, .18);
}
.sip-voice-textarea {
    min-height: 220px;
    border-radius: 18px;
    resize: vertical;
    line-height: 1.75;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.sip-generated-panel {
    border: 1px solid rgba(25, 135, 84, .18);
    background: linear-gradient(135deg, rgba(25, 135, 84, .10), rgba(13, 110, 253, .06));
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}
.sip-generated-panel audio {
    min-height: 42px;
}
.sip-install-note {
    border: 1px solid rgba(13, 110, 253, .12);
    background: rgba(13, 110, 253, .045);
    border-radius: 18px;
    padding: 18px;
}
.sip-install-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    background: #fff;
    box-shadow: 0 10px 24px rgba(13, 110, 253, .16);
    flex: 0 0 42px;
}

/* Chupkotha Commercial V-1.0.8 - wide application pages and mobile/tablet compatibility */
.app-page-wide .app-content-container {
    max-width: none;
    padding-right: .65rem;
    padding-left: .65rem;
}

@media (min-width: 992px) {
    .app-page-wide .app-main {
        padding-top: .6rem !important;
        padding-bottom: .6rem !important;
    }
}

.app-responsive,
.app-responsive .app-shell,
.app-responsive .app-shell-content,
.app-responsive .app-main,
.app-responsive .app-content-container {
    min-width: 0;
}

.app-responsive img,
.app-responsive video,
.app-responsive canvas,
.app-responsive iframe,
.app-responsive svg {
    max-width: 100%;
}

.app-responsive input,
.app-responsive select,
.app-responsive textarea,
.app-responsive .form-control,
.app-responsive .form-select,
.app-responsive .input-group {
    max-width: 100%;
    min-width: 0;
}

.app-responsive .card,
.app-responsive .card-body,
.app-responsive .row > *,
.app-responsive .d-grid,
.app-responsive .d-flex {
    min-width: 0;
}

.app-responsive .table-responsive,
.app-responsive .user-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.app-responsive .table-responsive > .table,
.app-responsive .user-table-wrap > .table {
    min-width: 720px;
    margin-bottom: 0;
}

.app-responsive pre,
.app-responsive code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.app-responsive pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-responsive .pagination {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: .15rem;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
}

.app-responsive .pagination .page-item {
    flex: 0 0 auto;
}

.app-responsive .dropdown-menu,
.app-responsive .user-menu-panel {
    max-width: calc(100vw - 1rem);
}

@media (max-width: 991.98px) {
    .app-page-wide .app-content-container {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .app-responsive .card-body.p-4,
    .app-responsive .card-body.p-md-5,
    .app-responsive .card-body.p-5 {
        padding: 1.35rem !important;
    }

    .app-responsive .ticket-toolbar,
    .app-responsive .orders-toolbar,
    .app-responsive .page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .app-responsive .ticket-toolbar > .btn,
    .app-responsive .orders-toolbar > .btn,
    .app-responsive .page-toolbar > .btn {
        width: 100%;
    }

    .app-responsive .modal-dialog {
        width: auto;
        max-width: calc(100% - 1rem);
        margin: .5rem;
    }

    .app-responsive .offcanvas,
    .app-responsive .modal-content {
        max-height: calc(100dvh - 1rem);
    }
}

@media (max-width: 767.98px) {
    .app-page-wide .app-content-container,
    .app-responsive .app-content-container {
        padding-right: .6rem;
        padding-left: .6rem;
    }

    .app-responsive .card-soft {
        border-radius: .8rem;
    }

    .app-responsive .card-body.p-3,
    .app-responsive .card-body.p-4,
    .app-responsive .card-body.p-md-4,
    .app-responsive .card-body.p-md-5,
    .app-responsive .card-body.p-5 {
        padding: 1rem !important;
    }

    .app-responsive h1.h3,
    .app-responsive .h3 {
        font-size: 1.35rem;
    }

    .app-responsive h2.h4,
    .app-responsive .h4 {
        font-size: 1.15rem;
    }

    .app-responsive .form-control,
    .app-responsive .form-select,
    .app-responsive textarea,
    .app-responsive input {
        font-size: 16px;
    }

    .app-responsive .table-responsive > .table,
    .app-responsive .user-table-wrap > .table {
        min-width: 680px;
    }

    .app-responsive .d-flex.gap-2.flex-wrap > .btn,
    .app-responsive .d-flex.gap-2.flex-wrap > a.btn,
    .app-responsive .order-form-actions > .btn,
    .app-responsive .order-form-actions > a.btn {
        flex: 1 1 auto;
    }

    .app-responsive .leads-status-form {
        min-width: 210px;
        flex-wrap: wrap;
    }

    .app-responsive .modal-header,
    .app-responsive .modal-body,
    .app-responsive .modal-footer {
        padding: .85rem;
    }

    .app-responsive .app-toast-container {
        right: .35rem !important;
        bottom: .35rem !important;
        left: .35rem !important;
        width: auto;
        padding: 0 !important;
    }

    .app-responsive .app-toast-container .toast {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .app-page-wide .app-content-container,
    .app-responsive .app-content-container {
        padding-right: .45rem;
        padding-left: .45rem;
    }

    .app-responsive .row.g-4 {
        --bs-gutter-y: .85rem;
    }

    .app-responsive .btn:not(.btn-sm):not(.btn-link) {
        min-height: 42px;
    }

    .app-responsive .user-menu-panel {
        min-width: min(285px, calc(100vw - 1rem));
    }
}

/* Chupcotha Commercial V-1.0.9 - comments and usage pages */
.comments-page-card,
.usage-page-card {
    width: 100%;
    min-height: calc(100vh - 86px);
}

.comments-filter-panel,
.usage-filter-panel {
    padding: 14px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 14px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.comments-summary-card,
.usage-summary-card {
    min-height: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
}

.comments-summary-card span,
.usage-summary-card span {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.78rem;
}

.comments-summary-card strong,
.usage-summary-card strong {
    font-size: 1rem;
}

.comments-table-wrap,
.usage-table-wrap {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
}

.comments-table,
.usage-table {
    margin-bottom: 0;
    min-width: 920px;
}

.comments-table thead th,
.usage-table thead th {
    white-space: nowrap;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.comments-message-cell {
    min-width: 260px;
    max-width: 440px;
    white-space: normal;
}

.comments-reference-cell {
    min-width: 210px;
    max-width: 300px;
}

.usage-details-cell {
    min-width: 260px;
    max-width: 520px;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .comments-page-card,
    .usage-page-card {
        min-height: auto;
        border-radius: 12px;
    }

    .comments-filter-panel,
    .usage-filter-panel {
        padding: 10px;
    }

    .comments-summary-card,
    .usage-summary-card {
        min-height: 68px;
        padding: 10px 12px;
    }
}

/* Chupkotha Commercial V-1.1.14 - direct internal webhook operation transport */
.bos-page-header,
.element-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 16px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.element-page-eyebrow {
    margin-bottom: .35rem;
    color: var(--bs-primary, #0d6efd);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bos-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 16px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.bos-card-body {
    padding: 1.25rem;
}

.bos-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.element-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.element-stat-card {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 15px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.model-provider-stat-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.model-provider-stat-card > strong {
    font-size: 1.85rem;
    line-height: 1;
}

.model-provider-stat-main > span,
.model-total-stat-card > span {
    display: block;
    margin-bottom: .55rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.model-provider-stat-note {
    margin-bottom: .45rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .78rem;
}

.model-provider-usage-link {
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
}

.model-total-status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem .8rem;
}

.model-total-status-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    font-size: .8rem;
}

.element-card-collection {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.element-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1.15rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 15px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.element-card-head,
.element-card-identity {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.element-card-head {
    justify-content: space-between;
}

.element-card-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 12px;
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .1);
}

.element-card-heading,
.min-w-0 {
    min-width: 0;
}

.element-card-title,
.element-card-category {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.element-card-summary {
    min-height: 2.6rem;
    margin: .9rem 0;
}

.element-card-meta,
.model-scope-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.element-meta-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: .9rem 0;
}

.model-price-grid > div {
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 11px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.model-price-grid span,
.model-price-grid strong {
    display: block;
}

.model-price-grid span {
    margin-bottom: .2rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .72rem;
}

.model-price-grid strong {
    overflow: hidden;
    font-size: .84rem;
    text-overflow: ellipsis;
}

.element-card-actions {
    margin-top: auto !important;
}

.model-manager-card .element-card-actions {
    padding-top: 1rem;
}

.model-ai-sync-preview-wrap {
    max-height: min(64vh, 720px);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
}

.model-ai-sync-preview-wrap thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    background: var(--bs-body-bg, #fff);
}

@media (max-width: 1199.98px) {
    .element-stat-grid,
    .element-card-collection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .bos-page-header,
    .element-page-header {
        flex-direction: column;
        padding: 1rem;
    }

    .bos-page-header > .d-flex,
    .element-page-header > .d-flex {
        width: 100%;
    }

    .bos-page-header > .d-flex .btn,
    .element-page-header > .d-flex .btn,
    .element-page-header > .d-flex form {
        flex: 1 1 auto;
    }

    .element-stat-grid,
    .element-card-collection {
        grid-template-columns: 1fr;
    }

    .model-price-grid {
        grid-template-columns: 1fr;
    }
}

/* Chupkotha Commercial V-1.1.14 - reliable viewport-safe popup/modal scrolling */
.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    min-height: 0;
    max-height: calc(100dvh - 1rem);
}

.modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
}

.modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    flex: 0 0 auto;
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.modal-dialog-scrollable .modal-content,
.modal-dialog-scrollable .modal-content > form {
    overflow: hidden;
}

/* Project custom confirmation popup uses the same viewport-safety rule. */
.app-confirm-backdrop {
    overflow-x: hidden;
    overflow-y: auto;
}

.app-confirm-card {
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (min-width: 576px) {
    .modal-dialog,
    .modal-content {
        max-height: calc(100dvh - 3.5rem);
    }

    .app-confirm-card {
        max-height: calc(100dvh - 3rem);
    }
}

/* CHUPKOTHA 1.4.28 - dashboard desktop/tablet/mobile interface */
.dashboard-page-active .app-content-container {
    width: 100%;
    max-width: 1560px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

.dashboard-shell {
    --dashboard-accent: #2E3192;
    --dashboard-accent-soft: #edf2ff;
    width: 100%;
    min-width: 0;
    gap: 1.35rem !important;
}

.dashboard-shell > section,
.dashboard-shell .row,
.dashboard-shell .row > * {
    min-width: 0;
}

.dashboard-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--app-border);
    border-radius: 1.3rem;
    background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 54%, #eef6ff 100%);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .065);
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    top: -105px;
    border-radius: 50%;
    background: rgba(46, 49, 146, .07);
    pointer-events: none;
}

.dashboard-hero-copy,
.dashboard-hero-balance {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.dashboard-hero-copy {
    flex: 1 1 auto;
}

.dashboard-eyebrow {
    display: block;
    margin-bottom: .28rem;
    color: #667085;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.dashboard-title {
    margin: 0 0 .32rem;
    color: #111827;
    font-size: clamp(1.6rem, 2.7vw, 2.25rem);
    font-weight: 800;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.dashboard-subtitle {
    margin: 0;
    color: #667085;
    line-height: 1.5;
}

.dashboard-hero-balance {
    min-width: 225px;
    max-width: 320px;
    padding: .95rem 1.1rem;
    border: 1px solid rgba(46, 49, 146, .15);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .84);
    text-align: right;
    backdrop-filter: blur(10px);
}

.dashboard-hero-balance span,
.dashboard-hero-balance small {
    display: block;
    color: #667085;
    font-size: .72rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dashboard-hero-balance strong {
    display: block;
    margin: .12rem 0;
    color: #1f2378;
    font-size: 1.4rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.dashboard-section-heading,
.dashboard-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.dashboard-section-heading > *,
.dashboard-list-heading > * {
    min-width: 0;
}

.dashboard-section-heading .badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.dashboard-list-heading > a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dashboard-stat-card,
.dashboard-kpi-card {
    height: 100%;
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .05);
}

.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 88px;
    padding: 1rem;
}

.dashboard-stat-card > div {
    min-width: 0;
}

.dashboard-stat-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: .9rem;
    background: var(--dashboard-accent-soft);
    color: var(--dashboard-accent);
    font-size: 1.15rem;
}

.dashboard-stat-label {
    display: block;
    color: #667085;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
}

.dashboard-stat-card strong {
    display: block;
    margin-top: .12rem;
    color: #111827;
    font-size: 1.35rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.dashboard-kpi-card {
    min-height: 124px;
    padding: 1.05rem 1.1rem;
}

.dashboard-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-kpi-top span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-kpi-top i {
    flex: 0 0 auto;
    color: var(--dashboard-accent);
    font-size: 1.1rem;
}

.dashboard-kpi-card > strong {
    display: block;
    margin: .48rem 0 .12rem;
    color: #111827;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.dashboard-kpi-card > small {
    display: block;
    color: #7b8494;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dashboard-chart-card {
    overflow: hidden;
}

.dashboard-chart-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    color: #667085;
    font-size: .72rem;
    font-weight: 700;
}

.dashboard-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    white-space: nowrap;
}

.dashboard-legend-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #2E3192;
}

.dashboard-legend-dot.actions {
    background: #0ea5a4;
}

.dashboard-activity-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .65rem;
    align-items: end;
    min-height: 250px;
    padding: 1rem .2rem 0;
    border-top: 1px solid #eef1f5;
}

.dashboard-chart-day {
    display: flex;
    min-width: 0;
    height: 220px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
}

.dashboard-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .22rem;
    width: 100%;
    height: 180px;
}

.dashboard-chart-bar {
    position: relative;
    display: block;
    width: min(22px, 42%);
    height: var(--bar-height);
    min-height: 5px;
    border-radius: .45rem .45rem .15rem .15rem;
    background: linear-gradient(180deg, #5d63cc, #2E3192);
    transition: height .2s ease;
}

.dashboard-chart-bar.actions {
    background: linear-gradient(180deg, #46c7c4, #0f8f8d);
}

.dashboard-chart-bar em {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .2rem);
    transform: translateX(-50%);
    color: #7b8494;
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-chart-label {
    color: #667085;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-health-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #eef1f5;
}

.dashboard-health-row > div:last-child {
    min-width: 0;
}

.dashboard-health-ring {
    --health-value: 0;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 50%;
    background: conic-gradient(#2E3192 calc(var(--health-value) * 1%), #e9edf5 0);
}

.dashboard-health-ring::before {
    content: '';
    grid-area: 1 / 1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
}

.dashboard-health-ring span {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    color: #1f2378;
    font-size: .75rem;
    font-weight: 800;
}

.dashboard-subscription-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: .7rem 0;
}

.dashboard-subscription-strip + .dashboard-subscription-strip {
    border-top: 1px solid #eef1f5;
}

.dashboard-subscription-strip > div {
    min-width: 0;
}

.dashboard-subscription-strip > div span {
    display: block;
    color: #667085;
    font-size: .68rem;
    font-weight: 700;
}

.dashboard-subscription-strip > div strong {
    display: block;
    margin-top: .12rem;
    color: #111827;
    font-size: .82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dashboard-subscription-strip > .small,
.dashboard-subscription-strip > .badge {
    max-width: 48%;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-transaction-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-transaction-line > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-mobile-nav {
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.dashboard-mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.dashboard-mobile-store-form {
    width: min(220px, 46%);
}

.dashboard-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.dashboard-menu-button {
    display: flex;
    min-width: 0;
    min-height: 70px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;
    padding: .65rem .4rem;
    border: 1px solid #dfe5ee;
    border-radius: .9rem;
    background: #f8fbff;
    color: #263052;
    text-decoration: none;
    text-align: center;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dashboard-menu-button i {
    color: #2E3192;
    font-size: 1.12rem;
}

.dashboard-menu-button:hover,
.dashboard-menu-button:focus {
    border-color: #bac5f2;
    background: #eef3ff;
    color: #1f2378;
}

.dashboard-menu-button-soft {
    background: #fbfbfc;
}

.dashboard-menu-button-danger {
    background: #fff8f7;
    color: #b42318;
}

.dashboard-menu-button-danger i {
    color: #b42318;
}

body.app-dark-mode .dashboard-hero,
body.app-dark-mode .dashboard-stat-card,
body.app-dark-mode .dashboard-kpi-card,
body.app-dark-mode .dashboard-mobile-nav {
    background: #1f2937;
    border-color: #374151;
}

body.app-dark-mode .dashboard-hero {
    background: linear-gradient(135deg, #1f2937, #172033);
}

body.app-dark-mode .dashboard-title,
body.app-dark-mode .dashboard-stat-card strong,
body.app-dark-mode .dashboard-kpi-card > strong,
body.app-dark-mode .dashboard-subscription-strip > div strong {
    color: #f3f4f6;
}

body.app-dark-mode .dashboard-hero-balance {
    background: rgba(17, 24, 39, .72);
    border-color: #374151;
}

body.app-dark-mode .dashboard-health-ring::before {
    background: #1f2937;
}

body.app-dark-mode .dashboard-menu-button {
    background: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

@media (max-width: 1199.98px) {
    .dashboard-page-active .app-content-container {
        max-width: 100%;
    }

    .dashboard-shell {
        gap: 1.1rem !important;
    }

    .dashboard-kpi-card {
        min-height: 116px;
    }
}

@media (max-width: 991.98px) {
    .dashboard-page-active .app-mobile-sidebar-toggle {
        display: none !important;
    }

    .dashboard-page-active .app-main {
        padding-top: .85rem !important;
        padding-bottom: 1rem !important;
    }

    .dashboard-page-active .app-content-container {
        padding-right: .85rem;
        padding-left: .85rem;
    }

    .dashboard-hero {
        padding: 1.3rem 1.35rem;
    }

    .dashboard-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dashboard-page-active .app-content-container {
        padding-right: .65rem;
        padding-left: .65rem;
    }

    .dashboard-shell {
        gap: .9rem !important;
    }

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
        gap: .9rem;
        padding: 1.1rem;
        border-radius: 1rem;
    }

    .dashboard-title {
        font-size: clamp(1.45rem, 7vw, 1.9rem);
    }

    .dashboard-hero-balance {
        width: 100%;
        min-width: 0;
        max-width: none;
        text-align: left;
    }

    .dashboard-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
    }

    .dashboard-list-heading {
        align-items: center;
    }

    .dashboard-activity-chart {
        gap: .36rem;
        min-height: 220px;
    }

    .dashboard-chart-day {
        height: 190px;
    }

    .dashboard-chart-bars {
        height: 150px;
    }

    .dashboard-health-row {
        gap: .8rem;
    }
}

@media (max-width: 575.98px) {
    .dashboard-page-active .app-content-container {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .dashboard-mobile-nav {
        padding: .8rem;
        border-radius: .95rem;
    }

    .dashboard-mobile-nav-head {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-mobile-store-form {
        width: 100%;
    }

    .dashboard-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-menu-button {
        min-height: 64px;
        padding-right: .3rem;
        padding-left: .3rem;
    }

    .dashboard-stat-card,
    .dashboard-kpi-card {
        border-radius: .95rem;
    }

    .dashboard-stat-card {
        min-height: 80px;
    }

    .dashboard-kpi-card {
        min-height: 0;
    }

    .dashboard-section-heading,
    .dashboard-list-heading {
        gap: .5rem;
    }

    .dashboard-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-activity-chart {
        overflow-x: auto;
        grid-template-columns: repeat(7, minmax(52px, 1fr));
        padding-bottom: .35rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-subscription-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .dashboard-subscription-strip > .small,
    .dashboard-subscription-strip > .badge {
        max-width: 100%;
        text-align: left;
    }

    .dashboard-transaction-line {
        flex-direction: column;
        gap: .2rem;
    }
}

/* CHUPKOTHA 1.4.29 - dashboard visual system deployed project-wide */
:root {
    --project-accent: var(--app-brand-ink, #2E3192);
    --project-accent-dark: var(--app-brand-ink-dark, #1f2378);
    --project-accent-soft: var(--app-brand-soft, #edf2ff);
    --project-sky: var(--app-brand-sky, #C7EAFB);
    --project-card-radius: 1.1rem;
    --project-control-radius: .82rem;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.app-main {
    background: var(--app-background);
}

.app-content-container,
.app-main .container,
.app-main .container-fluid,
.app-main .row,
.app-main .row > *,
.app-main .d-flex,
.app-main .d-grid,
.app-main form,
.app-main fieldset {
    min-width: 0;
}

/* Dashboard card language becomes the default application surface. */
.app-main .card,
.app-main .card-soft,
.app-main .bos-card,
.app-main .element-card,
.app-main .element-stat-card,
.app-main .comments-summary-card,
.app-main .usage-summary-card,
.app-main .signup-amount-box,
.app-main .app-surface-box {
    border-color: var(--app-border) !important;
    border-radius: var(--project-card-radius);
    background: var(--app-surface);
    box-shadow: var(--app-card-shadow, 0 9px 24px rgba(15, 23, 42, .05));
}

.app-main .card-header,
.app-main .card-footer {
    border-color: #eef1f5;
    background: #fbfcfe;
}

.app-main .card-header:first-child {
    border-radius: calc(var(--project-card-radius) - 1px) calc(var(--project-card-radius) - 1px) 0 0;
}

.app-main .card-footer:last-child {
    border-radius: 0 0 calc(var(--project-card-radius) - 1px) calc(var(--project-card-radius) - 1px);
}

/* Shared page headers use the same light gradient and spacing as the dashboard hero. */
.app-main .bos-page-header,
.app-main .element-page-header,
.app-main .page-header,
.app-main .app-page-header {
    border-color: var(--app-border);
    border-radius: 1.2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 54%, #eef6ff 100%);
    box-shadow: var(--app-card-shadow-strong, 0 16px 38px rgba(15, 23, 42, .065));
}

.app-main h1,
.app-main h2,
.app-main h3,
.app-main h4,
.app-main h5,
.app-main h6 {
    color: #111827;
}

.app-main h1,
.app-main .h1,
.app-main h2,
.app-main .h2 {
    letter-spacing: -.018em;
}

.app-main a:not(.btn):not(.app-sidebar-link):not(.list-group-item) {
    color: var(--project-accent);
}

.app-main a:not(.btn):not(.app-sidebar-link):not(.list-group-item):hover,
.app-main a:not(.btn):not(.app-sidebar-link):not(.list-group-item):focus {
    color: var(--project-accent-dark);
}

/* Controls follow the dashboard's rounded, light-border treatment. */
.app-main .form-label,
.app-main .col-form-label {
    color: #334155;
    font-weight: 700;
}

.app-main .form-control,
.app-main .form-select,
.app-main .input-group-text,
.app-main textarea,
.app-main input[type="text"],
.app-main input[type="email"],
.app-main input[type="number"],
.app-main input[type="password"],
.app-main input[type="search"],
.app-main input[type="tel"],
.app-main input[type="url"],
.app-main input[type="date"],
.app-main input[type="datetime-local"],
.app-main input[type="time"] {
    border-color: #dfe5ee;
    border-radius: var(--project-control-radius);
    background-color: #fff;
}

.app-main .input-group > .form-control:not(:last-child),
.app-main .input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-main .input-group > .form-control:not(:first-child),
.app-main .input-group > .form-select:not(:first-child),
.app-main .input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.app-main .form-control:focus,
.app-main .form-select:focus,
.app-main textarea:focus,
.app-main input:focus {
    border-color: rgba(46, 49, 146, .38) !important;
    box-shadow: 0 0 0 .22rem rgba(46, 49, 146, .10);
}

.app-main .form-check-input:checked {
    border-color: var(--project-accent);
    background-color: var(--project-accent);
}

.app-main .btn:not(.btn-link):not(.btn-close) {
    border-radius: .78rem;
    font-weight: 700;
}

.app-main .btn-outline-secondary {
    border-color: #d5dce7;
    color: #475569;
    background: #fff;
}

.app-main .btn-outline-secondary:hover,
.app-main .btn-outline-secondary:focus {
    border-color: #c4cddd;
    background: #f7f9fc;
    color: #263052;
}

/* Dashboard-like filters, tabs and list rows. */
.app-main .comments-filter-panel,
.app-main .usage-filter-panel,
.app-main .filter-panel,
.app-main .search-panel,
.app-main .toolbar-panel {
    border-color: var(--app-border);
    border-radius: 1rem;
    background: #f8fbff;
}

.app-main .nav-tabs {
    gap: .25rem;
    border-bottom-color: var(--app-border);
}

.app-main .nav-tabs .nav-link {
    border-radius: .75rem .75rem 0 0;
    color: #667085;
    font-weight: 700;
}

.app-main .nav-tabs .nav-link.active {
    border-color: var(--app-border) var(--app-border) #fff;
    color: var(--project-accent);
    background: #fff;
}

.app-main .list-group-item {
    border-color: #eef1f5;
    background: transparent;
}

.app-main .list-group-item-action:hover,
.app-main .list-group-item-action:focus {
    background: #f8fbff;
}

.app-main .badge.text-bg-light,
.app-main .badge.bg-light {
    border: 1px solid var(--app-border);
    color: #475569 !important;
    background: #f8fafc !important;
}

/* Desktop/table presentation mirrors the dashboard's clean white cards. */
.app-main .table-responsive,
.app-main .user-table-wrap {
    border-radius: 1rem;
}

.app-main .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #f8fbff;
    --bs-table-hover-bg: #f4f7fb;
    color: #1f2937;
}

.app-main .table thead th {
    border-bottom-width: 1px;
    border-color: #e7ebf2 !important;
    background: #f8fbff;
    color: #667085;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.app-main .table tbody td,
.app-main .table tbody th {
    border-color: #eef1f5 !important;
}

.app-main .pagination {
    gap: .24rem;
}

.app-main .pagination .page-link {
    min-width: 36px;
    border-radius: .7rem !important;
    text-align: center;
}

.app-main .pagination .page-item.active .page-link {
    border-color: var(--project-accent);
    background: var(--project-accent);
    color: #fff;
}

/* Modals and popups share the dashboard surface styling. */
.modal-content,
.app-color-modal,
.app-confirm-card {
    border-color: var(--app-border) !important;
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .16);
}

.modal-header {
    border-bottom-color: #eef1f5;
}

.modal-footer {
    border-top-color: #eef1f5;
    background: #fbfcfe;
}

/* Authentication screens inherit the same palette without changing flow. */
.auth-screen-body {
    background: linear-gradient(135deg, #f8fbff 0%, #f4f7fb 58%, #edf4ff 100%);
}

.auth-screen-body .auth-card,
.auth-screen-body .form-card-unified,
.auth-screen-body .card {
    border: 1px solid var(--app-border);
    border-radius: 1.2rem;
    box-shadow: var(--app-card-shadow-strong, 0 16px 38px rgba(15, 23, 42, .065));
}

/* Dark mode keeps existing behavior while matching the new surface hierarchy. */
body.app-dark-mode .app-main h1,
body.app-dark-mode .app-main h2,
body.app-dark-mode .app-main h3,
body.app-dark-mode .app-main h4,
body.app-dark-mode .app-main h5,
body.app-dark-mode .app-main h6 {
    color: #f3f4f6;
}

body.app-dark-mode .app-main .card-header,
body.app-dark-mode .app-main .card-footer,
body.app-dark-mode .app-main .table thead th,
body.app-dark-mode .app-main .comments-filter-panel,
body.app-dark-mode .app-main .usage-filter-panel,
body.app-dark-mode .app-main .filter-panel,
body.app-dark-mode .app-main .search-panel,
body.app-dark-mode .app-main .toolbar-panel {
    border-color: #374151 !important;
    background: #172033 !important;
    color: #cbd5e1;
}

/* Tablet and phone policy: no horizontal scrollbar anywhere in the application UI. */
@media (max-width: 1199.98px) {
    html,
    body,
    .app-responsive,
    .app-responsive .app-shell,
    .app-responsive .app-shell-content,
    .app-responsive .app-main,
    .app-responsive .app-content-container,
    .app-responsive .card,
    .app-responsive .card-body,
    .app-responsive .modal,
    .app-responsive .modal-dialog,
    .app-responsive .modal-content {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .app-responsive .app-content-container {
        width: 100%;
    }

    .app-responsive img,
    .app-responsive video,
    .app-responsive canvas,
    .app-responsive iframe,
    .app-responsive svg,
    .app-responsive audio {
        max-width: 100% !important;
    }

    .app-responsive .row,
    .app-responsive .row > *,
    .app-responsive .d-flex,
    .app-responsive .d-grid,
    .app-responsive form,
    .app-responsive fieldset,
    .app-responsive .input-group,
    .app-responsive .btn-group,
    .app-responsive .dropdown,
    .app-responsive .dropdown-menu {
        min-width: 0 !important;
        max-width: 100%;
    }

    .app-responsive .table-responsive,
    .app-responsive .user-table-wrap,
    .app-responsive .comments-table-wrap,
    .app-responsive .usage-table-wrap,
    .app-responsive .model-ai-sync-preview-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: auto;
    }

    .app-responsive .table-responsive > .table,
    .app-responsive .user-table-wrap > .table,
    .app-responsive .comments-table,
    .app-responsive .usage-table,
    .app-responsive table.responsive-stack-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        margin-bottom: 0;
    }

    /* JS adds responsive-stack-table and data-label attributes from existing headers. */
    .app-responsive table.responsive-stack-table {
        display: block;
        border: 0;
    }

    .app-responsive table.responsive-stack-table thead {
        display: none;
    }

    .app-responsive table.responsive-stack-table tbody,
    .app-responsive table.responsive-stack-table tfoot {
        display: block;
        width: 100%;
    }

    .app-responsive table.responsive-stack-table tbody > tr,
    .app-responsive table.responsive-stack-table tfoot > tr {
        display: block;
        width: 100%;
        margin: 0 0 .85rem;
        overflow: hidden;
        border: 1px solid var(--app-border);
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
    }

    .app-responsive table.responsive-stack-table tbody > tr:last-child,
    .app-responsive table.responsive-stack-table tfoot > tr:last-child {
        margin-bottom: 0;
    }

    .app-responsive table.responsive-stack-table tbody > tr > td,
    .app-responsive table.responsive-stack-table tbody > tr > th,
    .app-responsive table.responsive-stack-table tfoot > tr > td,
    .app-responsive table.responsive-stack-table tfoot > tr > th {
        display: grid;
        grid-template-columns: minmax(105px, 32%) minmax(0, 1fr);
        align-items: start;
        gap: .75rem;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: .72rem .82rem !important;
        border: 0 !important;
        border-bottom: 1px solid #eef1f5 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .app-responsive table.responsive-stack-table tbody > tr > td:last-child,
    .app-responsive table.responsive-stack-table tbody > tr > th:last-child,
    .app-responsive table.responsive-stack-table tfoot > tr > td:last-child,
    .app-responsive table.responsive-stack-table tfoot > tr > th:last-child {
        border-bottom: 0 !important;
    }

    .app-responsive table.responsive-stack-table td::before,
    .app-responsive table.responsive-stack-table th::before {
        content: attr(data-label);
        min-width: 0;
        color: #667085;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .025em;
        line-height: 1.35;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .app-responsive table.responsive-stack-table td[data-label=""],
    .app-responsive table.responsive-stack-table th[data-label=""],
    .app-responsive table.responsive-stack-table td[colspan],
    .app-responsive table.responsive-stack-table th[colspan] {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-responsive table.responsive-stack-table td[data-label=""]::before,
    .app-responsive table.responsive-stack-table th[data-label=""]::before,
    .app-responsive table.responsive-stack-table td[colspan]::before,
    .app-responsive table.responsive-stack-table th[colspan]::before {
        display: none;
    }

    .app-responsive table.responsive-stack-table td > *,
    .app-responsive table.responsive-stack-table th > *,
    .app-responsive table.responsive-stack-table td form,
    .app-responsive table.responsive-stack-table td .d-flex,
    .app-responsive table.responsive-stack-table td .btn-group {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .app-responsive table.responsive-stack-table td .d-flex,
    .app-responsive table.responsive-stack-table td .btn-group,
    .app-responsive table.responsive-stack-table td form {
        flex-wrap: wrap !important;
    }

    .app-responsive table.responsive-stack-table input,
    .app-responsive table.responsive-stack-table select,
    .app-responsive table.responsive-stack-table textarea,
    .app-responsive table.responsive-stack-table .form-control,
    .app-responsive table.responsive-stack-table .form-select {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }

    .app-responsive .pagination {
        flex-wrap: wrap !important;
        justify-content: center;
        overflow-x: hidden !important;
        white-space: normal;
    }

    .app-responsive pre,
    .app-responsive code,
    .app-responsive .ai-message-content pre {
        max-width: 100%;
        white-space: pre-wrap !important;
        overflow-x: hidden !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .app-responsive [style*="min-width"] {
        min-width: 0 !important;
    }

    .app-responsive .text-nowrap,
    .app-responsive .badge,
    .app-responsive .btn,
    .app-responsive td,
    .app-responsive th {
        white-space: normal !important;
    }

    .dashboard-activity-chart {
        overflow-x: hidden !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: clamp(.16rem, .8vw, .42rem) !important;
        width: 100%;
    }

    .dashboard-chart-day,
    .dashboard-chart-bars,
    .dashboard-chart-bar,
    .dashboard-chart-label {
        min-width: 0 !important;
    }

    .dashboard-chart-bar {
        width: min(18px, 42%);
    }

    .dashboard-chart-label {
        font-size: clamp(.55rem, 1.6vw, .68rem);
    }
}

@media (max-width: 767.98px) {
    .app-main .card,
    .app-main .card-soft,
    .app-main .bos-card,
    .app-main .element-card,
    .app-main .element-stat-card {
        border-radius: 1rem;
    }

    .app-main .bos-page-header,
    .app-main .element-page-header,
    .app-main .page-header,
    .app-main .app-page-header {
        border-radius: 1rem;
    }

    .app-responsive table.responsive-stack-table tbody > tr > td,
    .app-responsive table.responsive-stack-table tbody > tr > th,
    .app-responsive table.responsive-stack-table tfoot > tr > td,
    .app-responsive table.responsive-stack-table tfoot > tr > th {
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: .55rem;
        padding: .68rem .72rem !important;
    }
}

@media (max-width: 479.98px) {
    .app-responsive table.responsive-stack-table tbody > tr > td,
    .app-responsive table.responsive-stack-table tbody > tr > th,
    .app-responsive table.responsive-stack-table tfoot > tr > td,
    .app-responsive table.responsive-stack-table tfoot > tr > th {
        grid-template-columns: 1fr;
        gap: .22rem;
    }

    .app-responsive table.responsive-stack-table td::before,
    .app-responsive table.responsive-stack-table th::before {
        margin-bottom: .05rem;
    }
}