/* =====================================================================
   SHARED.CSS — Theme Variables · Layout Helpers · Direction Support
   Common Buttons · Cards · Spacing · Responsive · Animations
   ===================================================================== */

/* ═══════════════════════════════════════════════════════
   1. THEME VARIABLES (CSS Custom Properties)
   ═══════════════════════════════════════════════════════ */
:root {
    /* Brand palette */
    --cm-emerald: #0d6b4e;
    --cm-emerald-light: #11866a;
    --cm-navy: #1a2332;
    --cm-navy-light: #243044;
    --cm-copper: #b87333;
    --cm-copper-muted: #a0643a;
    --cm-sand: #d4b896;
    --cm-beige: #f0e6d6;
    --cm-offwhite: #faf7f2;

    /* Semantic tokens */
    --cm-bg: #f4f0ea;
    --cm-surface: #fffdfa;
    --cm-text: var(--cm-navy);
    --cm-text-muted: rgba(26, 35, 50, 0.78);
    --cm-border: rgba(0, 0, 0, 0.08);
    --cm-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --cm-card-hover-shadow: 0 12px 40px rgba(13, 107, 78, 0.12);

    /* Global font */
    --cm-font: var(--font-sans, var(--bs-body-font-family));
    --cm-font-heading: var(--font-sans, var(--bs-body-font-family));

    /* Gradients */
    --cm-navbar-gradient: linear-gradient(135deg, var(--cm-navy) 0%, #0d3a2e 50%, var(--cm-emerald) 100%);
    --cm-hero-gradient: linear-gradient(160deg, #1a2332 0%, #0d3a2e 40%, #0d6b4e 100%);
    --cm-cta-gradient: linear-gradient(135deg, #1a2332 0%, #0d503c 60%, #0d6b4e 100%);

    /* Timing */
    --cm-transition: 0.3s ease;
}

/* ── Dark-mode overrides ── */
[data-bs-theme="dark"] {
    --cm-bg: #151922;
    --cm-surface: #1d2430;
    --cm-text: #e4e6ea;
    --cm-text-muted: rgba(228, 230, 234, 0.82);
    --cm-border: rgba(255, 255, 255, 0.1);
    --cm-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    --cm-card-hover-shadow: 0 12px 40px rgba(13, 107, 78, 0.2);
    --cm-navbar-gradient: linear-gradient(135deg, #0f1218 0%, #0a2a20 50%, #094d38 100%);
    --cm-hero-gradient: linear-gradient(160deg, #0f1218 0%, #0a2a20 40%, #094d38 100%);
    --cm-cta-gradient: linear-gradient(135deg, #0f1218 0%, #082a1e 60%, #094d38 100%);
}

[dir="rtl"] {
    --cm-font: var(--font-ar, var(--bs-body-font-family));
    --cm-font-heading: var(--font-ar, var(--bs-body-font-family));
}


/* ═══════════════════════════════════════════════════════
   2. SMOOTH THEME TRANSITION
   ═══════════════════════════════════════════════════════ */
body,
.cm-card,
.cm-section,
.cm-bg-alt {
    transition: background-color var(--cm-transition),
        color var(--cm-transition),
        border-color var(--cm-transition);
}


/* ═══════════════════════════════════════════════════════
   3. FULL-BLEED LAYOUT HELPERS
   Breaks out of _Layout.cshtml's .container-fluid padding
   ═══════════════════════════════════════════════════════ */
.cm-landing {
    margin: -1.5rem -1rem -1rem;
    font-family: var(--cm-font);
}

@media (min-width: 768px) {
    .cm-landing {
        margin: -1.5rem -3rem -1rem;
    }
}


/* ═══════════════════════════════════════════════════════
   4. HERO SECTION
   ═══════════════════════════════════════════════════════ */
.cm-hero {
    background: var(--cm-hero-gradient);
    position: relative;
    overflow: hidden;
    padding: 5rem 1.5rem 4.5rem;
}

@media (min-width: 768px) {
    .cm-hero {
        padding: 6.5rem 3rem 5.5rem;
    }
}

@media (max-width: 575.98px) {
    .cm-hero {
        padding: 3.5rem 1rem 3rem;
    }
}

/* Decorative diamond pattern overlay */
.cm-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
}

/* Bottom wave separator */
.cm-hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 0;
}

.cm-hero-wave svg path {
    fill: var(--bs-body-bg);
}

/* Hero heading font */
.cm-hero-heading {
    font-family: var(--cm-font-heading);
    line-height: 1.35;
}


/* ═══════════════════════════════════════════════════════
   5. BADGES & LABELS
   ═══════════════════════════════════════════════════════ */
.cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Hero trust badge */
.cm-badge-hero {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #86efac;
}

/* Section label badges */
.cm-label-copper {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

.cm-label-emerald {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

/* Pulse dot */
.cm-pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════ */
.cm-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    border: none;
    box-shadow: var(--cm-card-shadow);
    transition: transform var(--cm-transition),
        box-shadow var(--cm-transition),
        background-color var(--cm-transition);
}

.cm-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--cm-card-hover-shadow);
}

/* Stat cards (hero) */
.cm-stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
}

/* Service card */
.cm-service-card {
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
}

/* Icon wrapper (inside cards) */
.cm-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: transform var(--cm-transition);
}

.cm-service-card:hover .cm-icon-wrap {
    transform: scale(1.15) rotate(-5deg);
}

/* Step number circle */
.cm-step-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    margin-bottom: 1rem;
    transition: transform var(--cm-transition),
        box-shadow var(--cm-transition);
}

.cm-card:hover .cm-step-number {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(13, 107, 78, 0.1);
}

/* Trust icon wrapper */
.cm-trust-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════
   7. BUTTONS
   ═══════════════════════════════════════════════════════ */
.cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all var(--cm-transition);
    text-decoration: none;
    line-height: 1.4;
}

.cm-btn-copper {
    background: var(--cm-copper);
    color: #fff;
}

.cm-btn-copper:hover {
    background: var(--cm-copper-muted);
    box-shadow: 0 8px 24px rgba(184, 115, 51, 0.25);
    color: #fff;
}

.cm-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.cm-btn-outline {
    background: transparent;
    color: var(--cm-copper);
    border: 2px solid var(--cm-copper);
}

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

/* CTA pulse animation */
.cm-btn-pulse {
    animation: cm-subtle-pulse 3s infinite;
}

@keyframes cm-subtle-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(184, 115, 51, 0.3);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(184, 115, 51, 0);
    }
}


/* ═══════════════════════════════════════════════════════
   8. BACKGROUND UTILITIES
   ═══════════════════════════════════════════════════════ */
.cm-bg-emerald-10 {
    background: rgba(13, 107, 78, 0.1);
}

.cm-bg-copper-10 {
    background: rgba(184, 115, 51, 0.1);
}

.cm-bg-alt {
    background: rgba(240, 230, 214, 0.35);
}

[data-bs-theme="dark"] .cm-bg-alt {
    background: rgba(255, 255, 255, 0.03);
}

/* CTA gradient section */
.cm-cta-section {
    background: var(--cm-cta-gradient);
    position: relative;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════
   9. COLOR UTILITIES
   ═══════════════════════════════════════════════════════ */
.cm-text-emerald {
    color: var(--cm-emerald) !important;
}

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

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

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

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


/* ═══════════════════════════════════════════════════════
   10. SPACING / SECTIONS
   ═══════════════════════════════════════════════════════ */
.cm-section {
    padding: 5rem 1.5rem;
}

@media (max-width: 575.98px) {
    .cm-section {
        padding: 3rem 1rem;
    }
}

/* Section heading helper */
.cm-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cm-section-header h2 {
    font-family: var(--cm-font-heading);
}


/* ═══════════════════════════════════════════════════════
   11. RTL / DIRECTION SUPPORT
   ═══════════════════════════════════════════════════════ */
[dir="rtl"] .cm-btn i.bi-arrow-right-circle {
    transform: scaleX(-1);
}


/* ═══════════════════════════════════════════════════════
   12. ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* Fade in (used on hero content) */
.cm-fade-in {
    animation: cm-fadeIn 0.7s ease-out both;
}

@keyframes cm-fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

/* Float up (stat cards) */
.cm-float-card {
    animation: cm-floatUp 0.8s ease-out both;
}

.cm-float-card:nth-child(1) {
    animation-delay: 0.15s;
}

.cm-float-card:nth-child(2) {
    animation-delay: 0.3s;
}

.cm-float-card:nth-child(3) {
    animation-delay: 0.45s;
}

@keyframes cm-floatUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

/* Scroll-triggered reveal */
.cm-scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
}

.cm-scroll-reveal.cm-visible {
    animation: cm-revealUp 0.8s ease-out forwards;
}

@keyframes cm-revealUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered reveal (cards in grid) */
.cm-stagger {
    opacity: 0;
    transform: translateY(24px);
}

.cm-stagger.cm-visible {
    animation: cm-revealUp 0.6s ease-out forwards;
}

.cm-stagger:nth-child(1) {
    animation-delay: 0.05s;
}

.cm-stagger:nth-child(2) {
    animation-delay: 0.1s;
}

.cm-stagger:nth-child(3) {
    animation-delay: 0.15s;
}

.cm-stagger:nth-child(4) {
    animation-delay: 0.2s;
}

.cm-stagger:nth-child(5) {
    animation-delay: 0.25s;
}

.cm-stagger:nth-child(6) {
    animation-delay: 0.3s;
}


/* ═══════════════════════════════════════════════════════
   13. DASHBOARD LAYOUT
   Top bar · Sidebar · Main content · Responsive
   ═══════════════════════════════════════════════════════ */

/* ── Dashboard body ── */
.cm-dash-body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cm-offwhite);
    color: var(--cm-text);
    font-family: var(--cm-font);
    margin: 0;
}

[data-bs-theme="dark"] .cm-dash-body {
    background: #181a20;
}

/* ── Top Bar ── */
.cm-topbar {
    background: var(--cm-surface);
    border-bottom: 1px solid var(--cm-border);
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;
    transition: background-color var(--cm-transition),
        border-color var(--cm-transition);
}

.cm-topbar-brand {
    font-weight: 800;
    color: var(--cm-emerald);
    font-size: 15px;
    text-decoration: none;
}

.cm-topbar-brand:hover {
    color: var(--cm-emerald-light);
}

.cm-topbar-divider {
    color: var(--cm-border);
    font-size: 16px;
}

.cm-topbar-title {
    font-size: 13px;
    color: var(--cm-text-muted);
    font-weight: 500;
}

.cm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Topbar small buttons ── */
.cm-topbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cm-offwhite);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-topbar-btn {
    background: rgba(255, 255, 255, 0.08);
}

.cm-topbar-btn:hover {
    background: rgba(13, 107, 78, 0.1);
}

.cm-topbar-btn svg {
    stroke: var(--cm-emerald);
    transition: stroke var(--cm-transition);
}

[data-bs-theme="dark"] .cm-topbar-btn svg {
    stroke: var(--cm-emerald-light);
}

/* ── Language toggle ── */
.cm-lang-toggle {
    font-size: 11px;
    color: var(--cm-text-muted);
    text-decoration: none;
    padding: 4px 9px;
    border-radius: 8px;
    border: 1px solid var(--cm-border);
    transition: all var(--cm-transition);
}

