/* ============================================
   CM App — Razor-Specific Overrides
   ============================================ */

/* ── Bridge: map old cm-* CSS variables to template variables ── */
:root {
    --cm-emerald: var(--color-primary);
    --cm-emerald-light: var(--color-primary-hover);
    --cm-navy: var(--color-primary-ink);
    --cm-navy-light: #243044;
    --cm-copper: var(--color-accent);
    --cm-copper-muted: #a0643a;
    --cm-sand: #d4b896;
    --cm-beige: var(--color-surface-alt);
    --cm-offwhite: var(--color-bg);
    --cm-bg: var(--color-bg);
    --cm-surface: var(--color-surface);
    --cm-text: var(--color-text);
    --cm-text-muted: var(--color-text-muted);
    --cm-border: var(--color-border);
    --cm-card-shadow: var(--shadow-sm);
    --cm-card-hover-shadow: var(--shadow-lg);
    --cm-font: var(--font-sans);
    --cm-font-heading: var(--font-sans);
    --cm-transition: var(--transition);
    --cm-navbar-gradient: linear-gradient(135deg, var(--color-primary-ink) 0%, var(--color-primary-hover) 50%, var(--color-primary) 100%);
    --cm-hero-gradient: linear-gradient(160deg, var(--color-primary-ink) 0%, var(--color-primary-hover) 40%, var(--color-primary) 100%);
    --cm-cta-gradient: linear-gradient(135deg, var(--color-primary-ink) 0%, var(--color-primary-hover) 60%, var(--color-primary) 100%);

    /* Semantic color tokens for shared.css compatibility */
    --cm-danger: var(--color-danger);
    --cm-danger-dark: #b91c1c;
    --cm-danger-darker: #991b1b;
    --cm-success: var(--color-success);
    --cm-success-light: #86efac;
    --cm-warning: var(--color-warning);
    --cm-warning-dark: #d97706;
    --cm-info: var(--color-info);
    --cm-teal: #0d9488;
    --cm-indigo: #6366f1;
    --cm-white: #fff;
}

[data-theme="dark"] {
    --cm-danger-dark: #f87171;
    --cm-danger-darker: #fca5a5;
    --cm-success-light: #6ee7b7;
    --cm-warning-dark: #fbbf24;
    --cm-teal: #14b8a6;
    --cm-indigo: #818cf8;
}

/* ── Lightweight grid (replaces Bootstrap grid) ── */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--s-3) * -0.5);
}

.row>* {
    padding: calc(var(--s-3) * 0.5);
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
}

.g-3 {
    margin: calc(var(--s-3) * -0.5);
}

.g-3>* {
    padding: calc(var(--s-3) * 0.5);
}

.g-4 {
    margin: calc(var(--s-4) * -0.5);
}

.g-4>* {
    padding: calc(var(--s-4) * 0.5);
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-8 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .col-lg-2 {
        flex: 0 0 16.667%;
        max-width: 16.667%;
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-8 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }
}

/* ── Additional utilities ── */
.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-center {
    justify-content: center;
}

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

.text-end {
    text-align: end;
}

.fw-bold {
    font-weight: 700;
}

.fw-semibold {
    font-weight: 600;
}

.fs-sm {
    font-size: var(--fs-sm);
}

.fs-xs {
    font-size: var(--fs-xs);
}

.p-4 {
    padding: var(--s-4);
}

.py-5 {
    padding-top: var(--s-5);
    padding-bottom: var(--s-5);
}

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

/* Loading overlay */
.cm-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 28, 46, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cm-loading-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="dark"] .cm-loading-overlay {
    background: rgba(0, 0, 0, 0.35);
}

/* 3×3 SVG grid loader */
.cm-loader-grid {
    width: 60px;
    height: 60px;
}

/* Alert messages (TempData) */
.cm-alert {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: var(--s-4);
    position: relative;
    animation: cm-alert-in 0.25s ease;
}

@keyframes cm-alert-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cm-alert-success {
    background: var(--color-success-soft);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

[data-theme="dark"] .cm-alert-success {
    color: #6ee7b7;
    border-color: #07302a;
}

.cm-alert-danger {
    background: var(--color-danger-soft);
    color: #991b1b;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .cm-alert-danger {
    color: #fca5a5;
    border-color: #3a1b1b;
}

.cm-alert-info {
    background: var(--color-info-soft);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

[data-theme="dark"] .cm-alert-info {
    color: #93c5fd;
    border-color: #132240;
}

.cm-alert-warning {
    background: var(--color-warning-soft);
    color: #92400e;
    border: 1px solid #fde68a;
}

[data-theme="dark"] .cm-alert-warning {
    color: #fcd34d;
    border-color: #3a2c0b;
}

.cm-alert .cm-alert-close {
    margin-inline-start: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-lg);
    color: inherit;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

.cm-alert .cm-alert-close:hover {
    opacity: 1;
}

.cm-alert svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Validation errors */
.field-validation-error,
.cm-validation-error {
    color: var(--color-danger);
    font-size: var(--fs-xs);
    margin-top: 4px;
    display: block;
}

.input-validation-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent) !important;
}

.validation-summary-errors {
    background: var(--color-danger-soft);
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    font-size: var(--fs-sm);
}

[data-theme="dark"] .validation-summary-errors {
    color: #fca5a5;
    border-color: #3a1b1b;
}

.validation-summary-errors ul {
    margin: 0;
    padding-inline-start: var(--s-4);
}

.validation-summary-valid {
    display: none;
}

/* Select2 overrides for new template */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    background: var(--color-surface) !important;
    padding: 0 var(--s-3);
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text) !important;
    font-size: var(--fs-sm);
    padding: 0 !important;
    line-height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    inset-inline-end: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-soft) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--single:focus-within,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

.select2-dropdown {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-lg) !important;
}

.select2-results__option {
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
    padding: 8px var(--s-3) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
    height: 36px;
    padding: 0 var(--s-3);
}

/* Select2 multiple */
.select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    background: var(--color-surface) !important;
    padding: 4px var(--s-2);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-ink) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--fs-xs) !important;
    padding: 4px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-primary-ink) !important;
}

/* Toast notification */
.cm-toast {
    position: fixed;
    top: 80px;
    inset-inline-end: 20px;
    z-index: 9999;
    min-width: 320px;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--s-4);
    animation: cm-toast-in 0.3s ease;
}

@keyframes cm-toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Password strength indicator */
.pw-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.pw-strength span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background 0.2s;
}

.pw-strength span.weak {
    background: var(--color-danger);
}

.pw-strength span.fair {
    background: var(--color-warning);
}

.pw-strength span.good {
    background: var(--color-info);
}

.pw-strength span.strong {
    background: var(--color-success);
}

