body {
    margin: 0 !important;
    font-family: Arial, sans-serif !important;
}

body.auth-page {
    background: radial-gradient(900px 450px at 20% 10%, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0) 60%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 45%, #ecfeff 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
}

.card {
    width: 100% !important;
    max-width: 480px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.10) !important;
    padding: 70px 40px !important;
}

.auth-card {
    padding: 0 !important;
    overflow: hidden !important;
}

.auth-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 35px 24px 10px !important;
    background: transparent !important;
}

.auth-logo {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    object-fit: contain !important;
}

.auth-title {
    margin: 0 !important;
    padding: 24px 40px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
}

.auth-card .error,
.auth-card form {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.auth-card .error {
    margin-top: 16px !important;
}

.auth-card form {
    padding-bottom: 40px !important;
}

h1 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-size: 22px !important;
    color: #0f172a !important;
    text-align: center !important;
}

label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #334155 !important;
    font-size: 14px !important;
}

input {
    width: 100% !important;
    padding: 11px 12px !important;
    margin-bottom: 14px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #0f172a !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

button {
    width: 100% !important;
    border: 0 !important;
    background: #2F3061 !important;
    color: #fff !important;
    padding: 11px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

button:hover {
    background: #24254a !important;
}

.error {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin-bottom: 14px !important;
    font-size: 14px !important;
}

.hint {
    margin-top: 12px !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* Login form enhancements */
.card form {
    margin-top: 6px;
}

.field {
    margin-bottom: 14px !important;
}

.card .field input {
    margin-bottom: 0 !important; /* override global input spacing */
}

.password-wrap {
    position: relative !important;
}

.password-input {
    width: 100% !important;
    /* Leave room for the show/hide button inside the input */
    padding-right: 105px !important;
}

.toggle-in-field {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 34px !important; /* icon-only button */
    height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none !important;
}

.toggle-in-field:hover {
    background: transparent !important;
    color: #2563eb !important;
}

.primary-btn {
    margin-top: 6px !important;
}

input:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18) !important;
}

body.dashboard-page {
    background: #f9fafb !important;
    color: #111827 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Dashboard uses full width cards (like the reference UI) */
body.dashboard-page .page-card {
    max-width: none !important;
}

.dashboard-v2-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 6px 0 16px !important;
}

.dashboard-v2-title-wrap {
    min-width: 0 !important;
}

.dashboard-v2-title {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.2px !important;
}

.dashboard-v2-subtitle {
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.dashboard-v2-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}

.dashboard-v2-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.dashboard-v2-pill {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.dashboard-v2-stats {
    display: none !important; /* replaced by dashboard-kpi-grid */
}

.dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

.dashboard-kpi-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.05) !important;
    padding: 14px 16px !important;
    min-height: 104px !important;
    position: relative !important;
    overflow: hidden !important;
}

.dashboard-kpi-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

.dashboard-kpi-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.dashboard-kpi-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
}

.dashboard-kpi-label {
    margin-top: 4px !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.dashboard-v3-stat-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.05) !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    position: relative !important;
    overflow: hidden !important;
}

.dashboard-v3-stat-card::before,
.dashboard-kpi-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -40% -30% !important;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.00) 45%) !important;
    opacity: 0.55 !important;
    transform: translate3d(-10%, -10%, 0) rotate(12deg) !important;
    animation: dashboardCardGlow 6s ease-in-out infinite !important;
    pointer-events: none !important;
}

.dashboard-v3-stat-card::after,
.dashboard-kpi-card::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -40% !important;
    width: 35% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-14deg) !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    animation: dashboardCardShimmer 3.6s ease-in-out infinite !important;
}

@keyframes dashboardCardGlow {
    0%, 100% { opacity: 0.45; transform: translate3d(-10%, -10%, 0) rotate(12deg) scale(1); }
    50% { opacity: 0.78; transform: translate3d(-6%, -6%, 0) rotate(12deg) scale(1.03); }
}

@keyframes dashboardCardShimmer {
    0% { left: -45%; }
    40% { left: 120%; }
    100% { left: 120%; }
}

.dashboard-v2-panel--wide {
    padding: 32px !important;
}

.dashboard-v3-stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f172a !important;
}