.cm-lang-toggle:hover {
    border-color: var(--cm-emerald);
    color: var(--cm-emerald);
}

/* ── Theme toggle (SVG moon/sun) ── */
.cm-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cm-offwhite);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-theme-toggle {
    background: rgba(255, 255, 255, 0.08);
}

.cm-theme-toggle:hover {
    background: rgba(13, 107, 78, 0.1);
}

.cm-theme-toggle .icon-sun {
    display: none;
}

.cm-theme-toggle .icon-moon {
    display: block;
}

[data-bs-theme="dark"] .cm-theme-toggle .icon-sun {
    display: block;
}

[data-bs-theme="dark"] .cm-theme-toggle .icon-moon {
    display: none;
}

/* ── User avatar ── */
.cm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d503c, #14785a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.cm-user-name {
    font-size: 12px;
    font-weight: 600;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cm-text);
}

.cm-logout-link {
    font-size: 12px;
    color: #b91c1c;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(185, 28, 28, .2);
    transition: all var(--cm-transition);
}

.cm-logout-link:hover {
    background: rgba(185, 28, 28, .08);
    color: #991b1b;
}

/* ── Notification dropdown ── */
.cm-notif-dropdown {
    display: none;
    position: absolute;
    top: 44px;
    inset-inline-end: 0;
    width: 320px;
    background: var(--cm-surface);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    border: 1px solid var(--cm-border);
    z-index: 200;
    overflow: hidden;
    transition: background-color var(--cm-transition),
        border-color var(--cm-transition);
}

.cm-notif-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cm-notif-header span:first-child {
    font-weight: 700;
    font-size: 13px;
}

.cm-notif-count {
    font-size: 11px;
    color: var(--cm-text-muted);
}

.cm-notif-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    background: #dc2626;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 9px;
    display: none;
    align-items: center;
    justify-content: center;
}

.cm-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.cm-notif-empty {
    padding: 24px;
    text-align: center;
    color: var(--cm-text-muted);
    font-size: 12px;
}

/* ── Sidebar ── */
.cm-sidebar {
    height: 100%;
    overflow-y: auto;
    background: var(--cm-surface);
    border-inline-end: 1px solid var(--cm-border);
    flex-shrink: 0;
    width: 220px;
    transition: background-color var(--cm-transition),
        border-color var(--cm-transition);
}

@media (max-width: 767.98px) {
    .cm-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        height: 100%;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.3s ease, background-color var(--cm-transition);
    }

    [dir="rtl"] .cm-sidebar {
        transform: translateX(100%);
    }

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

/* Sidebar overlay (mobile) */
.cm-sidebar-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    .cm-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 99;
    }

    .cm-sidebar-overlay.open {
        display: block;
    }
}

/* Sidebar brand */
.cm-sidebar-brand {
    margin-bottom: 24px;
    padding: 0 6px;
}

.cm-sidebar-brand-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--cm-emerald);
}

.cm-sidebar-brand-sub {
    font-size: 11px;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

/* Sidebar nav item */
.cm-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--cm-text-muted);
    text-decoration: none;
    transition: all var(--cm-transition);
    font-weight: 500;
}

.cm-nav-item:hover {
    background: rgba(13, 80, 60, 0.06);
    color: var(--cm-emerald);
}

.cm-nav-item.active {
    background: rgba(13, 80, 60, 0.1);
    color: var(--cm-emerald);
    font-weight: 600;
}

.cm-nav-item svg {
    flex-shrink: 0;
}

/* Sidebar logout */
.cm-nav-logout {
    color: #b91c1c !important;
}

.cm-nav-logout:hover {
    background: rgba(185, 28, 28, 0.06) !important;
    color: #991b1b !important;
}

/* ── Mobile hamburger ── */
.cm-hamburger {
    display: none;
}

@media (max-width: 767.98px) {
    .cm-hamburger {
        display: flex;
    }
}

/* ── Dashboard main content ── */
.cm-dash-main {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}

@media (max-width: 575.98px) {
    .cm-dash-main {
        padding: 16px 14px;
    }
}

/* ── Dashboard alerts ── */
.cm-dash-alert {
    margin: 12px 24px 0;
    border-radius: 12px;
}

/* ── Toast notification ── */
.cm-toast {
    position: fixed;
    top: 72px;
    inset-inline-end: 20px;
    z-index: 9999;
    background: var(--cm-surface);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
    border: 1px solid var(--cm-border);
    padding: 14px 18px;
    max-width: 360px;
    animation: cm-fadeIn 0.3s ease-out;
}


/* ═══════════════════════════════════════════════════════
   14. DASHBOARD STAT CARDS
   ═══════════════════════════════════════════════════════ */
.cm-dash-stat {
    border-radius: 1rem;
    padding: 1.5rem;
    color: #fff;
    transition: transform var(--cm-transition), box-shadow var(--cm-transition);
    position: relative;
    overflow: hidden;
}

.cm-dash-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

.cm-dash-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cm-dash-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
}

.cm-dash-stat-label {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 500;
}

.cm-dash-stat::after {
    content: '';
    position: absolute;
    top: -20px;
    inset-inline-end: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* Stat color variants */
.cm-stat-emerald {
    background: linear-gradient(135deg, #0d503c, #14785a);
}

.cm-stat-copper {
    background: linear-gradient(135deg, #b87333, #d4954e);
}

.cm-stat-indigo {
    background: linear-gradient(135deg, #6366f1, #818cf8);
}

.cm-stat-amber {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.cm-stat-teal {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}


/* ═══════════════════════════════════════════════════════
   15. DASHBOARD DATA TABLE
   ═══════════════════════════════════════════════════════ */
.cm-dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.cm-dash-table thead th {
    background: var(--cm-offwhite);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 16px;
    color: var(--cm-text-muted);
    border-bottom: 1px solid var(--cm-border);
    white-space: nowrap;
}

[data-bs-theme="dark"] .cm-dash-table thead th {
    background: rgba(255, 255, 255, 0.04);
}

.cm-dash-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cm-border);
    vertical-align: middle;
    color: var(--cm-text);
}

.cm-dash-table tbody tr {
    transition: background-color 0.15s ease;
}

.cm-dash-table tbody tr:hover {
    background: rgba(13, 107, 78, 0.03);
}

[data-bs-theme="dark"] .cm-dash-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cm-dash-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status badges */
.cm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cm-status-open {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.cm-status-assigned {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.cm-status-cancelled {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Action button */
.cm-table-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--cm-border);
    background: transparent;
    color: var(--cm-emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--cm-transition);
    font-size: 0.85rem;
}

.cm-table-action:hover {
    background: var(--cm-emerald);
    color: #fff;
    border-color: var(--cm-emerald);
}


/* ═══════════════════════════════════════════════════════
   16. DASHBOARD QUICK ACTIONS
   ═══════════════════════════════════════════════════════ */
.cm-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--cm-text);
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    transition: all var(--cm-transition);
    font-size: 0.85rem;
    font-weight: 500;
}

.cm-quick-action:hover {
    border-color: var(--cm-emerald);
    background: rgba(13, 107, 78, 0.04);
    color: var(--cm-emerald);
    transform: translateY(-2px);
    box-shadow: var(--cm-card-shadow);
}

.cm-quick-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════
   17. DASHBOARD WELCOME HEADER
   ═══════════════════════════════════════════════════════ */
.cm-welcome {
    background: var(--cm-cta-gradient);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cm-welcome::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
}

.cm-welcome h2 {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    position: relative;
}

.cm-welcome p {
    opacity: 0.7;
    font-size: 0.85rem;
    margin-bottom: 0;
    position: relative;
}


/* ═══════════════════════════════════════════════════════
   18. DASHBOARD EMPTY STATE
   ═══════════════════════════════════════════════════════ */
.cm-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--cm-text-muted);
}

.cm-empty-state i {
    font-size: 2.5rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 0.75rem;
}


/* ═══════════════════════════════════════════════════════
   19. PREMIUM FORM COMPONENTS
   Category cards · Execution cards · Inputs · Dropzone
   ═══════════════════════════════════════════════════════ */

/* ── Page header (back + title) ── */
.cm-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.75rem;
}

.cm-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--cm-offwhite);
    border: 1px solid var(--cm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--cm-text);
    transition: all var(--cm-transition);
    flex-shrink: 0;
}

.cm-back-btn:hover {
    background: rgba(13, 107, 78, 0.08);
    border-color: var(--cm-emerald);
    color: var(--cm-emerald);
}

[data-bs-theme="dark"] .cm-back-btn {
    background: rgba(255, 255, 255, 0.06);
}

.cm-page-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cm-text);
    line-height: 1.3;
    margin: 0;
}

.cm-page-subtitle {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
    margin: 2px 0 0;
}

/* ── Form section label ── */
.cm-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cm-text);
    margin-bottom: 0.65rem;
}

.cm-form-label .cm-required {
    color: #ef4444;
    margin-inline-start: 2px;
}

.cm-form-label .cm-optional {
    font-weight: 400;
    color: var(--cm-text-muted);
    font-size: 0.78rem;
}

/* ── Premium input / textarea ── */
.cm-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--cm-border);
    background: var(--cm-surface);
    color: var(--cm-text);
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color var(--cm-transition), box-shadow var(--cm-transition);
}

.cm-input:focus {
    outline: none;
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.12);
}

.cm-input::placeholder {
    color: var(--cm-text-muted);
}

textarea.cm-input {
    height: auto;
    padding: 14px 16px;
    resize: none;
}

[data-bs-theme="dark"] .cm-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .cm-input:focus {
    border-color: var(--cm-emerald-light);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.2);
}

/* ── Character counter ── */
.cm-char-count {
    font-size: 0.68rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
    text-align: start;
    padding-inline-start: 4px;
}

/* ── Category / Subcategory card grid ── */
.cm-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 767.98px) {
    .cm-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .cm-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.cm-cat-card {
    border-radius: 16px;
    border: 2px solid var(--cm-border);
    background: var(--cm-surface);
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.cm-cat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 107, 78, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.cm-cat-card.active {
    border-color: var(--cm-emerald);
    background: rgba(13, 107, 78, 0.04);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.12);
}

[data-bs-theme="dark"] .cm-cat-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .cm-cat-card.active {
    border-color: var(--cm-emerald-light);
    background: rgba(13, 107, 78, 0.12);
}

.cm-cat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cm-offwhite);
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-emerald);
    font-size: 1.1rem;
}

[data-bs-theme="dark"] .cm-cat-card-icon {
    background: rgba(13, 107, 78, 0.15);
}

.cm-cat-card-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cm-text);
    line-height: 1.3;
}

/* Subcategory variant (smaller) */
.cm-subcat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (min-width: 576px) {
    .cm-subcat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cm-subcat-card {
    border-radius: 10px;
    border: 1px solid var(--cm-border);
    background: var(--cm-surface);
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cm-text);
    transition: all 0.2s ease;
}

.cm-subcat-card:hover {
    border-color: rgba(13, 107, 78, 0.3);
    background: rgba(13, 107, 78, 0.03);
}

.cm-subcat-card.active {
    border-color: var(--cm-emerald);
    background: rgba(13, 107, 78, 0.06);
    color: var(--cm-emerald);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(13, 107, 78, 0.1);
}