.pw-strength-text {
    font-size: var(--fs-xs);
    margin-top: var(--s-1);
    min-height: 1.2em;
    transition: color var(--transition);
}

.pw-strength-text.weak {
    color: var(--color-danger);
}

.pw-strength-text.fair {
    color: var(--color-warning);
}

.pw-strength-text.good {
    color: var(--color-info);
}

.pw-strength-text.strong {
    color: var(--color-success);
}

.pw-hint {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: var(--s-1);
}

/* Password eye toggle */
.pw-wrap {
    position: relative;
}

.pw-wrap .input,
.pw-wrap .form-control {
    padding-inline-end: 42px;
}

.pw-toggle {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    height: 100%;
    width: 42px;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition);
}

.pw-toggle:hover {
    color: var(--color-text);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Role selection cards (register page) */
.role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}

.role-card {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition);
    background: var(--color-surface);
}

.role-card:hover {
    border-color: var(--color-border-strong);
}

.role-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.role-card input[type="radio"] {
    display: none;
}

.role-card .role-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    margin: 0 auto var(--s-3);
    font-size: 20px;
}

.role-card .role-icon.customer {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.role-card .role-icon.craftsman {
    background: var(--color-accent-soft);
    color: #b45309;
}

.role-card .role-label {
    font-weight: 600;
    font-size: var(--fs-sm);
    display: block;
}

.role-card .role-desc {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    display: block;
    margin-top: 2px;
}

/* Forgot password method cards */
.fp-method-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.fp-method-card {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
}

.fp-method-card:hover {
    border-color: var(--color-border-strong);
}

.fp-method-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.fp-method-card input[type="radio"] {
    display: none;
}

.fp-method-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.fp-method-card.selected .fp-method-icon {
    background: var(--color-primary);
    color: #fff;
}

.fp-method-label {
    font-weight: 600;
    font-size: var(--fs-sm);
}

/* Forgot password OTP inputs */
.fp-otp-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: var(--s-5) 0 var(--s-3);
}

.fp-otp-input {
    width: 48px;
    height: 56px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-lg);
    font-weight: 700;
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

.fp-otp-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.fp-otp-input:focus-visible {
    outline: none;
}