.dashboard-v3-stat-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.dashboard-v3-stat-icon.bg-green { background: rgba(34, 197, 94, 0.18) !important; color: #16a34a !important; }
.dashboard-v3-stat-icon.bg-blue { background: rgba(37, 99, 235, 0.16) !important; color: #2563eb !important; }
.dashboard-v3-stat-icon.bg-orange { background: rgba(245, 158, 11, 0.18) !important; color: #d97706 !important; }
.dashboard-v3-stat-icon.bg-red { background: rgba(239, 68, 68, 0.16) !important; color: #ef4444 !important; }

/* New KPI icons for recreated top cards */
.dashboard-kpi-icon.bg-green { background: rgba(34, 197, 94, 0.18) !important; color: #16a34a !important; }
.dashboard-kpi-icon.bg-blue { background: rgba(37, 99, 235, 0.16) !important; color: #2563eb !important; }
.dashboard-kpi-icon.bg-orange { background: rgba(245, 158, 11, 0.18) !important; color: #d97706 !important; }
.dashboard-kpi-icon.bg-red { background: rgba(239, 68, 68, 0.16) !important; color: #ef4444 !important; }

.dashboard-v3-stat-body {
    min-width: 0 !important;
}

.dashboard-v3-stat-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
}

.dashboard-v3-stat-label {
    margin-top: 3px !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.dashboard-v3-perf {
    display: grid !important;
    grid-template-columns: 210px 1fr !important;
    gap: 26px !important;
    align-items: center !important;
    padding: 10px 2px 2px !important;
}

.dashboard-v3-donut svg {
    width: 200px !important;
    height: 200px !important;
    display: block !important;
}

.dashboard-v3-donut {
    padding: 10px 12px !important;
}

.dashboard-v3-legend {
    display: grid !important;
    gap: 14px !important;
    padding: 6px 0 !important;
}

.dashboard-v3-legend .item {
    display: grid !important;
    grid-template-columns: 10px 1fr 36px !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 16px 14px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-v3-stat-card::before,
    .dashboard-v3-stat-card::after,
    .dashboard-kpi-card::before,
    .dashboard-kpi-card::after {
        animation: none !important;
    }
}

.dashboard-v3-legend .swatch {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    display: inline-block !important;
}

.dashboard-v3-legend .name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

.dashboard-v3-legend .val {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

.dashboard-v3-expiry-buckets {
    display: grid !important;
    gap: 10px !important;
    padding-top: 4px !important;
}

.dashboard-v3-expiry-buckets .row {
    display: grid !important;
    grid-template-columns: 74px 1fr 36px !important;
    gap: 10px !important;
    align-items: center !important;
}

.dashboard-v3-expiry-buckets .lbl {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
}

.dashboard-v3-expiry-buckets .num {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

.dashboard-v3-expiry-buckets .bar {
    height: 10px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
}

.dashboard-v3-expiry-buckets .fill {
    height: 100% !important;
    border-radius: 999px !important;
}

.dashboard-v2-stat-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.05) !important;
    padding: 14px 14px 12px !important;
    min-height: 98px !important;
    display: grid !important;
    gap: 6px !important;
}

.dashboard-v2-stat-card.highlight {
    border-color: rgba(37, 99, 235, 0.28) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10) !important;
}

.dashboard-v2-stat-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.dashboard-v2-stat-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.dashboard-v2-stat-mini {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    white-space: nowrap !important;
}

.dashboard-v2-stat-mini.up {
    color: #16a34a !important;
    border-color: rgba(22, 163, 74, 0.22) !important;
    background: rgba(22, 163, 74, 0.08) !important;
}

.dashboard-v2-stat-mini.down {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

.dashboard-v2-stat-value {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.05 !important;
    font-variant-numeric: tabular-nums !important;
}

.dashboard-v2-spark {
    height: 24px !important;
    color: #2563eb !important;
    opacity: 0.95 !important;
}

.dashboard-v2-spark svg {
    width: 100% !important;
    height: 24px !important;
    display: block !important;
}

.dashboard-v2-panel {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.05) !important;
    padding: 14px !important;
    margin-top: 8px !important;
}

.dashboard-v2-panel.dashboard-v2-panel--wide {
    padding: 32px !important;
    margin-top: 10px !important;
}

.dashboard-v2-panel--wide .dashboard-v3-perf {
    padding: 18px 10px 6px !important;
}

.dashboard-v2-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.dashboard-v2-panel-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: 0 !important;
}

.dashboard-v2-panel-sub {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.04em !important;
}

.dashboard-v2-funnel {
    display: grid !important;
    gap: 12px !important;
}

.dashboard-v2-funnel-steps {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.dashboard-v2-funnel-steps .step {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 10px 10px !important;
    background: #fff !important;
}

.dashboard-v2-funnel-steps .step.active {
    border-color: rgba(37, 99, 235, 0.28) !important;
    background: rgba(37, 99, 235, 0.06) !important;
}

.dashboard-v2-funnel-steps .label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
}

.dashboard-v2-funnel-steps .value {
    margin-top: 6px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
}

.dashboard-v2-funnel-bar {
    position: relative !important;
    height: 66px !important;
    border-radius: 14px !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
}

.dashboard-v2-funnel-bar .seg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 14px !important;
    opacity: 0.95 !important;
}

.dashboard-v2-funnel-bar .s1 { background: rgba(37, 99, 235, 0.10) !important; }
.dashboard-v2-funnel-bar .s2 { background: rgba(37, 99, 235, 0.16) !important; }
.dashboard-v2-funnel-bar .s3 { background: rgba(37, 99, 235, 0.22) !important; }
.dashboard-v2-funnel-bar .s4 { background: rgba(37, 99, 235, 0.28) !important; }
.dashboard-v2-funnel-bar .s5 { background: rgba(37, 99, 235, 0.34) !important; }

.dashboard-v2-funnel-bar .s1 { clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); }
.dashboard-v2-funnel-bar .s2 { clip-path: polygon(0 12%, 100% 20%, 100% 80%, 0 88%); }
.dashboard-v2-funnel-bar .s3 { clip-path: polygon(0 20%, 100% 28%, 100% 72%, 0 80%); }
.dashboard-v2-funnel-bar .s4 { clip-path: polygon(0 28%, 100% 36%, 100% 64%, 0 72%); }
.dashboard-v2-funnel-bar .s5 { clip-path: polygon(0 36%, 100% 44%, 100% 56%, 0 64%); }

.dashboard-v2-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.dashboard-donut-wrap--v2 {
    padding-top: 2px !important;
}

.dashboard-v2-hbars {
    display: grid !important;
    gap: 10px !important;
    padding-top: 4px !important;
}

.dashboard-v2-hbar-row {
    display: grid !important;
    grid-template-columns: 38px 1fr 36px !important;
    gap: 10px !important;
    align-items: center !important;
}

.dashboard-v2-hbar-row .m {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
}

.dashboard-v2-hbar-row .n {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

.dashboard-v2-hbar-row .bar {
    height: 10px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
}

.dashboard-v2-hbar-row .fill {
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%) !important;
}

@media (max-width: 1200px) {
    .dashboard-v2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .dashboard-v2-bottom {
        grid-template-columns: 1fr !important;
    }
    .dashboard-v2-funnel-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .dashboard-v3-perf {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    .dashboard-v3-legend {
        width: 100% !important;
    }
}

/* Admin layout (sidebar + content) */
.admin-layout {
    min-height: 100vh !important;
    display: block !important;
}

.sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 50 !important;

    width: 53px !important;
    background: #2F3061 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 14px 10px !important;
    transition: width 180ms ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.sidebar:hover {
    width: 240px !important;
}

.sidebar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    margin-bottom: 12px !important;
}

.brand-dot {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.brand-text {
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

.sidebar:hover .brand-text {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.nav {
    display: grid !important;
    gap: 16px !important;
}

.nav a {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.nav .icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.nav .icon svg {
    width: 20px !important;
    height: 20px !important;
    padding-left: 3px !important;
    display: block !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.nav .label {
    white-space: nowrap !important;
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

.sidebar:hover .nav .label {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.nav-bottom {
    margin-top: auto !important;
    padding-top: 10px !important;
    padding-bottom: 30px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.content {
    padding: 54px 34px 44px !important; /* more space from top + corners */
    padding-left: 110px !important; /* keep page fixed; sidebar overlays when expanded */
}

.content-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 6px 0 18px !important;
}

.page-card {
    max-width: 980px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06) !important;
    padding: 22px !important;
    margin-top: 10px !important;
}

.page-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    color: #0f172a !important;
}

.page-card-full {
    max-width: none !important;
}

/* Tables + toolbar */
.toolbar {
    margin-top: 10px !important;
}

.toolbar-row {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    width: 98.5% !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

.toolbar-row--filters {
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}

.toolbar-excel-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
}

.toolbar-list-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

.toolbar-list-status .toolbar-filter-label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.toolbar-row--filters .btn-toolbar-excel {
    min-width: 0 !important;
    padding: 0 14px !important;
}

.toolbar-row--filters .btn-toolbar-excel--import {
    color: #fff !important;
    background: #217346 !important;
}

.toolbar-row--filters .btn-toolbar-excel--import:hover {
    background: #185c37 !important;
    color: #fff !important;
}

.toolbar-row--filters .btn-toolbar-excel--export {
    color: #fff !important;
    background: #0f6cbd !important;
}

.toolbar-row--filters .btn-toolbar-excel--export:hover {
    background: #0c5aa0 !important;
    color: #fff !important;
}

.toolbar-filter-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap !important;
}

.toolbar-filter-label--secondary {
    margin-left: 12px !important;
}

.toolbar-row--filters select.select--filter-status,
.toolbar-list-status select.select--filter-status {
    min-width: 140px !important;
}

.toolbar-day-left-group {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 12px !important;
    flex: 0 0 auto !important;
}

.toolbar-date-sep {
    color: #64748b !important;
    font-weight: 600 !important;
    user-select: none !important;
}

input[type="date"].control.control-date {
    min-width: 132px !important;
    max-width: 150px !important;
    flex: 0 0 auto !important;
}

.day-left-filter-btns {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    align-items: center !important;
}

.btn-day-left {
    min-width: 34px !important;
    height: 32px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.btn-day-left:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.btn-day-left.is-active {
    border-color: #0f172a !important;
    background: #0f172a !important;
    color: #fff !important;
}

.btn-day-left.is-active:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
}

/* Copy phone/address in customer list */
.copy-to-clipboard {
    cursor: pointer !important;
    user-select: text !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 2px !important;
}

.copy-to-clipboard__icon {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.65 !important;
    flex: 0 0 auto !important;
}

.copy-to-clipboard__text {
    display: inline !important;
}

.copy-to-clipboard:hover {
    color: #0f172a !important;
}

.dashboard-top-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.dashboard-mini-card {
    padding: 16px !important;
    min-height: 96px !important;
}

.dashboard-mini-title {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.dashboard-mini-value {
    margin-top: 6px !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.05 !important;
    font-variant-numeric: tabular-nums !important;
}

.dashboard-mini-foot {
    margin-top: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.dashboard-mini-foot--up {
    color: #16a34a !important;
}

.dashboard-mini-foot--down {
    color: #ef4444 !important;
}

.dashboard-main-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.dashboard-main-grid--bottom {
    margin-top: 12px !important;
}

.dashboard-panel {
    padding: 14px !important;
}

.dashboard-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.dashboard-panel-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.2px !important;
}

.dashboard-panel-subtitle {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

.dashboard-empty {
    margin: 0 !important;
    color: #64748b !important;
}

.dashboard-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    min-height: 220px !important;
    padding: 10px 4px 0 !important;
}

.dashboard-bar-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.dashboard-bar {
    width: 100% !important;
    min-height: 8px !important;
    border-radius: 8px 8px 2px 2px !important;
    background: linear-gradient(180deg, #4f46e5 0%, #3b82f6 100%) !important;
    position: relative !important;
}

.dashboard-bar-value {
    position: absolute !important;
    top: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 11px !important;
    color: #64748b !important;
}

.dashboard-bar-label {
    font-size: 12px !important;
    color: #94a3b8 !important;
}

.dashboard-donut-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 8px !important;
}

.dashboard-donut {
    --p1: 40;
    --p2: 30;
    --p3: 30;
    width: 170px !important;
    height: 170px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        #4f46e5 0 calc(var(--p1) * 1%),
        #22c55e calc(var(--p1) * 1%) calc((var(--p1) + var(--p2)) * 1%),
        #06b6d4 calc((var(--p1) + var(--p2)) * 1%) 100%
    ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-donut-hole {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
}

.dashboard-donut-legend {
    width: 100% !important;
    display: grid !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.dashboard-donut-legend .dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
}

.dashboard-donut-legend .dot-1 { background: #4f46e5 !important; }
.dashboard-donut-legend .dot-2 { background: #22c55e !important; }
.dashboard-donut-legend .dot-3 { background: #06b6d4 !important; }

.dashboard-task-list {
    display: grid !important;
    gap: 8px !important;
}

.dashboard-task-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

.dashboard-task-item input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    margin: 3px 0 0 0 !important;
}

.dashboard-task-text {
    display: grid !important;
    gap: 2px !important;
}

.dashboard-task-text strong {
    font-size: 13px !important;
    color: #0f172a !important;
    letter-spacing: 0.15px !important;
}

.dashboard-task-text small {
    font-size: 12px !important;
    color: #64748b !important;
}

.dashboard-text-strong {
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dashboard-num {
    font-variant-numeric: tabular-nums !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

@media (max-width: 1200px) {
    .dashboard-top-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .dashboard-main-grid {
        grid-template-columns: 1fr !important;
    }
}

.toolbar-row input,
.toolbar-row select,
.toolbar-row button {
    margin: 0 !important; /* kill global input margin-bottom */
}

.search-wrap {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.search-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.control-search {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 40px !important;
}

.control, .select {
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0f172a !important;
    line-height: 40px !important;
}

.select {
    /* Make the native select arrow consistent so we can control spacing */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* space for custom dropdown arrow */
    padding-right: 44px !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

.select {
    min-width: 180px !important;
}

select.select[name="role"] {
    min-width: 220px !important;
}

select.select[name="per_page"] {
    min-width: 200px !important;
}

.control {
    min-width: 240px !important;
}

.control-grow {
    flex: 1 1 auto !important;
    min-width: 280px !important;
}

@media (max-width: 900px) {
    .toolbar-row {
        flex-wrap: wrap !important;
    }
    .search-wrap {
        min-width: 100% !important;
    }
    .control-search {
        min-width: 100% !important;
    }
}

.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
}

.btn-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #427AB5 !important;
    border: 1px solid rgba(66, 122, 181, 0.55) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important; /* override global button { width:100% } */
    min-width: 180px !important;
}

.btn-outline:hover {
    background: rgba(66, 122, 181, 0.08) !important;
}

.btn-success {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: #16a34a !important;
    color: #fff !important;
    border: 1px solid rgba(22, 163, 74, 0.6) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important; /* override global button { width:100% } */
    min-width: 220px !important;
}

.btn-success:hover {
    background: #15803d !important;
}

.btn-category {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: #5e65f2 !important;
    color: #fff !important;
    border: 1px solid #5e65f2 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 190px !important;
}

.btn-category:hover {
    background: #4e56f3 !important;
    border-color: #4e56f3 !important;
}

.btn-view-category {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: #427AB5 !important;
    color: #fff !important;
    border: 1px solid #427AB5 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 190px !important;
}

.btn-view-category:hover {
    background: #355f8e !important;
    border-color: #355f8e !important;
}

.category-list-wrap {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    padding: 8px !important;
    max-height: 320px !important;
    overflow: auto !important;
}

.category-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.category-item:last-child {
    border-bottom: 0 !important;
}

.category-item-name {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    padding-right: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.category-item .actions-cell {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end !important;
}

.category-empty {
    color: #64748b !important;
    font-size: 14px !important;
    padding: 12px !important;
}

#viewProductModal .modal-label {
    font-weight: 700 !important;
}

.meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 14px !important;
    gap: 12px !important;
}

.meta-text {
    color: #64748b !important;
    font-size: 13px !important;
}

.btn-clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.btn-clear:hover {
    background: #f1f5f9 !important;
}

.table-wrap {
    overflow: auto !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
}

table {
    width: 100% !important;
    border-collapse: collapse !important;
    min-width: 760px !important;
}

th, td {
    text-align: left !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 14px !important;
}

/* Give first column more breathing room from left edge */
th:first-child,
td:first-child {
    padding-left: 18px !important;
}

/* Keep actions column visually centered */
th:last-child,
td:last-child {
    text-align: center !important;
}

.username-text {
    display: inline-block !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

tr:hover td {
    background: #f8fafc !important;
}

/* Customer list: Day left urgency */
.customer-list-days-left {
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* 10–29 days: deep gold (clearly yellow, not orange) */
.customer-list-days-left--yellow {
    color: #9a7b0d !important;
}

/* 1–9 days: vivid orange-red (hue shift vs gold above) */
.customer-list-days-left--orange {
    color: #ea580c !important;
}

/* 30+ days: comfortable lead time */
.customer-list-days-left--green {
    color: #15803d !important;
}

.customer-list-days-left--expired {
    color: #b91c1c !important;
}

.pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.pill.active {
    border-color: rgba(16, 185, 129, 0.35) !important;
    background: rgba(16, 185, 129, 0.10) !important;
    color: #065f46 !important;
}

.pill.inactive {
    border-color: rgba(239, 68, 68, 0.30) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #991b1b !important;
}

.actions-cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
}

.action-btn {
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 0 !important;
    background: #111827 !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-btn:hover {
    filter: brightness(0.93) !important;
}

.action-btn svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

.action-edit {
    background: #427AB5 !important;
}

.action-view {
    background: #0ea5a4 !important;
}

.action-del {
    background: #dc2626 !important;
}

.action-edit:hover {
    background: #355f8e !important;
}

.action-del:hover {
    background: #b91c1c !important;
}

.action-view:hover {
    background: #0f908f !important;
}

.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    z-index: 1000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.modal-backdrop.is-open {
    display: flex !important;
}

.modal-card {
    width: 100% !important;
    max-width: 420px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.24) !important;
    padding: 24px !important;
}

.modal-card-wide {
    max-width: 1180px !important;
}

.modal-card--import-excel {
    max-width: 520px !important;
}

.import-excel-section {
    margin-top: 16px !important;
    padding: 14px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.import-excel-section--muted {
    opacity: 0.88 !important;
    background: #f1f5f9 !important;
}

.import-excel-section-title {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.import-excel-download-line {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.import-excel-download-link {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.import-excel-download-link:hover {
    color: #1e3a8a !important;
}

.import-excel-section--import {
    margin-top: 16px !important;
}

.import-excel-file-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.import-excel-file-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 13px !important;
}

.modal-card--import-excel .modal-actions--import-excel {
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 18px !important;
    gap: 12px !important;
}

.modal-card--import-excel .modal-actions--import-excel button {
    width: auto !important;
    min-width: 0 !important;
}

.modal-card--import-excel .btn-import-csv-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1px solid #14532d !important;
    background: #217346 !important;
    color: #fff !important;
}

.modal-card--import-excel .btn-import-csv-submit:hover:not(:disabled) {
    background: #185c37 !important;
}

.modal-card--import-excel .btn-import-csv-submit:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.import-excel-progress-wrap {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 12px !important;
    background: #eff6ff !important;
}

.import-excel-progress-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e3a8a !important;
}

.import-excel-progress-track {
    height: 10px !important;
    border-radius: 999px !important;
    background: #dbeafe !important;
    overflow: hidden !important;
}

.import-excel-progress-bar {
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #217346 0%, #16a34a 100%) !important;
    transition: width 0.25s ease !important;
}

#customerImportExcelModal.modal-backdrop.is-open {
    z-index: 1100 !important;
}

/* View / Edit customer: scroll long service lists the same way as #addCustomerForm */
#viewCustomerModal .modal-form {
    max-height: min(72vh, 720px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: auto !important;
}

#editCustomerModal #editCustomerForm.modal-form {
    max-height: min(72vh, 720px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: auto !important;
}

#viewCustomerModal .modal-form::-webkit-scrollbar,
#editCustomerModal #editCustomerForm.modal-form::-webkit-scrollbar {
    width: 10px !important;
}

#viewCustomerModal .modal-form::-webkit-scrollbar-track,
#editCustomerModal #editCustomerForm.modal-form::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 999px !important;
}

#viewCustomerModal .modal-form::-webkit-scrollbar-thumb,
#editCustomerModal #editCustomerForm.modal-form::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    border: 2px solid #f1f5f9 !important;
}

#viewCustomerModal .modal-form::-webkit-scrollbar-thumb:hover,
#editCustomerModal #editCustomerForm.modal-form::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.modal-title {
    margin: 0 0 12px 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.modal-text {
    margin: 0 0 6px 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.modal-actions {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.modal-form {
    margin-top: 12px !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.modal-field {
    margin-bottom: 12px !important;
}

.modal-field-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

/* Customer modal: multiple phones / addresses */
.customer-contact-section {
    margin-bottom: 16px !important;
    padding: 14px 16px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.customer-contact-section__header {
    margin-bottom: 12px !important;
}

.customer-contact-section__title {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.customer-contact-section__hint {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #64748b !important;
}

.customer-contact-section--phones {
    border-color: #bfdbfe !important;
    background: linear-gradient(165deg, #ffffff 0%, #eff6ff 100%) !important;
}

.customer-contact-section--addresses {
    border-color: #c7d2fe !important;
    background: linear-gradient(165deg, #ffffff 0%, #f5f3ff 100%) !important;
}

.customer-multi-contact-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    counter-reset: cc-line !important;
    margin-bottom: 10px !important;
}

.cc-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.cc-item:focus-within {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.cc-item--address {
    align-items: flex-start !important;
}

.cc-item--address:focus-within {
    border-color: #a5b4fc !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.cc-item--persisted {
    background: #f8fafc !important;
}

.cc-item--persisted .modal-input[readonly] {
    cursor: default !important;
    color: #475569 !important;
}

.cc-item__index {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1d4ed8 !important;
    background: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
    counter-increment: cc-line !important;
}

.cc-item--address .cc-item__index {
    color: #4338ca !important;
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
}

.cc-item__index::before {
    content: counter(cc-line) !important;
}

.cc-item__body {
    flex: 1 !important;
    min-width: 0 !important;
}

.cc-item__body .modal-input {
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.cc-item__remove {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
}

.cc-item__remove:hover:not(:disabled) {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.cc-item__remove:disabled,
.cc-item__remove.is-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.customer-contact-add {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
    padding: 10px 14px !important;
    border: 1px dashed #94a3b8 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}

.customer-contact-add:hover {
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

.customer-contact-add__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    background: #e2e8f0 !important;
    color: #334155 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.customer-contact-add:hover .customer-contact-add__icon {
    background: #bfdbfe !important;
    color: #1e40af !important;
}

.customer-contact-view-summary {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    min-height: 72px !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.customer-contact-section__header--with-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.customer-contact-header-copy.copy-to-clipboard {
    flex-shrink: 0 !important;
    text-decoration: none !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    gap: 0 !important;
}

.customer-contact-header-copy .copy-to-clipboard__icon {
    opacity: 0.85 !important;
}

.customer-multi-contact-list--view {
    margin-bottom: 0 !important;
}

.cc-item.cc-item--view.cc-item--address {
    align-items: center !important;
}

.cc-item__copy.copy-to-clipboard {
    flex-shrink: 0 !important;
    align-self: center !important;
    text-decoration: none !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    gap: 0 !important;
}

.cc-item__copy .copy-to-clipboard__icon {
    opacity: 0.85 !important;
}

.cc-item__view-value {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #0f172a !important;
}

.customer-contact-view-empty {
    padding: 10px 12px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
}

.service-records-block {
    margin-top: 14px !important;
}

.service-records-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.service-records-title {
    margin: 0 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

.service-records-add-btn {
    width: auto !important;
    min-width: 120px !important;
    height: 38px !important;
}

.service-records-toolbar {
    margin-bottom: 10px !important;
}

.service-records-search-label {
    display: block !important;
    margin: 0 0 6px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
}

.service-records-search-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.service-records-search {
    flex: 1 1 180px !important;
    min-width: 160px !important;
    max-width: none !important;
    width: auto !important;
}

.service-records-search-btn,
.service-records-search-clear-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    height: 38px !important;
}

.service-records-search-empty {
    margin: 0 0 10px 0 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

.service-records-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
}

.service-record-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.service-record-block.is-search-hidden {
    display: none !important;
}

.service-records-list .service-record-block:nth-child(odd) {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}

.service-records-list .service-record-block:nth-child(even) {
    background: #eaf2ff !important;
    border-color: #93c5fd !important;
}

.service-record-block .service-record-row {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.service-record-history-panel {
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 10px 12px 12px 12px !important;
}

.sr-history-panel-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    text-align: left !important;
    font: inherit !important;
    color: inherit !important;
}

.service-record-history-panel.is-open .sr-history-panel-toggle {
    margin-bottom: 10px !important;
}

.sr-history-panel-toggle .sr-history-chevron {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    color: #64748b !important;
    transition: transform 0.15s ease !important;
}

.service-record-history-panel.is-open .sr-history-panel-toggle .sr-history-chevron {
    transform: rotate(90deg) !important;
}

.sr-history-heading {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.sr-history-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.sr-history-item {
    padding: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
}

.sr-history-item__shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.sr-history-item__head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

.sr-history-item__toggle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    text-align: left !important;
    font: inherit !important;
    color: inherit !important;
}

.sr-history-item__toggle .sr-history-chevron {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    color: #64748b !important;
    transition: transform 0.15s ease !important;
}

.sr-history-item.is-expanded .sr-history-item__toggle .sr-history-chevron {
    transform: rotate(90deg) !important;
}

.sr-history-item__summary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
}

.sr-history-item__body {
    padding: 0 10px 10px 10px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.sr-history-added-by {
    flex-shrink: 0 !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 0 4px !important;
}

.sr-history-item__actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.sr-history-item__actions .sr-history-added-by {
    margin-left: 0 !important;
}

.sr-history-item--stored .sr-history-remove {
    position: static !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.sr-history-display-host {
    min-height: 0 !important;
    width: 100% !important;
}

.sr-history-card {
    font-size: 13px !important;
    line-height: 1.45 !important;
    width: 100% !important;
}

.sr-history-card__body--ltr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
}

.sr-history-card__field {
    flex: 1 1 0 !important;
    min-width: 88px !important;
    max-width: none !important;
    padding: 8px 12px !important;
    border-right: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

.sr-history-card__field--product {
    flex: 1.35 1 0 !important;
    min-width: 120px !important;
}

.sr-history-card__body--ltr .sr-history-card__field:last-child {
    border-right: none !important;
}

.sr-history-card__label {
    display: block !important;
    font-weight: 600 !important;
    color: #64748b !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
}

.sr-history-card__value {
    display: block !important;
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.sr-history-card__field--wide {
    flex: 2 1 0 !important;
    min-width: 140px !important;
    max-width: none !important;
}

@media (max-width: 720px) {
    .sr-history-card__body--ltr {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .sr-history-card__field {
        width: 100% !important;
        min-width: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .sr-history-card__body--ltr .sr-history-card__field:last-child {
        border-bottom: none !important;
    }
}

.sr-history-card__legacy {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-style: italic !important;
    padding: 8px 0 !important;
}

.sr-history-item--view .sr-history-display {
    padding-right: 4px !important;
}

.sr-history-view-summary {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #334155 !important;
}

.sr-history-fields {
    display: grid !important;
    grid-template-columns: minmax(160px, 1.1fr) minmax(120px, 0.85fr) 1fr auto !important;
    gap: 8px !important;
    align-items: end !important;
}

@media (max-width: 900px) {
    .sr-history-fields {
        grid-template-columns: 1fr !important;
    }
}

.sr-history-remove-wrap .action-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
}

.sr-history-item--view {
    background: #ffffff !important;
}

.sr-history-view-line {
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.sr-history-view-notes {
    margin-top: 6px !important;
    font-size: 12px !important;
    color: #64748b !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.sr-history-empty {
    padding: 8px 4px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.service-record-history-panel .sr-history-panel-toggle:hover,
.service-record-history-panel .sr-history-item__toggle:hover {
    background: transparent !important;
}

.service-record-history-panel .sr-history-remove:hover,
.service-record-history-panel .sr-history-remove.action-del:hover {
    filter: none !important;
    background: #dc2626 !important;
}

.service-record-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px 14px 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

.service-record-line {
    display: grid !important;
    gap: 8px !important;
    align-items: end !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.service-record-line .modal-field {
    margin-bottom: 0 !important;
}

.service-record-line--top {
    grid-template-columns: minmax(140px, 1.15fr) minmax(64px, 0.36fr) minmax(84px, 0.48fr) minmax(112px, 0.88fr) minmax(112px, 0.88fr) minmax(120px, 0.95fr) minmax(88px, 0.62fr) !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* View: product, unit, price, technical, sales, status (address on next row) */
.service-record-line--top.service-record-line--top--view {
    grid-template-columns: minmax(160px, 1.35fr) minmax(56px, 0.34fr) minmax(84px, 0.46fr) minmax(124px, 0.98fr) minmax(124px, 0.98fr) minmax(92px, 0.68fr) !important;
    gap: 12px !important;
}

.service-record-line--middle.service-record-line--middle--view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 0 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    align-items: start !important;
}

.service-record-line--middle--view .modal-field {
    margin-bottom: 0 !important;
}

.service-record-line--middle--view .sr-address-display {
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
}

.service-record-line--bottom {
    grid-template-columns: minmax(132px, 1.1fr) minmax(132px, 1.1fr) minmax(300px, 4.8fr) minmax(88px, 0.85fr) minmax(176px, 1.75fr) !important;
    align-items: center !important;
}

.service-record-line--bottom.service-record-line--bottom--view {
    grid-template-columns: minmax(148px, 1.2fr) minmax(148px, 1.2fr) minmax(88px, 0.65fr) 92px !important;
    gap: 12px !important;
    align-items: end !important;
}

.service-record-line--bottom.service-record-line--bottom--view .modal-field {
    min-width: 0 !important;
}

.service-record-line--bottom.service-record-line--bottom--view .sr-days-left {
    min-height: 40px !important;
}

.service-record-line--bottom .service-record-action--btns .service-record-action-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.service-record-action-row .btn-success.sr-add-history-btn {
    min-width: 0 !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.sr-expire-field {
    min-width: 100% !important;
}

.sr-expire-field .sr-expire-date {
    width: 100% !important;
    margin-bottom: 0 !important;
}

.sr-expire-presets {
    margin-top: 0 !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.sr-expire-presets-hint {
    display: none !important;
}

.sr-expire-presets-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: auto !important;
}

.sr-preset-chip {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    text-align: center !important;
    justify-content: center !important;
}

.sr-expire-presets-chips::-webkit-scrollbar {
    height: 10px !important;
}

.sr-expire-presets-chips::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 999px !important;
}

.sr-expire-presets-chips::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    border: 2px solid #f1f5f9 !important;
}

.sr-expire-presets-chips::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.sr-preset-chip:hover {
    background: #eff6ff !important;
    border-color: #427AB5 !important;
    color: #1e3a8a !important;
}

.service-record-row .sr-days-left {
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.service-record-row .sr-days-left.customer-list-days-left--yellow {
    color: #9a7b0d !important;
}

.service-record-row .sr-days-left.customer-list-days-left--orange {
    color: #ea580c !important;
}

.service-record-row .sr-days-left.customer-list-days-left--green {
    color: #15803d !important;
}

.service-record-row .sr-days-left.customer-list-days-left--expired {
    color: #b91c1c !important;
}

.service-record-action .action-btn {
    width: 36px !important;
    height: 36px !important;
}

.sr-picker-wrap {
    position: relative !important;
}

.sr-multi-chips {
    margin-top: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.sr-multi-input {
    width: 100% !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

.sr-multi-input-field {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    padding: 6px 6px !important;
    min-width: 120px !important;
    flex: 1 1 140px !important;
    height: 28px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #0f172a !important;
}

.sr-multi-input-field::placeholder {
    color: #94a3b8 !important;
}

.sr-chip {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.sr-chip:hover {
    border-color: #427AB5 !important;
    background: #eff6ff !important;
}

.sr-chip-x {
    font-size: 14px !important;
    line-height: 1 !important;
    color: #64748b !important;
}

/* One row height for option buttons (min-height + vertical padding) */
.sr-picker-options {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    --sr-picker-row: 37px !important;
    max-height: calc(12px + 5 * var(--sr-picker-row)) !important;
    overflow-y: auto !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
    z-index: 30 !important;
    padding: 6px !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: auto !important; /* Firefox */
}

/* Visible scrollbars (Chrome/Edge/Safari) */
.sr-picker-options::-webkit-scrollbar {
    width: 10px !important;
}

.sr-picker-options::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 999px !important;
}

.sr-picker-options::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    border: 2px solid #f1f5f9 !important;
}

.sr-picker-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.sr-picker-option {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    font-size: 13px !important;
    min-height: 37px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

.sr-picker-option:hover {
    background: #eff6ff !important;
}

.sr-picker-option.is-hidden {
    display: none !important;
}

.sr-picker-empty {
    padding: 10px 8px !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.sr-picker-empty.is-hidden {
    display: none !important;
}

.sr-picker-clear {
    color: #64748b !important;
    font-size: 12px !important;
}

/* View customer: same row layout as edit; read-only + WhatsApp instead of delete */
.service-record-row--readonly .sr-picker-wrap {
    pointer-events: none !important;
}

.customer-service-wa-btn {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 36px !important;
    padding: 0 14px !important;
    margin-left: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(37, 211, 102, 0.75) !important;
    cursor: pointer !important;
    width: auto !important;
}

.customer-service-wa-btn:hover {
    background: #20bd5a !important;
    border-color: #20bd5a !important;
    color: #ffffff !important;
}

.customer-service-wa-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* View customer service row: larger WhatsApp icon (icon-only action button) */
.service-record-row--readonly .service-record-action .action-btn.customer-service-wa-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border-radius: 14px !important;
}

.service-record-row--readonly .service-record-action .action-btn.customer-service-wa-btn svg {
    width: 20px !important;
    height: 20px !important;
}

.customer-service-wa-btn .wa-btn-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.whatsapp-token-btns {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
}

.btn-whatsapp-token {
    width: auto !important;
    max-width: none !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.btn-whatsapp-token:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

#whatsappMessagesModal .modal-card--whatsapp {
    max-width: 720px !important;
}

#whatsappMessagesModal.modal-backdrop.is-open {
    z-index: 1100 !important;
}

#whatsappMessagesModal #whatsappMessagesForm.modal-form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

#whatsappMessagesModal .whatsapp-messages-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding-top: 16px !important;
}

#whatsappMessagesModal .whatsapp-messages-actions-left .modal-cancel {
    margin-top: 8px !important;
}

#whatsappMessagesModal .whatsapp-messages-actions-left {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

#whatsappMessagesModal .whatsapp-messages-actions button,
#whatsappMessagesModal .whatsapp-messages-save-btn {
    width: auto !important;
}

.whatsapp-messages-save-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 18px !important;
    margin: 8px 0 0 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: #427ab5 !important;
    border: 1px solid rgba(53, 95, 142, 0.9) !important;
    color: #fff !important;
}

.whatsapp-messages-save-btn:hover {
    background: #355f8e !important;
    border-color: #2d4f78 !important;
}

.whatsapp-messages-send-btn {
    display: none !important;
    margin: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.whatsapp-messages-send-btn.is-visible {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 18px !important;
    margin-top: 8px !important;
    margin-left: auto !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: #25d366 !important;
    border: 1px solid rgba(37, 211, 102, 0.85) !important;
    color: #fff !important;
}

.whatsapp-messages-send-btn.is-visible:hover {
    background: #20bd5a !important;
    border-color: #20bd5a !important;
}

#whatsappMessagesModal .whatsapp-messages-field {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

#whatsappMessagesModal .whatsapp-send-phone-field {
    margin-bottom: 12px !important;
}

#whatsappMessagesModal .whatsapp-wa-phone-select {
    width: 100% !important;
    max-width: 100% !important;
}

#whatsappMessagesModal .whatsapp-messages-textarea {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    resize: vertical !important;
}

#addCustomerForm {
    max-height: min(72vh, 720px) !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: auto !important;
}

#addCustomerForm::-webkit-scrollbar {
    width: 10px !important;
}

#addCustomerForm::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 999px !important;
}

#addCustomerForm::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    border: 2px solid #f1f5f9 !important;
}

#addCustomerForm::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.modal-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

.modal-input,
.modal-select {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
}

textarea.modal-input {
    height: auto !important;
    min-height: 56px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.4 !important;
    resize: vertical !important;
}

#viewCustomerModal .modal-input[readonly] {
    background: #fff !important;
    color: #0f172a !important;
    cursor: default !important;
    opacity: 1 !important;
}

.modal-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

.modal-cancel {
    min-width: 84px !important;
    height: 38px !important;
}

.modal-confirm {
    min-width: 90px !important;
    height: 38px !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.modal-create {
    min-width: 90px !important;
    height: 38px !important;
}

.modal-confirm:hover {
    background: #b91c1c !important;
}

.action-message {
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.modal-copy-feedback {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.action-message.ok {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #065f46 !important;
}

.action-message.err {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #991b1b !important;
}

/* Profile page polish */
.profile-card {
    max-width: 760px !important;
    padding: 24px !important;
}

.profile-subtitle {
    margin-top: 6px !important;
    color: #64748b !important;
    font-size: 14px !important;
}

.profile-form {
    margin-top: 4px !important;
}

.profile-section-title {
    margin: 14px 0 10px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.profile-form .modal-field {
    margin-bottom: 14px !important;
}

.profile-form .password-input {
    padding-right: 48px !important;
}

.pagination {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 18px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    flex-wrap: wrap !important;
    font-weight: 400 !important;
}

.pagination a, .pagination span {
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    color: #64748b !important;
    background: #fff !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
    letter-spacing: 0 !important;
}

.pagination a:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.pagination .current {
    background: #427AB5 !important;
    border-color: #427AB5 !important;
    color: #fff !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.btn-secondary {
    text-decoration: none !important;
    color: #0f172a !important;
    background: #e2e8f0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.btn-secondary:hover {
    background: #cbd5e1 !important;
}

.wrap {
    max-width: 850px !important;
    margin: 50px auto !important;
    background: #fff !important;
    padding: 24px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07) !important;
}

.top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.badge {
    display: inline-block !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

a.btn {
    text-decoration: none !important;
    color: #fff !important;
    background: #ef4444 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}

.hash-page {
    margin: 30px !important;
    background: #f4f6f8 !important;
}

.box {
    max-width: 680px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 20px !important;
}

textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    height: 100px !important;
}

/* Dashboard recreate (isolated) */
.dashboard-rx {
    margin-top: 4px !important;
}

.dashboard-rx-head {
    margin-bottom: 10px !important;
}

.dashboard-rx-title {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dashboard-rx-subtitle {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.dashboard-rx-alert {
    margin: 10px 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    font-size: 13px !important;
}

.dashboard-rx-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.dashboard-rx-kpi {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.05) !important;
    padding: 14px !important;
    min-height: 106px !important;
    overflow: hidden !important;
}

.dashboard-rx-kpi::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -40% !important;
    width: 32% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)) !important;
    transform: skewX(-12deg) !important;
    animation: dashboardRxShimmer 4s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes dashboardRxShimmer {
    0% { left: -42%; }
    35% { left: 120%; }
    100% { left: 120%; }
}

.dashboard-rx-kpi-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.dashboard-rx-kpi-icon.green { background: rgba(34, 197, 94, .18) !important; color: #15803d !important; }
.dashboard-rx-kpi-icon.blue { background: rgba(59, 130, 246, .18) !important; color: #1d4ed8 !important; }
.dashboard-rx-kpi-icon.orange { background: rgba(245, 158, 11, .2) !important; color: #b45309 !important; }
.dashboard-rx-kpi-icon.red { background: rgba(239, 68, 68, .2) !important; color: #b91c1c !important; }

.dashboard-rx-kpi-value {
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
}

.dashboard-rx-kpi-label {
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.dashboard-rx-performance {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.05) !important;
    padding: 30px !important;
    margin-top: 6px !important;
}

.dashboard-rx-panel-title {
    margin: 0 0 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dashboard-rx-perf-grid {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    gap: 28px !important;
    align-items: center !important;
}

.dashboard-rx-donut svg {
    width: 210px !important;
    height: 210px !important;
    display: block !important;
}

.dashboard-rx-list {
    display: grid !important;
    gap: 12px !important;
}

.dashboard-rx-row {
    display: grid !important;
    grid-template-columns: 10px 1fr 34px !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

.dashboard-rx-row .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
}

.dashboard-rx-row .name {
    font-size: 12px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.dashboard-rx-row .count {
    text-align: right !important;
    font-size: 12px !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
}

@media (max-width: 1200px) {
    .dashboard-rx-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .dashboard-rx-perf-grid {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    .dashboard-rx-list {
        width: 100% !important;
    }
}

/* Modern dashboard recreate */
.dashboard-neo {
    margin-top: 6px !important;
    margin-bottom: 32px !important;
    padding: 8px 8px 0 !important;
}
.dashboard-neo-head { margin-bottom: 22px !important; }
.dashboard-neo-title { margin: 0 0 6px !important; font-size: 24px !important; font-weight: 700 !important; color: #111827 !important; }
.dashboard-neo-subtitle { margin: 8px 0 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important; }
.dashboard-neo-alert { margin: 16px 0 !important; padding: 14px 16px !important; border-radius: 12px !important; background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; font-size: 13px !important; }

.dashboard-neo-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin: 0 0 24px !important;
}

.dashboard-neo-kpi {
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    padding: 22px 20px !important;
    min-height: 128px !important;
}

.dashboard-neo-kpi::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -42% !important;
    width: 34% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)) !important;
    transform: skewX(-12deg) !important;
    animation: dashboardNeoShimmer 4.2s ease-in-out infinite !important;
}

@keyframes dashboardNeoShimmer { 0%{left:-42%;} 35%{left:120%;} 100%{left:120%;} }

.dashboard-neo-kpi-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; }
.dashboard-neo-kpi-icon { width: 42px !important; height: 42px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.dashboard-neo-kpi-icon svg { width: 22px !important; height: 22px !important; display: block !important; }
.dashboard-neo-kpi-icon.green { background: rgba(34,197,94,.18) !important; color: #15803d !important; }
.dashboard-neo-kpi-icon.blue { background: rgba(59,130,246,.18) !important; color: #1d4ed8 !important; }
.dashboard-neo-kpi-icon.orange { background: rgba(245,158,11,.2) !important; color: #b45309 !important; }
.dashboard-neo-kpi-icon.red { background: rgba(239,68,68,.2) !important; color: #b91c1c !important; }
.dashboard-neo-kpi-chip { height: 26px !important; padding: 0 12px !important; border-radius: 999px !important; background: #f3f4f6 !important; color: #4b5563 !important; font-size: 11px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; }
.dashboard-neo-kpi-value { font-size: 24px !important; line-height: 1.05 !important; font-weight: 800 !important; color: #111827 !important; font-variant-numeric: tabular-nums !important; }
.dashboard-neo-kpi-label { margin-top: 8px !important; font-size: 12px !important; color: #6b7280 !important; font-weight: 600 !important; }

.dashboard-neo-performance {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    padding: 40px 36px !important;
    margin-top: 8px !important;
}

.dashboard-neo-panel-title { margin: 0 0 22px !important; font-size: 16px !important; font-weight: 700 !important; color: #111827 !important; }
.dashboard-neo-perf-grid { display: grid !important; grid-template-columns: 248px 1fr !important; gap: 40px !important; align-items: center !important; padding: 8px 0 !important; }
.dashboard-neo-perf-grid--no-donut { grid-template-columns: 1fr !important; }
.dashboard-neo-donut svg { width: 232px !important; height: 232px !important; display: block !important; }
.dashboard-neo-list { display: grid !important; gap: 16px !important; }
.dashboard-neo-row { display: grid !important; grid-template-columns: 10px 1fr 36px !important; gap: 12px !important; align-items: center !important; padding: 16px 18px !important; border-radius: 12px !important; background: #f8fafc !important; border: 1px solid #e5e7eb !important; }
.dashboard-neo-row .dot { width: 10px !important; height: 10px !important; border-radius: 999px !important; }
.dashboard-neo-row .name { font-size: 12px !important; color: #4b5563 !important; font-weight: 600 !important; }
.dashboard-neo-row .count { text-align: right !important; font-size: 12px !important; color: #111827 !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; }

@media (max-width: 1200px) {
    .dashboard-neo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dashboard-neo-perf-grid { grid-template-columns: 1fr !important; justify-items: center !important; }
    .dashboard-neo-list { width: 100% !important; }
}