[data-bs-theme="dark"] .cm-subcat-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .cm-subcat-card.active {
    border-color: var(--cm-emerald-light);
    background: rgba(13, 107, 78, 0.15);
    color: var(--cm-emerald-light);
}

/* ── Execution mode cards ── */
.cm-exec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cm-exec-card {
    border-radius: 16px;
    border: 2px solid var(--cm-border);
    background: var(--cm-surface);
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cm-exec-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 107, 78, 0.3);
}

.cm-exec-card.active {
    border-color: var(--cm-emerald);
    background: linear-gradient(135deg, rgba(13, 107, 78, 0.04), rgba(13, 107, 78, 0.08));
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.12);
}

[data-bs-theme="dark"] .cm-exec-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .cm-exec-card.active {
    border-color: var(--cm-emerald-light);
    background: linear-gradient(135deg, rgba(13, 107, 78, 0.12), rgba(13, 107, 78, 0.18));
}

.cm-exec-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cm-offwhite);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-emerald);
    font-size: 1.25rem;
}

[data-bs-theme="dark"] .cm-exec-icon {
    background: rgba(13, 107, 78, 0.15);
}

.cm-exec-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cm-text);
    margin-bottom: 2px;
}

.cm-exec-desc {
    font-size: 0.7rem;
    color: var(--cm-text-muted);
}

/* ── Attachment dropzone (premium) ── */
.cm-dropzone {
    border: 2px dashed var(--cm-border);
    border-radius: 14px;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--cm-transition);
}

.cm-dropzone:hover,
.cm-dropzone.dragover {
    border-color: var(--cm-emerald);
    background: rgba(13, 107, 78, 0.03);
}

[data-bs-theme="dark"] .cm-dropzone {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .cm-dropzone:hover,
[data-bs-theme="dark"] .cm-dropzone.dragover {
    border-color: var(--cm-emerald-light);
    background: rgba(13, 107, 78, 0.08);
}

.cm-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cm-offwhite);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-emerald);
    font-size: 1.4rem;
}

[data-bs-theme="dark"] .cm-dropzone-icon {
    background: rgba(13, 107, 78, 0.15);
}

.cm-dropzone-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cm-text);
}

.cm-dropzone-hint {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
}

/* ── Attachment preview card ── */
.cm-attach-preview {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--cm-border);
    background: var(--cm-surface);
}

.cm-attach-preview img,
.cm-attach-preview video {
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.cm-attach-preview .cm-attach-file-icon {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cm-offwhite);
    color: var(--cm-text-muted);
    font-size: 2rem;
}

.cm-attach-remove {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.cm-attach-preview:hover .cm-attach-remove {
    opacity: 1;
}

.cm-attach-name {
    padding: 4px 8px;
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cm-text-muted);
}

/* ── Schedule toggle ── */
.cm-schedule-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--cm-offwhite);
    border: 1px solid var(--cm-border);
    transition: all var(--cm-transition);
}

[data-bs-theme="dark"] .cm-schedule-toggle {
    background: rgba(255, 255, 255, 0.04);
}

.cm-schedule-toggle:hover {
    border-color: var(--cm-emerald);
}

.cm-schedule-toggle input[type="checkbox"] {
    accent-color: var(--cm-emerald);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.cm-schedule-toggle span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cm-text);
}

/* ── Budget input wrapper ── */
.cm-budget-wrap {
    position: relative;
}

.cm-budget-currency {
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cm-copper);
    pointer-events: none;
}

.cm-budget-wrap .cm-input {
    padding-inline-start: 52px;
}

/* ── Submit button (premium gradient) ── */
.cm-submit-btn {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #0d503c, #14785a);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(13, 107, 78, 0.25);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cm-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(13, 107, 78, 0.3);
}

.cm-submit-btn:active {
    transform: scale(0.98);
}

.cm-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Form card ── */
.cm-form-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    border: 1px solid var(--cm-border);
    padding: 1.75rem;
    transition: background-color var(--cm-transition),
        border-color var(--cm-transition);
}

@media (max-width: 575.98px) {
    .cm-form-card {
        padding: 1.25rem;
    }
}

/* ── Form divider ── */
.cm-form-divider {
    border: none;
    height: 1px;
    background: var(--cm-border);
    margin: 1.5rem 0;
}

/* ── Section fade-in ── */
.cm-fade-section {
    animation: cmFadeSlide 0.3s ease;
}

@keyframes cmFadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ── Select2 premium overrides (inside dashboard) ── */
.cm-dash-main .select2-container--bootstrap-5 .select2-selection {
    border-radius: 12px;
    min-height: 48px;
    border-color: var(--cm-border);
    padding: 8px 14px;
    font-size: 0.85rem;
}

.cm-dash-main .select2-container--bootstrap-5 .select2-selection:focus,
.cm-dash-main .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.12);
}

[data-bs-theme="dark"] .cm-dash-main .select2-container--bootstrap-5 .select2-selection {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--cm-text);
}

/* ── Validation error ── */
.cm-field-error {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 4px;
    padding-inline-start: 4px;
}


/* ═══════════════════════════════════════════════════════
   20. PREMIUM DASHBOARD CARDS
   White stat cards · CTA · Request cards · Job cards
   ═══════════════════════════════════════════════════════ */

/* ── White stat card (v2 — icon-accent style) ── */
.cm-stat-v2 {
    background: var(--cm-surface);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cm-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
        background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-stat-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 107, 78, 0.06);
}

.cm-stat-v2-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 1.05rem;
}

.cm-stat-v2-icon.emerald {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-stat-v2-icon.copper {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

.cm-stat-v2-icon.teal {
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}

.cm-stat-v2-icon.navy {
    background: rgba(26, 35, 50, 0.08);
    color: var(--cm-navy);
}

[data-bs-theme="dark"] .cm-stat-v2-icon.emerald {
    background: rgba(13, 107, 78, 0.2);
}

[data-bs-theme="dark"] .cm-stat-v2-icon.copper {
    background: rgba(184, 115, 51, 0.2);
}

[data-bs-theme="dark"] .cm-stat-v2-icon.teal {
    background: rgba(13, 148, 136, 0.2);
}

[data-bs-theme="dark"] .cm-stat-v2-icon.navy {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cm-text);
}

.cm-stat-v2-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cm-text);
    line-height: 1;
}

.cm-stat-v2-label {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
}

/* ── CTA gradient card ── */
.cm-cta-card {
    background: linear-gradient(135deg, var(--cm-emerald), var(--cm-emerald-light));
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cm-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    transform: translate(-40%, -40%);
    pointer-events: none;
}

.cm-cta-card h3 {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
    position: relative;
}

.cm-cta-card p {
    font-size: 0.82rem;
    opacity: 0.7;
    margin-bottom: 1.1rem;
    position: relative;
}

.cm-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--cm-emerald);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 22px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    position: relative;
}

.cm-cta-btn:hover {
    background: var(--cm-beige);
    color: var(--cm-emerald);
}

/* ── Section header (title + "view all") ── */
.cm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cm-section-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cm-text);
    margin: 0;
}

.cm-section-link {
    font-size: 0.8rem;
    color: var(--cm-emerald);
    text-decoration: none;
    font-weight: 500;
}

.cm-section-link:hover {
    text-decoration: underline;
    color: var(--cm-emerald-light);
}

/* ── Request card (active request) ── */
.cm-request-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cm-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
        background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-request-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.cm-request-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cm-request-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.cm-request-badge.open {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

.cm-request-badge.assigned {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-request-badge.cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.cm-request-badge.reassigned {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.cm-request-time {
    font-size: 0.7rem;
    color: var(--cm-text-muted);
}

.cm-request-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cm-text);
    margin-bottom: 4px;
}

.cm-request-desc {
    font-size: 0.75rem;
    color: var(--cm-text-muted);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cm-request-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
}

.cm-request-meta i {
    font-size: 0.82rem;
}

/* ── Job card (active job with progress) ── */
.cm-job-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cm-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
        background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.cm-job-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cm-job-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cm-job-avatar.emerald {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-job-avatar.copper {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-job-avatar.emerald {
    background: rgba(13, 107, 78, 0.2);
}

[data-bs-theme="dark"] .cm-job-avatar.copper {
    background: rgba(184, 115, 51, 0.2);
}

.cm-job-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cm-text);
    line-height: 1.3;
}

.cm-job-subtitle {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
}

.cm-job-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.cm-job-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--cm-offwhite);
    overflow: hidden;
}

[data-bs-theme="dark"] .cm-job-progress-bar {
    background: rgba(255, 255, 255, 0.08);
}

.cm-job-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

.cm-job-progress-fill.emerald {
    background: var(--cm-emerald);
}

.cm-job-progress-fill.copper {
    background: var(--cm-copper);
}

.cm-job-progress-label {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.cm-job-progress-label.emerald {
    color: var(--cm-emerald);
}

.cm-job-progress-label.copper {
    color: var(--cm-copper);
}

.cm-job-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.cm-job-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--cm-text-muted);
}

.cm-job-meta-item i {
    font-size: 0.82rem;
}

/* ── Dashboard welcome (v2 — lighter, text-only) ── */
.cm-welcome-v2 {
    margin-bottom: 1.5rem;
}

.cm-welcome-v2 h2 {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--cm-text);
    margin: 0 0 4px;
}

.cm-welcome-v2 p {
    font-size: 0.82rem;
    color: var(--cm-text-muted);
    margin: 0;
}

/* ── Fade-up animation ── */
.cm-anim-fade {
    animation: cmDashFadeUp 0.45s ease both;
}

@keyframes cmDashFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.cm-anim-d1 {
    animation-delay: 0.04s;
}

.cm-anim-d2 {
    animation-delay: 0.08s;
}

.cm-anim-d3 {
    animation-delay: 0.12s;
}

.cm-anim-d4 {
    animation-delay: 0.16s;
}

.cm-anim-d5 {
    animation-delay: 0.20s;
}


/* ═══════════════════════════════════════════════════════
   21. LIST PAGE COMPONENTS
   Page header · Filter tabs · Request list cards · Pagination
   ═══════════════════════════════════════════════════════ */

/* ── Page header row (title + action) ── */
.cm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cm-page-head-title {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--cm-text);
    margin: 0;
}

.cm-page-head-sub {
    font-size: 0.8rem;
    color: var(--cm-text-muted);
    margin: 4px 0 0;
}

.cm-page-head-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cm-emerald);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 10px 22px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.cm-page-head-action:hover {
    background: var(--cm-emerald-light);
    color: #fff;
}

/* ── Filter tabs ── */
.cm-filter-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cm-border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.cm-filter-tab {
    position: relative;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cm-text-muted);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cm-filter-tab:hover {
    color: var(--cm-text);
}

.cm-filter-tab.active {
    color: var(--cm-emerald);
    font-weight: 700;
    border-bottom-color: var(--cm-emerald);
}

.cm-filter-count {
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--cm-beige);
    color: var(--cm-text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.3;
}

.cm-filter-tab.active .cm-filter-count {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

[data-bs-theme="dark"] .cm-filter-count {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .cm-filter-tab.active .cm-filter-count {
    background: rgba(13, 107, 78, 0.2);
}

/* ── Request list card (full-width version) ── */
.cm-req-list-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    border: 1px solid var(--cm-border);
    padding: 1.15rem 1.35rem;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
        background-color var(--cm-transition), border-color var(--cm-transition);
    text-decoration: none;
    color: inherit;
}

.cm-req-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    color: inherit;
    text-decoration: none;
}