/* Pager */
.cm-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.cm-pager-info {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.cm-pager-list {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-pager-list a,
.cm-pager-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.cm-pager-list a:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.cm-pager-list .active span {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.cm-pager-list .disabled span,
.cm-pager-list .disabled a {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* File attachment previews */
.attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-3);
}

.attachment-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.attachment-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-item .remove-btn {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.00rem;
}

/* Bootstrap Icons integration */
[class^="bi-"]::before,
[class*=" bi-"]::before {
    vertical-align: -0.125em;
}

/* Utility: optional label */
.optional {
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--color-text-soft);
}

/* Star rating */
.star-rating {
    display: flex;
    gap: 4px;
    font-size: 24px;
}

.star-rating .star {
    cursor: pointer;
    color: var(--color-border-strong);
    transition: color 0.15s;
}

.star-rating .star.active,
.star-rating .star:hover {
    color: var(--color-accent);
}

/* Detail rows (key-value pairs) */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}

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

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-value {
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* Responsive form adjustments */
@media (max-width: 720px) {
    .role-grid {
        grid-template-columns: 1fr;
    }

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

/* Landing page footer */
.landing-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--s-5) var(--s-7);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Page-level empty state */
.page-empty {
    text-align: center;
    padding: var(--s-10) var(--s-5);
    color: var(--color-text-muted);
}

.page-empty svg {
    width: 48px;
    height: 48px;
    color: var(--color-text-soft);
    margin-bottom: var(--s-3);
}

.page-empty h3 {
    font-size: var(--fs-md);
    color: var(--color-text);
    margin-bottom: var(--s-2);
}

.page-empty p {
    font-size: var(--fs-sm);
    max-width: 400px;
    margin: 0 auto;
}

/* ── Bootstrap utility aliases ── */
.align-items-center {
    align-items: center;
}

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

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-flex {
    display: inline-flex;
}

.d-grid {
    display: grid;
}

.flex-fill {
    flex: 1 1 auto;
}

.text-decoration-none {
    text-decoration: none;
}

.text-body-secondary {
    color: var(--color-text-muted);
}

.text-primary {
    color: var(--color-primary);
}

.text-danger {
    color: var(--color-danger);
}

.text-dark {
    color: var(--color-text);
}

.text-start {
    text-align: start;
}

.small {
    font-size: var(--fs-sm);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-3 {
    margin-bottom: var(--s-3);
}

.mb-4 {
    margin-bottom: var(--s-4);
}

.ms-1 {
    margin-inline-start: 0.25rem;
}

.me-1 {
    margin-inline-end: 0.25rem;
}

.px-4 {
    padding-inline: var(--s-4);
}

.p-3 {
    padding: var(--s-3);
}

.fs-4 {
    font-size: var(--fs-xl);
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.rounded-circle {
    border-radius: 50%;
}

.gap-2 {
    gap: var(--s-2);
}

/* ── Bootstrap form aliases ── */
.form-control,
.form-select {
    width: 100%;
    height: 42px;
    padding: 0 var(--s-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

textarea.form-control {
    height: auto;
    padding: var(--s-3);
    resize: vertical;
}

.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-check:not(.form-switch) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.form-check-input:not([role="switch"]) {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check-label {
    font-size: var(--fs-sm);
    cursor: pointer;
}

/* ── Bootstrap alert aliases ── */
.alert {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: var(--s-4);
}

.alert-danger {
    background: var(--color-danger-soft);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning {
    background: var(--color-warning-soft);
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-success {
    background: var(--color-success-soft);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* ── Bootstrap badge aliases ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
}

.bg-success {
    background: var(--color-success) !important;
    color: #fff;
}

.bg-danger {
    background: var(--color-danger) !important;
    color: #fff;
}

.bg-warning {
    background: var(--color-warning) !important;
}

.text-dark {
    color: var(--color-text) !important;
}

.bg-secondary {
    background: var(--color-text-muted) !important;
    color: #fff;
}

.bg-primary {
    background: var(--color-primary) !important;
    color: #fff;
}

.bg-opacity-10 {
    opacity: 1;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

/* ── Bootstrap card shadow alias ── */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

/* ── Bootstrap button aliases ── */
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-ink);
    --bs-btn-active-border-color: var(--color-primary-ink);
    --bs-btn-disabled-color: var(--color-primary-ink);
    --bs-btn-disabled-bg: var(--color-primary-soft);
    --bs-btn-disabled-border-color: var(--color-primary-soft);
    background: transparent;
    border: 1.5px solid var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-soft);
    color: var(--color-primary-ink);
    opacity: 1;
}

.btn-outline-secondary {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
}

.btn-outline-secondary:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.btn-success {
    background: var(--color-success);
    color: #fff;
    border: none;
}

.btn-success:hover {
    background: #059669;
}

/* Theme Bootstrap .btn-primary: override BS variables with project green so :disabled and
   other pseudo-class states never fall back to Bootstrap blue. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-ink);
    --bs-btn-active-border-color: var(--color-primary-ink);
    --bs-btn-disabled-color: var(--color-primary-ink);
    --bs-btn-disabled-bg: var(--color-primary-soft);
    --bs-btn-disabled-border-color: var(--color-primary-soft);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
}

/* Theme Bootstrap .btn-secondary: BS hover/focus/active use --bs-btn-hover-color etc.; without this,
 * cm-template hover background + Bootstrap's default #fff hover text washes out labels (landing hero Login). */
.btn-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface-alt);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-surface);
    --bs-btn-active-border-color: var(--color-border-strong);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-bg: var(--color-surface-alt);
    --bs-btn-disabled-border-color: var(--color-border);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
}

.btn-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    padding: 4px;
    line-height: 1;
}

/* Do NOT override btn-close::after — Bootstrap uses a background SVG for the × icon */

/* ── Bootstrap modal - Let Bootstrap handle modals, only add theme colors ── */
.modal-content {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.modal-header {
    border-bottom-color: var(--color-border);
}

.modal-footer {
    border-top-color: var(--color-border);
}

.modal-title {
    color: var(--color-text);
}

/* ── card-premium alias (used in ReportNoShow/RequestManualReview) ── */
.card-premium {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
    box-shadow: var(--shadow-sm);
}

/* ── back-btn for dashboard pages ── */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: var(--s-3);
}

.back-btn:hover {
    color: var(--color-primary);
}

/* ── input-field alias ── */
.input-field {
    width: 100%;
    padding: var(--s-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-family: inherit;
}

.input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ── btn-gold / btn-danger-cm aliases ── */
.btn-gold {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-5);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.btn-gold:hover {
    background: #d97706;
}

.btn-danger-cm {
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-5);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.btn-danger-cm:hover {
    background: #dc2626;
}

/* ── Additional Bootstrap utility aliases ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.font-monospace {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.border {
    border: 1px solid var(--color-border);
}

.rounded {
    border-radius: var(--radius);
}

.rounded-bottom {
    border-radius: 0 0 var(--radius) var(--radius);
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-secondary {
    color: var(--color-text-muted);
}

.text-success {
    color: var(--color-success);
}

.flex-grow-1 {
    flex-grow: 1;
}

.m-0 {
    margin: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.me-2 {
    margin-inline-end: var(--s-2);
}

.mb-2 {
    margin-bottom: var(--s-2);
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.py-2 {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
}

.fs-3 {
    font-size: var(--fs-2xl);
}

.g-2 {
    margin: calc(var(--s-2) * -0.5);
}

.g-2>* {
    padding: calc(var(--s-2) * 0.5);
}

.bg-body-secondary {
    background: var(--color-surface-alt);
}

.bg-dark {
    background: var(--color-text) !important;
    color: #fff;
}

.btn-dark {
    background: var(--color-text);
    color: #fff;
    border: none;
}

.btn-dark:hover {
    opacity: 0.85;
}

.btn-orange {
    background: var(--color-accent);
    color: #fff;
    border: none;
}

.btn-orange:hover {
    background: #d97706;
}

@media (min-width: 576px) {
    .col-sm-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-sm-8 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }
}

@media (min-width: 768px) {
    .col-md-1 {
        flex: 0 0 8.333%;
        max-width: 8.333%;
    }

    .col-md-2 {
        flex: 0 0 16.667%;
        max-width: 16.667%;
    }

    .col-md-5 {
        flex: 0 0 41.667%;
        max-width: 41.667%;
    }
}

@media (min-width: 992px) {
    .col-lg-10 {
        flex: 0 0 83.333%;
        max-width: 83.333%;
    }
}

/* form-switch (toggle) — color overrides only, Bootstrap handles the rendering */
.form-switch .form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-color: var(--color-primary);
}

/* pagination (Bootstrap compat) */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.page-item {
    display: inline-flex;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.page-link:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

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

.page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

.pagination-sm .page-link {
    min-width: 28px;
    height: 28px;
    font-size: 1.00rem;
}

/* dropdown (used in some admin views) */
.dropdown {
    position: relative;
    display: inline-block;
    padding-top: 4px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 100;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: var(--fs-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition);
}

.dropdown-item:hover {
    background: var(--color-surface-alt);
}

.dropdown-divider {
    border-top: 1px solid var(--color-border);
    margin: 4px 0;
}

/* empty-state alias */
.empty-state {
    text-align: center;
    padding: var(--s-8) var(--s-4);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* admin stat card — inherits from shared.css .cm-admin-card
   Only add overrides here that are specific to cm-app context.
   Do NOT redefine base styles (background, border, border-radius, padding)
   to avoid cascade conflicts with shared.css. */

/* Remove hover lift on admin form cards — only stat/dashboard cards should lift */
.cm-admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}

/* ── Auth-page floating topbar (language + theme on login/register) ── */
.auth-topbar {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    width: 50%;
}

.auth-topbar-brand {
    display: none;
    align-items: center;
    gap: var(--s-2);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1;
}

.auth-topbar-brand svg {
    flex-shrink: 0;
}

.auth-topbar-brand:hover {
    color: var(--color-primary);
}

.auth-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.auth-topbar .icon-btn {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text);
    border-radius: var(--radius);
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.auth-topbar .icon-btn:hover {
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-text) 18%, transparent);
}

.auth-topbar .icon-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[data-theme="dark"] .auth-topbar .icon-btn {
    background: color-mix(in srgb, #fff 12%, transparent);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    color: #fff;
}

[data-theme="dark"] .auth-topbar .icon-btn:hover {
    background: color-mix(in srgb, #fff 22%, transparent);
    border-color: color-mix(in srgb, #fff 28%, transparent);
}

/* wider button when it has text (language label) */
.auth-topbar .icon-btn:has(i) {
    width: auto;
    padding: 0 var(--s-3);
    min-height: 40px;
}

/* ── Comprehensive RTL support ── */

/* Font family: Arabic uses Tajawal, English uses Inter */
html[dir="rtl"] {
    font-family: 'Tajawal', 'Inter', var(--font-sans);
}

html[dir="ltr"] {
    font-family: 'Inter', var(--font-sans);
}

/* Flip directional icons */
html[dir="rtl"] .bi-arrow-left::before {
    content: "\f12f";
    /* bi-arrow-right */
}

html[dir="rtl"] .bi-arrow-right::before {
    content: "\f127";
    /* bi-arrow-left */
}

html[dir="rtl"] .bi-chevron-right::before {
    content: "\f284";
    /* bi-chevron-left */
}

html[dir="rtl"] .bi-chevron-left::before {
    content: "\f285";
    /* bi-chevron-right */
}

html[dir="rtl"] .bi-box-arrow-right::before {
    content: "\f1c4";
    /* bi-box-arrow-left */
}

/* Auth hero: mirror layout in RTL */
/* direction: rtl is inherited from <html dir="rtl"> — no override needed.
   text-align: start is the default and resolves to "right" in RTL,
   which is correct for Arabic text. Removed text-align: end overrides
   that were forcing Arabic text to align LEFT (wrong). */

/* Sidebar text alignment — inherited from html[dir] */

/* Table text alignment — inherited from html[dir] */

/* Form labels — inherited from html[dir] */

/* Validation messages alignment — inherited from html[dir] */

/* Modal direction — inherited from html[dir] */

/* Dropdown alignment — inherited from html[dir] */

/* Breadcrumb direction — inherited from html[dir] */

/* Page header — inherited from html[dir] */

/* Button icon gap: logical properties handle this but ensure flex-direction */
html[dir="rtl"] .cm-btn i,
html[dir="rtl"] .btn i {
    order: 0;
}

/* Select2 RTL — Select2 needs explicit direction since it creates
   detached dropdown elements outside the normal DOM flow */
html[dir="rtl"] .select2-container {
    direction: rtl;
}

html[dir="rtl"] .select2-dropdown {
    direction: rtl;
}

/* Card text — inherited from html[dir] */

/* Navigation link active indicator — uses border-inline-start (already logical) */
/* Ensure spacing uses logical properties */
.nav-item {
    padding-inline-start: var(--s-4);
    padding-inline-end: var(--s-2);
}

/* User menu alignment — inherited from html[dir] */

/* Topbar search icon position — base rule in cm-template.css already uses
   inset-inline-start which auto-flips for RTL. No override needed. */

/* Empty state */
html[dir="rtl"] .cm-empty-state,
html[dir="rtl"] .empty-state {
    text-align: center;
    /* centered regardless */
}

/* Pagination — inherited from html[dir] */

/* Filter panels — inherited from html[dir] */

/* ============================================
   Bootstrap Modal Theme Integration
   ============================================ */

/* Full-viewport dark backdrop. Dim is controlled by the background alpha and a
   forced opacity:1 (so the Bootstrap fade still animates 0 -> 1 via .show). */
.modal-backdrop {
    background-color: rgba(15, 28, 46, 0.55);
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: 10050 !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.72);
}

body.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/*
 * The sidebar and topbar use `position: sticky`, which the browser promotes to
 * its own GPU compositing layer. After the page is scrolled, that layer paints
 * ABOVE the modal backdrop (most visibly the RTL sidebar/footer on the right),
 * so the overlay appears to miss it. Neutralizing sticky while a modal is open
 * removes the escaping layers, letting the full-viewport backdrop cover the
 * entire dashboard shell. The shift is hidden behind the backdrop.
 *
 * The topbar is sticky at every breakpoint, so it is neutralized unconditionally.
 * The sidebar is only sticky on desktop; on mobile it is an off-canvas
 * `position: fixed` element (z-index below the backdrop), so it is left alone
 * there to avoid forcing the hidden drawer back into the page flow.
 */
body.modal-open .topbar {
    position: static !important;
    z-index: auto !important;
}

@media (min-width: 961px) {
    body.modal-open .sidebar {
        position: static !important;
        z-index: auto !important;
    }
}

body.modal-open .app {
    pointer-events: none;
}

body.modal-open .modal,
body.modal-open .modal-backdrop {
    pointer-events: auto;
}

.modal.show,
.modal.showing {
    z-index: 10055 !important;
}

/* Maps create their own stacking/compositor layers — hide them under the modal. */
body.modal-open .cm-map-container,
body.modal-open .cm-map-container .gm-style,
body.modal-open .cm-map-container iframe {
    z-index: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 960px) {
    body.modal-open .sidebar {
        transform: none !important;
    }

    body.modal-open .app.mobile-open::before,
    body.modal-open .app.mobile-open::after {
        z-index: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Theme colors for modal */
.modal-content {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
}

.modal-body {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.modal-footer {
    background-color: var(--color-surface);
    border-top-color: var(--color-border);
}

/* RTL support for close button — use logical properties */
html[dir="rtl"] .modal-header .btn-close {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* ── Toast type variants (TempData + global CmToast) ── */
.cm-toast {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cm-toast-success {
    border-inline-start: 4px solid var(--color-success);
}

.cm-toast-danger {
    border-inline-start: 4px solid var(--color-danger);
}

.cm-toast-warning {
    border-inline-start: 4px solid var(--color-warning);
}

.cm-toast-info {
    border-inline-start: 4px solid var(--color-info);
}

/* ============================================
   Utility Classes — Extracted from inline styles
   (TODO #1: Repeated inline patterns)
   ============================================ */

/* Auth brand icon (hero sidebar) */
.auth-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: color-mix(in srgb, #fff 18%, transparent);
    display: grid;
    place-items: center;
}

/* Auth hero title */
.auth-hero-title {
    font-size: var(--fs-lg);
}

/* Auth bottom link row */
.auth-bottom-link {
    font-size: var(--fs-xs);
}

/* Breadcrumb chevron separator */
.breadcrumb-chevron {
    font-size: var(--fs-xs);
}

/* Table cell text truncation */
.text-truncate-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-cell-lg {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* OTP code input */
.otp-input {
    text-align: center;
    font-size: var(--fs-xl);
    letter-spacing: 0.5em;
    font-weight: 700;
}

/* Auth status icon circle (EmailVerified page) */
.auth-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto var(--s-4);
}

.auth-status-icon.success {
    background: var(--color-success-soft);
}

.auth-status-icon.error {
    background: var(--color-danger-soft);
}

/* Admin filter inputs */
.filter-input-sm {
    max-width: 200px;
}

.filter-input-md {
    max-width: 350px;
}

/* Sidebar announcement dot */
.sidebar-announcement-dot {
    top: -2px;
    inset-inline-end: -4px;
}

/* Admin dispute detail layout */
.dispute-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s-5);
    align-items: start;
}

.dispute-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.dispute-quote-block {
    background: var(--color-surface-alt);
    padding: var(--s-3);
    border-radius: var(--radius);
    font-size: var(--fs-xs);
    margin-top: var(--s-1);
    line-height: 1.6;
}

.dispute-resolve-title {
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
}

/* Log payload block */
.log-payload {
    max-height: 400px;
    overflow: auto;
    font-size: var(--fs-xs);
    white-space: pre-wrap;
    word-break: break-all;
}

.log-payload-lg {
    max-height: 500px;
    overflow: auto;
    font-size: var(--fs-xs);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Icon colored as primary (replaces inline color:var(--cm-emerald)) */
.icon-primary {
    color: var(--color-primary);
}

/* Icon colored as accent (replaces inline color:var(--cm-copper)) */
.icon-accent {
    color: var(--color-accent);
}

/* Icon colored as danger (replaces inline color:var(--cm-danger)) */
.icon-danger {
    color: var(--color-danger);
}

/* Icon colored as muted (replaces inline color:var(--cm-text-muted)) */
.icon-muted {
    color: var(--color-text-muted, var(--cm-text-muted));
}

/* Category grid container */
.cat-grid-scroll {
    max-height: 320px;
    overflow-y: auto;
}

.cm-cat-grid-wrap {
    position: relative;
}

.cm-cat-grid-empty {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-6) var(--s-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.cm-cat-grid-empty .cm-empty-icon {
    opacity: 0.45;
    color: var(--color-primary);
}

.cm-form-label-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

.cm-form-label-inline {
    margin-bottom: 0;
}

.cm-field-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.cm-field-help-btn:hover,
.cm-field-help-btn:focus-visible {
    color: var(--color-primary);
    background: var(--color-surface-alt);
    outline: none;
}

.cm-field-help-btn .bi {
    font-size: 1.125rem;
}

.cm-field-help-popover {
    --bs-popover-max-width: min(320px, calc(100vw - 2rem));
}

.cm-field-help-popover .popover-body {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-text);
}

.cm-field-help-popover__line + .cm-field-help-popover__line {
    margin-top: var(--s-2);
}

/* SweetAlert2 check list scrollable container */
.cm-swal-check-scroll {
    max-height: 280px;
    overflow: auto;
    padding: 0 !important;
}

.cm-swal-check-scroll .form-check-label {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Check list items (hidden checkbox, styled label) */
.cm-check-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@keyframes cmCheckItemFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cm-check-list-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    color: var(--color-text);
    outline: none;
    animation: cmCheckItemFadeIn 0.2s ease forwards;
}

.cm-check-list-loader,
.cm-check-list-empty {
    animation: cmCheckItemFadeIn 0.2s ease forwards;
}

.cm-check-list-item:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.04));
}

.cm-check-list-item--selected {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

.cm-check-list-item--selected:hover {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.cm-check-list-item input[type="checkbox"] {
    display: none;
}

.cm-check-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    gap: 8px;
}

.cm-check-list-empty i {
    font-size: 1.5rem;
    opacity: 0.5;
}

.cm-check-list-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Prevent SweetAlert2 form popups from clipping checkboxes */
.cm-swal-form-popup {
    overflow: visible !important;
}

.cm-swal-text {
    overflow: visible !important;
}

/* Rate job — Customer RateJob (full-width shell; aligns with dashboard cards) */

.rate-job-shell {
    width: 100%;
    max-width: 100%;
}

.rate-job-page {
    width: 100%;
}

.rate-job-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.rate-job-intro {
    text-align: center;
    margin-bottom: var(--s-2);
}

.rate-job-intro-icon {
    width: 4rem;
    height: 4rem;
    margin-inline: auto;
    margin-bottom: var(--s-3);
    border-radius: var(--radius-full, 9999px);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    box-shadow: var(--shadow-sm);
}

.rate-job-intro-icon i {
    font-size: var(--fs-xl);
}

.rate-job-intro-title {
    font-weight: 700;
    font-size: var(--fs-md);
    margin: 0 0 var(--s-2);
    color: var(--color-text);
}

.rate-job-intro-text {
    margin: 0 auto;
    max-inline-size: 42rem;
}

.rate-job-validation-summary {
    margin-bottom: 0;
}

.rate-job-card {
    padding: var(--s-5);
    margin: 0;
}

.rate-job-card-label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--color-text);
    margin-bottom: var(--s-3);
}

.rate-job-comment-label {
    cursor: pointer;
}

.rate-job-card-icon {
    flex-shrink: 0;
    font-size: var(--fs-md);
}

.rate-job-card-icon--success {
    color: var(--color-success);
}

.rate-job-card-icon--accent {
    color: var(--color-accent);
}

.rate-job-card-icon--info {
    color: var(--color-info);
}

.rate-job-optional-flag {
    font-weight: 400;
}

.rate-job-comment-input {
    margin-top: var(--s-3);
}

.rate-job-star-row.cm-star-group {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0 0 var(--s-2);
    padding-block: var(--s-1);
}

.rate-job-page .rate-job-star {
    cursor: pointer;
    margin: 0;
    padding: var(--s-2);
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.rate-job-star:focus-within {
    outline: none;
}

.rate-job-star:focus-within .rate-job-star-visual {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.rate-job-star:hover {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    transform: scale(1.06);
}

.rate-job-star:active {
    transform: scale(0.96);
}

.rate-job-star-visual {
    pointer-events: none;
    display: grid;
    place-items: center;
    line-height: 1;
}

.rate-job-star-visual i {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: color-mix(in srgb, var(--color-accent) 50%, var(--color-text-muted));
    transition:
        color var(--transition),
        filter var(--transition),
        transform 0.12s ease;
}

.rate-job-star:not(.active) .rate-job-star-visual i {
    color: var(--color-text-muted);
}

.rate-job-star.active .rate-job-star-visual i {
    color: var(--color-warning, var(--cm-sand, #eab308));
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.rate-job-star:hover .rate-job-star-visual i {
    filter: brightness(1.06);
}

[data-theme="dark"] .rate-job-star:not(.active) .rate-job-star-visual i {
    opacity: 0.9;
}

.rate-job-field-error {
    font-size: var(--fs-xs);
    display: block;
    margin-top: var(--s-2);
}

.rate-job-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    width: 100%;
}

.rate-job-actions .rate-job-action-primary,
.rate-job-actions .rate-job-action-secondary {
    width: 100%;
    min-block-size: 3rem;
    box-sizing: border-box;
}

.rate-job-actions .rate-job-action-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 0;
}

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

    .rate-job-card {
        padding: var(--s-4);
    }
}

/* Legacy utility names kept for other razor if referenced */
.rate-heading {
    font-weight: 800;
    font-size: var(--fs-lg);
    color: var(--color-text);
    margin: var(--s-3) 0 var(--s-1);
}

.rate-subtitle {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
}

/* Section title with bottom margin */
.cm-section-title-sm {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--color-text);
    margin-bottom: var(--s-3);
}

/* Narrow form wrapper */
.form-narrow {
    max-width: 520px;
    margin: 0 auto;
}

.form-narrow-sm {
    max-width: 480px;
    margin: 0 auto;
}

.form-narrow-md {
    max-width: 580px;
}

.form-narrow-lg {
    max-width: 500px;
}

/* Payment method badge */
.pay-badge-cliq {
    background: var(--color-info-soft, color-mix(in srgb, var(--color-info) 8%, transparent));
    color: var(--color-info);
}

.pay-badge-cash {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* Attachment thumbnail */
.attachment-thumb {
    height: 60px;
    object-fit: cover;
    width: 100%;
}

.attachment-thumb-lg {
    height: 80px;
    object-fit: cover;
    width: 100%;
}

/* Monospace textarea (for SVG/HTML editors) */
.textarea-mono {
    font-family: monospace;
    font-size: var(--fs-xs);
    resize: vertical;
}

/* Icon preview box (Settings page) */
.icon-preview-box {
    width: 52px;
    height: 52px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    border-radius: var(--radius);
}

/* OTP layout preview iframe */
.otp-preview-iframe {
    height: 380px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* Settled badge (small green text) */
.badge-settled {
    font-size: var(--fs-xs);
    color: var(--color-success);
    font-weight: 600;
}

/* Due date badge */
.due-date-badge {
    font-size: var(--fs-xs);
    padding: var(--s-1) var(--s-3);
}

/* Offer count muted text */
.offer-count-muted {
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-inline-start: var(--s-1);
}

/* Avatar size variants */
.avatar-md {
    width: 56px;
    height: 56px;
}

/* Timeline icon size */
.timeline-icon-sm {
    font-size: var(--fs-xs);
}

/* Cancellation window styles */
.cancel-window-icon {
    font-size: var(--fs-base);
    color: var(--color-accent);
}

.cancel-window-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--s-1);
}

.cancel-window-text {
    font-size: var(--fs-xs);
}

/* Locked/disabled field appearance */
.field-locked {
    background: var(--color-surface-alt);
    cursor: not-allowed;
    color: var(--color-text-muted);
}

/* Auth form centered (EmailVerified) */
.auth-form-centered {
    text-align: center;
}

/* API key cell truncation */
.api-key-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Settings icon label */
.icon-label-sm {
    font-size: var(--fs-xs);
}


/* ============================================
   Media Lightbox (Gallery Viewer)
   ============================================ */
.cm-lightbox {
    position: fixed;
    inset: 0;
    /* Must sit above the portfolio modal (10055) and its backdrop (10050) so
       attachment previews open in front of an active Bootstrap modal. */
    z-index: 10070;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.cm-lightbox.active {
    opacity: 1;
    visibility: visible;
}

/* Prevent background scroll when lightbox is open */
body:has(.cm-lightbox.active) {
    overflow: hidden;
}

.cm-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

.cm-lightbox.active .cm-lightbox-content {
    transform: scale(1);
}

.cm-lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
}

.cm-lightbox-content video {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    background: #000;
}

/* Close button */
.cm-lightbox-close {
    position: fixed;
    top: var(--s-4);
    inset-inline-end: var(--s-4);
    z-index: 10001;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: var(--fs-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition);
    line-height: 1;
    padding: 0;
}

.cm-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}

/* Navigation arrows */
.cm-lightbox-prev,
.cm-lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: var(--fs-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition);
    padding: 0;
}

.cm-lightbox-prev {
    inset-inline-start: var(--s-4);
}

.cm-lightbox-next {
    inset-inline-end: var(--s-4);
}

.cm-lightbox-prev:hover,
.cm-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.08);
}