.cm-req-list-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cm-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cm-emerald);
    font-size: 1.1rem;
}

[data-bs-theme="dark"] .cm-req-list-icon {
    background: rgba(13, 107, 78, 0.12);
}

.cm-req-list-body {
    flex: 1;
    min-width: 0;
}

.cm-req-list-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.cm-req-list-cat {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cm-text);
}

.cm-req-list-desc {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cm-req-list-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--cm-text-muted);
}

.cm-req-list-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cm-req-list-meta-item i {
    font-size: 0.82rem;
}

.cm-req-list-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.cm-req-offers-count {
    text-align: center;
    line-height: 1;
}

.cm-req-offers-count .num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cm-emerald);
}

.cm-req-offers-count .lbl {
    font-size: 0.6rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

.cm-req-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.cm-req-view-btn:hover {
    background: var(--cm-emerald);
    color: #fff;
}

/* ── List empty state (icon-box style) ── */
.cm-list-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
}

.cm-list-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 1.25rem;
    background: var(--cm-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--cm-sand);
}

[data-bs-theme="dark"] .cm-list-empty-icon {
    background: rgba(255, 255, 255, 0.04);
    color: var(--cm-text-muted);
}

.cm-list-empty h4 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cm-text);
    margin: 0 0 4px;
}

.cm-list-empty p {
    font-size: 0.8rem;
    color: var(--cm-text-muted);
    margin: 0;
}

/* ── Styled pagination ── */
.cm-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 1.25rem;
}

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

.cm-pager .pagination {
    gap: 4px;
}

.cm-pager .page-link {
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--cm-border);
    background: var(--cm-surface);
    color: var(--cm-text);
    border-radius: 10px !important;
    padding: 6px 14px;
    transition: all 0.15s;
}

.cm-pager .page-link:hover {
    background: var(--cm-beige);
    border-color: var(--cm-sand);
}

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

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

@media (max-width: 575.98px) {
    .cm-page-head {
        flex-direction: column;
        gap: 10px;
    }

    .cm-page-head-action {
        width: 100%;
        justify-content: center;
    }

    .cm-req-list-card {
        flex-wrap: wrap;
    }

    .cm-req-list-side {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        margin-top: 6px;
    }
}


/* ═══════════════════════════════════════════════════════
   22. DETAIL PAGE COMPONENTS
   Breadcrumb · Info grid · Offer cards · Sort chips · Modals
   ═══════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.cm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--cm-text-muted);
    margin-bottom: 1rem;
}

.cm-breadcrumb a {
    color: var(--cm-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.cm-breadcrumb a:hover {
    color: var(--cm-emerald);
}

.cm-breadcrumb .current {
    color: var(--cm-text);
    font-weight: 500;
}

/* ── Detail header (title + status) ── */
.cm-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.cm-detail-title {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--cm-text);
    margin: 0;
    line-height: 1.5;
}

.cm-detail-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
}

.cm-detail-date i {
    font-size: 0.85rem;
}

/* ── Status pill (large) ── */
.cm-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}

.cm-status-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cm-status-pill.open {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-status-pill.open .dot {
    background: var(--cm-emerald);
}

.cm-status-pill.assigned {
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}

.cm-status-pill.assigned .dot {
    background: #0d9488;
}

.cm-status-pill.cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.cm-status-pill.cancelled .dot {
    background: #dc2626;
}

/* ── Info grid card ── */
.cm-info-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    border: 1px solid var(--cm-border);
    padding: 1.25rem;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}

.cm-info-cell {
    background: var(--cm-beige);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: background-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-info-cell {
    background: rgba(255, 255, 255, 0.04);
}

.cm-info-cell-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
    font-size: 1.1rem;
    color: var(--cm-emerald);
}

.cm-info-cell-icon.copper {
    color: var(--cm-copper);
}

.cm-info-cell-label {
    font-size: 0.65rem;
    color: var(--cm-text-muted);
}

.cm-info-cell-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cm-text);
    margin-top: 2px;
}

/* ── Description block ── */
.cm-desc-block {
    margin-top: 0;
}

.cm-desc-block h4 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cm-text);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-desc-block h4 i {
    color: var(--cm-emerald);
    font-size: 0.9rem;
}

.cm-desc-block p {
    font-size: 0.82rem;
    color: var(--cm-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Attachments grid ── */
.cm-attach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 1rem;
}

.cm-attach-thumb {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--cm-border);
    background: var(--cm-beige);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme="dark"] .cm-attach-thumb {
    background: rgba(255, 255, 255, 0.04);
}

.cm-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-attach-thumb .fallback {
    font-size: 1.5rem;
    color: var(--cm-text-muted);
    opacity: 0.5;
}

.cm-attach-name {
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    text-align: center;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sort / filter chips ── */
.cm-sort-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cm-chip {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    background: var(--cm-beige);
    color: var(--cm-text);
}

[data-bs-theme="dark"] .cm-chip {
    background: rgba(255, 255, 255, 0.06);
}

.cm-chip:hover {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-chip.active {
    background: var(--cm-emerald);
    color: #fff;
}

/* ── Offer card ── */
.cm-offer-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    border: 1px solid var(--cm-border);
    padding: 1.25rem 1.35rem;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s ease,
        background-color var(--cm-transition),
        border-color var(--cm-transition);
}

.cm-offer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.cm-offer-card.best {
    border-color: rgba(13, 107, 78, 0.35);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.08);
}

.cm-offer-card.best:hover {
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.08),
        0 10px 30px rgba(13, 107, 78, 0.1);
}

/* ── Best offer badge ── */
.cm-best-badge {
    position: absolute;
    top: -11px;
    inset-inline-start: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cm-emerald);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: cmBestPulse 2s ease-in-out infinite;
}

@keyframes cmBestPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(13, 107, 78, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(13, 107, 78, 0);
    }
}

/* ── Offer card inner layout ── */
.cm-offer-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 576px) {
    .cm-offer-body {
        flex-direction: row;
        gap: 16px;
    }
}

.cm-offer-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cm-offer-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    flex-shrink: 0;
}

.cm-offer-avatar.emerald {
    background: var(--cm-emerald);
}

.cm-offer-avatar.navy {
    background: var(--cm-navy);
}

.cm-offer-avatar.copper {
    background: var(--cm-copper);
}

.cm-offer-info {
    flex: 1;
    min-width: 0;
}

.cm-offer-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cm-text);
}

.cm-offer-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: 8px;
}

.cm-offer-rating .star {
    font-size: 0.78rem;
    color: var(--cm-sand);
}

.cm-offer-rating .star.empty {
    color: var(--cm-border);
    opacity: 0.5;
}

.cm-offer-rating .count {
    font-size: 0.68rem;
    color: var(--cm-text-muted);
    margin-inline-start: 4px;
}

/* ── Trust badges ── */
.cm-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.cm-trust-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
}

.cm-trust-badge.verified {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-trust-badge.top-rated {
    background: rgba(212, 184, 150, 0.25);
    color: var(--cm-copper);
}

.cm-trust-badge.fast {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

.cm-trust-badge.value {
    background: rgba(26, 35, 50, 0.06);
    color: var(--cm-navy);
}

[data-bs-theme="dark"] .cm-trust-badge.value {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cm-text);
}

.cm-offer-notes {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
    line-height: 1.6;
    margin-top: 6px;
}

.cm-offer-avail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--cm-text-muted);
    margin-top: 8px;
}

.cm-offer-avail i {
    font-size: 0.82rem;
}

/* ── Offer price & action column ── */
.cm-offer-aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (min-width: 576px) {
    .cm-offer-aside {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        min-width: 140px;
    }
}

.cm-offer-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--cm-text);
    line-height: 1;
}

.cm-offer-card.best .cm-offer-price {
    color: var(--cm-emerald);
}

.cm-offer-currency {
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

.cm-offer-accept {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.cm-offer-accept:hover {
    transform: translateY(-1px);
}

.cm-offer-accept.primary {
    background: var(--cm-emerald);
    color: #fff;
    box-shadow: 0 4px 16px rgba(13, 107, 78, 0.2);
}

.cm-offer-accept.primary:hover {
    background: var(--cm-emerald-light);
    color: #fff;
}

.cm-offer-accept.secondary {
    background: var(--cm-navy);
    color: #fff;
}

.cm-offer-accept.secondary:hover {
    background: var(--cm-navy-light);
    color: #fff;
}

/* ── Premium modal ── */
.cm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(26, 35, 50, 0.5);
    backdrop-filter: blur(4px);
}

.cm-modal-card {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.cm-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.cm-modal-icon.emerald {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cm-text);
    margin-bottom: 6px;
}

.cm-modal-desc {
    font-size: 0.82rem;
    color: var(--cm-text-muted);
    margin-bottom: 1.25rem;
}

.cm-modal-amount {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cm-emerald);
    background: rgba(13, 107, 78, 0.06);
    padding: 8px 16px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 1rem;
}

/* ── Payment method radio cards ── */
.cm-pay-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid var(--cm-border);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    text-align: start;
    margin-bottom: 8px;
}

.cm-pay-option:hover {
    border-color: var(--cm-sand);
}

.cm-pay-option.selected {
    border-color: var(--cm-emerald);
    background: rgba(13, 107, 78, 0.03);
}

.cm-pay-option input[type="radio"] {
    accent-color: var(--cm-emerald);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cm-pay-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cm-pay-icon.gateway {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-pay-icon.cash {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

.cm-pay-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--cm-text);
}

.cm-pay-desc {
    font-size: 0.68rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

.cm-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 1.25rem;
}

.cm-modal-btn {
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cm-modal-btn.cancel {
    background: var(--cm-beige);
    color: var(--cm-text);
}

.cm-modal-btn.cancel:hover {
    background: var(--cm-sand);
}

.cm-modal-btn.confirm {
    background: var(--cm-emerald);
    color: #fff;
}

.cm-modal-btn.confirm:hover {
    background: var(--cm-emerald-light);
}

[data-bs-theme="dark"] .cm-modal-btn.cancel {
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 575.98px) {
    .cm-detail-header {
        flex-direction: column;
    }

    .cm-offer-aside {
        margin-top: 4px;
    }
}


/* ═══════════════════════════════════════════════════════
   23. PAYMENT SELECTION PAGE
   Payment cards · Escrow info · Trust badges
   ═══════════════════════════════════════════════════════ */

/* ── Order summary card ── */
.cm-order-summary {
    background: var(--cm-surface);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--cm-border);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-order-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--cm-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-order-icon {
    background: rgba(184, 115, 51, 0.1);
}

.cm-order-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cm-text);
    line-height: 1.5;
}

.cm-order-sub {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

.cm-order-price {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.cm-order-price .amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--cm-emerald);
}

.cm-order-price .currency {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--cm-emerald);
    opacity: 0.7;
}

/* ── Payment method selectable card ── */
.cm-pay-card {
    background: var(--cm-surface);
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    border: 2px solid var(--cm-border);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.cm-pay-card:hover {
    transform: translateY(-2px);
    border-color: var(--cm-sand);
}

.cm-pay-card.selected {
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1),
        0 8px 30px rgba(13, 107, 78, 0.08);
}

.cm-pay-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cm-pay-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.cm-pay-card-icon.gateway {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-pay-card-icon.cash {
    background: rgba(184, 115, 51, 0.08);
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-pay-card-icon.gateway {
    background: rgba(13, 107, 78, 0.15);
}

[data-bs-theme="dark"] .cm-pay-card-icon.cash {
    background: rgba(184, 115, 51, 0.15);
}

.cm-pay-card-body {
    flex: 1;
    min-width: 0;
}

.cm-pay-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cm-pay-card-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--cm-text);
}

.cm-pay-card-desc {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
    line-height: 1.6;
}

/* check circle */
.cm-pay-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--cm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.cm-pay-card.selected .cm-pay-check {
    background: var(--cm-emerald);
    border-color: var(--cm-emerald);
}

.cm-pay-check-icon {
    display: none;
    color: #fff;
    font-size: 0.7rem;
}

.cm-pay-card.selected .cm-pay-check-icon {
    display: block;
}

/* provider badges row */
.cm-pay-providers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.cm-pay-provider {
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--cm-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--cm-text-muted);
    letter-spacing: 0.04em;
}

[data-bs-theme="dark"] .cm-pay-provider {
    background: rgba(255, 255, 255, 0.06);
}

/* cash note */
.cm-pay-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(184, 115, 51, 0.06);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--cm-copper);
}

.cm-pay-note i {
    font-size: 0.72rem;
}

/* ── Escrow trust card ── */
.cm-escrow-card {
    background: rgba(13, 107, 78, 0.04);
    border: 1px solid rgba(13, 107, 78, 0.12);
    border-radius: 1rem;
    padding: 1.15rem 1.25rem;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-escrow-card {
    background: rgba(13, 107, 78, 0.06);
    border-color: rgba(13, 107, 78, 0.15);
}

.cm-escrow-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cm-escrow-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.cm-escrow-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cm-emerald);
    margin-bottom: 4px;
}

.cm-escrow-desc {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    line-height: 1.7;
}

.cm-escrow-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.cm-escrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--cm-emerald);
    opacity: 0.7;
}

.cm-escrow-badge i {
    font-size: 0.72rem;
}

/* ── Confirm CTA ── */
.cm-pay-confirm {
    width: 100%;
    padding: 14px;
    border-radius: 1rem;
    background: var(--cm-emerald);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(13, 107, 78, 0.2);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-pay-confirm:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(13, 107, 78, 0.3);
    background: var(--cm-emerald-light);
}

.cm-pay-confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .cm-order-summary {
        flex-direction: column;
    }

    .cm-pay-card-inner {
        flex-direction: column;
        gap: 10px;
    }

    .cm-pay-card-head {
        margin-bottom: 4px;
    }
}


/* ═══════════════════════════════════════════════════════
   24. ESCROW CONFIRMATION PAGE
   Success state · Amount card · Next steps
   ═══════════════════════════════════════════════════════ */

/* ── Animations ── */
@keyframes cm-scale-in {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes cm-check-draw {
    from {
        stroke-dashoffset: 48;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes cm-pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* ── Success hero icon ── */
.cm-confirm-hero {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 1.5rem;
}

.cm-confirm-ring {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(13, 107, 78, 0.08);
    animation: cm-pulse-ring 1.8s ease-out infinite;
}

[data-bs-theme="dark"] .cm-confirm-ring {
    background: rgba(13, 107, 78, 0.12);
}

.cm-confirm-circle {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cm-emerald-light), var(--cm-emerald));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 28px rgba(13, 107, 78, 0.25);
    animation: cm-scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.cm-confirm-circle svg .cm-check-path {
    stroke-dasharray: 48;
    animation: cm-check-draw 0.6s ease-out 0.6s both;
}

/* ── Title area ── */
.cm-confirm-title {
    text-align: center;
    margin-bottom: 2rem;
}

.cm-confirm-title h1 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--cm-navy);
    margin-bottom: 6px;
}

[data-bs-theme="dark"] .cm-confirm-title h1 {
    color: var(--cm-text);
}

.cm-confirm-title p {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
    margin: 0;
}

/* ── Amount card ── */
.cm-confirm-amount-card {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    border: 1px solid var(--cm-border);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-confirm-amount-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.cm-confirm-amount-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cm-text-muted);
}

.cm-confirm-held-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2rem;
}

.cm-confirm-held-badge i {
    font-size: 0.68rem;
}

[data-bs-theme="dark"] .cm-confirm-held-badge {
    background: rgba(13, 107, 78, 0.15);
}

.cm-confirm-amount-value {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--cm-emerald);
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.cm-confirm-amount-value .currency {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
    margin-inline-start: 4px;
}

.cm-confirm-details {
    border-top: 1px solid var(--cm-border);
    padding-top: 1rem;
}

.cm-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.78rem;
}

.cm-confirm-row-label {
    color: var(--cm-text-muted);
}

.cm-confirm-row-value {
    font-weight: 600;
    color: var(--cm-text);
}

/* ── Next steps card ── */
.cm-confirm-next {
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.03), rgba(13, 107, 78, 0.04));
    border: 1px solid var(--cm-border);
    border-radius: 1.25rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.5rem;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-confirm-next {
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.08), rgba(13, 107, 78, 0.06));
}

.cm-confirm-next-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cm-confirm-next-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.cm-confirm-next-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cm-navy);
}

[data-bs-theme="dark"] .cm-confirm-next-title {
    color: var(--cm-text);
}

.cm-confirm-next p {
    font-size: 0.74rem;
    color: var(--cm-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── CTA & Footer ── */
.cm-confirm-cta {
    width: 100%;
    padding: 14px;
    border-radius: 1rem;
    background: linear-gradient(to left, var(--cm-emerald), var(--cm-emerald-light));
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(13, 107, 78, 0.22);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-confirm-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(13, 107, 78, 0.3);
    color: #fff;
}

.cm-confirm-footer {
    text-align: center;
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.cm-confirm-footer i {
    font-size: 0.68rem;
}

@media (max-width: 575.98px) {
    .cm-confirm-circle {
        width: 5rem;
        height: 5rem;
    }

    .cm-confirm-ring {
        width: 6rem;
        height: 6rem;
    }

    .cm-confirm-circle svg {
        width: 36px;
        height: 36px;
    }

    .cm-confirm-amount-value {
        font-size: 1.8rem;
    }

    .cm-confirm-title h1 {
        font-size: 1.2rem;
    }
}


/* ═══════════════════════════════════════════════════════
   25. JOB LIST & TRACKING COMPONENTS
   Job cards · Progress bars · Timeline · Stats strip
   ═══════════════════════════════════════════════════════ */

/* ── Stats strip ── */
.cm-stats-strip {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    border: 1px solid var(--cm-border);
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-stats-strip-item {
    padding: 4px 0;
}

.cm-stats-strip-item+.cm-stats-strip-item {
    border-inline-start: 1px solid var(--cm-border);
}

.cm-stats-strip-val {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.cm-stats-strip-val.emerald {
    color: var(--cm-emerald);
}

.cm-stats-strip-val.navy {
    color: var(--cm-navy);
}

.cm-stats-strip-val.copper {
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-stats-strip-val.navy {
    color: var(--cm-text);
}

.cm-stats-strip-label {
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

/* ── Job card ── */
.cm-job-card {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    border: 1px solid var(--cm-border);
    padding: 1.25rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.cm-job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 107, 78, 0.08);
}

.cm-job-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cm-job-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.cm-job-icon.active {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-job-icon.done {
    background: rgba(27, 42, 74, 0.06);
    color: var(--cm-navy);
}

.cm-job-icon.cancelled {
    background: rgba(184, 115, 51, 0.08);
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-job-icon.active {
    background: rgba(13, 107, 78, 0.15);
}

[data-bs-theme="dark"] .cm-job-icon.done {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .cm-job-icon.cancelled {
    background: rgba(184, 115, 51, 0.12);
}

.cm-job-card-body {
    flex: 1;
    min-width: 0;
}

.cm-job-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--cm-text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cm-job-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--cm-text-muted);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cm-job-meta i {
    font-size: 0.72rem;
}

.cm-job-meta .sep {
    color: var(--cm-sand);
}

/* Progress bar */
.cm-job-progress {
    margin-bottom: 12px;
}

.cm-job-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    margin-bottom: 6px;
}

.cm-job-progress-label {
    color: var(--cm-text-muted);
}

.cm-job-progress-pct {
    font-weight: 600;
}

.cm-job-progress-pct.emerald {
    color: var(--cm-emerald);
}

.cm-job-progress-pct.navy {
    color: var(--cm-navy);
}

.cm-job-progress-track {
    height: 6px;
    border-radius: 3px;
    background: var(--cm-sand);
    opacity: 0.4;
    overflow: hidden;
}

[data-bs-theme="dark"] .cm-job-progress-track {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.cm-job-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-job-progress-fill.emerald {
    background: var(--cm-emerald);
}

.cm-job-progress-fill.navy {
    background: var(--cm-navy);
}

.cm-job-progress-fill.copper {
    background: var(--cm-copper);
}

.cm-job-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--cm-border);
}

.cm-job-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--cm-text-muted);
}

.cm-job-date i {
    font-size: 0.68rem;
}

.cm-job-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cm-emerald);
}

/* ── Tracking timeline ── */
.cm-timeline {
    display: flex;
    flex-direction: column;
    padding-inline-start: 20px;
    position: relative;
}

.cm-timeline-step {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 28px;
}

.cm-timeline-step:last-child {
    padding-bottom: 0;
}

.cm-timeline-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 36px;
    inset-inline-start: 13px;
    width: 2px;
    bottom: 0;
    background: var(--cm-border);
}

.cm-timeline-step.done:not(:last-child)::before {
    background: var(--cm-emerald);
}

.cm-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    font-size: 0.68rem;
}

.cm-timeline-dot.done {
    background: var(--cm-emerald);
    color: #fff;
}

.cm-timeline-dot.active {
    background: var(--cm-emerald);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 107, 78, 0.15);
}

@keyframes cm-dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(13, 107, 78, 0.15);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(13, 107, 78, 0.08);
    }
}

.cm-timeline-dot.active {
    animation: cm-dot-pulse 2s ease-in-out infinite;
}

.cm-timeline-dot.pending {
    background: var(--cm-beige);
    color: var(--cm-text-muted);
}

[data-bs-theme="dark"] .cm-timeline-dot.pending {
    background: rgba(255, 255, 255, 0.08);
}

.cm-timeline-text {
    flex: 1;
    padding-top: 3px;
}

.cm-timeline-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--cm-text);
}

.cm-timeline-step.pending .cm-timeline-label {
    color: var(--cm-text-muted);
    opacity: 0.5;
}

.cm-timeline-current-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
    padding: 2px 8px;
    border-radius: 2rem;
    margin-inline-start: 6px;
}

.cm-timeline-sub {
    font-size: 0.68rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

.cm-timeline-step.pending .cm-timeline-sub {
    opacity: 0.4;
}

/* ── Tracking info grid ── */
.cm-tracking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cm-tracking-cell {
    background: var(--cm-bg);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: background-color var(--cm-transition);
}

.cm-tracking-cell-label {
    font-size: 0.92rem;
    color: var(--cm-text-muted);
    margin-bottom: 4px;
}

.cm-tracking-cell-value {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--cm-text);
}