.cm-lightbox-prev:active,
.cm-lightbox-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Counter badge */
.cm-lightbox-counter {
    position: fixed;
    bottom: var(--s-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    pointer-events: none;
    user-select: none;
}

/* Filename label */
.cm-lightbox-filename {
    position: fixed;
    bottom: calc(var(--s-4) + 32px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-xs);
    font-weight: 400;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Hide arrows when only one item */
.cm-lightbox[data-count="1"] .cm-lightbox-prev,
.cm-lightbox[data-count="1"] .cm-lightbox-next,
.cm-lightbox[data-count="1"] .cm-lightbox-counter {
    display: none;
}

/* Clickable attachment thumbnails */
.cm-attach-thumb[data-lightbox],
[data-lightbox-trigger],
.cm-profile-avatar[data-lightbox] {
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition);
}

.cm-attach-thumb[data-lightbox]:hover,
[data-lightbox-trigger]:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

/* Responsive: larger touch targets on mobile */
@media (max-width: 768px) {

    .cm-lightbox-prev,
    .cm-lightbox-next {
        width: 44px;
        height: 44px;
    }

    .cm-lightbox-close {
        top: var(--s-3);
        inset-inline-end: var(--s-3);
    }

    .cm-lightbox-prev {
        inset-inline-start: var(--s-2);
    }

    .cm-lightbox-next {
        inset-inline-end: var(--s-2);
    }

    .cm-lightbox-content img,
    .cm-lightbox-content video {
        max-width: 95vw;
        max-height: 80vh;
    }
}


/* ─────────────────────────────────────────────────────────────
   Top-bar balance chip (customer + craftsman)

   Rules:
     - Positive  → green on faint emerald wash
     - Zero      → muted grey (neutral)
     - Negative  → red (user owes the platform)

   Sits inside `.topbar-actions` beside existing icon buttons.
   ───────────────────────────────────────────────────────────── */
.cm-balance-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cm-balance-chip i {
    font-size: 0.95rem;
}

.cm-balance-chip-unit {
    opacity: 0.75;
    font-weight: 500;
    font-size: 0.75rem;
}

/* ── Positive: in-the-green ── */
.cm-balance-chip--positive {
    background: rgba(13, 107, 78, 0.10);
    color: var(--cm-emerald);
    border-color: rgba(13, 107, 78, 0.25);
}

[data-bs-theme="dark"] .cm-balance-chip--positive,
[data-theme="dark"] .cm-balance-chip--positive {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
}

/* ── Zero: neutral grey on surface wash ── */
.cm-balance-chip--zero {
    background: rgba(100, 116, 139, 0.10);
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.22);
}