.cm-tracking-cell-value.emerald {
    color: var(--cm-emerald);
    font-size: 1.1rem;
}

/* ── Craftsman row ── */
.cm-craftsman-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cm-bg);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    transition: background-color var(--cm-transition);
}

.cm-craftsman-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cm-emerald);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.cm-craftsman-info {
    flex: 1;
    min-width: 0;
}

.cm-craftsman-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--cm-text);
}

.cm-craftsman-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.68rem;
}

.cm-craftsman-rating i {
    color: var(--cm-sand);
}

.cm-craftsman-rating .score {
    font-weight: 600;
    color: var(--cm-copper);
}

.cm-craftsman-rating .count {
    color: var(--cm-text-muted);
}

@media (max-width: 575.98px) {
    .cm-tracking-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   26. RATING COMPONENTS
   Star rating · Success state
   ═══════════════════════════════════════════════════════ */

.cm-rating-wrapper {
    max-width: 440px;
    margin: 0 auto;
}

.cm-rating-card {
    background: var(--cm-surface);
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--cm-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-rating-header {
    background: linear-gradient(160deg, var(--cm-emerald), var(--cm-navy));
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    position: relative;
}

.cm-rating-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(184, 115, 51, 0.2);
    border: 2px solid rgba(184, 115, 51, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.cm-rating-header-icon i {
    font-size: 1.3rem;
    color: var(--cm-sand);
}

.cm-rating-header h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #FAF8F4;
    margin-bottom: 4px;
}

.cm-rating-header p {
    font-size: 0.78rem;
    color: rgba(250, 248, 244, 0.65);
    margin: 0;
}

.cm-rating-body {
    padding: 2rem;
}

/* Stars */
.cm-star-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

.cm-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s ease;
}

.cm-star-btn:hover {
    transform: scale(1.15);
}

.cm-star-btn svg {
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
}

.cm-star-btn.filled svg {
    fill: var(--cm-sand);
    stroke: var(--cm-sand);
}

.cm-star-btn:not(.filled) svg {
    fill: none;
    stroke: var(--cm-border);
    stroke-width: 1.5;
}

@keyframes cm-star-bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.cm-star-bounce {
    animation: cm-star-bounce 0.3s ease-out;
}

.cm-star-label {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cm-emerald);
    height: 1.5em;
    margin-bottom: 1rem;
}

/* Rating row label */
.cm-rating-row-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cm-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-rating-row-label i {
    color: var(--cm-emerald);
    font-size: 0.82rem;
}

/* Rating success */
.cm-rating-success {
    text-align: center;
    padding: 3rem 2rem;
}

.cm-rating-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cm-emerald-light), var(--cm-emerald));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.cm-rating-success-icon i {
    font-size: 1.8rem;
    color: #fff;
}

.cm-rating-success h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cm-emerald);
    margin-bottom: 6px;
}

.cm-rating-success p {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
}


/* ═══════════════════════════════════════════════════════
   27. DISPUTE / REPORT COMPONENTS
   Issue cards · Warning card · Danger buttons
   ═══════════════════════════════════════════════════════ */

.cm-issue-card {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    padding: 1.25rem;
    border: 2px solid var(--cm-border);
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
}

.cm-issue-card:hover {
    transform: translateY(-2px);
    border-color: var(--cm-sand);
}

.cm-issue-card.selected {
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1), 0 8px 24px rgba(13, 107, 78, 0.08);
}

.cm-issue-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--cm-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.2rem;
    color: var(--cm-text);
}

[data-bs-theme="dark"] .cm-issue-card-icon {
    background: rgba(255, 255, 255, 0.06);
}

.cm-issue-card-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cm-text);
    margin-bottom: 4px;
}

.cm-issue-card-desc {
    font-size: 0.62rem;
    color: var(--cm-text-muted);
}

/* Warning card */
.cm-warning-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 1rem;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-warning-card {
    background: rgba(184, 115, 51, 0.08);
    border-color: rgba(184, 115, 51, 0.2);
}

.cm-warning-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef3c7;
    color: var(--cm-copper);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.88rem;
}

[data-bs-theme="dark"] .cm-warning-card-icon {
    background: rgba(184, 115, 51, 0.15);
}

.cm-warning-card-title {
    font-weight: 700;
    font-size: 0.78rem;
    color: #92400e;
    margin-bottom: 2px;
}

[data-bs-theme="dark"] .cm-warning-card-title {
    color: var(--cm-copper);
}

.cm-warning-card-text {
    font-size: 0.68rem;
    color: #a16207;
    line-height: 1.6;
}

[data-bs-theme="dark"] .cm-warning-card-text {
    color: var(--cm-text-muted);
}

/* Danger button */
.cm-btn-danger {
    width: 100%;
    padding: 13px;
    border-radius: 1rem;
    background: linear-gradient(135deg, #a63d3d, #8b2e2e);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.cm-btn-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139, 46, 46, 0.3);
}

.cm-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════
   28. PAYMENT TABLE COMPONENTS
   Stat cards · Data table · Method / Status badges
   ═══════════════════════════════════════════════════════ */

.cm-fin-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .cm-fin-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cm-fin-stat {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--cm-border);
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-fin-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cm-fin-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
}

.cm-fin-stat-icon.emerald {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-fin-stat-icon.sand {
    background: rgba(201, 169, 110, 0.12);
    color: var(--cm-sand);
}

.cm-fin-stat-icon.green {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.cm-fin-stat-icon.red {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

[data-bs-theme="dark"] .cm-fin-stat-icon.emerald {
    background: rgba(13, 107, 78, 0.15);
}

[data-bs-theme="dark"] .cm-fin-stat-icon.sand {
    background: rgba(201, 169, 110, 0.15);
}

[data-bs-theme="dark"] .cm-fin-stat-icon.green {
    background: rgba(22, 163, 74, 0.15);
}

[data-bs-theme="dark"] .cm-fin-stat-icon.red {
    background: rgba(239, 68, 68, 0.12);
}

.cm-fin-stat-label {
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    margin-bottom: 4px;
}

.cm-fin-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cm-text);
}

.cm-fin-stat-value .unit {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--cm-text-muted);
}

/* Premium table wrapper */
.cm-table-card {
    background: var(--cm-surface);
    border-radius: 1.25rem;
    border: 1px solid var(--cm-border);
    overflow: hidden;
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-table-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.cm-table-head-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--cm-text);
}

.cm-table-search {
    position: relative;
}

.cm-table-search input {
    background: var(--cm-bg);
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    padding: 7px 12px;
    padding-inline-end: 32px;
    font-size: 0.72rem;
    color: var(--cm-text);
    width: 160px;
    transition: border-color var(--cm-transition);
}

.cm-table-search input:focus {
    outline: none;
    border-color: var(--cm-emerald);
}

.cm-table-search i {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--cm-text-muted);
}

/* Table */
.cm-premium-table {
    width: 100%;
    font-size: 0.72rem;
    border-collapse: collapse;
}

.cm-premium-table thead tr {
    background: var(--cm-bg);
}

.cm-premium-table th {
    padding: 10px 16px;
    font-weight: 500;
    color: var(--cm-text-muted);
    font-size: 0.62rem;
    text-align: start;
    white-space: nowrap;
}

.cm-premium-table td {
    padding: 12px 16px;
    color: var(--cm-text);
    border-bottom: 1px solid var(--cm-border);
}

.cm-premium-table tbody tr:hover {
    background: var(--cm-bg);
}

.cm-premium-table tbody tr:last-child td {
    border-bottom: none;
}

/* Method badge */
.cm-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.cm-method-badge.gateway {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-method-badge.cash {
    background: rgba(184, 115, 51, 0.08);
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-method-badge.gateway {
    background: rgba(13, 107, 78, 0.15);
}

[data-bs-theme="dark"] .cm-method-badge.cash {
    background: rgba(184, 115, 51, 0.15);
}

/* Payment status badge */
.cm-pay-status {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.cm-pay-status.held {
    background: #fef3c7;
    color: #92400e;
}

.cm-pay-status.captured {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.cm-pay-status.refunded {
    background: rgba(27, 42, 74, 0.06);
    color: var(--cm-navy);
}

.cm-pay-status.released {
    background: var(--cm-beige);
    color: var(--cm-text-muted);
}

[data-bs-theme="dark"] .cm-pay-status.held {
    background: rgba(184, 115, 51, 0.15);
    color: var(--cm-copper);
}

[data-bs-theme="dark"] .cm-pay-status.captured {
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
}

[data-bs-theme="dark"] .cm-pay-status.refunded {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cm-text);
}

[data-bs-theme="dark"] .cm-pay-status.released {
    background: rgba(255, 255, 255, 0.04);
}

/* Mobile payment cards */
.cm-pay-mobile-card {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cm-border);
}

.cm-pay-mobile-card:last-child {
    border-bottom: none;
}

.cm-pay-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cm-pay-mobile-id {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--cm-text);
}

.cm-pay-mobile-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cm-text);
    margin-top: 6px;
}

.cm-pay-mobile-amount .unit {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--cm-text-muted);
}

.cm-pay-mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--cm-text-muted);
}

@media (max-width: 639.98px) {
    .cm-premium-table-desktop {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .cm-pay-mobile-list {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════
   29. AUTH PAGES — Login · Register · OTP
   ═══════════════════════════════════════════════════════ */

/* ── Auth page wrapper ── */
.cm-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(145deg, var(--cm-bg) 0%, var(--cm-beige) 50%, rgba(13, 107, 78, 0.04) 100%);
    position: relative;
}

.cm-auth-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%230D6B4E' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
}

[data-bs-theme="dark"] .cm-auth-wrapper {
    background: linear-gradient(145deg, var(--cm-bg) 0%, #1e2028 50%, rgba(13, 107, 78, 0.06) 100%);
}

/* ── Auth container ── */
.cm-auth-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
}

/* ── Brand header ── */
.cm-auth-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.cm-auth-logo {
    width: 64px;
    height: 64px;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, var(--cm-emerald) 0%, var(--cm-emerald-light) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 8px 30px rgba(13, 107, 78, 0.25);
}

.cm-auth-logo i {
    font-size: 1.6rem;
    color: #fff;
}

.cm-auth-brand-title {
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    font-family: var(--cm-font-heading);
    margin: 0;
}

[data-bs-theme="dark"] .cm-auth-brand-title {
    color: #fff;
}

.cm-auth-brand-sub {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
    margin-top: 0.35rem;
}

/* ── Auth card ── */
.cm-auth-card {
    width: 100%;
    background: var(--cm-surface);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--cm-border);
    box-shadow: 0 20px 60px rgba(27, 42, 74, 0.06), 0 1px 3px rgba(27, 42, 74, 0.04);
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

[data-bs-theme="dark"] .cm-auth-card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ── Auth form elements ── */
.cm-auth-field {
    margin-bottom: 1.15rem;
}

.cm-auth-label {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--cm-text);
    margin-bottom: 0.45rem;
}

.cm-auth-label .optional {
    font-weight: 400;
    color: var(--cm-text-muted);
    font-size: 0.68rem;
}

.cm-auth-input-wrap {
    position: relative;
}