[data-bs-theme="dark"] .cm-balance-chip--zero,
[data-theme="dark"] .cm-balance-chip--zero {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.25);
}

/* ── Negative: user owes the platform ── */
.cm-balance-chip--negative {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
    border-color: rgba(231, 76, 60, 0.28);
}

[data-bs-theme="dark"] .cm-balance-chip--negative,
[data-theme="dark"] .cm-balance-chip--negative {
    background: rgba(248, 113, 113, 0.18);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.38);
}

/* On small screens, hide the unit text to keep the top bar tight. */
@media (max-width: 480px) {
    .cm-balance-chip-unit {
        display: none;
    }

    .cm-balance-chip {
        padding: 4px 10px;
    }
}

/* ============================================
   Unified Dashboard Polish Layer
   ============================================ */

/* Consistent focus visibility across mixed Bootstrap/cm controls */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.cm-btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    outline-offset: 2px;
}

/* Harmonize controls used across old/new pages */
.form-control,
.form-select,
.input,
.cm-form-control {
    min-height: 42px;
    border-radius: var(--radius);
}

/* Keep action controls readable and touch-friendly */
.btn,
.cm-btn,
.icon-btn {
    min-height: 40px;
}

/* Unify card shell depth/spacing without changing page-specific semantics */
.card,
.cm-admin-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card .card-header,
.cm-admin-card .card-header {
    border-bottom-color: var(--color-border);
}