.cm-auth-input-wrap .cm-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cm-text-muted);
    font-size: 0.88rem;
    pointer-events: none;
    opacity: 0.5;
}

[dir="rtl"] .cm-auth-input-wrap .cm-input-icon {
    right: 14px;
}

[dir="ltr"] .cm-auth-input-wrap .cm-input-icon {
    left: 14px;
}

.cm-auth-input {
    width: 100%;
    padding: 0.78rem 0.9rem 0.78rem 2.5rem;
    border: 1.5px solid var(--cm-border);
    border-radius: 0.85rem;
    background: var(--cm-bg);
    color: var(--cm-text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: all 0.25s ease;
}

[dir="rtl"] .cm-auth-input {
    padding: 0.78rem 2.5rem 0.78rem 0.9rem;
}

.cm-auth-input::placeholder {
    color: var(--cm-text-muted);
    opacity: 0.55;
}

.cm-auth-input:focus {
    outline: none;
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1);
    background: var(--cm-surface);
}

[data-bs-theme="dark"] .cm-auth-input {
    background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .cm-auth-input:focus {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Password toggle ── */
.cm-pw-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cm-text-muted);
    cursor: pointer;
    font-size: 0.88rem;
    padding: 4px;
    transition: color 0.2s;
}

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

[dir="rtl"] .cm-pw-toggle {
    left: 12px;
}

[dir="ltr"] .cm-pw-toggle {
    right: 12px;
}

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

.cm-pw-strength span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--cm-border);
    transition: background 0.3s ease;
}

.cm-pw-strength span.weak {
    background: #e74c3c;
}

.cm-pw-strength span.fair {
    background: var(--cm-copper);
}

.cm-pw-strength span.good {
    background: #f1c40f;
}

.cm-pw-strength span.strong {
    background: var(--cm-emerald);
}

/* ── Role selection cards ── */
.cm-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cm-role-card {
    position: relative;
    border: 2px solid var(--cm-border);
    border-radius: 1rem;
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    background: var(--cm-bg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-role-card:hover {
    border-color: var(--cm-sand);
    transform: translateY(-2px);
}

.cm-role-card.selected {
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1);
    transform: scale(1.02);
}

.cm-role-card.selected.craftsman {
    border-color: var(--cm-copper);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.1);
}

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

.cm-role-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.cm-role-icon.customer {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-role-icon.craftsman {
    background: rgba(184, 115, 51, 0.08);
    color: var(--cm-copper);
}

.cm-role-card-label {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cm-text);
    display: block;
}

.cm-role-card-desc {
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

.cm-role-check {
    position: absolute;
    top: 8px;
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    color: #fff;
}

[dir="rtl"] .cm-role-check {
    left: 8px;
}

[dir="ltr"] .cm-role-check {
    right: 8px;
}

.cm-role-card.selected .cm-role-check {
    display: flex;
    background: var(--cm-emerald);
}

.cm-role-card.selected.craftsman .cm-role-check {
    background: var(--cm-copper);
}

/* ── Auth CTA button ── */
.cm-auth-btn {
    width: 100%;
    padding: 14px;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--cm-emerald) 0%, var(--cm-emerald-light) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(13, 107, 78, 0.2);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
}

.cm-auth-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 107, 78, 0.3);
}

.cm-auth-btn:active {
    transform: translateY(0);
}

.cm-auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── Auth divider ── */
.cm-auth-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cm-border), transparent);
    margin: 1.5rem 0;
}

/* ── Auth footer link ── */
.cm-auth-footer {
    text-align: center;
    font-size: 0.78rem;
    color: var(--cm-text-muted);
}

.cm-auth-footer a {
    color: var(--cm-emerald);
    font-weight: 700;
    text-decoration: none;
}

.cm-auth-footer a:hover {
    text-decoration: underline;
}

/* ── Auth row (remember me / forgot) ── */
.cm-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.75rem;
}

.cm-auth-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--cm-text-muted);
}

.cm-auth-checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--cm-border);
    border-radius: 5px;
    cursor: pointer;
    background: var(--cm-surface);
    transition: all 0.2s;
    flex-shrink: 0;
}

.cm-auth-checkbox:checked {
    background: var(--cm-emerald);
    border-color: var(--cm-emerald);
    box-shadow: inset 0 0 0 3px var(--cm-surface);
}

.cm-auth-checkbox:hover {
    border-color: var(--cm-emerald);
}

.cm-auth-row a {
    color: var(--cm-emerald);
    text-decoration: none;
    font-weight: 600;
}

.cm-auth-row a:hover {
    text-decoration: underline;
}

/* ── Trust badges ── */
.cm-auth-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.5rem;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--cm-text-muted);
    opacity: 0.6;
}

.cm-auth-trust span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cm-auth-trust .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cm-text-muted);
    opacity: 0.4;
}

/* ── Auth responsive ── */
@media (max-width: 480px) {
    .cm-auth-card {
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .cm-auth-logo {
        width: 52px;
        height: 52px;
    }

    .cm-auth-brand-title {
        font-size: 1.25rem;
    }

    .cm-role-grid {
        gap: 8px;
    }

    .cm-role-card {
        padding: 0.75rem 0.5rem;
    }
}


/* ═══════════════════════════════════════════════════════
   30. ACCESSIBILITY — Reduced Motion
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .cm-fade-in,
    .cm-float-card,
    .cm-scroll-reveal,
    .cm-stagger,
    .cm-anim-fade {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .cm-btn-pulse {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════
   31. GLOBAL NORMALIZATION — Body · Font · BG
   Ensures every page inherits the unified design system
   ═══════════════════════════════════════════════════════ */

body {
    font-family: var(--cm-font);
    background-color: var(--cm-bg);
    color: var(--cm-text);
}

/* ── Navbar (public layout) ── */
.cm-navbar {
    background: var(--cm-navbar-gradient);
}

/* ── Unified page wrapper for dashboard content ── */
.cm-page-wrapper {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 1rem;
}

/* ── Admin / Craftsman unified card ── */
.cm-admin-card {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--cm-card-shadow);
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-admin-card-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cm-admin-card-header h2,
.cm-admin-card-header h3 {
    font-family: var(--cm-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cm-text);
    margin: 0;
}

/* ── Unified tables ── */
.cm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}

.cm-table thead th {
    background: var(--cm-beige);
    color: var(--cm-navy);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 14px;
    border-bottom: 1.5px solid var(--cm-border);
    white-space: nowrap;
}

[data-bs-theme="dark"] .cm-table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--cm-text);
}

.cm-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cm-border);
    color: var(--cm-text);
    vertical-align: middle;
}

.cm-table tbody tr:hover {
    background: rgba(13, 107, 78, 0.02);
}

[data-bs-theme="dark"] .cm-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cm-table thead th:first-child {
    border-radius: 0.65rem 0 0 0;
}

.cm-table thead th:last-child {
    border-radius: 0 0.65rem 0 0;
}

[dir="rtl"] .cm-table thead th:first-child {
    border-radius: 0 0.65rem 0 0;
}

[dir="rtl"] .cm-table thead th:last-child {
    border-radius: 0.65rem 0 0 0;
}

/* ── Unified form controls ── */
.cm-form-control {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--cm-border);
    border-radius: 0.65rem;
    background: var(--cm-surface);
    color: var(--cm-text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cm-form-control:focus {
    outline: none;
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1);
}

.cm-form-control::placeholder {
    color: var(--cm-text-muted);
    opacity: 0.5;
}

[data-bs-theme="dark"] .cm-form-control {
    background: rgba(255, 255, 255, 0.04);
}

.cm-form-label {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--cm-text);
    margin-bottom: 0.4rem;
}

.cm-form-group {
    margin-bottom: 1rem;
}

.cm-form-select {
    appearance: none;
    width: 100%;
    padding: 0.65rem 2rem 0.65rem 0.85rem;
    border: 1.5px solid var(--cm-border);
    border-radius: 0.65rem;
    background: var(--cm-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a2332' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat;
    background-position: left 12px center;
    color: var(--cm-text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

[dir="ltr"] .cm-form-select {
    padding: 0.65rem 0.85rem 0.65rem 2rem;
    background-position: right 12px center;
}

.cm-form-select:focus {
    outline: none;
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1);
}

[data-bs-theme="dark"] .cm-form-select {
    background-color: rgba(255, 255, 255, 0.04);
}

/* ── Unified buttons ── */
.cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 0.65rem;
    font-weight: 600;
    font-size: 0.82rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

.cm-btn:hover {
    transform: translateY(-1px);
}

.cm-btn:active {
    transform: translateY(0);
}

.cm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cm-btn-primary {
    background: var(--cm-emerald);
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 107, 78, 0.15);
}

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

.cm-btn-secondary {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-btn-secondary:hover {
    background: rgba(13, 107, 78, 0.15);
    color: var(--cm-emerald);
}

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

.cm-btn-outline:hover {
    border-color: var(--cm-emerald);
    color: var(--cm-emerald);
}

.cm-btn-danger {
    background: #e74c3c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
}

.cm-btn-danger:hover {
    background: #c0392b;
    color: #fff;
}

.cm-btn-copper {
    background: var(--cm-copper);
    color: #fff;
    box-shadow: 0 4px 12px rgba(184, 115, 51, 0.15);
}

.cm-btn-copper:hover {
    background: var(--cm-copper-muted);
    color: #fff;
}

.cm-btn-sm {
    padding: 5px 12px;
    font-size: 0.72rem;
    border-radius: 0.5rem;
}

.cm-btn-lg {
    padding: 12px 24px;
    font-size: 0.92rem;
}

.cm-btn-block {
    width: 100%;
}

.cm-btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* ── Unified badges ── */
.cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 2rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
}

.cm-badge-emerald {
    background: rgba(13, 107, 78, 0.1);
    color: var(--cm-emerald);
}

.cm-badge-copper {
    background: rgba(184, 115, 51, 0.1);
    color: var(--cm-copper);
}

.cm-badge-red {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
}

.cm-badge-navy {
    background: rgba(26, 35, 50, 0.08);
    color: var(--cm-navy);
}

.cm-badge-gray {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.cm-badge-blue {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.cm-badge-amber {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

[data-bs-theme="dark"] .cm-badge-navy {
    background: rgba(228, 230, 234, 0.08);
    color: var(--cm-text);
}

/* ── Empty state ── */
.cm-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--cm-text-muted);
}

.cm-empty-icon {
    font-size: 2.5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.cm-empty-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cm-text);
    margin-bottom: 0.5rem;
}

.cm-empty-desc {
    font-size: 0.78rem;
    line-height: 1.6;
    max-width: 360px;
    margin-inline: auto;
}

/* ── Page header ── */
.cm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.cm-page-title {
    /*    font-family: var(--cm-font-heading);*/
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--cm-text);
    margin: 0;
}

.cm-page-subtitle {
    font-size: 0.78rem;
    color: var(--cm-text-muted);
    margin-top: 4px;
}

/* ── Detail rows ── */
.cm-detail-row {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--cm-border);
    gap: 12px;
    font-size: 0.82rem;
}

.cm-detail-row:last-child {
    border-bottom: none;
}