/* Smoother table framing for all dashboard tables */
.table-responsive {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.table,
.cm-table {
    margin-bottom: 0;
}

.table thead th,
.cm-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td,
.cm-table tbody td {
    vertical-align: middle;
}

/* Mobile sidebar overlay improves discoverability and tap-to-close UX */
@media (max-width: 960px) {
    .app.mobile-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 28, 46, 0.32);
        backdrop-filter: blur(1px);
        z-index: 45;
    }

    .app.mobile-open .sidebar {
        z-index: 55;
    }

    body.cm-sidebar-open {
        overflow: hidden;
    }
}

/* Shared violation toast (moved from inline styles) */
.cm-violation-toaster {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 9999;
    max-width: 420px;
}

.cm-violation-alert {
    border-radius: 12px;
}

@media (max-width: 640px) {
    .cm-violation-toaster {
        inset-inline: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* ── Push Notification Banner ── */
.cm-push-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-surface, #ffffff);
    border-top: 1px solid var(--color-border, #dde4ec);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cm-push-banner.cm-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.cm-push-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.cm-push-banner-icon {
    flex-shrink: 0;
    color: var(--color-primary, #0d6b4e);
    display: flex;
    align-items: center;
}

.cm-push-banner-text {
    flex: 1;
    min-width: 200px;
}

.cm-push-banner-text strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text, #0f1c2e);
}

.cm-push-banner-text p {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #5a6a7e);
}

.cm-push-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .cm-push-banner-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
    }

    .cm-push-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   Phase 2 Utilities (inline-style replacement)
   ============================================ */

.cm-publish-toggle-btn {
    border: 0;
    cursor: pointer;
}

.cm-badge-discord {
    background: #5865f2;
    color: #fff;
}

.nl-html-editor-textarea {
    tab-size: 2;
    resize: vertical;
}

.cm-nl-preview-shell {
    height: 520px;
}

.cm-nl-preview-frame {
    width: 100%;
    height: 100%;
    background: #fff;
}

/* ============================================
   Phase 3 — Home/Index UI/UX Enhancements
   ============================================ */

/* 1. Landing nav: glass-morphism sticky effect */
.landing-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.landing-nav.scrolled {
    box-shadow: var(--shadow-sm);
}

/* 2. Hero: stronger radial gradient for more visual impact + generous padding */
.hero {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            color-mix(in srgb, var(--color-primary-soft) 90%, transparent) 0%,
            transparent 60%),
        var(--color-bg);
    padding-block: 96px;
}