.cm-detail-label {
    font-weight: 600;
    color: var(--cm-text-muted);
    min-width: 120px;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.cm-detail-value {
    color: var(--cm-text);
    flex: 1;
}

/* ── Search / filter bar ── */
.cm-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cm-search-input {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--cm-border);
    border-radius: 0.65rem;
    background: var(--cm-surface);
    color: var(--cm-text);
    font-size: 0.82rem;
    font-family: inherit;
}

.cm-search-input:focus {
    outline: none;
    border-color: var(--cm-emerald);
    box-shadow: 0 0 0 3px rgba(13, 107, 78, 0.1);
}

/* ── Validation messages ── */
.cm-validation-error {
    font-size: 0.68rem;
    color: #e74c3c;
    margin-top: 4px;
}

.field-validation-error {
    font-size: 0.68rem;
    color: #e74c3c;
    display: block;
    margin-top: 4px;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #e74c3c;
    font-size: 0.78rem;
}

.validation-summary-errors {
    background: rgba(231, 76, 60, 0.06);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* ── Stat strip (reusable for admin/craftsman dashboards) ── */
.cm-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 1.5rem;
}

.cm-stat-card {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.cm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cm-card-hover-shadow);
}

.cm-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.cm-stat-icon.emerald {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-stat-icon.copper {
    background: rgba(184, 115, 51, 0.08);
    color: var(--cm-copper);
}

.cm-stat-icon.navy {
    background: rgba(26, 35, 50, 0.08);
    color: var(--cm-navy);
}

.cm-stat-icon.red {
    background: rgba(231, 76, 60, 0.08);
    color: #e74c3c;
}

.cm-stat-icon.blue {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.cm-stat-icon.amber {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
}

[data-bs-theme="dark"] .cm-stat-icon.navy {
    background: rgba(228, 230, 234, 0.08);
    color: var(--cm-text);
}

.cm-stat-number {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--cm-text);
    line-height: 1;
}

.cm-stat-label {
    font-size: 0.72rem;
    color: var(--cm-text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* ── Toolbar row ── */
.cm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.25rem;
}

/* ── Pagination ── */
.cm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 1.5rem;
}

.cm-pagination a,
.cm-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1.5px solid var(--cm-border);
    color: var(--cm-text);
    background: var(--cm-surface);
}

.cm-pagination a:hover {
    border-color: var(--cm-emerald);
    color: var(--cm-emerald);
}

.cm-pagination .active {
    background: var(--cm-emerald);
    color: #fff;
    border-color: var(--cm-emerald);
}

.cm-pagination .disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Alert override (unify Bootstrap alerts) ── */
.cm-alert {
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    margin-bottom: 1rem;
}

.cm-alert-success {
    background: rgba(13, 107, 78, 0.08);
    color: var(--cm-emerald);
}

.cm-alert-danger {
    background: rgba(231, 76, 60, 0.06);
    color: #c0392b;
}

.cm-alert-warning {
    background: rgba(245, 158, 11, 0.06);
    color: #d97706;
}

.cm-alert-info {
    background: rgba(37, 99, 235, 0.06);
    color: #2563eb;
}


/* ═══════════════════════════════════════════════════════
   32. GLOBAL TYPOGRAPHY + VISUAL CLEANUP
   Centralized fixes for readable text, softer backgrounds,
   and reusable replacements for inline styles.
   ═══════════════════════════════════════════════════════ */
html,
body,
input,
select,
textarea,
button {
    font-size: 15px;
}

body,
.app,
.page,
.section,
.cm-page-wrapper,
.cm-page-shell {
    background: var(--cm-bg);
}

.card,
.modal-content,
.dropdown-menu,
.cm-card,
.cm-admin-card,
.cm-info-card,
.cm-warning-card,
.cm-fin-stat-card,
.cm-request-card,
.cm-page-head-icon {
    background-color: var(--cm-surface);
}

body :where(p, a, span, small, .small, label, td, th, li, strong, code, .form-text, .badge, .page-link, .dropdown-item, .notif-title, .notif-time, .cm-page-subtitle, .cm-detail-label, .cm-detail-value) {
    font-size: max(15px, 1em) !important;
}

.text-muted,
.text-body-secondary,
.muted,
.cm-text-muted,
.form-text,
.small,
small,
.cm-page-subtitle,
.cm-warning-card-text,
.notif-time,
.user-role,
.cm-auth-footer {
    color: var(--cm-text-muted) !important;
    opacity: 1 !important;
}

.text-muted,
.text-body-secondary,
.muted {
    font-weight: 500;
}

::placeholder {
    color: var(--cm-text-muted);
    opacity: 1;
}

.cm-hidden {
    display: none !important;
}

.cm-inline-form {
    display: inline;
}

.cm-alert-shell {
    max-width: 1200px;
    margin: var(--s-4) auto 0;
}

.cm-section-narrow {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.cm-panel-narrow {
    max-width: 520px;
    margin: 0 auto;
}

.cm-page-gap {
    margin-bottom: 1.5rem;
}

.cm-secondary-text {
    color: var(--cm-text-muted) !important;
    font-size: 1rem !important;
}

.cm-preline {
    white-space: pre-line;
    line-height: 1.7;
}

.cm-truncate-360 {
    max-width: 360px;
}

.cm-truncate-200 {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.cm-auth-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
}

.cm-auth-brand-title {
    font-size: 18px;
    font-weight: 700;
}

.cm-auth-footer {
    text-align: center;
    font-size: 1rem;
}

.cm-otp-input {
    text-align: center;
    font-size: 1.25rem !important;
    letter-spacing: 0.5em;
    font-weight: 700;
}

.cm-icon-success {
    color: var(--color-success);
}

.cm-icon-danger {
    color: var(--color-danger);
}

.cm-icon-copper {
    color: var(--cm-copper);
}

.cm-icon-emerald {
    color: var(--cm-emerald);
}

.cm-icon-circle,
.cm-status-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto var(--s-4);
}

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

.cm-status-icon-circle.danger {
    background: var(--color-danger-soft);
}

.cm-fin-note,
.cm-date-meta,
.cm-history-label,
.cm-empty-note {
    margin: 0;
    color: var(--cm-text-muted);
}

.cm-currency-unit {
    font-size: 0.94rem !important;
    opacity: 0.85;
}

.cm-fin-stat-icon-neutral {
    background: var(--cm-beige);
    color: var(--cm-text);
}

.cm-fin-stat-value-neutral,
.cm-money-value,
.cm-section-title {
    color: var(--cm-text);
    font-weight: 700;
}

.cm-section-title {
    font-size: 1rem !important;
    margin-bottom: 1rem;
}

.cm-code-meta {
    font-size: 0.95rem !important;
    color: var(--cm-text-muted);
    font-family: var(--bs-font-monospace, monospace);
}

.cm-no-wrap {
    white-space: nowrap;
}

.cm-divider {
    border-top: 1px solid var(--cm-border);
    margin-bottom: 12px;
}

.cm-flex-fill-min {
    flex: 1;
    min-width: 0;
}

.cm-job-icon-lg {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.cm-note-box {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(184, 115, 51, 0.08);
    border-radius: 0.75rem;
    color: var(--cm-copper);
    line-height: 1.5;
}

.cm-timeline-dot-highlight {
    background: var(--cm-copper) !important;
}

.cm-timeline-label-highlight {
    color: var(--cm-copper) !important;
}

.cm-timeline-note {
    font-style: italic;
    opacity: 0.88;
}

.cm-action-link {
    text-decoration: none;
}

.cm-action-outline {
    width: 100%;
    padding: 12px;
    border-radius: 1rem;
    border: 2px solid var(--cm-copper);
    color: var(--cm-copper);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    transition: all 0.2s ease;
}

.cm-action-outline:hover {
    background: rgba(184, 115, 51, 0.05);
    color: var(--cm-copper);
}

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

.cm-btn-copper-solid {
    background: linear-gradient(135deg, var(--cm-copper), #8a5a2a);
    color: #fff;
}

.cm-btn-danger-gradient {
    background: linear-gradient(135deg, #c0392b, #922b21);
    color: #fff;
}

.cm-modal-polish {
    border: none;
    border-radius: 1.25rem;
}

.cm-modal-body-lg {
    padding: 2rem;
}

.cm-modal-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.cm-modal-title-sm {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cm-notif-menu {
    width: min(340px, 92vw);
    max-height: 400px;
    overflow-y: auto;
}

.cm-notif-header {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cm-notif-count {
    color: var(--cm-text-muted);
}

.cm-notif-empty {
    padding: var(--s-6) var(--s-4);
}

.cm-notif-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--s-2) var(--s-4);
}

.cm-dropdown-action {
    text-align: center;
    justify-content: center;
}

.cm-notif-link {
    display: flex;
    gap: var(--s-3);
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.cm-notif-copy,
.cm-toast-copy {
    flex: 1;
    min-width: 0;
}

.cm-toast-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-toast-title {
    margin: 0;
    font-weight: 600;
}

.cm-toast-message {
    margin: 2px 0 0;
    color: var(--cm-text-muted);
}

.cm-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--cm-text-muted);
}

.cm-inline-end-gap {
    margin-inline-end: 4px;
}

.cm-dimmed {
    opacity: 0.6;
}

.cm-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: 15px;
}

.cm-form-preview-tall {
    min-height: 52px;
}

.cm-box-480 {
    max-width: 480px;
}

.cm-box-340 {
    max-width: 340px;
}

.cm-box-320 {
    max-width: 320px;
}

.cm-cat-grid-scroll {
    max-height: 320px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════
   OTP LAYOUT FORM — Scoped styles
   Prevents overlap between form sections, buttons, and text
   ═══════════════════════════════════════════════════════ */

/* Sections within the OTP form should not overlap */
.otp-section {
    position: relative;
    z-index: 0;
}

/* Variables reference panel */
.otp-variables-panel .card {
    background: var(--cm-surface);
    border-color: var(--cm-border) !important;
}

.otp-variables-panel .card-header {
    background: var(--cm-beige);
    border-bottom: 1px solid var(--cm-border);
}

[data-bs-theme="dark"] .otp-variables-panel .card-header {
    background: rgba(255, 255, 255, 0.04);
}

.otp-variables-panel code {
    color: var(--cm-emerald);
    font-size: 0.82rem;
    background: rgba(13, 107, 78, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Ensure form-check-switch toggles don't overlap labels */
.cm-admin-card .form-check.form-switch {
    min-height: auto;
    padding-inline-start: 2.5em;
}

/* Fix color picker input group — prevent color swatch from being squished */
.cm-admin-card .input-group .form-control-color {
    min-width: 42px;
    max-width: 42px;
    padding: 4px;
}

/* Prevent admin card hover lift on form pages (only stat cards should lift) */
.cm-admin-card:has(form) {
    transition: background-color var(--cm-transition), border-color var(--cm-transition);
}

.cm-admin-card:has(form):hover {
    transform: none;
    box-shadow: var(--cm-card-shadow);
}

/* Ensure buttons in the form footer don't overlap content above */
.cm-admin-card .d-flex.gap-2 {
    position: relative;
    z-index: 1;
}

/* Preview iframe container — fixed height prevents layout shift */
.cm-admin-card .border.rounded.bg-white {
    overflow: hidden;
}

/* RTL adjustments for OTP form */
[dir="rtl"] .otp-variables-panel code {
    direction: ltr;
    unicode-bidi: embed;
}