[data-theme="dark"] .hero {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
            transparent 60%),
        var(--color-bg);
}

/* 3. Hero badge: brand-colored variant (emerald, matches platform identity) */
.badge-brand {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
}

[data-theme="dark"] .badge-brand {
    background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* 4. Hero: smooth fade-in + rise entrance animation */
@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero>* {
    animation: hero-fade-up 0.5s ease both;
}

.hero>*:nth-child(1) {
    animation-delay: 0ms;
}

.hero>*:nth-child(2) {
    animation-delay: 90ms;
}

.hero>*:nth-child(3) {
    animation-delay: 180ms;
}

.hero>*:nth-child(4) {
    animation-delay: 260ms;
}

/* 5. Fix features grid: 4 columns at desktop, 2 at tablet, 1 at mobile */
.features {
    grid-template-columns: repeat(4, 1fr);
    padding-block: var(--s-10);
}

@media (max-width: 960px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .features {
        grid-template-columns: 1fr;
        gap: var(--s-3);
    }
}

/* 6. Feature card hover state (was missing) */
.feature {
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

/* 7. Section-alt-wrap: visible background separation */
.section-alt-wrap {
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .section-alt-wrap {
    background: color-mix(in srgb, var(--color-surface) 65%, var(--color-bg));
}

/* 8. Section-head: stack vertically on narrow screens */
@media (max-width: 680px) {
    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
    }

    .section-head .section-sub {
        max-width: 100%;
    }
}

/* 9. Trust grid: 2 columns at tablet (900px was collapsing to 1 too early) */
@media (max-width: 900px) and (min-width: 577px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 10. Footer: proper padding, separator, and centered text */
.landing-footer {
    padding: var(--s-6) var(--s-7);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* 11. Step number circles: depth shadow for polish */
.step-num {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 12. CTA banner: ensure enough breathing room */
.cta-banner {
    padding-block: var(--s-10);
}

/* 13. Category card: active tap feedback */
.category-card:active {
    transform: scale(0.97);
}

/* ============================================
   Phase 4 — Auth Pages UI/UX Enhancements
   ============================================ */

/* 1. Auth form: card appearance (white surface, shadow, border) */
.auth-form {
    max-width: 460px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--s-8) var(--s-7);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .auth-form {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* 2. Auth form-wrap: top clearance for fixed auth-topbar (desktop) */
.auth-form-wrap {
    padding-block-start: 80px;
}

/* 3. Auth entrance animation */
@keyframes auth-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-form {
    animation: auth-fade-up 0.35s ease both;
}

.auth-hero>div:first-child {
    animation: auth-fade-up 0.4s ease both;
    animation-delay: 80ms;
}

.auth-hero-stats {
    animation: auth-fade-up 0.4s ease both;
    animation-delay: 160ms;
}

@media (prefers-reduced-motion: reduce) {

    .auth-form,
    .auth-hero>div:first-child,
    .auth-hero-stats {
        animation: none;
    }
}

/* 4. Form heading: tighter spacing */
.auth-form>h2,
.auth-form-centered>h2 {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* 5. Inputs in auth forms: 46px height for better touch targets */
.auth-form .input {
    height: 46px;
}

/* 6. Validation messages: soft background highlight */
.auth-form .field-validation-error {
    color: var(--color-danger);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.auth-form .validation-summary-errors {
    background: color-mix(in srgb, var(--color-danger) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 22%, transparent);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-xs);
    color: var(--color-danger);
}

.auth-form .validation-summary-errors ul {
    margin: 0;
    padding-inline-start: var(--s-4);
}

/* 7. Auth buttons: consistent height, weight */
.auth-form .btn-block {
    height: 46px;
    font-weight: 600;
    font-size: var(--fs-sm);
}

.auth-form .btn-lg {
    min-height: 50px;
    height: auto;
    white-space: normal;
    padding-block: 0.75rem;
}

@media (min-width: 901px) {
    .auth-form .btn.w-100 {
        white-space: normal;
        min-width: 0;
        overflow: hidden;
    }
}

/* 8. Input error-state highlight */
.auth-form .field:has(.field-validation-error:not(:empty))>.input,
.auth-form .field:has(.field-validation-error:not(:empty))>.pw-wrap .input {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* 9. Bottom link: subtle visual separator from form body */
.auth-bottom-link {
    padding-top: var(--s-4);
    border-top: 1px solid var(--color-border);
    margin-top: var(--s-2);
}

/* 10. ForgotPassword step separator */
.auth-step-sep {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-block: var(--s-5);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.auth-step-sep::before,
.auth-step-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* 11. Role card: checkmark badge on selected */
.role-card.selected::after {
    content: '\2713';
    position: absolute;
    top: var(--s-2);
    inset-inline-end: var(--s-2);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

/* 12. Auth hero decorative circle: slightly more visible */
.auth-hero::after {
    background: rgba(255, 255, 255, 0.09);
}

/* 13. Auth hero: second decorative circle (bottom-start) */
.auth-hero::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    inset-block-end: -90px;
    inset-inline-start: -90px;
}

/* 14. Auth hero brand row */
.auth-hero-brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-7);
}

/* 15. Auth form field spacing */
.auth-form .field {
    margin-bottom: var(--s-4);
}

/* 16. Auth forgot password row */
.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--s-4);
}

.auth-forgot-link {
    font-size: var(--fs-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}

.auth-forgot-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* 17. Auth divider (or continue with) */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-divider span {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* 18. Auth OAuth button grid */
.auth-oauth-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    transition: background var(--transition), border-color var(--transition);
}

.btn-oauth:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/* 19. Auth form mobile enhancements */
@media (max-width: 480px) {
    .auth-form .input {
        height: 48px;
        font-size: 1rem;
    }

    .auth-form .btn-block,
    .auth-form .btn-lg {
        min-height: 50px;
    }

    .auth-form h2 {
        font-size: var(--fs-xl);
    }

    .pw-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ── SweetAlert2 — Sooq Al-Herafieen theme ─────────────────────────────── */
.cm-swal-popup {
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-sans) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: var(--s-6) !important;
}

[dir="rtl"] .cm-swal-popup {
    font-family: var(--font-ar) !important;
    direction: rtl;
    text-align: right;
}

.cm-swal-title {
    font-size: var(--fs-lg) !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
}

.cm-swal-text {
    font-size: var(--fs-sm) !important;
    color: var(--color-text-muted) !important;
}

.cm-swal-actions {
    gap: var(--s-3) !important;
    flex-direction: row !important;
}

[dir="rtl"] .cm-swal-actions {
    flex-direction: row-reverse !important;
}

/* Base button */
.cm-swal-btn-confirm,
.cm-swal-btn-cancel,
.cm-swal-btn-deny {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 var(--s-5) !important;
    border-radius: var(--radius) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background-color var(--transition), color var(--transition) !important;
    min-width: 100px !important;
}

/* Confirm variants */
.cm-swal-btn-confirm--danger {
    background: var(--color-danger) !important;
    color: #fff !important;
}

.cm-swal-btn-confirm--danger:hover {
    filter: brightness(0.92) !important;
}

.cm-swal-btn-confirm--primary {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.cm-swal-btn-confirm--primary:hover {
    background: var(--color-primary-hover) !important;
}

.swal2-confirm--disabled,
.cm-swal-btn-confirm--primary[disabled] {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-ink) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.cm-swal-btn-confirm--warning {
    background: var(--color-warning) !important;
    color: #fff !important;
}

/* Cancel button */
.cm-swal-btn-cancel {
    background: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.cm-swal-btn-cancel:hover {
    background: var(--color-border) !important;
}

/* Dark mode */
[data-theme="dark"] .cm-swal-popup {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .cm-swal-btn-cancel {
    background: var(--color-surface-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* Swal icon colors */
.swal2-icon.swal2-warning {
    border-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}

.swal2-icon.swal2-question {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ── SweetAlert2 alert boxes inside popups ── */
.cm-swal-alert {
    font-size: var(--fs-sm);
}

/* ── SweetAlert2 validation message ── */
.swal2-validation-message {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger) !important;
    border-radius: var(--radius) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 500 !important;
    padding: var(--s-3) var(--s-4) !important;
    margin-top: var(--s-3) !important;
    text-align: start !important;
}

[dir="rtl"] .swal2-validation-message {
    text-align: start !important;
}

[data-theme="dark"] .swal2-validation-message {
    color: #fca5a5 !important;
}

/* ── SweetAlert2 sidebar layout protection ── */
body.swal2-shown {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-gutter: stable !important;
}

html.swal2-shown {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    min-height: 100% !important;
    scrollbar-gutter: stable !important;
}

body.swal2-shown .sidebar,
body.swal2-shown .topbar {
    padding-right: 0 !important;
}

/* Re-assert app shell stability when Swal2 is active */
body.swal2-shown .app {
    min-height: 100vh;
    width: 100% !important;
    max-width: 100% !important;
}

/* Desktop: keep sidebar visible and stable in the flex flow.
   On mobile/tablet the sidebar is off-canvas (position:fixed) and must
   stay that way to avoid pulling it into layout flow. */
@media (min-width: 901px) {
    body.swal2-shown .sidebar {
        height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        align-self: start !important;
        background: var(--color-surface) !important;
    }
}

body.swal2-shown .sidebar-footer {
    border-top-color: var(--color-border) !important;
    background: transparent !important;
}

/* Ensure Swal2 fixed container never pushes body content */
.swal2-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1060 !important;
}

/* ── Mobile: prevent SweetAlert from corrupting page layout ── */
@media (max-width: 767.98px) {
    body.swal2-shown {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        scrollbar-gutter: stable !important;
    }

    html.swal2-shown {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100% !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        scrollbar-gutter: stable !important;
    }

    body.swal2-shown .app,
    body.swal2-shown .main-content,
    body.swal2-shown .content-area,
    body.swal2-shown .topbar {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    /* Keep sidebar off-canvas on mobile — do NOT pull it into flow */
    body.swal2-shown .sidebar {
        position: fixed !important;
        height: 100vh !important;
        height: 100dvh !important;
        top: 0 !important;
        align-self: auto !important;
    }

    .swal2-container {
        padding: 0 16px !important;
    }

}