/* ========================================
   ORDER MANAGER — Styles
   Same Design System as BuildPro Dashboard
   ======================================== */

/* ========== MISSING ICON COLORS ========== */
.stat-card-icon.green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.stat-card-icon.red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* ========== PLAN USAGE BANNER ========== */
.plan-usage-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-left: 4px solid #7c3aed;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.dark .plan-usage-banner {
    background: #4f4a54;
    border-color: #635e69;
    border-left-color: #7c3aed;
}
.plan-usage-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(124,58,237,0.2);
}
body.dark .plan-badge { background: rgba(124,58,237,0.2); color: #a78bfa; }
.plan-usage-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.plan-usage-title {
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
}
body.dark .plan-usage-title { color: #8896ab; }
.plan-usage-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.plan-usage-bar {
    flex: 1;
    height: 6px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}
body.dark .plan-usage-bar { background: #5a5560; }
.plan-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.plan-usage-fill.danger { background: linear-gradient(90deg, #ef4444, #f87171); }
.plan-usage-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.plan-usage-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: #5a5560;
    white-space: nowrap;
}
body.dark .plan-usage-count { color: #e2e8f0; }
.plan-usage-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.plan-days-left {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #64748b;
}
body.dark .plan-days-left { color: #8896ab; }
.plan-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.plan-upgrade-btn:hover { background: #6d28d9; transform: translateY(-1px); }

/* ========== FUNNEL SECTION ========== */
.funnel-section {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.dark .funnel-section { background: #4f4a54; border-color: #635e69; }
.funnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.funnel-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #5a5560;
    margin: 0;
}
body.dark .funnel-header h3 { color: #e2e8f0; }
.funnel-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
}
.funnel-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.funnel-step {
    display: grid;
    align-items: center;
    grid-template-columns: 100px 1fr 80px;
    gap: 14px;
}
.funnel-step-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    text-align: right;
}
body.dark .funnel-step-label { color: #8896ab; }
.funnel-bar-wrap {
    height: 10px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}
body.dark .funnel-bar-wrap { background: #5a5560; }
.funnel-bar {
    height: 100%;
    border-radius: 99px;
    transition: width 0.7s cubic-bezier(.4,0,.2,1);
}
.funnel-new      { background: #3b82f6; }
.funnel-confirmed { background: #10b981; }
.funnel-shipped  { background: #7c3aed; }
.funnel-delivered { background: #06b6d4; }
.funnel-returned { background: #f87171; }
.funnel-step-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5a5560;
}
body.dark .funnel-step-count { color: #e2e8f0; }
.funnel-pct {
    font-size: 0.72rem;
    font-weight: 500;
    color: #10b981;
}
.funnel-pct-red { color: #ef4444 !important; }


.dashboard-body {
    background: var(--sys-bg, #ebebeb) !important;
    flex-direction: column !important;
}

body.dark.dashboard-body,
body.dark {
    background: var(--sys-bg, #3a363f) !important;
}

/* ========== GLOBAL TOPBAR (full-width) ========== */
.topbar-global {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 28px;
    min-height: 60px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    width: 100%;
    box-sizing: border-box;
    transition: min-height 0.2s ease;
}

body.dark .topbar-global {
    background: #3a363f;
    border-color: #5a5560;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Sidebar fully hidden */
.sidebar.hidden {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.sidebar-toggle-btn {
    display: flex !important;
    transition: transform 0.3s ease;
}

/* ========== APP LAYOUT (sidebar + main below topbar) ========== */
.app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ========== SIDEBAR COLLAPSE — Desktop Toggle ========== */
.sidebar.collapsed {
    width: 70px !important;
    min-width: 70px !important;
}

.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .link-badge,
.sidebar.collapsed .credits-card,
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-menu-btn,
.sidebar.collapsed .logo-text {
    display: none !important;
}

.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 12px;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 16px 8px;
}

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

.sidebar.collapsed .sidebar-collapse-btn {
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

/* RTL sidebar collapsed */
body[dir="rtl"] .sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 12px;
}

.topbar {
    display: none !important;
}

.topbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
}

.topbar-center a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.topbar-center a:hover {
    opacity: 0.85;
}

.topbar-logo {
    height: 42px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
    transition: height 0.2s ease;
}

.sidebar-header .logo {
    display: none;
}

.logo-img {
    height: 38px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
}

body.dark .topbar-logo,
body.dark .logo-img {
    filter: brightness(1.1) drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

body.dark .topbar {
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom-color: #5a5560 !important;
}

/* Stat cards subtle background in light mode */
.stat-card {
    background: #f7f9fc;
    border: 1px solid #e0e6ed;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 1;
}

/* ========== DARK MODE COMPREHENSIVE OVERRIDES ========== */

/* --- General text & elements --- */
body.dark .breadcrumb .current { color: #ffffff; }
body.dark .breadcrumb { color: #7c8da4; }
body.dark .topbar-btn { color: #a0b0c4; border-color: #756f7c; }
body.dark .topbar-btn:hover { background: rgba(124,58,237,0.15); color: #c4b5fd; border-color: rgba(124,58,237,0.35); }
body.dark .notification-btn .notif-dot { border-color: #3a363f; }
body.dark .sidebar-search { background: #4f4a54; border-color: #635e69; }
body.dark .sidebar-search input { color: #e8edf4; }
body.dark .sidebar-search kbd { background: #5a5560; border-color: #635e69; color: #8896ab; }

/* --- Stat cards dark --- */
body.dark .stat-card { background: #4f4a54; border-color: #635e69; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
body.dark .stat-card:hover { box-shadow: 0 6px 24px rgba(124,58,237,0.15), 0 2px 8px rgba(0,0,0,0.25); border-color: rgba(124,58,237,0.3); transform: translateY(-3px); }
body.dark .stat-card-value { color: #ffffff; }
body.dark .stat-card-label { color: #8896ab; }
body.dark .stat-card-icon.blue { background: rgba(59,130,246,0.2); color: #60a5fa; }
body.dark .stat-card-icon.purple { background: rgba(124,58,237,0.2); color: #a78bfa; }
body.dark .stat-card-icon.cyan { background: rgba(6,182,212,0.2); color: #22d3ee; }
body.dark .stat-card-icon.amber { background: rgba(245,158,11,0.2); color: #fbbf24; }
body.dark .stat-card-icon.green { background: rgba(16,185,129,0.2); color: #34d399; }
body.dark .stat-card-icon.red { background: rgba(239,68,68,0.2); color: #f87171; }

/* --- Mobile sidebar btn --- */
body.dark .mobile-sidebar-btn { color: #8896ab; }

/* --- Link badges dark --- */
body.dark .link-badge.popular { background: rgba(239,68,68,0.15); }
body.dark .link-badge.new { background: rgba(16,185,129,0.15); }
body.dark .link-badge.sale { background: rgba(245,158,11,0.15); }

/* --- Section title row --- */
body.dark .section-title-row h2 { color: #f1f5f9; }

/* ========== SYSTEM SWITCHER ========== */
.system-switcher {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--white);
    border-bottom: 2px solid var(--primary-200);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-xl);
}

.system-switcher.open {
    transform: translateY(0);
}

.switcher-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 32px;
    max-width: 900px;
    margin: 0 auto;
}

.switcher-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--gray-50);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
    position: relative;
    min-width: 200px;
}

.switcher-card:hover {
    border-color: var(--primary-200);
    background: var(--primary-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.switcher-card.active {
    border-color: var(--primary);
    background: var(--primary-50);
    box-shadow: 0 0 20px rgba(124,58,237,0.15);
}

.switcher-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.switcher-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.switcher-info strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
}

.switcher-info span {
    font-size: 0.72rem;
    color: var(--gray);
}

.switcher-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
}

.active-badge {
    background: var(--success);
    color: #fff;
}

.locked-badge {
    background: var(--gray-light);
    color: var(--dark-600);
}

.switcher-toggle {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: #fff;
    border: 3px solid var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
    z-index: 201;
}

.switcher-toggle:hover {
    transform: translateX(-50%) scale(1.1);
}

.system-switcher.open .switcher-toggle i {
    transform: rotate(180deg);
}

body.dark .system-switcher {
    background: #3a363f;
    border-color: #635e69;
}

body.dark .switcher-card {
    background: #5a5560;
}

body.dark .switcher-card.active {
    background: rgba(124,58,237,0.15);
    border-color: var(--primary);
}

body.dark .switcher-info strong { color: #f8fafc; }
body.dark .switcher-toggle { border-color: #3a363f; }

/* ========== LANGUAGE TOGGLE ========== */
.lang-toggle {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--gray-50);
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 20px;
    padding: 2px;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition);
    height: 32px;
    gap: 0;
}

body.dark .lang-toggle { background: #4f4a54; border-color: #635e69; }

.lang-option {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 26px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray);
    transition: color 0.3s ease;
    border-radius: 14px;
    letter-spacing: -0.3px;
}

.lang-option.active { color: #fff; }

.lang-slider {
    position: absolute;
    top: 2px;
    width: 34px;
    height: 26px;
    background: var(--gradient-primary);
    border-radius: 14px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

/* 3-option language toggle (AR / Fr / En) */
.lang-toggle.lang-toggle-3 { height: 32px; padding: 2px; }
.lang-toggle.lang-toggle-3 .lang-option { width: 32px; height: 26px; }
.lang-toggle.lang-toggle-3 .lang-slider { width: 32px; }
.lang-toggle.lang-toggle-3[data-active="ar"] .lang-slider { transform: translateX(0); }
.lang-toggle.lang-toggle-3[data-active="fr"] .lang-slider { transform: translateX(32px); }
.lang-toggle.lang-toggle-3[data-active="en"] .lang-slider { transform: translateX(64px); }
body[dir="rtl"] .lang-toggle.lang-toggle-3[data-active="ar"] .lang-slider { transform: translateX(0); }
body[dir="rtl"] .lang-toggle.lang-toggle-3[data-active="fr"] .lang-slider { transform: translateX(-32px); }
body[dir="rtl"] .lang-toggle.lang-toggle-3[data-active="en"] .lang-slider { transform: translateX(-64px); }

/* RTL: slider starts on the right */
body[dir="rtl"] .lang-slider { right: 2px; transform: translateX(0); }
body[dir="rtl"] .lang-toggle[data-active="fr"] .lang-slider { transform: translateX(-36px); }

/* LTR: slider starts on the left */
body[dir="ltr"] .lang-slider { left: 2px; transform: translateX(0); }
body[dir="ltr"] .lang-toggle[data-active="fr"] .lang-slider { transform: translateX(36px); }

.lang-toggle:hover { border-color: var(--primary-200); box-shadow: 0 0 12px rgba(124,58,237,0.1); }

/* ========== RTL OVERRIDES ========== */
body[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.06);
}

body[dir="rtl"] .breadcrumb { direction: rtl; }

/* ========== STATS 6 COLUMNS ========== */
.stats-6 {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px;
}

@media (max-width: 1200px) {
    .stats-6 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
    .stats-6 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ========== REVENUE CARD ========== */
.revenue-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 28px;
    padding-bottom: 20px; /* réduit pour laisser les labels visibles */
    margin-bottom: 32px;
    position: relative;
    overflow: visible; /* permet aux labels/tooltips de sortir sans être coupés */
    /* on recrée le border-radius clip avec un pseudo-overlay */
}

/* Gradient top border via box-shadow interne (remplace overflow:hidden + ::before) */
/* Premium batch 1: the rainbow top border is gone — the card keeps its hairline border only. */
.revenue-card::before { content: none; }

body.dark .revenue-card { background: #4f4a54; border-color: #635e69; }

.revenue-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.revenue-header h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray);
    margin-bottom: 4px;
}

.revenue-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #5a5560, #334155);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark .revenue-amount {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.revenue-stats {
    display: flex;
    gap: 24px;
}

.rev-stat {
    text-align: center;
}

.rev-label {
    display: block;
    font-size: 0.72rem;
    color: var(--gray);
    margin-bottom: 4px;
}

.rev-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.rev-value.green { color: var(--success); }
.rev-value.red { color: var(--error); }

.revenue-chart, .report-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.04);
}

body.dark .revenue-chart, body.dark .report-chart { border-color: #635e69; }

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, #c4b5fd, #ddd6fe);
    border-radius: 8px 8px 0 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 8px;
}

.chart-bar:hover, .chart-bar.active {
    background: var(--gradient-primary);
    box-shadow: 0 -4px 16px rgba(124,58,237,0.25);
}

.chart-bar::after {
    content: attr(data-value);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--dark-600);
    opacity: 0;
    transition: opacity var(--transition);
}

.chart-bar:hover::after, .chart-bar.active::after { opacity: 1; }

.chart-bar::before {
    content: attr(data-label);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--gray);
    white-space: nowrap;
}

/* ========== TABLE ENHANCEMENTS ========== */
.table-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
}

.table-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #3b82f6, #06b6d4);
    z-index: 1;
}

body.dark .table-card { background: #4f4a54; border-color: #635e69; }

.table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

body.dark .table-card-header { border-color: #635e69; }

.table-card-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-responsive { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead { background: var(--gray-50); }
body.dark thead { background: #3a363f; }

th {
    padding: 8px 6px;
    text-align: right;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray);
    white-space: nowrap;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

td {
    padding: 8px 6px;
    font-size: 0.85rem;
    color: var(--dark-600);
    border-top: 1px solid rgba(0,0,0,0.04);
    white-space: nowrap;
    vertical-align: middle;
}

body.dark td { border-color: #635e69; color: #d0d8e4; }

tr:hover td { background: rgba(124,58,237,0.03); }

/* ===== ORDER ROW COMPONENTS ===== */
.ord-img { width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;border:2px solid rgba(124,58,237,0.1);transition:transform .2s,box-shadow .2s;cursor:pointer }
.ord-img:hover { transform:scale(1.08);box-shadow:0 4px 16px rgba(124,58,237,0.18) }
.ord-img-placeholder { width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;border:2px solid rgba(124,58,237,0.1) }
.ord-id {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.86rem;
    color: #ffffff;
    letter-spacing: -0.2px;
    background: #ef4444;
    border: 1px solid #dc2626;
}
body.dark .ord-id {
    color: #ffffff;
    background: #ef4444;
    border-color: #b91c1c;
}
.ord-phone { display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#eff6ff,#dbeafe);padding:5px 12px;border-radius:8px;font-family:'Space Grotesk',monospace;font-size:0.84rem;font-weight:600;color:#2563eb;direction:ltr;letter-spacing:0.5px;border:1px solid rgba(37,99,235,0.15) }
body.dark .ord-phone { background:rgba(37,99,235,0.1);border-color:rgba(37,99,235,0.2);color:#60a5fa }
.ord-location { display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#faf5ff,#f3e8ff);padding:4px 10px;border-radius:8px;font-size:0.78rem;font-weight:500;color:#7c3aed;border:1px solid rgba(124,58,237,0.12) }
body.dark .ord-location { background:rgba(124,58,237,0.1);border-color:rgba(124,58,237,0.2);color:#a78bfa }
.ord-location-sub,
.ord-location-address {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
    max-width: 280px;
    font-size: 0.74rem;
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
}
.ord-location-address {
    font-size: 0.72rem;
    color: #64748b;
}
.ord-location-sub span:last-child,
.ord-location-address span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ord-location-label {
    flex-shrink: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: #94a3b8;
    font-weight: 700;
}
body.dark .ord-location-sub,
body.dark .ord-location-address { color: #cbd5e1; }
body.dark .ord-location-address { color: #94a3b8; }
body.dark .ord-location-label { color: #64748b; }
.ord-price { font-weight:700;font-size:0.88rem;color:#5a5560;white-space:nowrap }
body.dark .ord-price { color:#e2e8f0 }
.ord-actions { display:flex;align-items:center;gap:3px }
.ord-action-btn { width:30px;height:30px;border-radius:8px;border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s }
.ord-action-btn:hover { transform:translateY(-2px) }
.ord-action-btn.act-edit { background:rgba(59,130,246,0.1);color:#3b82f6 }
.ord-action-btn.act-edit:hover { background:#3b82f6;color:#fff;box-shadow:0 3px 8px rgba(59,130,246,0.3) }
.ord-action-btn.act-note { background:rgba(245,158,11,0.1);color:#f59e0b }
.ord-action-btn.act-note:hover { background:#f59e0b;color:#fff;box-shadow:0 3px 8px rgba(245,158,11,0.3) }
.ord-action-btn.act-print { background:rgba(16,185,129,0.1);color:#10b981 }
.ord-action-btn.act-print:hover { background:#10b981;color:#fff;box-shadow:0 3px 8px rgba(16,185,129,0.3) }
.ord-action-btn.act-view { background:rgba(124,58,237,0.1);color:#7c3aed }
.ord-action-btn.act-view:hover { background:#7c3aed;color:#fff;box-shadow:0 3px 8px rgba(124,58,237,0.3) }
body.dark .ord-action-btn.act-edit { background:rgba(59,130,246,0.15);color:#60a5fa }
body.dark .ord-action-btn.act-note { background:rgba(245,158,11,0.15);color:#fbbf24 }
body.dark .ord-action-btn.act-print { background:rgba(16,185,129,0.15);color:#34d399 }
body.dark .ord-action-btn.act-view { background:rgba(124,58,237,0.15);color:#a78bfa }
.ord-check { width:16px;height:16px;accent-color:var(--primary);cursor:pointer }

/* Delivery toggle */
.deliv-toggle { padding:4px 10px;border-radius:8px;font-size:0.72rem;font-weight:600;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px }
.deliv-toggle.tag-home { background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e }
.deliv-toggle.tag-desk { background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0369a1 }
.deliv-toggle:hover { transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,0.1) }

/* Edit Order Modal */
.edit-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);opacity:0;transition:opacity .2s }
.edit-modal-overlay.show { opacity:1 }
.edit-modal { background:var(--white);border-radius:16px;width:90%;max-width:520px;box-shadow:0 24px 48px rgba(0,0,0,0.2);transform:translateY(20px);transition:transform .2s;overflow:hidden }
.edit-modal-overlay.show .edit-modal { transform:translateY(0) }
body.dark .edit-modal { background:#5a5560 }
.edit-modal-header { background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between }
.edit-modal-header h3 { font-size:1rem;font-weight:700;margin:0;display:flex;align-items:center;gap:8px }
.edit-modal-header .close-btn { background:rgba(255,255,255,0.2);border:none;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px }
.edit-modal-header .close-btn:hover { background:rgba(255,255,255,0.3) }
.edit-modal-product { display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--gray-50);border-bottom:1px solid rgba(0,0,0,0.06) }
body.dark .edit-modal-product { background:#4f4a54 }
.edit-modal-product img { width:60px;height:60px;border-radius:12px;object-fit:cover;border:2px solid rgba(124,58,237,0.15) }
.edit-modal-product .prod-info { flex:1 }
.edit-modal-product .prod-name { font-weight:700;font-size:0.9rem }
.edit-modal-product .prod-id { font-size:0.75rem;color:var(--gray) }
.edit-modal-body { padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px }
.edit-field { display:flex;flex-direction:column;gap:4px }
.edit-field.full { grid-column:1/-1 }
.edit-field label { font-size:0.72rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:0.3px }
.edit-field input,.edit-field select,.edit-field textarea { border:1.5px solid rgba(0,0,0,0.1);border-radius:8px;padding:8px 12px;font-size:0.85rem;font-family:inherit;outline:none;transition:border-color .2s;background:var(--white) }
.edit-field input:focus,.edit-field select:focus,.edit-field textarea:focus { border-color:var(--primary) }
body.dark .edit-field input,body.dark .edit-field select,body.dark .edit-field textarea { background:#4f4a54;border-color:#756f7c;color:#e2e8f0 }
.edit-modal-footer { padding:12px 20px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid rgba(0,0,0,0.06) }
.edit-modal-footer .btn-save { background:var(--primary);color:#fff;border:none;padding:8px 20px;border-radius:8px;font-weight:600;cursor:pointer;font-size:0.85rem }
.edit-modal-footer .btn-save:hover { opacity:0.9 }
.edit-modal-footer .btn-cancel { background:transparent;border:1.5px solid rgba(0,0,0,0.1);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:0.85rem;color:var(--dark-600) }

/* ==============================================================
   ✦ EDIT ORDER MODAL — V2 (flat French-analytics style)
   Full-width sidebar layout · sectioned cards · sticky summary
   ============================================================== */
.eo2-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity .2s ease;
    padding: 16px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.eo2-overlay.show { opacity: 1; }

.eo2-modal {
    width: 100%;
    max-width: 1180px;
    height: 92vh;
    max-height: 860px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(14px) scale(.99);
    transition: transform .25s cubic-bezier(.2,.9,.25,1.05);
}
.eo2-overlay.show .eo2-modal { transform: translateY(0) scale(1); }
body.dark .eo2-modal { background: #1c1d20; }

/* TOP BAR */
.eo2-topbar {
    height: 60px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #eef0f4;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
body.dark .eo2-topbar { background: #1c1d20; border-bottom-color: rgba(255,255,255,0.06); }
.eo2-topbar-left { display: flex; align-items: center; gap: 12px; }
.eo2-iconbtn {
    width: 34px; height: 34px;
    background: #f6f7f9; border: 1px solid #eef0f4; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: #475569;
    transition: background .15s, color .15s;
}
.eo2-iconbtn:hover { background: #eef0f4; color: #0f172a; }
body.dark .eo2-iconbtn { background: #25262a; border-color: rgba(255,255,255,0.06); color: #cbd5e1; }
body.dark .eo2-iconbtn:hover { background: #2e2f33; color: #f1f5f9; }

.eo2-crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: #64748b; }
.eo2-crumb strong { color: #0f172a; font-weight: 600; }
body.dark .eo2-crumb { color: #94a3b8; }
body.dark .eo2-crumb strong { color: #f1f5f9; }

.eo2-topbar-right { display: flex; gap: 8px; }
.eo2-btn-ghost {
    background: transparent; border: 1px solid #e2e6ec;
    color: #475569; font-weight: 600;
    padding: 8px 16px; border-radius: 9px;
    font-size: 0.86rem; cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.eo2-btn-ghost:hover { background: #f6f7f9; border-color: #cbd5e1; }
body.dark .eo2-btn-ghost { color: #cbd5e1; border-color: rgba(255,255,255,0.1); }
body.dark .eo2-btn-ghost:hover { background: #25262a; }

.eo2-btn-primary {
    background: #111827; color: #fff; border: 1px solid #111827;
    padding: 8px 18px; border-radius: 9px;
    font-size: 0.86rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .12s;
    font-family: inherit;
}
.eo2-btn-primary:hover { background: #000; }
.eo2-btn-primary:active { transform: scale(.98); }
body.dark .eo2-btn-primary { background: #f8fafc; color: #0f172a; border-color: #f8fafc; }
body.dark .eo2-btn-primary:hover { background: #fff; }

/* BODY (3-column) */
.eo2-body {
    flex: 1;
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    overflow: hidden;
    background: #fafbfc;
}
body.dark .eo2-body { background: #18191c; }

/* LEFT NAV */
.eo2-nav {
    border-right: 1px solid #eef0f4;
    background: #fff;
    padding: 18px 14px;
    overflow-y: auto;
}
body.dark .eo2-nav { background: #1c1d20; border-right-color: rgba(255,255,255,0.06); }

.eo2-nav-card {
    background: #f6f7f9;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}
body.dark .eo2-nav-card { background: #25262a; border-color: rgba(255,255,255,0.06); }
.eo2-nav-prod { display: flex; gap: 10px; align-items: center; }
.eo2-nav-prod img, .eo2-nav-prod-emoji {
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    border: 1px solid #eef0f4;
    flex-shrink: 0;
}
body.dark .eo2-nav-prod img, body.dark .eo2-nav-prod-emoji { background: #1c1d20; border-color: rgba(255,255,255,0.06); }
.eo2-nav-prod-id { font-size: 0.72rem; color: #94a3b8; font-weight: 600; letter-spacing: 0.3px; }
.eo2-nav-prod-name { font-size: 0.82rem; font-weight: 600; color: #0f172a; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark .eo2-nav-prod-name { color: #f1f5f9; }

.eo2-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.eo2-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.86rem; font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.eo2-nav-link:hover { background: #f6f7f9; color: #0f172a; }
.eo2-nav-link.active { background: #111827; color: #fff; }
.eo2-nav-num { font-size: 0.7rem; font-weight: 700; opacity: 0.65; letter-spacing: 0.4px; min-width: 18px; }
.eo2-nav-link.active .eo2-nav-num { opacity: 0.7; }
body.dark .eo2-nav-link { color: #94a3b8; }
body.dark .eo2-nav-link:hover { background: #25262a; color: #f1f5f9; }
body.dark .eo2-nav-link.active { background: #f8fafc; color: #0f172a; }

/* CENTER FORM */
.eo2-form {
    overflow-y: auto;
    padding: 24px 28px 60px;
    scroll-behavior: smooth;
}

.eo2-section {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 16px;
    scroll-margin-top: 16px;
}
body.dark .eo2-section { background: #1c1d20; border-color: rgba(255,255,255,0.06); }

.eo2-sec-head {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #eef0f4;
}
body.dark .eo2-sec-head { border-bottom-color: rgba(255,255,255,0.06); }
.eo2-sec-num {
    width: 32px; height: 32px;
    background: #111827; color: #fff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px;
    flex-shrink: 0;
}
body.dark .eo2-sec-num { background: #f8fafc; color: #0f172a; }
.eo2-sec-titles { flex: 1; }
.eo2-sec-title {
    font-size: 0.96rem; font-weight: 700; color: #0f172a;
    margin: 0; display: inline-flex; align-items: center; gap: 7px;
}
body.dark .eo2-sec-title { color: #f1f5f9; }
.eo2-sec-title i { color: #64748b; }
.eo2-sec-sub { font-size: 0.78rem; color: #94a3b8; margin: 3px 0 0; }

.eo2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eo2-field { display: flex; flex-direction: column; gap: 6px; }
.eo2-field.full { grid-column: 1 / -1; }
.eo2-field label {
    font-size: 0.78rem; font-weight: 600;
    color: #475569;
    display: flex; align-items: baseline; gap: 4px;
}
body.dark .eo2-field label { color: #cbd5e1; }
.eo2-req { color: #ef4444; font-size: 0.78rem; }
.eo2-opt { color: #94a3b8; font-weight: 400; font-size: 0.74rem; }

.eo2-field input, .eo2-field select, .eo2-field textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 0.88rem;
    color: #0f172a;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.eo2-field input:focus, .eo2-field select:focus, .eo2-field textarea:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.06);
}
.eo2-field input::placeholder, .eo2-field textarea::placeholder { color: #cbd5e1; }
body.dark .eo2-field input, body.dark .eo2-field select, body.dark .eo2-field textarea {
    background: #25262a; border-color: rgba(255,255,255,0.08); color: #f1f5f9;
}
body.dark .eo2-field input:focus, body.dark .eo2-field select:focus, body.dark .eo2-field textarea:focus {
    border-color: #f8fafc; box-shadow: 0 0 0 3px rgba(248,250,252,0.08);
}
.eo2-field textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.eo2-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 32px;
}
.eo2-mono { font-family: 'Space Grotesk', 'JetBrains Mono', monospace; letter-spacing: 0.3px; }

/* Stepper */
.eo2-stepper {
    display: flex; align-items: stretch;
    border: 1px solid #e2e6ec;
    border-radius: 9px; overflow: hidden;
}
.eo2-stepper input {
    border: none !important;
    text-align: center;
    font-weight: 700; font-size: 1rem;
    box-shadow: none !important;
    border-radius: 0;
}
.eo2-stepper button {
    width: 38px;
    background: #f6f7f9; border: none;
    cursor: pointer;
    color: #0f172a; font-size: 1.1rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.eo2-stepper button:hover { background: #eef0f4; }
body.dark .eo2-stepper { border-color: rgba(255,255,255,0.08); }
body.dark .eo2-stepper button { background: #2e2f33; color: #f1f5f9; }
body.dark .eo2-stepper button:hover { background: #3a3b40; }

/* Suffix */
.eo2-suffix { position: relative; }
.eo2-suffix input { padding-right: 42px; }
.eo2-suffix span {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 0.78rem; color: #94a3b8; font-weight: 600;
    pointer-events: none;
}

/* Radio cards (delivery type) */
.eo2-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eo2-rcard {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid #e2e6ec;
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.eo2-rcard input { display: none; }
.eo2-rcard i { color: #94a3b8; flex-shrink: 0; }
.eo2-rcard strong { display: block; font-size: 0.88rem; font-weight: 600; color: #0f172a; }
.eo2-rcard small { font-size: 0.74rem; color: #94a3b8; }
.eo2-rcard:hover { border-color: #cbd5e1; }
.eo2-rcard.active { border-color: #111827; background: #fafbfc; }
.eo2-rcard.active i { color: #111827; }
body.dark .eo2-rcard { background: #25262a; border-color: rgba(255,255,255,0.08); }
body.dark .eo2-rcard strong { color: #f1f5f9; }
body.dark .eo2-rcard.active { border-color: #f8fafc; background: #2e2f33; }
body.dark .eo2-rcard.active i { color: #f8fafc; }

/* Status chips */
.eo2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eo2-chip {
    background: #fff; border: 1.5px solid #e2e6ec;
    color: #475569;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
    font-family: inherit;
}
.eo2-chip:hover { border-color: #cbd5e1; }
.eo2-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--chip-dot, #94a3b8);
}
.eo2-chip.active {
    background: #0f172a; color: #fff; border-color: #0f172a;
}
.eo2-chip.active .eo2-chip-dot { background: #fff; }
body.dark .eo2-chip { background: #25262a; border-color: rgba(255,255,255,0.08); color: #cbd5e1; }
body.dark .eo2-chip.active { background: #f8fafc; color: #0f172a; border-color: #f8fafc; }
body.dark .eo2-chip.active .eo2-chip-dot { background: #0f172a; }

/* Carriers */
.eo2-carriers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.eo2-carrier {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1.5px solid #e2e6ec;
    border-radius: 11px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.eo2-carrier input { display: none; }
.eo2-carrier img { width: 44px; height: 30px; object-fit: contain; flex-shrink: 0; }
.eo2-carrier-fb {
    width: 44px; height: 30px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    flex-shrink: 0;
}
.eo2-carrier strong { display: block; font-size: 0.84rem; font-weight: 600; color: #0f172a; }
.eo2-carrier small { font-size: 0.72rem; color: #94a3b8; display: block; }
.eo2-carrier-tick { color: #10b981; opacity: 0; margin-left: auto; transition: opacity .15s; }
.eo2-carrier:hover { border-color: #cbd5e1; }
.eo2-carrier.active { border-color: #10b981; background: #f0fdf4; }
.eo2-carrier.active .eo2-carrier-tick { opacity: 1; }
body.dark .eo2-carrier { background: #25262a; border-color: rgba(255,255,255,0.08); }
body.dark .eo2-carrier strong { color: #f1f5f9; }
body.dark .eo2-carrier.active { background: rgba(16,185,129,0.1); border-color: #10b981; }

/* Alert */
.eo2-alert {
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 9px; padding: 10px 12px;
    color: #92400e; font-size: 0.84rem;
    display: flex; align-items: center; gap: 8px;
}
.eo2-link { background: transparent; border: none; color: #92400e; font-weight: 700; cursor: pointer; padding: 0; margin-left: auto; text-decoration: underline; font-family: inherit; font-size: 0.84rem; }

/* RIGHT ASIDE */
.eo2-aside {
    border-left: 1px solid #eef0f4;
    background: #fff;
    padding: 18px 16px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
}
body.dark .eo2-aside { background: #1c1d20; border-left-color: rgba(255,255,255,0.06); }

.eo2-aside-card {
    background: #fafbfc;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 14px;
}
body.dark .eo2-aside-card { background: #25262a; border-color: rgba(255,255,255,0.06); }
.eo2-aside-label {
    font-size: 0.7rem; font-weight: 600;
    color: #94a3b8; text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 12px;
}
.eo2-aside-rows { display: flex; flex-direction: column; gap: 8px; }
.eo2-aside-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.84rem; color: #64748b; }
.eo2-aside-row strong { color: #0f172a; font-weight: 600; }
body.dark .eo2-aside-row { color: #94a3b8; }
body.dark .eo2-aside-row strong { color: #f1f5f9; }
.eo2-aside-divider { height: 1px; background: #eef0f4; margin: 10px 0; }
body.dark .eo2-aside-divider { background: rgba(255,255,255,0.06); }
.eo2-aside-total { display: flex; justify-content: space-between; align-items: baseline; }
.eo2-aside-total span { font-size: 0.86rem; font-weight: 600; color: #0f172a; }
.eo2-aside-total strong { font-size: 1.4rem; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; }
body.dark .eo2-aside-total span, body.dark .eo2-aside-total strong { color: #f1f5f9; }

.eo2-aside-meta {
    display: flex; flex-direction: column; gap: 6px;
    padding: 4px 6px;
    margin-top: auto;
}
.eo2-meta-row { font-size: 0.76rem; color: #94a3b8; display: inline-flex; align-items: center; gap: 6px; }

/* Responsive */
@media (max-width: 980px) {
    .eo2-modal { height: 96vh; max-height: none; border-radius: 14px; }
    .eo2-body { grid-template-columns: 1fr; }
    .eo2-nav, .eo2-aside { border: none; border-bottom: 1px solid #eef0f4; max-height: none; }
    .eo2-nav { padding-bottom: 10px; }
    .eo2-nav-list { flex-direction: row; overflow-x: auto; gap: 4px; }
    .eo2-nav-link { white-space: nowrap; flex-shrink: 0; }
    .eo2-aside { order: 99; }
    .eo2-grid, .eo2-radio-cards { grid-template-columns: 1fr; }
    .eo2-form { padding: 18px; }
}

/* RTL */
html[dir="rtl"] .eo2-iconbtn i { transform: scaleX(-1); }
html[dir="rtl"] .eo2-aside { border-left: none; border-right: 1px solid #eef0f4; }
html[dir="rtl"] .eo2-nav { border-right: none; border-left: 1px solid #eef0f4; }
html[dir="rtl"] .eo2-link { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .eo2-carrier-tick { margin-left: 0; margin-right: auto; }
html[dir="rtl"] body.dark .eo2-aside { border-right-color: rgba(255,255,255,0.06); }
html[dir="rtl"] body.dark .eo2-nav { border-left-color: rgba(255,255,255,0.06); }

/* ===== NOTE MODAL ===== */
.note-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);opacity:0;transition:opacity .2s }
.note-modal-overlay.show { opacity:1 }
.note-modal { background:var(--white);border-radius:16px;padding:24px;width:90%;max-width:420px;box-shadow:0 24px 48px rgba(0,0,0,0.15);transform:translateY(20px);transition:transform .2s }
.note-modal-overlay.show .note-modal { transform:translateY(0) }
body.dark .note-modal { background:#5a5560 }
.note-modal h3 { margin:0 0 16px;font-size:1rem;display:flex;align-items:center;gap:8px }
.note-modal textarea { width:100%;min-height:100px;border:1.5px solid rgba(0,0,0,0.1);border-radius:10px;padding:12px;font-size:0.85rem;resize:vertical;font-family:inherit;outline:none;transition:border-color .2s }
.note-modal textarea:focus { border-color:var(--primary) }
.note-modal-btns { display:flex;gap:8px;justify-content:flex-end;margin-top:12px }

/* ===== PRINT LABEL ===== */
@media print {
    body * { visibility: hidden !important; }
    #printLabelArea, #printLabelArea * { visibility: visible !important; }
    #printLabelArea { position: fixed; top: 0; left: 0; width: 100mm; }
}

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.table-info { font-size: 0.78rem; color: var(--gray); }

.pagination {
    display: flex;
    gap: 4px;
}

.page-btn {
    width: 34px;
    height: 34px;
    background: none;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-600);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.page-btn:hover { background: #f0f4ff; color: var(--primary); border-color: rgba(124,58,237,0.3); }
.page-btn.active { background: var(--gradient-primary); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(124,58,237,0.3); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ========== BADGES ========== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
    position: relative;
    transition: all 0.2s ease;
    text-shadow: none;
}

.badge::before {
    display: none;
}

/* Vivid solid status badges (Yalidine-style): high-contrast, scannable colors */
.badge-new        { background: #3b82f6; color: #fff; border: 1.5px solid #2563eb; box-shadow: 0 2px 6px rgba(59,130,246,0.35); }
.badge-pending    { background: #f59e0b; color: #fff; border: 1.5px solid #d97706; box-shadow: 0 2px 6px rgba(245,158,11,0.35); }
.badge-confirmed  { background: linear-gradient(135deg,#059669 0%,#10b981 55%,#34d399 100%); color: #fff; border: 1.5px solid #047857; box-shadow: 0 4px 10px rgba(5,150,105,0.45), inset 0 1px 0 rgba(255,255,255,0.25); font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.badge-shipped    { background: #7c3aed; color: #fff; border: 1.5px solid #6d28d9; box-shadow: 0 2px 6px rgba(124,58,237,0.35); }
.badge-transit    { background: #06b6d4; color: #fff; border: 1.5px solid #0891b2; box-shadow: 0 2px 6px rgba(6,182,212,0.35); }
.badge-delivered  { background: #22c55e; color: #fff; border: 1.5px solid #16a34a; box-shadow: 0 2px 6px rgba(34,197,94,0.40); }
.badge-returned   { background: #ef4444; color: #fff; border: 1.5px solid #dc2626; box-shadow: 0 2px 6px rgba(239,68,68,0.40); }
.badge-cancelled  { background: #64748b; color: #fff; border: 1.5px solid #475569; box-shadow: 0 2px 6px rgba(100,116,139,0.30); }
.badge-noanswer   { background: #f97316; color: #fff; border: 1.5px solid #ea580c; box-shadow: 0 2px 6px rgba(249,115,22,0.35); }
.badge-noanswer1  { background: #fbbf24; color: #fff; border: 1.5px solid #f59e0b; box-shadow: 0 2px 6px rgba(245,158,11,0.30); }
.badge-noanswer2  { background: #f97316; color: #fff; border: 1.5px solid #ea580c; box-shadow: 0 2px 6px rgba(249,115,22,0.35); }
.badge-noanswer3  { background: #dc2626; color: #fff; border: 1.5px solid #b91c1c; box-shadow: 0 2px 6px rgba(220,38,38,0.40); }
.badge-postponed  { background: #a855f7; color: #fff; border: 1.5px solid #9333ea; box-shadow: 0 2px 6px rgba(168,85,247,0.35); }

/* Dark mode keeps the same vivid fills but tones down the glow for less eye strain */
body.dark .badge-new        { background: #2563eb; border-color: #1d4ed8; }
body.dark .badge-pending    { background: #d97706; border-color: #b45309; }
body.dark .badge-confirmed  { background: linear-gradient(135deg,#047857 0%,#059669 55%,#10b981 100%); border-color: #065f46; }
body.dark .badge-shipped    { background: #6d28d9; border-color: #5b21b6; }
body.dark .badge-transit    { background: #0891b2; border-color: #0e7490; }
body.dark .badge-delivered  { background: #16a34a; border-color: #15803d; }
body.dark .badge-returned   { background: #dc2626; border-color: #b91c1c; }
body.dark .badge-cancelled  { background: #475569; border-color: #334155; }
body.dark .badge-noanswer,
body.dark .badge-noanswer1,
body.dark .badge-noanswer2,
body.dark .badge-noanswer3  { background: #ea580c; border-color: #c2410c; }
body.dark .badge-noanswer1  { background: #d97706; border-color: #b45309; }
body.dark .badge-noanswer3  { background: #b91c1c; border-color: #991b1b; }
body.dark .badge-postponed  { background: #9333ea; border-color: #7e22ce; }

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 800;
    margin-right: 8px;
    box-shadow: 0 2px 8px rgba(239,68,68,0.35);
    animation: countPulse 2.5s ease-in-out infinite;
}

@keyframes countPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.order-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 150px;
    margin-top: 4px;
    padding: 2px 7px 2px 3px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-source-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 8px;
    font-weight: 900;
}

.order-source-badge.source-shopify {
    border-color: #b7f7c7;
    background: #f0fdf4;
    color: #166534;
}

.order-source-badge.source-shopify .order-source-mark {
    background: #22c55e;
    color: #fff;
}

.order-source-badge.source-native {
    border-color: #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.order-source-badge.source-native .order-source-mark {
    background: #2563eb;
    color: #fff;
}

body.dark .order-source-badge {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.65);
    color: #cbd5e1;
}

.pro-badge {
    background: var(--gradient-primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    margin-right: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
    animation: proBadgePulse 2s ease-in-out infinite;
}

@keyframes proBadgePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(124,58,237,0.3); }
    50% { box-shadow: 0 2px 16px rgba(124,58,237,0.5); }
}

/* ========== FILTERS BAR ========== */
.filters-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-md);
    flex: 1;
    min-width: 250px;
}

body.dark .search-box { background: #4f4a54; border-color: #635e69; }

.search-box input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 0.85rem;
    color: var(--dark);
    font-family: 'Inter', sans-serif;
}

body.dark .search-box input { color: #f8fafc; }

.search-sm { max-width: 280px; }

.filter-group {
    display: flex;
    gap: 8px;
}

.filter-select {
    padding: 8px 32px 8px 12px;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    color: var(--dark-600);
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
}

body.dark .filter-select { background-color: #4f4a54; border-color: #635e69; color: #d0d8e4; }

.filter-select:focus { border-color: var(--primary); }

/* ========== BULK ACTIONS ========== */
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.85rem;
}

.btn-success { background: var(--success); color: #fff; border: none; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all var(--transition); }
.btn-danger { background: var(--error); color: #fff; border: none; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all var(--transition); }

.btn-success:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-danger:hover { opacity: 0.9; transform: translateY(-1px); }

/* ========== HEADER ACTIONS ========== */
.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-600);
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

body.dark .btn-outline { background: #4f4a54; border-color: #635e69; color: #d0d8e4; }
body.dark .btn-outline:hover { border-color: var(--primary); color: var(--primary-light); }

/* ========== NEW ORDERS GRID ========== */
.new-orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.new-order-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 22px;
    transition: all 0.3s ease;
    border-right: 4px solid var(--accent);
    position: relative;
    overflow: hidden;
}

.new-order-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(124,58,237,0.02), rgba(6,182,212,0.02));
    pointer-events: none;
}

body.dark .new-order-card { background: #4f4a54; border-color: #635e69; border-right-color: var(--accent); }

.new-order-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.new-order-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.new-order-id { font-weight: 700; font-size: 0.9rem; color: var(--primary); }
.new-order-date { font-size: 0.72rem; color: var(--gray); }

.new-order-client {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.client-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.client-name { font-weight: 600; font-size: 0.88rem; }
.client-phone { font-size: 0.78rem; color: var(--gray); direction: ltr; display: block; }

.new-order-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

body.dark .new-order-details { background: #3a363f; }

.new-order-details div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-600);
}

body.dark .new-order-details div { color: #d0d8e4; }

.new-order-price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 14px;
}

body.dark .new-order-price { color: #f8fafc; }

.new-order-actions {
    display: flex;
    gap: 8px;
}

.new-order-actions button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-confirm { background: rgba(16,185,129,0.1); color: #10b981; }
.btn-confirm:hover { background: var(--success); color: #fff; }
.btn-reject { background: rgba(239,68,68,0.1); color: #ef4444; }
.btn-reject:hover { background: var(--error); color: #fff; }
.btn-call { background: rgba(59,130,246,0.1); color: #3b82f6; }
.btn-call:hover { background: #3b82f6; color: #fff; }

/* ========== CALL CENTER ========== */
.confirmation-stats {
    display: flex;
    gap: 24px;
}

.conf-stat { text-align: center; }

.conf-num {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.conf-num.green { color: var(--success); }
.conf-num.amber { color: var(--warning); }
.conf-num.red { color: var(--error); }

.conf-stat {
    position: relative;
    padding: 8px 20px;
    border-radius: 10px;
}

.conf-stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 3px;
}

.conf-stat:nth-child(1)::after { background: var(--success); }
.conf-stat:nth-child(2)::after { background: var(--warning); }
.conf-stat:nth-child(3)::after { background: var(--error); }

.conf-label { font-size: 0.72rem; color: var(--gray); }

.call-center-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
}

@media (max-width: 1024px) {
    .call-center-layout { grid-template-columns: 1fr; }
}

.call-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

/* Premium batch 1: no rainbow top bar on the call card. */
.call-card::before { content: none; }

body.dark .call-card { background: #4f4a54; border-color: #635e69; }

.call-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.call-badge {
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid rgba(124,58,237,0.15);
}

.call-order-id {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.call-client-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

body.dark .call-client-info { border-color: #635e69; }

.call-avatar {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

.call-client-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.call-phone {
    font-size: 0.9rem;
    color: var(--primary);
    text-decoration: none;
    direction: ltr;
    display: block;
}

.call-trust {
    margin-right: auto;
    text-align: center;
}

.trust-score {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
}

.trust-score.high { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,0.3); }
.trust-score.medium { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.3); }
.trust-score.low { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.3); }

.call-trust span:last-child { font-size: 0.65rem; color: var(--gray); }

.call-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.call-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--dark-600);
    padding: 6px 0;
}

.call-detail-row i {
    color: var(--primary);
    opacity: 0.7;
}

body.dark .call-detail-row { color: #d0d8e4; }

.call-history {
    background: linear-gradient(135deg, #f0fdf4, #f0f9ff);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
    border-left: 4px solid #10b981;
}

body.dark .call-history { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(59,130,246,0.06)); border-left-color: #10b981; }

.call-history-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 8px;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.history-item.green { color: var(--success); }
.history-item.amber { color: var(--warning); }
.history-item.red { color: var(--error); }

.call-notes {
    width: 100%;
    padding: 12px;
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 16px;
    outline: none;
    background: var(--white);
    color: var(--dark);
    transition: border-color var(--transition);
}

body.dark .call-notes { background: #3a363f !important; border-color: #635e69 !important; color: #f8fafc !important; }

.call-notes:focus { border-color: var(--primary); }

.call-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .call-actions { grid-template-columns: repeat(3, 1fr); }
}

.call-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.call-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 12px;
}

.call-btn:hover::before {
    opacity: 1;
}

.call-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.call-btn.confirmed { background: rgba(16,185,129,0.08); color: #10b981; border-color: rgba(16,185,129,0.25); }
.call-btn.confirmed:hover { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(16,185,129,0.3); }
.call-btn.no-answer { background: rgba(245,158,11,0.08); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.call-btn.no-answer:hover { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(245,158,11,0.3); }
.call-btn.cancelled { background: rgba(239,68,68,0.08); color: #ef4444; border-color: rgba(239,68,68,0.25); }
.call-btn.cancelled:hover { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(239,68,68,0.3); }
.call-btn.postponed { background: rgba(59,130,246,0.08); color: #3b82f6; border-color: rgba(59,130,246,0.25); }
.call-btn.postponed:hover { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(59,130,246,0.3); }
.call-btn.wrong-num { background: rgba(100,116,139,0.08); color: #64748b; border-color: rgba(100,116,139,0.2); }
.call-btn.wrong-num:hover { background: linear-gradient(135deg, #64748b, #475569); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(100,116,139,0.3); }

.call-queue-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 2px dashed rgba(124,58,237,0.15);
    font-size: 0.85rem;
    color: var(--gray);
}

body.dark .call-queue-info { border-color: #635e69; }

/* Call Queue Sidebar */
.call-queue {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    padding: 16px;
    max-height: 600px;
    overflow-y: auto;
}

body.dark .call-queue { background: #4f4a54; border-color: #635e69; }

.call-queue h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 4px;
}

.queue-item:hover { background: var(--primary-50); }

.queue-item.current { background: var(--primary-100); border-right: 3px solid var(--primary); }

.queue-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dark-600);
}

.queue-info { flex: 1; }
.queue-name { font-size: 0.82rem; font-weight: 600; display: block; }
.queue-product { font-size: 0.7rem; color: var(--gray); }
.queue-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.82rem; }

/* ========== SHIPPING ========== */
.shipping-layout {
    display: grid;
    /* minmax(0, 1fr) lets the main column shrink so the 320px sidebar never clips at 1440. */
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}
.shipping-layout > * { min-width: 0; }

@media (max-width: 1024px) {
    .shipping-layout { grid-template-columns: 1fr; }
}

.shipping-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.carrier-selector {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    padding: 20px;
}

body.dark .carrier-selector { background: #4f4a54; border-color: #635e69; }

.carrier-selector h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.carrier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.carrier-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.carrier-card:hover { border-color: var(--primary-200); background: var(--primary-50); }
.carrier-card.active { border-color: var(--primary); background: var(--primary-100); }

body.dark .carrier-card { border-color: #635e69; }
body.dark .carrier-card.active { border-color: var(--primary); background: rgba(124,58,237,0.15); }

.carrier-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 3px 10px rgba(124,58,237,0.2);
    transition: transform 0.3s ease;
}

.carrier-card:hover .carrier-logo {
    transform: scale(1.1);
}

.carrier-card span:nth-child(2) { font-size: 0.75rem; font-weight: 600; }
.carrier-price { font-size: 0.68rem; color: var(--gray); }
.carrier-acc-name { font-size: 0.68rem; color: var(--gray); font-weight: 500; opacity: 0.85; }

.carrier-logo-img {
    width: 56px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.carrier-card:hover .carrier-logo-img { transform: scale(1.08); }
body.dark .carrier-logo-img { background: #1a1c1f; border-color: rgba(255,255,255,0.08); }

.delivery-type {
    display: flex;
    gap: 12px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--dark-600);
}

body.dark .radio-label { color: #d0d8e4; }

.radio-label input[type="radio"] { accent-color: var(--primary); }

/* ========== TRACKING ========== */
.tracking-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.track-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    min-width: 185px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.track-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
}

.track-stat:nth-child(1)::before { background: #f59e0b; }
.track-stat:nth-child(2)::before { background: #3b82f6; }
.track-stat:nth-child(3)::before { background: #7c3aed; }
.track-stat:nth-child(4)::before { background: #10b981; }
.track-stat:nth-child(5)::before { background: #ef4444; }
.track-stat:nth-child(6)::before { background: #059669; }
.track-stat:nth-child(7)::before { background: #0891b2; }

body.dark .track-stat { background: #4f4a54; border-color: #635e69; }

.track-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.track-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-stat-value {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.track-stat-label { font-size: 0.72rem; color: var(--gray); }

/* ========== PROFIT DASHBOARD ========== */
.profit-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.profit-main-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.profit-main-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
}

body.dark .profit-main-card { background: #4f4a54; border-color: #635e69; }

.profit-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.profit-box {
    text-align: center;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    min-width: 160px;
}

.profit-box.revenue { background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(59,130,246,0.12)); border: 1px solid rgba(59,130,246,0.15); }
.profit-box.costs { background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(239,68,68,0.12)); border: 1px solid rgba(239,68,68,0.15); }
.profit-box.net { background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.15)); border: 2px solid var(--success); box-shadow: 0 4px 20px rgba(16,185,129,0.12); }

.profit-label { display: block; font-size: 0.78rem; color: var(--gray); margin-bottom: 6px; }

.profit-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.profit-box.revenue .profit-value { color: #3b82f6; }
.profit-box.costs .profit-value { color: #ef4444; }
.profit-box.net .profit-value { color: #10b981; }

.profit-minus, .profit-equals {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray);
}

.profit-margin-bar {
    position: relative;
    height: 12px;
    background: var(--gray-100);
    border-radius: 6px;
    overflow: hidden;
}

body.dark .profit-margin-bar { background: #3a363f; }

.margin-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #7c3aed, #10b981);
    border-radius: 6px;
    transition: width 1s ease;
    box-shadow: 0 0 12px rgba(124,58,237,0.25);
}

.margin-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0;
}

.margin-label {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--gray);
}

.profit-breakdown, .profit-per-unit {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    padding: 24px;
}

body.dark .profit-breakdown, body.dark .profit-per-unit { background: #4f4a54; border-color: #635e69; }

.profit-breakdown h3, .profit-per-unit h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.breakdown-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

body.dark .breakdown-row { border-color: #635e69; }

.breakdown-row:last-child { border-bottom: none; }

.bk-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bk-label { flex: 1; font-size: 0.88rem; color: var(--dark-600); }
body.dark .bk-label { color: #d0d8e4; }
.bk-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; }
.bk-percent { font-size: 0.75rem; color: var(--gray); min-width: 45px; text-align: left; }

.breakdown-row.negative { background: rgba(239,68,68,0.03); border-radius: var(--radius-sm); padding: 10px; }

.unit-calc { display: flex; flex-direction: column; gap: 8px; }

.unit-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.88rem;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}

body.dark .unit-row { border-color: #635e69; }

.unit-row.total {
    border-bottom: none;
    border-top: 2px solid var(--primary);
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1rem;
}

.green { color: var(--success); }
.red { color: var(--error); }

/* ========== REPORTS ========== */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

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

.report-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.report-card:nth-child(1)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.report-card:nth-child(2)::before { background: linear-gradient(90deg, #10b981, #34d399); }
.report-card:nth-child(3)::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.report-card:nth-child(4)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

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

body.dark .report-card { background: #4f4a54; border-color: #635e69; }

.report-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Donut Chart */
.donut-container { display: flex; align-items: center; gap: 20px; }

.donut {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--pct) * 1%), var(--gray-100) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
}

.donut:hover {
    transform: scale(1.05);
}

.donut::before {
    content: '';
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--white);
    position: absolute;
}

body.dark .donut::before { background: #4f4a54; }
body.dark .donut { background: conic-gradient(var(--color) calc(var(--pct) * 1%), #4f4a54 0); }

.donut-value {
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.donut-legend { font-size: 0.82rem; display: flex; flex-direction: column; gap: 6px; }
.donut-legend .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
}

.dot.green { background: var(--success); }
.dot.amber { background: var(--warning); }
.dot.red { background: var(--error); }
.dot.cyan { background: var(--accent); }
.dot.blue { background: #3b82f6; }

/* Wilaya Bars */
.top-wilayas { display: flex; flex-direction: column; gap: 10px; }

.wilaya-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}

.wilaya-bar span:first-child { min-width: 110px; color: var(--dark-600); }
body.dark .wilaya-bar span:first-child { color: #d0d8e4; }
.wilaya-bar span:last-child { min-width: 30px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; text-align: left; }

.w-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

body.dark .w-bar { background: #3a363f; }

.w-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 4px;
    transition: width 1s ease;
    position: relative;
}

.w-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: #7c3aed;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(124,58,237,0.4);
}

/* ========== PRODUCTS GRID ========== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.product-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover::after { opacity: 1; }

body.dark .product-card { background: #4f4a54; border-color: #635e69; }

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

.product-thumb {
    height: 140px;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

body.dark .product-thumb { background: #3a363f; }

.product-info {
    padding: 14px;
}

.product-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.product-prices { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.product-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--primary); }
.product-cost { font-size: 0.75rem; color: var(--gray); text-decoration: line-through; }
.product-stock { font-size: 0.75rem; color: var(--gray); }

/* ========== FORM LAYOUT ========== */
.form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) { .form-layout { grid-template-columns: 1fr; } }

.form-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
}

body.dark .form-card { background: #4f4a54; border-color: #635e69; }

.form-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--dark-700); margin-bottom: 6px; }
body.dark .form-label { color: #d0d8e4; }

.form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    color: var(--dark);
    background: var(--gray-50);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition);
}

body.dark .form-input { background: #3a363f !important; border-color: #635e69 !important; color: #f8fafc !important; }

.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }

.form-textarea { resize: vertical; min-height: 80px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.upload-zone {
    border: 2px dashed var(--primary-200);
    border-radius: var(--radius-md);
    padding: 40px 20px;
    text-align: center;
    background: var(--primary-50);
    cursor: pointer;
    transition: all var(--transition);
}

.upload-zone:hover { border-color: var(--primary); background: var(--primary-100); }

.upload-zone p { font-weight: 600; color: var(--dark-700); margin-top: 12px; }
.upload-zone span { font-size: 0.82rem; color: var(--gray); }

/* ========== INTEGRATIONS PANEL (v2) ========== */

/* Stats Row */
.integ-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.integ-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
.integ-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
body.dark .integ-stat-card { background: #4f4a54; border-color: #635e69; }
.integ-stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.integ-stat-info { display: flex; flex-direction: column; }
.integ-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--dark-700); line-height: 1.2; }
body.dark .integ-stat-value { color: #e2e8f0; }
.integ-stat-label { font-size: 0.78rem; color: var(--gray); margin-top: 2px; }
.integ-stat-scheduler { font-size: 0.9rem; }
.integ-stat-scheduler.active { color: #10b981; }
.integ-stat-scheduler.inactive { color: #ef4444; }

/* Section Titles */
.integ-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-700);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.dark .integ-section-title { color: #e2e8f0; }

/* Platforms Grid */
/* Store logos section — uses same .carrier-logo-grid / .carrier-logo-card classes */
.store-logos-section { margin-top: 8px; }

/* Connected Stores List */
.connected-stores-list { display: flex; flex-direction: column; gap: 12px; }

.connected-store-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--white);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}
.connected-store-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #34d399);
}
.connected-store-card:hover { box-shadow: 0 4px 16px rgba(16,185,129,0.1); }
body.dark .connected-store-card { background: #4f4a54; border-color: rgba(16,185,129,0.15); }

.cs-logo {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; color: #fff;
    flex-shrink: 0;
}
.cs-info { flex: 1; min-width: 0; }
.cs-info strong { display: block; font-size: 0.9rem; color: var(--dark-700); font-weight: 700; }
body.dark .cs-info strong { color: #e2e8f0; }
.cs-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.cs-meta span { font-size: 0.75rem; color: var(--gray); display: flex; align-items: center; gap: 4px; }
.cs-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
}
.cs-badge.active { background: rgba(16,185,129,0.1); color: #10b981; }
.cs-badge.error { background: rgba(239,68,68,0.1); color: #ef4444; }

.cs-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cs-action-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--white);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--gray);
    transition: all 0.2s ease;
}
.cs-action-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(99,102,241,0.06); }
.cs-action-btn.danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.06); }
body.dark .cs-action-btn { background: #5a5560; border-color: #756f7c; color: #94a3b8; }

/* Empty State */
.connected-stores-list .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    background: var(--white);
    border: 2px dashed rgba(0,0,0,0.08);
    border-radius: var(--radius-lg);
}
.connected-stores-list .empty-state p { font-weight: 600; color: var(--dark-700); margin-top: 12px; font-size: 0.95rem; }
.connected-stores-list .empty-state span { font-size: 0.82rem; color: var(--gray); margin-top: 4px; }
body.dark .connected-stores-list .empty-state { background: #4f4a54; border-color: #635e69; }
body.dark .connected-stores-list .empty-state p { color: #e2e8f0; }

/* Connect Modal */
.connect-progress {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cp-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: #f8fafc;
    margin-bottom: 4px;
    transition: all 0.3s;
    opacity: 0.5;
}
.cp-step.loading {
    opacity: 1;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
}
.cp-step.success {
    opacity: 1;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
}
.cp-step.error {
    opacity: 1;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
}
/* A step the merchant still has to decide — visible, but not pretending to be done */
.cp-step.pending {
    opacity: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.cp-step .cp-icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 10px;
    background: #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    color: #64748b;
    transition: all 0.3s;
}
.cp-step.loading .cp-icon { background: rgba(99,102,241,0.15); color: #6366f1; }
.cp-step.success .cp-icon { background: rgba(16,185,129,0.15); color: #10b981; }
.cp-step.error .cp-icon { background: rgba(239,68,68,0.15); color: #ef4444; }
.cp-step .cp-info { flex: 1; }
.cp-step .cp-info strong { display: block; font-size: 0.85rem; color: var(--dark-700); }
.cp-step .cp-info span { font-size: 0.75rem; color: var(--gray); }
.cp-step .cp-status { width: 24px; text-align: center; }
.cp-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: integSpin 0.7s linear infinite;
}
.cp-check { color: #10b981; font-weight: 800; font-size: 1.1rem; }
.cp-fail { color: #ef4444; font-weight: 800; font-size: 1.1rem; }

/* Migration approval — the shop is read, the merchant decides (V1 §6) */
.connect-migration {
    margin-top: 12px;
    padding: 14px 16px 6px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    background: #fff;
}
.cm-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--gray);
    margin-bottom: 6px;
}
.cm-notice i { width: 15px; height: 15px; }
.cm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #f1f5f9;
}
.cm-row:first-of-type { border-top: 0; }
.cm-info { flex: 1; min-width: 0; }
.cm-info strong { display: block; font-size: 0.85rem; color: var(--dark-700); }
.cm-info span { font-size: 0.75rem; color: var(--gray); display: block; margin-top: 2px; }
.cm-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    white-space: nowrap;
}
.cm-actions { display: flex; align-items: center; gap: 8px; }
.cm-result { font-size: 0.75rem; color: var(--gray); }
.cm-result.done { color: #059669; font-weight: 600; }
body.dark .connect-migration { background: #4a4552; border-color: rgba(148, 163, 184, 0.25); }
body.dark .cm-row { border-top-color: rgba(148, 163, 184, 0.15); }
body.dark .cm-info strong { color: #e2e8f0; }
body.dark .cm-badge { background: rgba(16, 185, 129, 0.2); color: #34d399; }

.connect-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}
.connect-result.success {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    color: #059669;
}
.connect-result.error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    color: #dc2626;
}

body.dark .cp-step { background: #5a5560; }
body.dark .cp-step.loading { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.25); }
body.dark .cp-step.success { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); }
body.dark .cp-step.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); }
body.dark .cp-step .cp-icon { background: #334155; }
body.dark .cp-step .cp-info strong { color: #e2e8f0; }
body.dark .connect-result.success { background: rgba(16,185,129,0.12); color: #34d399; }
body.dark .connect-result.error { background: rgba(239,68,68,0.12); color: #f87171; }

.connect-platform-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 0.95rem;
}
.connect-platform-badge .cpb-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff;
}
.connect-help {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--dark-700);
}
body.dark .connect-help { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); color: #cbd5e1; }

.connect-easy-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--dark-700);
    margin-bottom: 18px;
}
body.dark .connect-easy-note {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.2);
    color: #cbd5e1;
}

/* Sync Log Table */
.sync-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
}
.sync-status-badge.success { background: rgba(16,185,129,0.1); color: #10b981; }
.sync-status-badge.error { background: rgba(239,68,68,0.1); color: #ef4444; }
.sync-status-badge.running { background: rgba(245,158,11,0.1); color: #f59e0b; }

/* Carriers grid (keep) */
.carriers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.carrier-config-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
body.dark .carrier-config-card { background: #4f4a54; border-color: #635e69; }

/* Responsive */
@media (max-width: 768px) {
    .integ-stats-row { grid-template-columns: repeat(2, 1fr); }
    .connected-store-card { flex-wrap: wrap; }
    .cs-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
    .integ-stats-row { grid-template-columns: 1fr; }
}

/* ========== TOAST (reuse) ========== */
.toast-container {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    font-size: 0.85rem;
    font-weight: 600;
    animation: slideInToast 0.4s cubic-bezier(0.4,0,0.2,1);
    border-right: 4px solid var(--primary);
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.toast.success::before { background: linear-gradient(90deg, #10b981, #34d399); }
.toast.error::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.toast.warning::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

body.dark .toast { background: #4f4a54; }

.toast.success { border-right-color: var(--success); }
.toast.error { border-right-color: var(--error); }
.toast.warning { border-right-color: var(--warning); }

@keyframes slideInToast {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== Quick Actions (reuse from dashboard) ===== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 12px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-card:nth-child(1)::before { background: #3b82f6; }
.action-card:nth-child(2)::before { background: #f59e0b; }
.action-card:nth-child(3)::before { background: #7c3aed; }
.action-card:nth-child(4)::before { background: #06b6d4; }
.action-card:nth-child(5)::before { background: #10b981; }
.action-card:nth-child(6)::before { background: #ef4444; }

.action-card:hover::before { opacity: 1; }

body.dark .action-card { background: #4f4a54; border-color: #635e69; }

.action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }

.action-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.action-card:hover .action-icon {
    transform: scale(1.1) rotate(-5deg);
}

.action-card span { font-size: 0.82rem; font-weight: 700; color: var(--dark-700); }
body.dark .action-card span { color: #d0d8e4; }

@media (max-width: 768px) {
    .quick-actions { grid-template-columns: repeat(3, 1fr); }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        right: -260px;
        top: 0;
        z-index: 150;
        box-shadow: none;
    }
    .sidebar.open {
        right: 0;
        box-shadow: var(--shadow-xl);
    }
    .mobile-sidebar-btn { display: flex !important; }
    .switcher-inner { flex-wrap: wrap; padding: 12px 16px; }
    .switcher-card { min-width: 160px; }
}

@media (max-width: 768px) {
    .stats-6 { grid-template-columns: repeat(2, 1fr) !important; }
    .panel { padding: 16px; }
    .topbar { padding: 12px 16px; }
    .revenue-stats { flex-wrap: wrap; gap: 12px; }
    .profit-header-row { flex-direction: column; }
    .profit-box { min-width: auto; width: 100%; }
}

/* ========================================================
   COMPREHENSIVE DARK MODE — Full Coverage
   ======================================================== */

/* --- Dark mode main content --- */
body.dark .main-content {
    background: var(--sys-bg, #3a363f);
}

/* --- Dark mode cards — vibrant & clear --- */
body.dark .stat-card,
body.dark .revenue-card,
body.dark .table-card,
body.dark .call-card,
body.dark .call-queue,
body.dark .carrier-selector,
body.dark .profit-main-card,
body.dark .profit-breakdown,
body.dark .profit-per-unit,
body.dark .report-card,
body.dark .form-card,
body.dark .carrier-config-card,
body.dark .action-card,
body.dark .track-stat,
body.dark .new-order-card,
body.dark .product-card {
    background: #4f4a54;
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.dark .stat-card:hover,
body.dark .revenue-card:hover,
body.dark .table-card:hover,
body.dark .report-card:hover,
body.dark .action-card:hover {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.12), 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* --- Dark mode topbar --- */
body.dark .topbar {
    background: rgba(12, 18, 34, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* --- Dark mode panels --- */
body.dark .panel {
    padding: 32px;
}

/* --- Dark mode panel header text on dark bg --- */
body.dark .panel-header h1 { color: #f1f5f9; }
body.dark .panel-header p { color: #8896ab; }
body.dark .panel-header .badge-count { background: var(--error); }
body.dark .panel-header .pro-badge { background: var(--gradient-primary); }

/* --- Page buttons --- */
body.dark .page-btn { color: #d0d8e4; border-color: #635e69; }
body.dark .page-btn:hover { background: rgba(124,58,237,0.15); color: #a78bfa; }
body.dark .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
body.dark tr:hover td { background: rgba(124,58,237,0.06); }

/* --- Bulk actions --- */
body.dark .bulk-actions { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.25); color: #e2e8f0; }

/* --- New order cards --- */
body.dark .new-order-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
body.dark .client-name { color: #f1f5f9; }
body.dark .client-phone { color: #7c8da4; }

/* --- Call center dark --- */
body.dark .call-card-header .call-badge { background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(59,130,246,0.2)); color: #c4b5fd; border-color: rgba(124,58,237,0.3); }
body.dark .call-client-info h3 { color: #ffffff; }
body.dark .call-phone { color: #c4b5fd; }
body.dark .call-trust span:last-child { color: #7c8da4; }
body.dark .call-history-title { color: #8896ab; }
body.dark .history-item span { color: #d0d8e4; }
body.dark .call-queue h3 { color: #ffffff; }
body.dark .queue-name { color: #e8edf4; }
body.dark .queue-product { color: #7c8da4; }
body.dark .queue-price { color: #ffffff; }
body.dark .queue-avatar { background: #5a5560; color: #8896ab; }
body.dark .queue-item:hover { background: rgba(124,58,237,0.12); }
body.dark .queue-item.current { background: rgba(124,58,237,0.18); border-right-color: var(--primary); }
body.dark .call-queue-info { border-color: #635e69; color: #8896ab; }
body.dark .call-queue-info strong { color: #ffffff; }

/* --- Confirmation stats --- */
body.dark .conf-label { color: #8896ab; }

/* --- Call action buttons dark — vivid gradients --- */
body.dark .call-btn.confirmed { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); color: #34d399; }
body.dark .call-btn.confirmed:hover { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(16,185,129,0.35); }
body.dark .call-btn.no-answer { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #fbbf24; }
body.dark .call-btn.no-answer:hover { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(245,158,11,0.35); }
body.dark .call-btn.cancelled { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); color: #f87171; }
body.dark .call-btn.cancelled:hover { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(239,68,68,0.35); }
body.dark .call-btn.postponed { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.35); color: #60a5fa; }
body.dark .call-btn.postponed:hover { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(59,130,246,0.35); }
body.dark .call-btn.wrong-num { background: #635e69; border-color: rgba(148,163,184,0.25); color: #8896ab; }
body.dark .call-btn.wrong-num:hover { background: linear-gradient(135deg, #64748b, #475569); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(100,116,139,0.35); }

/* --- Carrier selector --- */
body.dark .carrier-selector h3 { color: #ffffff; }
body.dark .carrier-card:hover { border-color: rgba(124,58,237,0.45); background: rgba(124,58,237,0.1); }
body.dark .carrier-card span:nth-child(2) { color: #e8edf4; }
body.dark .carrier-price { color: #7c8da4; }

/* --- Tracking stats dark --- */
body.dark .track-stat:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.35); transform: translateY(-2px); }
body.dark .track-stat-value { color: #ffffff; }
body.dark .track-stat-label { color: #8896ab; }

/* --- Profit dashboard dark — vivid boxes --- */
body.dark .profit-header-row .profit-minus,
body.dark .profit-header-row .profit-equals { color: #7c8da4; }
body.dark .profit-box.revenue { background: rgba(59,130,246,0.15); }
body.dark .profit-box.costs { background: rgba(239,68,68,0.15); }
body.dark .profit-box.net { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.6); }
body.dark .profit-box.revenue .profit-value { color: #60a5fa; }
body.dark .profit-box.costs .profit-value { color: #f87171; }
body.dark .profit-box.net .profit-value { color: #34d399; }
body.dark .profit-label { color: #8896ab; }
body.dark .profit-breakdown h3,
body.dark .profit-per-unit h3 { color: #ffffff; }
body.dark .breakdown-row.negative { background: rgba(239,68,68,0.1); }

/* --- Reports dark --- */
body.dark .report-card h3 { color: #ffffff; }
body.dark .donut-legend { color: #d0d8e4; }
body.dark .chart-bar::after { color: #e8edf4; }
body.dark .chart-bar::before { color: #8896ab; }
body.dark .chart-bar { background: rgba(124,58,237,0.25); }
body.dark .chart-bar:hover,
body.dark .chart-bar.active { background: var(--gradient-primary); }

/* --- Products dark --- */
body.dark .product-name { color: #ffffff; }
body.dark .product-price { color: #c4b5fd; }
body.dark .product-cost { color: #7c8da4; }
body.dark .product-stock { color: #8896ab; }

/* --- Form elements dark --- */
body.dark .form-card h3 { color: #ffffff; }
body.dark .upload-zone { border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.08); }
body.dark .upload-zone:hover { border-color: var(--primary); background: rgba(124,58,237,0.15); }
body.dark .upload-zone p { color: #e8edf4; }
body.dark .upload-zone span { color: #7c8da4; }

/* --- Carrier config dark --- */

/* --- Radio / Delivery type dark --- */
body.dark .delivery-type { color: #d0d8e4; }

/* --- Table card header title --- */
body.dark .table-card-header h3 { color: #ffffff; }
body.dark th { color: #7c8da4; }

/* --- Toast dark --- */
body.dark .toast { background: #4f4a54; color: #ffffff; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }

/* --- Revenue dark --- */
body.dark .revenue-header h3 { color: #8896ab; }
body.dark .rev-label { color: #7c8da4; }

/* --- Margin bar dark --- */
body.dark .margin-label { color: #8896ab; }
body.dark .margin-label strong { color: #ffffff; }

/* --- Action cards dark --- */
body.dark .action-card:hover { border-color: rgba(124,58,237,0.45); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }

/* --- Wilaya bars dark --- */
body.dark .wilaya-bar span:last-child { color: #ffffff; }

/* --- Credits card (sidebar footer) --- */
body.dark .credits-card { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.25); }
body.dark .credits-header { color: #8896ab; }
body.dark .credits-bar { background: #3a363f; }
body.dark .credits-info span { color: #7c8da4; }
body.dark .credits-info a { color: #c4b5fd; }

/* --- User card dark --- */
body.dark .user-card { border-color: rgba(148,163,184,0.08); }
body.dark .user-info strong { color: #ffffff; }
body.dark .user-info span { color: #7c8da4; }
body.dark .user-menu-btn { color: #8896ab; }
body.dark .user-dropdown { background: #4f4a54; border-color: #635e69; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
body.dark .dropdown-item { color: #d0d8e4; }
body.dark .dropdown-item:hover { background: rgba(124,58,237,0.12); color: #c4b5fd; }
body.dark .dropdown-divider { background: rgba(148,163,184,0.08); }

/* --- Navigation active / hover --- */
body.dark .sidebar-link { color: #8896ab; }
body.dark .sidebar-link:hover { color: #e8edf4; background: rgba(124,58,237,0.1); }
body.dark .sidebar-link.active { color: #c4b5fd; background: rgba(124,58,237,0.15); }
body.dark .nav-section-title { color: #5a6a80; }

/* --- Sidebar dark --- */
body.dark .sidebar {
    background: #0a1020;
    border-color: rgba(148, 163, 184, 0.06);
}
body.dark .sidebar-header { border-color: rgba(148, 163, 184, 0.06); }
body.dark .logo-text { color: #f1f5f9; }
body.dark .sidebar-collapse-btn { color: #7c8da4; }

/* ========================================================
   LIGHT MODE — Comfortable, Spacious, Pro Platform Feel
   Inspired by Yalidine / professional order platforms
   ======================================================== */

/* ---- Main background — soft gray, NOT pure white ---- */
.main-content {
    background: var(--sys-bg, #ebebeb);
}

/* ---- Sidebar — clean with subtle shadow ---- */
.sidebar {
    background: #f7f9fc;
    border-right: none !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    height: calc(100vh - 60px) !important;
    position: sticky !important;
    top: 60px !important;
    align-self: flex-start !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid #e0e6ed;
}

/* ---- All cards & containers — soft off-white, NOT pure white ---- */
.revenue-card,
.table-card,
.call-card,
.call-queue,
.carrier-selector,
.profit-main-card,
.profit-breakdown,
.profit-per-unit,
.report-card,
.form-card,
.carrier-config-card,
.action-card,
.track-stat,
.stat-card,
.new-order-card,
.product-card {
    background: #f7f9fc;
    border: 1px solid #e0e6ed;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ---- Table cards — slightly more shadow for depth ---- */
.table-card {
    background: #f7f9fc;
    border: 1px solid #e0e6ed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

/* ---- Table header — soft blue-gray tint like reference ---- */
thead {
    background: #f0f4f8;
}

/* th styles merged into main th block above */

/* ---- Table cells — inherit from main td block ---- */

/* ---- Table row hover — very soft blue ---- */
tr:hover td {
    background: #f0f6ff;
}

/* ---- Table footer — clean separation ---- */
.table-footer {
    border-top: 1px solid #e0e6ed;
    padding: 14px 20px;
}

/* ---- Table card header ---- */
.table-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e0e6ed;
}

/* ---- Badges — more vivid, with slight border for clarity ---- */
.badge {
    padding: 4px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

/* (Pastel badge overrides removed — vivid solid colors are defined earlier) */

/* ---- Stat cards — generous spacing ---- */
.stat-card {
    padding: 26px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.stat-card-value {
    font-size: 2.1rem;
}

/* ---- Panel — generous padding ---- */
.panel {
    padding: 36px;
}

/* ---- Panel header — larger gap ---- */
.panel-header {
    margin-bottom: 36px;
}

/* ---- Revenue card — spacious ---- */
.revenue-card {
    padding: 28px;
    border-radius: 12px;
}

/* ---- Search box — refined ---- */
.search-box {
    background: #ffffff;
    border: 1.5px solid #d0d7e0;
    border-radius: 10px;
    padding: 10px 16px;
}

.search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

/* ---- Filter selects — refined ---- */
.filter-select {
    background-color: #ffffff;
    border: 1.5px solid #d0d7e0;
    border-radius: 8px;
    padding: 10px 34px 10px 14px;
    font-size: 0.84rem;
}

.filter-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

/* ---- Form inputs — clean ---- */
.form-input {
    background: #f6f8fb;
    border: 1.5px solid #d0d7e0;
    border-radius: 10px;
    padding: 12px 16px;
}

.form-input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

/* ---- New order cards ---- */
.new-order-card {
    padding: 22px;
    border-radius: 12px;
    border-right: 4px solid var(--accent);
}

.new-order-details {
    background: #f0f4f8;
    border-radius: 10px;
    padding: 12px;
}

/* ---- Call center ---- */
.call-card {
    padding: 28px;
    border-radius: 16px;
    background: #f7f9fc;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.call-queue {
    padding: 20px;
    border-radius: 14px;
}

.call-history {
    background: linear-gradient(135deg, #f0fdf4, #f0f9ff);
    border-radius: 12px;
    padding: 16px;
    border-left: 4px solid #10b981;
}

.call-notes {
    border: 1.5px solid #d0d7e0;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.call-notes:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

/* ---- Carrier cards ---- */
.carrier-card {
    border: 1.5px solid #e0e6ed;
    border-radius: 10px;
    padding: 14px 10px;
}

.carrier-card:hover {
    border-color: #a8b8d0;
    background: #f0f4f8;
}

.carrier-card.active {
    border-color: var(--primary);
    background: #f5f0ff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

/* ---- Track stats ---- */
.track-stat {
    padding: 16px 22px;
    border-radius: 12px;
}

/* ---- Profit boxes  ---- */
.profit-box {
    padding: 20px 28px;
    border-radius: 12px;
}

.profit-main-card {
    padding: 32px;
    border-radius: 12px;
}

.profit-breakdown, .profit-per-unit {
    padding: 28px;
    border-radius: 12px;
}

/* ---- Report cards ---- */
.report-card {
    padding: 24px;
    border-radius: 12px;
}

/* ---- Product cards ---- */
.product-card {
    border-radius: 12px;
}

.product-thumb {
    background: #f0f4f8;
    height: 150px;
}

.product-info {
    padding: 16px;
}

/* ---- Action cards (quick actions) ---- */
.action-card {
    padding: 22px 14px;
    border-radius: 12px;
}

.action-card:hover {
    border-color: #bfc8d4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.carrier-config-card {
    padding: 22px;
    border-radius: 12px;
}

/* ---- Form Cards ---- */
.form-card {
    padding: 28px;
    border-radius: 12px;
}

/* ---- Upload zone ---- */
.upload-zone {
    border: 2px dashed #c5cdd8;
    background: #f6f8fb;
    border-radius: 12px;
    padding: 44px 20px;
}

.upload-zone:hover {
    border-color: var(--primary);
    background: #f5f0ff;
}

/* ---- Pagination ---- */
.page-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #d0d7e0;
    font-size: 0.82rem;
    font-weight: 600;
}

.page-btn:hover {
    background: #f0f4f8;
    color: var(--primary);
}

/* ---- Queue items ---- */
.queue-item {
    padding: 12px;
    border-radius: 10px;
}

.queue-avatar {
    background: #eef2f7;
}

/* ---- Buttons outline ---- */
.btn-outline {
    border: 1.5px solid #d0d7e0;
    border-radius: 8px;
}

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

/* ---- Sidebar search ---- */
.sidebar-search {
    background: #f0f4f8;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
}

/* ---- Credits card ---- */
.credits-card {
    background: #f0f4f8;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
}

/* ---- Toast ---- */
.toast {
    background: #f7f9fc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* ---- Donut chart inner ---- */
.donut::before {
    background: #f7f9fc;
}

/* ---- Wilaya bars ---- */
.w-bar {
    background: #e0e6ed;
}

/* ---- Margin bar ---- */
.profit-margin-bar {
    background: #e0e6ed;
    border-radius: 8px;
}

/* ---- Switcher card borders ---- */
.switcher-card {
    border: 1.5px solid #e0e6ed;
}

/* ---- Lang toggle ---- */
.lang-toggle {
    background: #f0f4f8;
    border: 1.5px solid #d0d7e0;
}

/* ---- Alternating table rows for readability ---- */
tbody tr:nth-child(even) td {
    background: #edf1f7;
}

tbody tr:nth-child(odd) td {
    background: #f5f7fa;
}

tbody tr:hover td {
    background: #e8eeff !important;
}

/* ---- Bulk actions refined ---- */
.bulk-actions {
    background: #f0f0ff;
    border: 1.5px solid #ddd6fe;
    border-radius: 10px;
    padding: 12px 18px;
}

/* ---- Checkbox accent ---- */
input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

/* ---- Confirmation center stats ---- */
.confirmation-stats {
    gap: 28px;
    margin-bottom: 24px;
}

/* ---- Table card margin ---- */
.table-card {
    margin-bottom: 28px;
}

/* ---- Dark mode — Alternating rows ---- */
body.dark tbody tr:nth-child(even) td {
    background: rgba(22, 32, 50, 0.6);
}

body.dark tbody tr:nth-child(odd) td {
    background: #4f4a54;
}

body.dark tbody tr:hover td {
    background: rgba(124, 58, 237, 0.08) !important;
}

/* (Dark-mode pastel badge overrides removed — vivid solid colors are defined earlier) */

/* ---- Dark mode — Buttons & UI matching ---- */
body.dark .bulk-actions {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
}

body.dark .search-box {
    background: #4f4a54;
    border-color: #635e69;
}

body.dark .filter-select {
    background-color: #4f4a54;
    border-color: #635e69;
}

body.dark .sidebar-search {
    background: #4f4a54;
    border-color: #635e69;
}

body.dark .credits-card {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
}

body.dark .switcher-card {
    border-color: #635e69;
}

body.dark .lang-toggle {
    background: #4f4a54;
    border-color: #635e69;
}

body.dark .carrier-card {
    border-color: #635e69;
}

body.dark .carrier-card.active {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.15);
}

body.dark .upload-zone {
    border-color: rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.06);
}

body.dark .call-notes {
    background: #3a363f;
    border-color: #756f7c;
}

body.dark .call-history {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(59,130,246,0.06));
    border-left-color: #10b981;
}

body.dark .new-order-details {
    background: #3a363f;
}

body.dark .queue-avatar {
    background: #5a5560;
}

body.dark .donut::before {
    background: #4f4a54;
}

body.dark .w-bar {
    background: #3a363f;
}

body.dark .profit-margin-bar {
    background: #3a363f;
}

body.dark .product-thumb {
    background: #3a363f;
}

body.dark .form-input {
    background: #3a363f;
    border-color: #635e69;
}

body.dark .page-btn {
    border-color: #635e69;
    color: #a0b0c4;
}

body.dark .page-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #c4b5fd;
}

body.dark .btn-outline {
    border-color: #635e69;
    background: #4f4a54;
}

body.dark .btn-outline:hover {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.12);
}

/* ========================================================
   DECORATIVE ENHANCEMENTS — Professional & Modern
   ======================================================== */

/* ---- Sidebar active link — glowing indicator ---- */
.sidebar-link.active {
    position: relative;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: var(--gradient-primary);
    border-radius: 4px 0 0 4px;
    box-shadow: 0 0 12px rgba(124,58,237,0.4);
}

body[dir="rtl"] .sidebar-link.active::before {
    right: auto;
    left: 0;
    border-radius: 0 4px 4px 0;
}

/* ---- Sidebar link badges — pill with glow ---- */
.link-badge {
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.link-badge.popular {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 1px 4px rgba(239,68,68,0.2); }
    50% { box-shadow: 0 1px 8px rgba(239,68,68,0.4); }
}

/* ---- Credits card in sidebar — gradient border ---- */
.credits-fill {
    background: linear-gradient(90deg, #7c3aed, #06b6d4) !important;
    border-radius: 4px;
    position: relative;
}

.credits-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    bottom: -2px;
    width: 4px;
    background: #7c3aed;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(124,58,237,0.5);
}

/* ---- Panel header h1 — subtle gradient text ---- */
.panel-header h1 {
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* ---- Stat card icon — refined shadows ---- */
.stat-card-icon {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover .stat-card-icon {
    transform: scale(1.1);
}

.stat-card:hover .stat-card-icon.blue { box-shadow: 0 4px 16px rgba(59,130,246,0.25); }
.stat-card:hover .stat-card-icon.purple { box-shadow: 0 4px 16px rgba(124,58,237,0.25); }
.stat-card:hover .stat-card-icon.cyan { box-shadow: 0 4px 16px rgba(6,182,212,0.25); }
.stat-card:hover .stat-card-icon.amber { box-shadow: 0 4px 16px rgba(245,158,11,0.25); }
.stat-card:hover .stat-card-icon.green { box-shadow: 0 4px 16px rgba(16,185,129,0.25); }
.stat-card:hover .stat-card-icon.red { box-shadow: 0 4px 16px rgba(239,68,68,0.25); }

/* ---- Stat card change badge — refined ---- */
.stat-card-change {
    border-radius: 6px;
    padding: 3px 8px;
    font-weight: 600;
}

.stat-card-change.positive {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.15);
}

.stat-card-change.negative {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.15);
}

/* ---- New order card hover — glow accent ---- */
.new-order-card:hover {
    box-shadow: 0 8px 28px rgba(6,182,212,0.12);
    border-right-color: #7c3aed;
}

/* ---- New order ID — gradient text ---- */
.new-order-id {
    font-weight: 800;
    font-size: 0.92rem;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Client avatar — glow effect ---- */
.client-avatar {
    box-shadow: 0 3px 10px rgba(124,58,237,0.25);
    border-radius: 10px;
}

/* ---- New order actions buttons — gradient hover ---- */
.btn-confirm:hover { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
.btn-reject:hover { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 14px rgba(239,68,68,0.3); }
.btn-call:hover { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 14px rgba(59,130,246,0.3); }

/* ---- Carrier card active — enhanced ---- */
.carrier-card.active {
    box-shadow: 0 4px 16px rgba(124,58,237,0.15);
}



/* ---- Breakdown row icon glow on hover ---- */
.breakdown-row:hover .bk-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ---- Unit row total — gradient text ---- */
.unit-row.total span.green {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
}

/* ---- Upload zone — dashed border animation ---- */
.upload-zone {
    transition: all 0.3s ease;
}

.upload-zone:hover i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* ---- Queue item current — left glow ---- */
.queue-item.current {
    box-shadow: inset 4px 0 0 var(--primary);
    border-right: none;
}

body[dir="rtl"] .queue-item.current {
    box-shadow: inset -4px 0 0 var(--primary);
}

/* ---- Queue avatar gradient on current ---- */
.queue-item.current .queue-avatar {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

/* ---- Notif dot — pulse animation ---- */
.notif-dot {
    animation: notifPulse 1.5s ease-in-out infinite;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* ---- Donut legend dots — larger ---- */
.donut-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* ---- Donut value — bold gradient ---- */
.donut-value {
    font-weight: 800;
    font-size: 1.3rem;
}

/* ---- Section title row — decorative line ---- */
.section-title-row h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

.section-title-row h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 3px;
}

body[dir="ltr"] .section-title-row h2::after {
    right: auto;
    left: 0;
}

/* ---- Table header — refined uppercase with icon column ---- */
th:first-child {
    border-radius: 0 8px 0 0;
}

th:last-child {
    border-radius: 8px 0 0 0;
}

body[dir="ltr"] th:first-child { border-radius: 8px 0 0 0; }
body[dir="ltr"] th:last-child { border-radius: 0 8px 0 0; }

/* ---- Filter select hover — subtle glow ---- */
.filter-select:hover {
    border-color: #a8b8d0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ---- Topbar buttons — refined hover ---- */
.topbar-btn {
    border-radius: 10px;
    transition: all 0.25s ease;
}

.topbar-btn:hover {
    transform: translateY(-1px);
}

/* ---- Switcher card — refined active state ---- */
.switcher-card.active {
    box-shadow: 0 0 24px rgba(124,58,237,0.2), 0 4px 12px rgba(124,58,237,0.1);
}

/* ---- Dark mode — stat card top gradient ---- */
body.dark .stat-card::before {
    background: linear-gradient(90deg, rgba(124,58,237,0.6), rgba(6,182,212,0.6));
}

/* ---- Dark mode — report card accents ---- */
body.dark .report-card::before { opacity: 0.8; }

/* ---- Dark mode — action card top strip ---- */
body.dark .action-card::before { opacity: 0.8; }

/* ---- Dark mode — table card top gradient ---- */
body.dark .table-card::before {
    background: linear-gradient(90deg, rgba(124,58,237,0.7), rgba(59,130,246,0.7), rgba(6,182,212,0.7));
}

/* ---- Dark mode — profit main card gradient ---- */
body.dark .profit-main-card::before {
    background: linear-gradient(90deg, rgba(59,130,246,0.7), rgba(16,185,129,0.7));
}

/* ---- Dark mode — revenue card gradient ---- */
body.dark .revenue-card::before {
    background: linear-gradient(90deg, rgba(16,185,129,0.7), rgba(59,130,246,0.7), rgba(124,58,237,0.7));
}

/* ---- Dark mode — sidebar active link glow ---- */
body.dark .sidebar-link.active::before {
    box-shadow: 0 0 16px rgba(124,58,237,0.6);
}

/* ---- Dark mode — new order card overlay ---- */
body.dark .new-order-card::after {
    background: linear-gradient(135deg, rgba(124,58,237,0.03), rgba(6,182,212,0.03));
}

/* ---- Dark mode — track stat left bars ---- */
body.dark .track-stat::before { opacity: 0.8; }

.track-substatus {
    margin-top: 4px;
    font-size: 0.7rem;
    color: #64748b;
}
.track-carrier-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(124,58,237,0.08);
    color: #6d28d9;
    font-size: 0.72rem;
    font-weight: 700;
}
.tracking-money-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
}
.tracking-money-pill.paid {
    background: rgba(16,185,129,0.12);
    color: #047857;
}
.tracking-money-pill.pending {
    background: rgba(245,158,11,0.12);
    color: #b45309;
}
.track-empty-hint {
    text-align: center;
    padding: 22px;
    color: #64748b;
    font-weight: 600;
}
body.dark .track-substatus,
body.dark .track-empty-hint { color: #94a3b8; }
body.dark .track-carrier-chip {
    background: rgba(124,58,237,0.16);
    color: #c4b5fd;
}
body.dark .tracking-money-pill.paid {
    background: rgba(16,185,129,0.18);
    color: #6ee7b7;
}
body.dark .tracking-money-pill.pending {
    background: rgba(245,158,11,0.18);
    color: #fcd34d;
}

.tracking-reference-table thead th {
    background: #f3f4f6;
    color: #4f4a54;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 14px 12px;
    border-bottom: 2px solid #dbe1e8;
}
.tracking-reference-table tbody td {
    padding: 11px 12px;
    vertical-align: middle;
    border-top: 1px solid #e8edf3;
}
.tracking-reference-table tbody tr:hover td {
    background: #fafcff;
}
.track-id-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.track-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1683ff, #0b63d1);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    direction: ltr;
}
.track-id-mini {
    padding: 1px 5px;
    border-radius: 4px;
    background: #22c55e;
    color: #fff;
    font-size: 0.63rem;
    font-weight: 800;
}
.track-copy-btn,
.track-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s ease;
}
.track-copy-btn {
    background: #f3f4f6;
    color: #4f4a54;
}
.track-copy-btn:hover { background: #e5e7eb; }
.track-actions-ref {
    display: flex;
    align-items: center;
    gap: 8px;
}
.track-action-btn.success { background: #28a745; color: #fff; }
.track-action-btn.primary { background: #1683ff; color: #fff; }
.track-action-btn:hover { transform: translateY(-1px); filter: brightness(0.96); }

.track-assurance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 700;
}
.track-assurance::after {
    content: '●';
    font-size: 0.7rem;
}
.track-assurance.yes { color: #16a34a; }
.track-assurance.no { color: #ef4444; }

.track-name-main {
    font-size: 0.92rem;
    font-weight: 500;
    color: #374151;
}
.track-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}
.track-status-chip.progress {
    background: #f0fff4;
    border: 1px solid #34a853;
    color: #2c8b47;
}
.track-status-chip.delivered {
    background: #28a745;
    color: #fff;
}
.track-status-chip.returned {
    background: #e63946;
    color: #fff;
}
.track-status-chip.pending {
    background: #facc15;
    color: #3f2f00;
}
.track-pay-mini {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 800;
}
.track-pay-mini.paid { background: #0b63d1; color: #fff; }
.track-pay-mini.ready { background: #facc15; color: #4f4a54; }
.track-pay-mini.unpaid { background: rgba(255,255,255,0.82); color: #4f4a54; }

.track-loc-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #25a7d9;
    color: #0f8fb9;
    background: #f7fdff;
    font-size: 0.82rem;
    white-space: nowrap;
}
.track-stopdesk-text {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #25a7d9;
    color: #0f8fb9;
    background: #f7fdff;
    font-size: 0.82rem;
    max-width: 260px;
}
.track-stopdesk-empty {
    color: #cbd5e1;
    font-weight: 700;
}
body.dark .tracking-reference-table thead th { background: #4f4a54; color: #e2e8f0; border-bottom-color: #756f7c; }
body.dark .tracking-reference-table tbody td { border-top-color: rgba(148,163,184,0.08); }
body.dark .tracking-reference-table tbody tr:hover td { background: rgba(148,163,184,0.04); }
body.dark .track-name-main { color: #e5e7eb; }
body.dark .track-copy-btn { background: #4f4a54; color: #e5e7eb; }
body.dark .track-loc-chip,
body.dark .track-stopdesk-text { background: rgba(14,165,233,0.08); color: #67e8f9; border-color: rgba(14,165,233,0.3); }

/* ---- Dark mode — chart bar colors ---- */
body.dark .chart-bar {
    background: linear-gradient(180deg, rgba(124,58,237,0.4), rgba(124,58,237,0.15));
}

body.dark .chart-bar:hover, body.dark .chart-bar.active {
    background: var(--gradient-primary);
}

/* ---- Dark mode — product card bottom accent ---- */
body.dark .product-card::after { opacity: 0.8; }

/* ---- Dark mode — form card right border ---- */
body.dark .form-card::before { opacity: 0.6; }



/* ---- Dark mode — page btn active ---- */
body.dark .page-btn.active {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(124,58,237,0.35);
}

/* ---- Dark mode — donut shadow ---- */
body.dark .donut {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ---- Dark mode — carrier logo shadow ---- */
body.dark .carrier-logo {
    box-shadow: 0 3px 10px rgba(124,58,237,0.35);
}

/* ---- Dark mode — badge count glow ---- */
body.dark .badge-count {
    box-shadow: 0 2px 12px rgba(239,68,68,0.4);
}

/* ---- Dark mode — pro badge glow ---- */
body.dark .pro-badge {
    box-shadow: 0 2px 12px rgba(124,58,237,0.5);
}

/* ---- Dark mode — stat card change badges ---- */
body.dark .stat-card-change.positive {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.25);
}

body.dark .stat-card-change.negative {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
}

/* ---- Dark mode — toast refined ---- */
body.dark .toast::before { opacity: 0.6; }

/* ---- Dark mode — w-fill glow ---- */
body.dark .w-fill {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

body.dark .w-fill::after {
    box-shadow: 0 0 10px rgba(124,58,237,0.6);
}

/* ---- Dark mode — margin fill glow ---- */
body.dark .margin-fill {
    box-shadow: 0 0 16px rgba(124,58,237,0.35);
}

/* ---- Dark mode — new order actions ---- */
body.dark .btn-confirm { background: rgba(16,185,129,0.15); color: #34d399; }
body.dark .btn-confirm:hover { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.35); }
body.dark .btn-reject { background: rgba(239,68,68,0.15); color: #f87171; }
body.dark .btn-reject:hover { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,0.35); }
body.dark .btn-call { background: rgba(59,130,246,0.15); color: #60a5fa; }
body.dark .btn-call:hover { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,0.35); }

/* ---- Dark mode — queue current avatar ---- */
body.dark .queue-item.current .queue-avatar {
    box-shadow: 0 2px 10px rgba(124,58,237,0.4);
}

/* ---- Smooth transitions everywhere ---- */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================
   ORDER DETAIL MODAL — Clean Yalidine-Style
   ======================================================== */

.order-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.order-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.order-modal {
    background: #fff;
    border-radius: 14px;
    width: 94%;
    max-width: 480px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: translateY(24px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}

.order-modal-overlay.active .order-modal {
    transform: translateY(0) scale(1);
}

/* ---- Header ---- */
.om-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}

.om-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.om-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #5a5560;
}

.om-id-badge {
    background: #5a5560;
    color: #fff;
    padding: 3px 12px;
    border-radius: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.om-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}

.om-close:hover {
    color: #ef4444;
}

/* ---- Body ---- */
.om-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

/* ---- Row ---- */
.om-row {
    padding: 7px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.9rem;
    line-height: 1.7;
}

.om-label {
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.om-val {
    color: #475569;
}

.om-client {
    font-weight: 600;
    color: #5a5560;
}

.om-phone {
    direction: ltr;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #5a5560;
    letter-spacing: 0.3px;
}

.om-order-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    color: #7c3aed;
}

.om-price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #5a5560;
}

.om-emoji {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.om-emoji:has(img) {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-right: 6px;
}
body.dark .om-emoji:has(img) { background: #1a1c1f; border-color: rgba(255,255,255,0.08); }

/* ---- Tags ---- */
.om-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
}

.om-tag.green {
    background: #10b981;
    color: #fff;
}

.om-tag.red {
    background: #ef4444;
    color: #fff;
}

.om-tag.purple {
    background: #7c3aed;
    color: #fff;
}

.om-tag.blue {
    background: #3b82f6;
    color: #fff;
}

.om-tag.amber {
    background: #f59e0b;
    color: #fff;
}

/* ---- Divider ---- */
.om-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 0;
}

/* ---- Total bar ---- */
.om-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

.om-total-bar span:first-child {
    font-weight: 700;
    color: #065f46;
    font-size: 0.88rem;
}

.om-total-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #059669;
}

/* ---- Footer ---- */
.om-footer {
    padding: 14px 22px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.om-btn-close {
    padding: 8px 24px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.om-btn-close:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

/* ============ DARK MODE — ORDER MODAL ============ */
body.dark .order-modal {
    background: #4f4a54;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

body.dark .om-header {
    border-bottom-color: #635e69;
}

body.dark .om-title { color: #f1f5f9; }

body.dark .om-id-badge {
    background: #c4b5fd;
    color: #1e1b4b;
}

body.dark .om-close { color: #64748b; }
body.dark .om-close:hover { color: #f87171; }

body.dark .om-label { color: #94a3b8; }
body.dark .om-val { color: #d0d8e4; }
body.dark .om-client { color: #f1f5f9; }
body.dark .om-phone { color: #f1f5f9; }
body.dark .om-order-num { color: #c4b5fd; }
body.dark .om-price { color: #f1f5f9; }

body.dark .om-divider { background: #635e69; }

body.dark .om-total-bar {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.06));
    border-color: rgba(16,185,129,0.3);
}

body.dark .om-total-bar span:first-child { color: #34d399; }
body.dark .om-total-val { color: #34d399; }

body.dark .om-footer {
    border-top-color: #635e69;
}

body.dark .om-btn-close {
    background: #3b82f6;
}

body.dark .om-btn-close:hover {
    background: #2563eb;
}

/* ========== TAG STYLES (Wilaya, Commune, Delivery) ========== */
.tag-wilaya, .tag-commune, .tag-delivery {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.tag-wilaya {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.25);
}
.tag-commune {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.tag-delivery {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tag-delivery.tag-home {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.tag-delivery.tag-desk {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
body.dark .tag-wilaya {
    background: rgba(14, 165, 233, 0.18);
    color: #38bdf8;
    border-color: rgba(14, 165, 233, 0.3);
}
body.dark .tag-commune {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
}
body.dark .tag-delivery.tag-home {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}
body.dark .tag-delivery.tag-desk {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

/* ========== CLIENT HISTORY BADGES ========== */
.client-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-inline-start: 4px;
    vertical-align: middle;
}
.client-badge-good {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.client-badge-bad {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.client-badge-mixed {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.client-badge-repeat {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
body.dark .client-badge-good { background: rgba(34,197,94,0.2); color: #4ade80; }
body.dark .client-badge-bad { background: rgba(239,68,68,0.2); color: #f87171; }
body.dark .client-badge-mixed { background: rgba(245,158,11,0.2); color: #fbbf24; }
body.dark .client-badge-repeat { background: rgba(59,130,246,0.2); color: #60a5fa; }

/* ========== BULK ACTIONS BAR ========== */
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #fef2f2 100%);
    border: 1.5px solid #ddd6fe;
    border-radius: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    animation: bulkSlideIn 0.25s ease;
}
@keyframes bulkSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

body.dark .bulk-actions {
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.08) 50%, rgba(239,68,68,0.06) 100%);
    border-color: rgba(139,92,246,0.25);
}

.bulk-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
    box-shadow: 0 3px 10px rgba(124,58,237,0.3);
}
.bulk-count-badge strong {
    font-size: 1rem;
}

.bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.bulk-btn:hover {
    transform: translateY(-2px);
}

.bulk-btn-confirm {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 3px 12px rgba(34,197,94,0.3);
}
.bulk-btn-confirm:hover {
    box-shadow: 0 6px 20px rgba(34,197,94,0.4);
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.bulk-btn-ship {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    box-shadow: 0 3px 12px rgba(124,58,237,0.3);
}
.bulk-btn-ship:hover {
    box-shadow: 0 6px 20px rgba(124,58,237,0.4);
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
}

.bulk-btn-cancel {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 3px 12px rgba(239,68,68,0.3);
}
.bulk-btn-cancel:hover {
    box-shadow: 0 6px 20px rgba(239,68,68,0.4);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.bulk-btn-more {
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.bulk-btn-more:hover {
    background: #e2e8f0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

body.dark .bulk-btn-more {
    background: #635e69;
    color: #e2e8f0;
    border-color: #756f7c;
}
body.dark .bulk-btn-more:hover {
    background: rgba(148,163,184,0.18);
}

.bulk-dropdown {
    position: relative;
    display: inline-block;
}
.bulk-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    z-index: 50;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
    padding: 6px;
    margin-top: 4px;
}
.bulk-dropdown-menu.show {
    display: block;
}
.bulk-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.bulk-dropdown-menu button:hover {
    background: #f1f5f9;
}
.bulk-dropdown-menu button i {
    width: 16px; height: 16px;
    color: #64748b;
}
body.dark .bulk-dropdown-menu {
    background: #5a5560;
    border-color: #756f7c;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body.dark .bulk-dropdown-menu button {
    color: #e2e8f0;
}
body.dark .bulk-dropdown-menu button:hover {
    background: #635e69;
}
body.dark .bulk-dropdown-menu button i {
    color: #94a3b8;
}

/* ========== NO-ANSWER COUNT BADGE ========== */
.no-answer-count {
    display: inline-block;
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    font-size: 10px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 4px;
    margin-inline-start: 3px;
}
body.dark .no-answer-count {
    background: rgba(245,158,11,0.2);
    color: #fbbf24;
}

/* ========== CONFIRMATION CENTER HISTORY ITEMS ========== */
.call-history-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}
.history-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 0;
}
.history-item.green { color: #16a34a; }
.history-item.amber { color: #d97706; }
.history-item.neutral { color: #64748b; }
body.dark .call-history-title { color: #94a3b8; }
body.dark .history-item.green { color: #4ade80; }
body.dark .history-item.amber { color: #fbbf24; }
body.dark .history-item.neutral { color: #94a3b8; }

/* ========== ALL-ORDERS TABLE REFINEMENTS ========== */
#panel-all-orders table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#panel-all-orders th,
#panel-all-orders td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 14px 12px;
    font-size: 0.88rem;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Fixed column widths — 10 cols: ☑(3%) #(8%) Client(18%) Phone(12%) Wilaya(10%) Commune(12%) Price(9%) Delivery(9%) Status(11%) Actions(5%) */
#panel-all-orders th:nth-child(1),
#panel-all-orders td:nth-child(1) { width: 3%; text-align: center; }
#panel-all-orders th:nth-child(2),
#panel-all-orders td:nth-child(2) { width: 9%; }
#panel-all-orders th:nth-child(3),
#panel-all-orders td:nth-child(3) { width: 18%; }
#panel-all-orders th:nth-child(4),
#panel-all-orders td:nth-child(4) { width: 12%; }
#panel-all-orders th:nth-child(5),
#panel-all-orders td:nth-child(5) { width: 10%; }
#panel-all-orders th:nth-child(6),
#panel-all-orders td:nth-child(6) { width: 12%; }
#panel-all-orders th:nth-child(7),
#panel-all-orders td:nth-child(7) { width: 9%; }
#panel-all-orders th:nth-child(8),
#panel-all-orders td:nth-child(8) { width: 9%; }
#panel-all-orders th:nth-child(9),
#panel-all-orders td:nth-child(9) { width: 12%; }
#panel-all-orders th:nth-child(10),
#panel-all-orders td:nth-child(10) { width: 5%; text-align: center; }
#panel-all-orders th {
    padding: 14px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray);
    position: relative;
    user-select: none;
    cursor: grab;
    transition: background 0.15s;
}
#panel-all-orders th:active {
    cursor: grabbing;
}
#panel-all-orders th.col-dragging {
    opacity: 0.5;
    background: rgba(124,58,237,0.08);
}
#panel-all-orders th.col-drag-over {
    border-inline-start: 3px solid var(--primary);
}
/* Resize handle */
#panel-all-orders th .col-resize {
    position: absolute;
    top: 0;
    inset-inline-end: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    border-radius: 3px;
    transition: background 0.15s;
    background: transparent;
}
#panel-all-orders th .col-resize:hover,
#panel-all-orders th .col-resize.resizing {
    background: linear-gradient(180deg, #7c3aed, #3b82f6);
    opacity: 0.7;
    width: 4px;
    inset-inline-end: -2px;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(124,58,237,0.3);
}
/* Row spacing */
#panel-all-orders tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: background 0.15s;
}
body.dark #panel-all-orders tbody tr {
    border-bottom-color: #635e69;
}

/* ========== CONFIRMER RANKING ========== */
.confirmer-ranking {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.confirmer-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #635e69;
    border-radius: 10px;
    border: 1px solid #635e69;
}
.rank-number {
    font-size: 20px;
    min-width: 30px;
    text-align: center;
}
.rank-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}
.rank-info strong {
    font-size: 13px;
    color: var(--text-primary);
}
.rank-detail {
    font-size: 11px;
    color: var(--text-secondary);
}
.rank-bar {
    flex: 1;
    height: 8px;
    background: #635e69;
    border-radius: 4px;
    overflow: hidden;
}
.rank-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
body.dark .confirmer-rank-item {
    background: rgba(148,163,184,0.08);
    border-color: #635e69;
}

/* ========== STATUS CHANGE DROPDOWN ========== */
.status-dropdown-wrap {
    position: relative;
    display: inline-block;
}
.status-badge-btn {
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 0.78rem;
}
.status-badge-btn:hover {
    filter: brightness(0.97);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.status-cell-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.status-meta-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.status-meta-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-meta-card.meta-postponed {
    background: linear-gradient(135deg, #f3e8ff, #ede9fe);
    color: #6b21a8;
    border: 1px solid rgba(168,85,247,0.2);
}
.status-meta-card.meta-cancelled {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid rgba(239,68,68,0.2);
}
body.dark .status-meta-card.meta-postponed {
    background: rgba(168,85,247,0.15);
    color: #d8b4fe;
    border-color: rgba(168,85,247,0.25);
}
body.dark .status-meta-card.meta-cancelled {
    background: rgba(239,68,68,0.14);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.24);
}
.status-dropdown {
    display: none;
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    padding: 6px;
    animation: statusDDIn 0.15s ease;
}
.status-dropdown.show {
    display: block;
}
@keyframes statusDDIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.sd-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    text-align: inherit;
    white-space: nowrap;
}
.sd-item:hover {
    background: #f1f5f9;
}
.sd-item.sd-new:hover { background: rgba(59,130,246,0.1); }
.sd-item.sd-pending:hover { background: rgba(245,158,11,0.1); }
.sd-item.sd-confirmed:hover { background: rgba(34,197,94,0.1); }
.sd-item.sd-cancelled:hover { background: rgba(239,68,68,0.1); }
.sd-item.sd-shipped:hover { background: rgba(59,130,246,0.1); }
.sd-item.sd-delivered:hover { background: rgba(16,185,129,0.1); }
.sd-item.sd-returned:hover { background: rgba(245,158,11,0.1); }
.sd-item.sd-postponed:hover { background: rgba(168,85,247,0.1); }
.sd-item.sd-noanswer:hover { background: rgba(249,115,22,0.1); }
.sd-section-label { padding: 5px 10px; font-size: 0.65rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
body.dark .sd-section-label { color: #64748b; }
.sd-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 8px;
}
body.dark .status-dropdown {
    background: #5a5560;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px #635e69;
}
body.dark .sd-item {
    color: #e2e8f0;
}
body.dark .sd-item:hover {
    background: #635e69;
}
body.dark .sd-divider {
    background: #635e69;
}

/* ========== ORDERS TOOLBAR (Yalidine-style) ========== */
.orders-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.toolbar-start {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar-end {
    flex: 1;
    min-width: 250px;
    max-width: 420px;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-size: 0.83rem;
    font-weight: 600;
    font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.toolbar-btn i, .toolbar-btn svg {
    flex-shrink: 0;
}

.tb-total {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.tb-total:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #dbeafe 100%);
    box-shadow: 0 3px 12px rgba(29,78,216,0.15);
    transform: translateY(-1px);
}
.tb-total strong {
    background: #1d4ed8;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    margin-inline-start: 4px;
}

.tb-stats {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    color: #b45309;
    border-color: #fde68a;
}
.tb-stats:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fef3c7 100%);
    box-shadow: 0 3px 12px rgba(180,83,9,0.15);
    transform: translateY(-1px);
}

.tb-filter {
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    color: #6d28d9;
    border-color: #ddd6fe;
}
.tb-filter:hover {
    background: linear-gradient(135deg, #ddd6fe 0%, #ede9fe 100%);
    box-shadow: 0 3px 12px rgba(109,40,217,0.15);
    transform: translateY(-1px);
}

body.dark .tb-total {
    background: rgba(29,78,216,0.12);
    border-color: rgba(59,130,246,0.25);
    color: #93c5fd;
}
body.dark .tb-total strong {
    background: #3b82f6;
}
body.dark .tb-stats {
    background: rgba(180,83,9,0.12);
    border-color: rgba(245,158,11,0.25);
    color: #fbbf24;
}
body.dark .tb-filter {
    background: rgba(109,40,217,0.12);
    border-color: rgba(139,92,246,0.25);
    color: #c4b5fd;
}

/* ========== STATS MODAL (par statut) ========== */
.stats-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.stats-modal-overlay.show {
    display: flex;
    animation: fadeIn 0.2s ease;
}

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

.stats-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Spin animation for loading */
.spin { animation: integSpin 1s linear infinite; }
@keyframes integSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stats-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.stats-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #5a5560;
    margin: 0;
    font-family: 'Space Grotesk', 'Noto Kufi Arabic', sans-serif;
}

.stats-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.stats-modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

.stats-modal-body {
    padding: 20px 24px;
}

.stats-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    justify-content: flex-end;
}

/* Stats total bar */
.stats-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f0f9ff, #eff6ff);
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: #1e40af;
    font-weight: 600;
}
.stats-total strong {
    font-size: 1.4rem;
    color: #1d4ed8;
}

/* Stats badges grid */
.stats-badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.stats-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
}
.stats-badge-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.sb-emoji { font-size: 1.4rem; }
.sb-label { font-size: 0.72rem; font-weight: 600; color: #475569; text-align: center; }
.sb-count { font-size: 1.25rem; font-weight: 800; }

.stat-badge-new { border-color: #fde68a; background: #fffbeb; }
.stat-badge-new .sb-count { color: #b45309; }

.stat-badge-pending { border-color: #bfdbfe; background: #eff6ff; }
.stat-badge-pending .sb-count { color: #1d4ed8; }

.stat-badge-confirmed { border-color: #a7f3d0; background: #ecfdf5; }
.stat-badge-confirmed .sb-count { color: #047857; }

.stat-badge-postponed { border-color: #ddd6fe; background: #f5f3ff; }
.stat-badge-postponed .sb-count { color: #6d28d9; }

.stat-badge-cancelled { border-color: #e2e8f0; background: #f8fafc; }
.stat-badge-cancelled .sb-count { color: #64748b; }

.stat-badge-shipped { border-color: #c7d2fe; background: #eef2ff; }
.stat-badge-shipped .sb-count { color: #4338ca; }

.stat-badge-transit { border-color: #a5f3fc; background: #ecfeff; }
.stat-badge-transit .sb-count { color: #0e7490; }

.stat-badge-delivered { border-color: #6ee7b7; background: #d1fae5; }
.stat-badge-delivered .sb-count { color: #065f46; }

.stat-badge-returned { border-color: #fecaca; background: #fef2f2; }
.stat-badge-returned .sb-count { color: #b91c1c; }

/* Dark mode stats modal */
body.dark .stats-modal {
    background: #5a5560;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px #635e69;
}
body.dark .stats-modal-header { border-color: #635e69; }
body.dark .stats-modal-header h3 { color: #f1f5f9; }
body.dark .stats-modal-close { background: #635e69; color: #94a3b8; }
body.dark .stats-modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }
body.dark .stats-modal-footer { border-color: #635e69; }
body.dark .stats-total { background: rgba(29,78,216,0.1); border-color: rgba(59,130,246,0.2); color: #93c5fd; }
body.dark .stats-total strong { color: #60a5fa; }
body.dark .stats-badge-item { background: #635e69; }
body.dark .sb-label { color: #94a3b8; }
body.dark .stat-badge-new { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
body.dark .stat-badge-pending { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.08); }
body.dark .stat-badge-confirmed { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); }
body.dark .stat-badge-postponed { border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.08); }
body.dark .stat-badge-cancelled { border-color: rgba(148,163,184,0.2); background: #635e69; }
body.dark .stat-badge-shipped { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.08); }
body.dark .stat-badge-transit { border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.08); }
body.dark .stat-badge-delivered { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); }
body.dark .stat-badge-returned { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }

/* ========== ADVANCED FILTER MODAL ========== */
.filter-modal-wide {
    max-width: 640px;
}

.filter-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

body.dark .filter-field label { color: #94a3b8; }

.filter-field input[type="date"] {
    padding: 8px 12px;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    color: var(--dark-600);
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-sm);
    outline: none;
}

body.dark .filter-field input[type="date"] {
    background: #4f4a54;
    border-color: #635e69;
    color: #d0d8e4;
    color-scheme: dark;
}

/* ========== SELECT ALL SCOPE MODAL ========== */
.select-all-modal {
    max-width: 400px;
}

.select-scope-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: #334155;
    transition: all 0.2s ease;
    font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
    text-align: inherit;
    margin-bottom: 10px;
}

.select-scope-btn:last-child {
    margin-bottom: 0;
}

.select-scope-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(59,130,246,0.12);
    transform: translateY(-1px);
}

.select-scope-btn strong {
    color: var(--primary);
}

body.dark .select-scope-btn {
    background: #635e69;
    border-color: #635e69;
    color: #e2e8f0;
}
body.dark .select-scope-btn:hover {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.3);
}

/* ========== PER-PAGE SELECTOR ========== */
.table-footer-start {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.per-page-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.per-page-select {
    padding: 5px 10px;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    color: var(--dark-600);
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

body.dark .per-page-select {
    background: #4f4a54;
    border-color: #635e69;
    color: #d0d8e4;
}

.per-page-label {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 500;
}

.page-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
}

/* ========== RESPONSIVE TOOLBAR ========== */
@media (max-width: 768px) {
    .orders-toolbar {
        flex-direction: column;
        gap: 10px;
    }
    .toolbar-end {
        max-width: 100%;
    }
    .toolbar-start {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .stats-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .filter-modal-grid {
        grid-template-columns: 1fr;
    }
    .table-footer {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ========== CARRIER CONNECT MODAL ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal {
    width: min(92vw, 520px);
    max-height: 90vh;
    overflow: hidden;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15,23,42,0.22);
    border: 1px solid rgba(0,0,0,0.06);
    animation: modalIn .18s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark-700);
}
.modal-body {
    padding: 18px 20px 20px;
    overflow-y: auto;
    max-height: calc(90vh - 70px);
}
.modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s ease;
}
.modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: rgba(239,68,68,0.2);
}
.modal .form-group {
    margin-bottom: 14px;
}
.modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}
.modal .form-group input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.10);
    background: #fff;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.modal .form-group input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}
/* The connect-carrier store picker. Scoped to its id rather than added to the `.form-group input`
   selector on purpose: extending that rule would restyle every select in every modal on this page,
   and this change is about making one new control usable. */
#carrierStoreSelect {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.10);
    background: #fff;
    font-size: 0.9rem;
    box-sizing: border-box;
}
#carrierStoreSelect:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}
body.dark #carrierStoreSelect {
    background: #4f4a54;
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.14);
}
body.dark .modal {
    background: #4f4a54;
    border-color: #635e69;
}
body.dark .modal-header {
    border-color: rgba(148,163,184,0.08);
}
body.dark .modal-header h2,
body.dark .modal .form-group label {
    color: #e2e8f0;
}
body.dark .modal-close {
    background: #4f4a54;
    border-color: #635e69;
    color: #cbd5e1;
}
body.dark .modal .form-group input {
    background: #4f4a54;
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.14);
}

.carrier-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.carrier-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--white);
}
body.dark .carrier-choice-card { border-color: #635e69; background: #4f4a54; }
.carrier-choice-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(124,58,237,0.15);
}
.carrier-choice-card .integ-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
}
.carrier-choice-card strong { font-size: 0.9rem; }

.carrier-config-card.is-connected {
    border-color: rgba(16,185,129,0.3);
}
.carrier-config-card.is-connected::after {
    content: '✓';
    width: 22px;
    height: 22px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-inline-start: auto;
}

.integ-help-box {
    background: rgba(124,58,237,0.05);
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.6;
}
body.dark .integ-help-box { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.2); }
.integ-help-box pre { color: var(--text-secondary); }

.integ-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}
.integ-empty-state p { color: var(--text-muted); margin: 0; }

@media (max-width: 700px) {
    .modal {
        width: min(96vw, 520px);
        max-height: 92vh;
    }
    .carrier-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .carrier-choice-grid {
        grid-template-columns: 1fr;
    }
    .modal-header,
    .modal-body {
        padding: 14px;
    }
}

.integ-store-card,
.integ-connected-list > div:not(.integ-empty-state) {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
}
body.dark .integ-store-card,
body.dark .integ-connected-list > div:not(.integ-empty-state) { border-bottom-color: rgba(148,163,184,0.08); }
.integ-store-card:hover { background: rgba(0,0,0,0.01); }
body.dark .integ-store-card:hover { background: rgba(255,255,255,0.02); }

.integ-store-card .integ-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.integ-store-card .integ-info { flex: 1; min-width: 0; }
.integ-store-card .integ-info strong { display: block; font-size: 0.95rem; }
.integ-store-card .integ-info .integ-status { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

.integ-store-card .integ-actions { display: flex; gap: 8px; flex-shrink: 0; }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.online { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
.status-dot.offline { background: #94a3b8; }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

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

/* ========== TABLE SPACING CONTROL ========== */
.table-spacing-ctrl { position: relative; }

.spacing-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px; border: 1px solid rgba(0,0,0,0.08);
    background: var(--white); cursor: pointer;
    color: var(--gray); transition: all 0.2s;
}
.spacing-toggle-btn:hover {
    background: #f0f4ff; color: #7c3aed;
    border-color: rgba(124,58,237,0.25);
    box-shadow: 0 2px 8px rgba(124,58,237,0.12);
}
body.dark .spacing-toggle-btn { background: #5a5560; border-color: #756f7c; color: #94a3b8; }
body.dark .spacing-toggle-btn:hover { background: rgba(124,58,237,0.15); color: #a78bfa; }

.spacing-panel {
    display: none; position: absolute;
    top: calc(100% + 8px); left: 0;
    z-index: 1000; width: 300px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06);
    padding: 16px; animation: spacingIn 0.2s ease;
}
[dir="rtl"] .spacing-panel, .spacing-panel { left: auto; right: 0; }
.spacing-panel.show { display: block; }
@keyframes spacingIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

body.dark .spacing-panel {
    background: #5a5560;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px #635e69;
}

.spacing-panel-title {
    font-size: 0.82rem; font-weight: 700; color: #334155;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex; align-items: center; gap: 6px;
}
body.dark .spacing-panel-title { color: #e2e8f0; border-color: #635e69; }

.spacing-row {
    margin-bottom: 12px;
}
.spacing-row label {
    display: block; font-size: 0.72rem; font-weight: 600;
    color: #64748b; margin-bottom: 6px;
}
body.dark .spacing-row label { color: #94a3b8; }

.spacing-slider-wrap {
    display: flex; align-items: center; gap: 6px;
}

.spacing-btn {
    width: 26px; height: 26px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08); background: #f8fafc;
    font-size: 14px; font-weight: 700; color: #475569;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.spacing-btn:hover { background: #ede9fe; color: #7c3aed; border-color: rgba(124,58,237,0.3); }
body.dark .spacing-btn { background: #4f4a54; border-color: #756f7c; color: #94a3b8; }
body.dark .spacing-btn:hover { background: rgba(124,58,237,0.2); color: #a78bfa; }

.spacing-slider-wrap input[type="range"] {
    flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
    background: linear-gradient(90deg, #7c3aed, #3b82f6);
    border-radius: 3px; outline: none; cursor: pointer;
}
.spacing-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    background: #fff; border: 2px solid #7c3aed; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(124,58,237,0.3); cursor: pointer;
    transition: transform 0.15s;
}
.spacing-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
body.dark .spacing-slider-wrap input[type="range"] { background: linear-gradient(90deg, #6d28d9, #2563eb); }
body.dark .spacing-slider-wrap input[type="range"]::-webkit-slider-thumb { background: #5a5560; border-color: #a78bfa; }

.spacing-val {
    min-width: 36px; text-align: center;
    font-size: 0.7rem; font-weight: 700; color: #7c3aed;
    font-family: 'Space Grotesk', monospace;
}
body.dark .spacing-val { color: #a78bfa; }

.spacing-presets {
    display: flex; gap: 6px; margin-top: 14px; margin-bottom: 10px;
    padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.06);
}
body.dark .spacing-presets { border-color: #635e69; }

.spacing-preset {
    flex: 1; padding: 6px 8px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08); background: #f8fafc;
    font-size: 0.7rem; font-weight: 600; color: #64748b;
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.spacing-preset:hover { background: #ede9fe; color: #7c3aed; border-color: rgba(124,58,237,0.25); }
.spacing-preset.active {
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    border-color: transparent; box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
body.dark .spacing-preset { background: #4f4a54; border-color: #756f7c; color: #94a3b8; }
body.dark .spacing-preset:hover { background: rgba(124,58,237,0.15); color: #a78bfa; }
body.dark .spacing-preset.active { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; }

.spacing-reset-btn {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; padding: 7px; border-radius: 8px;
    border: 1px dashed rgba(0,0,0,0.1); background: transparent;
    font-size: 0.7rem; font-weight: 600; color: #94a3b8;
    cursor: pointer; transition: all 0.15s;
}
.spacing-reset-btn:hover { color: #7c3aed; border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.04); }
body.dark .spacing-reset-btn { border-color: #635e69; }
body.dark .spacing-reset-btn:hover { color: #a78bfa; }

/* Apply CSS custom properties to table */
#panel-all-orders .table-card th {
    padding: var(--tbl-row-pad, 8px) var(--tbl-cell-pad, 6px);
    font-size: calc(var(--tbl-font-size, 13px) - 2px);
}
#panel-all-orders .table-card td {
    padding: var(--tbl-row-pad, 8px) var(--tbl-cell-pad, 6px);
    font-size: var(--tbl-font-size, 13px);
}
#panel-all-orders .table-card .ord-img {
    width: var(--tbl-img-size, 42px);
    height: var(--tbl-img-size, 42px);
}
#panel-all-orders .table-card .ord-img-placeholder {
    width: var(--tbl-img-size, 42px);
    height: var(--tbl-img-size, 42px);
    font-size: calc(var(--tbl-img-size, 42px) * 0.45);
}

/* ========== MINI MODALS (Postpone / Cancel) ========== */
.mini-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.mini-modal-overlay.show { opacity: 1; }
.mini-modal-overlay.show .mini-modal { transform: translateY(0) scale(1); opacity: 1; }

.mini-modal {
    background: #fff; border-radius: 18px; width: 92%; max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    transform: translateY(20px) scale(0.95); opacity: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
body.dark .mini-modal { background: #5a5560; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px #635e69; }

.mini-modal-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.dark .mini-modal-header { border-color: #635e69; }
.mini-modal-header h4 { flex: 1; font-size: 0.95rem; font-weight: 700; color: #5a5560; margin: 0; }
body.dark .mini-modal-header h4 { color: #f1f5f9; }
.mini-modal-close {
    width: 28px; height: 28px; border-radius: 8px; border: none;
    background: rgba(0,0,0,0.05); color: #64748b; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.mini-modal-close:hover { background: rgba(239,68,68,0.1); color: #ef4444; }

.mini-modal-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    flex-shrink: 0;
}
.postpone-icon { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
.cancel-icon { background: linear-gradient(135deg, #fee2e2, #fecaca); }

.mini-modal-body {
    padding: 16px 20px;
}
.mini-modal-body label {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: #64748b; margin-bottom: 6px; margin-top: 10px;
}
.mini-modal-body label:first-child { margin-top: 0; }
body.dark .mini-modal-body label { color: #94a3b8; }

.mini-modal-input {
    width: 100%; padding: 10px 12px; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.1); background: #f8fafc;
    font-size: 0.85rem; font-family: inherit; color: #5a5560;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.mini-modal-input:focus {
    outline: none; border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
body.dark .mini-modal-input { background: #4f4a54; border-color: #756f7c; color: #e2e8f0; }
body.dark .mini-modal-input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124,58,237,0.2); }

textarea.mini-modal-input { resize: vertical; min-height: 48px; }

.cancel-reasons {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.cancel-reason-btn {
    padding: 6px 12px; border-radius: 20px;
    border: 1.5px solid rgba(0,0,0,0.08); background: #f8fafc;
    font-size: 0.75rem; font-weight: 600; color: #475569;
    cursor: pointer; transition: all 0.15s;
}
.cancel-reason-btn:hover { background: #fee2e2; color: #dc2626; border-color: rgba(239,68,68,0.25); }
.cancel-reason-btn.selected {
    background: linear-gradient(135deg, #fecaca, #fca5a5); color: #991b1b;
    border-color: rgba(239,68,68,0.4); box-shadow: 0 2px 8px rgba(239,68,68,0.15);
}
body.dark .cancel-reason-btn { background: #4f4a54; border-color: #756f7c; color: #94a3b8; }
body.dark .cancel-reason-btn:hover { background: rgba(239,68,68,0.15); color: #f87171; }
body.dark .cancel-reason-btn.selected { background: rgba(239,68,68,0.2); color: #f87171; border-color: rgba(239,68,68,0.4); }

.mini-modal-footer {
    display: flex; gap: 8px; padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.06); justify-content: flex-end;
}
body.dark .mini-modal-footer { border-color: #635e69; }

.mini-modal-btn {
    padding: 9px 18px; border-radius: 10px; border: none;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
}
.mini-modal-btn.btn-cancel {
    background: #f1f5f9; color: #64748b;
}
.mini-modal-btn.btn-cancel:hover { background: #e2e8f0; color: #334155; }
body.dark .mini-modal-btn.btn-cancel { background: #635e69; color: #94a3b8; }

.mini-modal-btn.btn-confirm-postpone {
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    box-shadow: 0 3px 12px rgba(124,58,237,0.3);
}
.mini-modal-btn.btn-confirm-postpone:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(124,58,237,0.4); }

.mini-modal-btn.btn-confirm-cancel {
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
    box-shadow: 0 3px 12px rgba(239,68,68,0.3);
}
.mini-modal-btn.btn-confirm-cancel:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(239,68,68,0.4); }

/* ========== CARRIER EXECUTIVE HUB ========== */
.carrier-executive-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.carrier-kpi-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
}
.carrier-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.carrier-kpi-card strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 4px;
    font-family: 'Space Grotesk', sans-serif;
}
.carrier-kpi-card small {
    color: #94a3b8;
    font-size: 0.72rem;
}
.carrier-kpi-card.purple { background: linear-gradient(135deg, #faf5ff, #f5f3ff); }
.carrier-kpi-card.blue { background: linear-gradient(135deg, #eff6ff, #ecfeff); }
.carrier-kpi-card.red { background: linear-gradient(135deg, #fff1f2, #fef2f2); }
.carrier-kpi-card.green { background: linear-gradient(135deg, #ecfdf5, #f0fdf4); }

.carrier-ops-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    margin-top: 18px;
}
.carrier-analytics-card {
    overflow: hidden;
}
.carrier-breakdown-list,
.carrier-live-list {
    padding: 8px 18px 18px;
}
.carrier-break-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.carrier-break-row:last-child { border-bottom: none; }
.carrier-break-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 0.8rem;
    font-weight: 700;
}
.carrier-break-head strong { font-family: 'Space Grotesk', sans-serif; }
.carrier-break-bar {
    height: 8px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}
.carrier-break-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.carrier-break-meta {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.carrier-live-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.carrier-live-item:last-child { border-bottom: none; }
.carrier-live-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.carrier-live-main strong {
    font-size: 0.82rem;
    color: #5a5560;
}
.carrier-live-main span {
    font-size: 0.72rem;
    color: #64748b;
}
.carrier-live-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}
.carrier-live-badge {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 700;
}
.carrier-live-side strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
}

.carrier-account-card-pro {
    align-items: flex-start;
}
.carrier-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.carrier-mini-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}
.carrier-mini-chip.success { background: rgba(16,185,129,0.12); color: #047857; }
.carrier-mini-chip.info { background: rgba(59,130,246,0.12); color: #1d4ed8; }
.carrier-mini-chip.danger { background: rgba(239,68,68,0.12); color: #b91c1c; }
.carrier-last-sync {
    margin-top: 8px;
    font-size: 0.69rem;
    color: #94a3b8;
}

body.dark .carrier-kpi-card {
    background: #4f4a54;
    border-color: #635e69;
}
body.dark .carrier-break-bar { background: rgba(148,163,184,0.08); }
body.dark .carrier-live-main strong { color: #e2e8f0; }
body.dark .carrier-live-main span,
body.dark .carrier-break-meta,
body.dark .carrier-last-sync,
body.dark .carrier-kpi-top,
body.dark .carrier-kpi-card small { color: #94a3b8; }
body.dark .carrier-live-badge { background: rgba(59,130,246,0.18); color: #93c5fd; border-color: rgba(59,130,246,0.28); }

@media (max-width: 1100px) {
    .carrier-executive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carrier-ops-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .carrier-executive-grid { grid-template-columns: 1fr; }
    .carrier-live-item { flex-direction: column; align-items: flex-start; }
    .carrier-live-side { align-items: flex-start; }
}

.carrier-config-pro {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.98));
    box-shadow: 0 10px 26px rgba(15,23,42,0.05);
}
.carrier-config-pro.is-connected {
    box-shadow: 0 12px 28px rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.2);
}
.carrier-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.carrier-feature-list span {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(124,58,237,0.08);
    color: #6d28d9;
    font-size: 0.66rem;
    font-weight: 700;
}
body.dark .carrier-config-pro {
    background: linear-gradient(135deg, #4f4a54, #4f4a54);
    border-color: #635e69;
}
body.dark .carrier-feature-list span {
    background: rgba(124,58,237,0.16);
    color: #c4b5fd;
}

/* ========== PREMIUM UNIFIED CARD SYSTEM ========== */
.stat-card,
.track-stat,
.integ-stat-card,
.table-card,
.carrier-kpi-card,
.profit-main-card,
.revenue-card,
.report-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid #dde5ec;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
    overflow: hidden;
}

.stat-card::before,
.track-stat::before,
.integ-stat-card::before,
.table-card::before,
.carrier-kpi-card::before,
.profit-main-card::before,
.revenue-card::before,
.report-card::before {
    opacity: .95;
}

.stat-card:hover,
.track-stat:hover,
.integ-stat-card:hover,
.carrier-kpi-card:hover,
.report-card:hover,
.revenue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(15,23,42,0.09);
    border-color: #cfd9e3;
}

.stat-card,
.integ-stat-card,
.track-stat,
.carrier-kpi-card {
    padding-top: 18px;
    padding-bottom: 18px;
}

.stat-card-value,
.integ-stat-value,
.track-stat-value,
.carrier-kpi-card strong {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #4f4a54;
}

.stat-card-label,
.integ-stat-label,
.track-stat-label,
.carrier-kpi-top,
.carrier-kpi-card small {
    font-size: 0.76rem;
    font-weight: 700;
    color: #6b7280;
}

.stat-card-icon,
.integ-stat-icon,
.track-stat-icon {
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

body.dark .stat-card,
body.dark .track-stat,
body.dark .integ-stat-card,
body.dark .table-card,
body.dark .carrier-kpi-card,
body.dark .profit-main-card,
body.dark .revenue-card,
body.dark .report-card {
    background: linear-gradient(180deg, #4f4a54 0%, #4f4a54 100%);
    border-color: #635e69;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
body.dark .stat-card-value,
body.dark .integ-stat-value,
body.dark .track-stat-value,
body.dark .carrier-kpi-card strong {
    color: #f8fafc;
}
body.dark .stat-card-label,
body.dark .integ-stat-label,
body.dark .track-stat-label,
body.dark .carrier-kpi-top,
body.dark .carrier-kpi-card small {
    color: #94a3b8;
}

/* ========== REFERENCE KPI CARD LAYOUT ========== */
.stats-grid,
.integ-stats-row,
.tracking-stats {
    gap: 0;
    border: 1px solid #d9e1e8;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.stats-grid .stat-card,
.integ-stats-row .integ-stat-card,
.tracking-stats .track-stat {
    background: transparent !important;
    border: 0 !important;
    border-inline-start: 1px solid #e5ebf0;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    min-height: 92px;
    padding: 14px 16px 12px !important;
}
.stats-grid .stat-card:first-child,
.integ-stats-row .integ-stat-card:first-child,
.tracking-stats .track-stat:first-child {
    border-inline-start: 0 !important;
}
.stats-grid .stat-card::before,
.integ-stats-row .integ-stat-card::before,
.tracking-stats .track-stat::before {
    top: auto;
    bottom: 12px;
    left: 22px;
    right: 22px;
    height: 2px;
    width: auto;
    background: linear-gradient(90deg, #93c5fd, #38bdf8);
    opacity: .9;
    border-radius: 999px;
}
.stats-grid .stat-card-header,
.integ-stat-info,
.track-stat-info {
    margin-bottom: 0;
}
.stats-grid .stat-card-label,
.integ-stat-label,
.track-stat-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3f3f46;
}
.stats-grid .stat-card-value,
.integ-stat-value,
.track-stat-value {
    font-family: 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #4f4a54;
    margin-bottom: 4px;
}
.stats-grid .stat-card-change {
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: 0.78rem;
    font-weight: 700;
}
.stats-grid .stat-card-change.positive { color: #16a34a; }
.stats-grid .stat-card-change.negative { color: #dc2626; }
.stats-grid .stat-card-change.neutral { color: #6b7280; }
.stat-card-icon,
.integ-stat-icon,
.track-stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    box-shadow: none;
}
body.dark .stats-grid,
body.dark .integ-stats-row,
body.dark .tracking-stats {
    background: #4f4a54;
    border-color: #635e69;
}
body.dark .stats-grid .stat-card,
body.dark .integ-stats-row .integ-stat-card,
body.dark .tracking-stats .track-stat {
    border-inline-start-color: rgba(148,163,184,0.10) !important;
}
body.dark .stats-grid .stat-card-label,
body.dark .integ-stat-label,
body.dark .track-stat-label { color: #cbd5e1; }
body.dark .stats-grid .stat-card-value,
body.dark .integ-stat-value,
body.dark .track-stat-value { color: #f8fafc; }

/* Final analytics reference theme */
.system-switcher {
    display: none !important;
}

.dashboard-body {
    font-family: 'Inter', sans-serif !important;
    background: var(--sys-bg, #ebebeb) !important;
    color: #4f4a54 !important;
}

.sidebar {
    background: #f6f7f8 !important;
    border-inline-end: 1px solid #d9dde3 !important;
    box-shadow: none !important;
}

body[dir="rtl"] .sidebar {
    border-left: 1px solid #d9dde3 !important;
    border-right: none !important;
}

.sidebar-search {
    display: none !important;
}

.credits-card {
    display: none !important;
}

.sidebar-header {
    display: none !important;
}

.sidebar-footer {
    border: none !important;
}

.user-card {
    background: transparent !important;
    padding: 6px 8px !important;
}

.logo-icon {
    display: none !important;
}

.logo-text,
.logo-text .gradient-text {
    color: #4f4a54 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.nav-section-title {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.86rem !important;
    color: #6b7280 !important;
    padding: 12px 10px 6px !important;
}

.sidebar-link {
    color: #3f3f46 !important;
    border-radius: 10px !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    padding: 10px 12px !important;
}

.sidebar-link:hover {
    background: #eceff3 !important;
    color: #4f4a54 !important;
}

.sidebar-link.active {
    background: #e9ecef !important;
    color: #4f4a54 !important;
    box-shadow: none !important;
}

.sidebar-link i {
    color: #52525b !important;
}

.link-badge {
    background: #e5e7eb !important;
    color: #4b5563 !important;
    font-weight: 700 !important;
}

.topbar {
    background: rgba(235, 235, 235, 0.95) !important;
    border-bottom: 1px solid #e5e7eb !important;
    backdrop-filter: blur(10px) !important;
}

.topbar-btn {
    background: #fff !important;
    border: 1px solid #d9dde3 !important;
    color: #4b5563 !important;
}

#panel-overview .stats-grid,
.integ-stats-row,
.tracking-stats {
    background: #fff !important;
    border: 1px solid #d9dde3 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    gap: 0 !important;
}

#panel-overview .stats-grid .stat-card,
.integ-stats-row .integ-stat-card,
.tracking-stats .track-stat {
    display: block !important;
    min-height: 112px;
    padding: 16px 18px 14px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    position: relative;
}

#panel-overview .stats-grid .stat-card:not(:last-child),
.integ-stats-row .integ-stat-card:not(:last-child),
.tracking-stats .track-stat:not(:last-child) {
    border-inline-end: 1px solid #e5e7eb !important;
}

#panel-overview .stats-grid .stat-card::before,
#panel-overview .stats-grid .stat-card::after,
.integ-stats-row .integ-stat-card::after,
.tracking-stats .track-stat::after {
    display: none !important;
    content: none !important;
}

#panel-overview .stats-grid .stat-card-icon,
.integ-stats-row .integ-stat-icon,
.tracking-stats .track-stat-icon,
#panel-overview .stats-grid .stat-card-change i {
    display: none !important;
}

#panel-overview .stats-grid .stat-card-label,
.integ-stat-label,
.track-stat-label,
.revenue-header h3,
.table-card-header h3,
.report-card h3,
.profit-breakdown h3,
.profit-per-unit h3 {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: none !important;
    color: #374151 !important;
    font-weight: 600 !important;
}

#panel-overview .stats-grid .stat-card-value,
.integ-stat-value,
.track-stat-value {
    margin-top: 8px !important;
    font-size: 2rem !important;
    line-height: 1.05 !important;
    color: #4f4a54 !important;
    font-weight: 700 !important;
}

#panel-overview .stats-grid .stat-card-change {
    margin-top: 8px !important;
    font-size: 0.82rem !important;
}

.stat-card-spark {
    position: absolute;
    inset-inline-end: 14px;
    bottom: 10px;
    width: 64px;
    height: 22px;
    pointer-events: none;
    transition: transform 0.2s ease;
    transform-origin: right bottom;
}

/* Sparkline grows on card hover */
.stat-card:hover .stat-card-spark {
    transform: scale(1.18);
}

/* Sparkline current line glows on hover */
.stat-card:hover .trend-current-path {
    stroke: #0284c7;
    stroke-width: 2.8;
    filter: drop-shadow(0 0 3px rgba(14,165,233,0.55));
}

/* Sparkline comparison line becomes more visible on hover */
.stat-card:hover .trend-compare-path {
    stroke: #60b8e8;
    opacity: 0.75;
}

/* Tooltip bubble shown near the sparkline */
.sparkline-tooltip {
    position: fixed;
    background: #5a5560;
    color: #f1f5f9;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    padding: 6px 10px;
    border-radius: 7px;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    opacity: 0;
    transition: opacity 0.15s ease;
    line-height: 1.5;
}
.sparkline-tooltip.visible { opacity: 1; }
.sparkline-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #5a5560;
}
.sparkline-tooltip .stt-label {
    font-size: 10px;
    color: #94a3b8;
    display: block;
    margin-bottom: 2px;
}
.sparkline-tooltip .stt-value {
    font-weight: 700;
    font-size: 13px;
    color: #f1f5f9;
}
.sparkline-tooltip .stt-delta.up   { color: #34d399; margin-right: 4px; }
.sparkline-tooltip .stt-delta.down { color: #f87171; margin-right: 4px; }
.sparkline-tooltip .stt-delta.flat { color: #94a3b8; margin-right: 4px; }

body.dark .sparkline-tooltip {
    background: #4f4a54;
    border: 1px solid #756f7c;
}
body.dark .sparkline-tooltip::after { border-top-color: #4f4a54; }

.sparkline-svg {
    width: 100%;
    height: 100%;
}

.trend-current-path {
    fill: none;
    stroke: #0ea5e9;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-compare-path {
    fill: none;
    stroke: #8bd3ff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4 4;
    opacity: 0.95;
}

.revenue-card,
.table-card,
.report-card,
.profit-summary-card,
.profit-breakdown,
.profit-per-unit,
.integ-card,
.carrier-hub-card,
.carriers-overview-card,
.integration-card,
.track-table-card {
    background: #fff !important;
    border: 1px solid #d9dde3 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.revenue-card::before {
    display: none !important;
}

.revenue-amount {
    font-family: 'Inter', sans-serif !important;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    background: none !important;
    color: #4f4a54 !important;
    -webkit-text-fill-color: currentColor !important;
}

.trend-chart-grid {
    display: flex;
    gap: 12px;
    align-items: stretch;
    min-height: 220px;
}

.trend-y-labels {
    width: 48px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    color: #6b7280;
    font-size: 12px;
    padding: 4px 0 14px;
}

.trend-chart-svg-wrap {
    flex: 1;
    min-height: 220px;
}

.trend-chart-svg-wrap svg {
    width: 100%;
    height: 220px;
    overflow: visible;
}

.trend-grid-lines line {
    stroke: rgba(148, 163, 184, 0.25);
    stroke-width: 1;
}

.trend-current-path.large {
    stroke-width: 3;
}

.trend-compare-path.large {
    stroke-width: 2;
    stroke-dasharray: 5 5;
}

.trend-chart-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-top: 10px;
    color: #6b7280;
    font-size: 12px;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-inline-end: 6px;
}

.legend-dot.solid {
    background: #0ea5e9;
}

.legend-dot.dashed {
    background: transparent;
    border: 2px dashed #8bd3ff;
}

body.dark .sidebar,
body.dark .revenue-card,
body.dark .table-card,
body.dark .report-card,
body.dark .profit-summary-card,
body.dark .profit-breakdown,
body.dark .profit-per-unit,
body.dark .integ-card,
body.dark .carrier-hub-card,
body.dark .carriers-overview-card,
body.dark .integration-card,
body.dark .track-table-card,
body.dark #panel-overview .stats-grid,
body.dark .integ-stats-row,
body.dark .tracking-stats {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
}

body.dark #panel-overview .stats-grid .stat-card,
body.dark .integ-stats-row .integ-stat-card,
body.dark .tracking-stats .track-stat,
body.dark .sidebar-link.active {
    background: #4f4a54 !important;
}

body.dark #panel-overview .stats-grid .stat-card-value,
body.dark .integ-stat-value,
body.dark .track-stat-value,
body.dark .revenue-amount,
body.dark .logo-text,
body.dark .logo-text .gradient-text {
    color: #f8fafc !important;
}

body.dark .nav-section-title,
body.dark .sidebar-link,
body.dark .trend-y-labels,
body.dark .trend-chart-legend {
    color: #cbd5e1 !important;
}

body.dark .topbar,
body.dark .topbar-btn {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
    color: #cbd5e1 !important;
}

/* Tracking KPI row — closer to reference sizing */
.tracking-stats .track-stat {
    min-height: 92px !important;
    padding: 14px 16px 12px !important;
}

.tracking-stats .track-stat-value {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.28rem, 1.35vw, 1.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
}

.tracking-stats #trackingCollectedAmount,
.tracking-stats #trackingPendingAmount {
    font-size: clamp(0.96rem, 1.05vw, 1.08rem) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
}

.tracking-stats .track-stat-label {
    margin-top: 6px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

body.dark .tracking-stats .track-stat-label {
    color: #cbd5e1 !important;
}

/* Carrier panel — same reference card language */
#panel-carriers .integ-stats-row {
    margin-top: 10px;
}

#panel-carriers .integ-stat-card {
    min-height: 96px !important;
    padding: 14px 16px 12px !important;
}

#panel-carriers .integ-stat-value {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.45rem, 1.7vw, 1.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
}

#panel-carriers .integ-stat-label {
    margin-top: 6px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

#panel-carriers .carrier-executive-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

#panel-carriers .carrier-kpi-card,
#panel-carriers .carrier-kpi-card.purple,
#panel-carriers .carrier-kpi-card.blue,
#panel-carriers .carrier-kpi-card.red,
#panel-carriers .carrier-kpi-card.green {
    background: #fff !important;
    border: 1px solid #d9dde3 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    padding: 14px 16px 12px !important;
    min-height: 102px !important;
    position: relative;
    overflow: hidden;
}

#panel-carriers .carrier-kpi-top {
    display: block !important;
    margin-bottom: 8px !important;
    color: #334155 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

#panel-carriers .carrier-kpi-top span {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: none;
}

#panel-carriers .carrier-kpi-top i {
    display: none !important;
}

#panel-carriers .carrier-kpi-card strong {
    display: block;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.12rem, 1.18vw, 1.32rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    color: #4f4a54 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

#panel-carriers .carrier-kpi-card small {
    display: block;
    max-width: 72%;
    color: #475569 !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
}

#panel-carriers .carrier-kpi-spark {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 10px;
    width: 64px;
    height: 22px;
    pointer-events: none;
}

body.dark #panel-carriers .integ-stat-label,
body.dark #panel-carriers .carrier-kpi-top,
body.dark #panel-carriers .carrier-kpi-card small {
    color: #cbd5e1 !important;
}

body.dark #panel-carriers .carrier-kpi-card,
body.dark #panel-carriers .carrier-kpi-card.purple,
body.dark #panel-carriers .carrier-kpi-card.blue,
body.dark #panel-carriers .carrier-kpi-card.red,
body.dark #panel-carriers .carrier-kpi-card.green {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
}

body.dark #panel-carriers .carrier-kpi-card strong,
body.dark #panel-carriers .integ-stat-value {
    color: #f8fafc !important;
}

/* Absolute final carrier reference override */
#panel-carriers .integ-stat-icon,
#panel-carriers .carrier-kpi-top i,
#panel-carriers .carrier-kpi-card::before,
#panel-carriers .carrier-kpi-card::after,
#panel-carriers .table-card::before,
#panel-carriers .table-card::after {
    display: none !important;
    content: none !important;
}

#panel-carriers .integ-stat-card,
#panel-carriers .carrier-kpi-card,
#panel-carriers .carrier-analytics-card,
#panel-carriers .table-card {
    background: #ffffff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

#panel-carriers .carrier-kpi-card {
    min-height: 100px !important;
}

#panel-carriers .carrier-kpi-card strong {
    font-size: 1.18rem !important;
}

#panel-carriers .carrier-analytics-card h3,
#panel-carriers .table-card h3 {
    color: #4f4a54 !important;
    font-weight: 600 !important;
}

body.dark #panel-carriers .integ-stat-card,
body.dark #panel-carriers .carrier-kpi-card,
body.dark #panel-carriers .carrier-analytics-card,
body.dark #panel-carriers .table-card {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
}

body.dark #panel-carriers .carrier-analytics-card h3,
body.dark #panel-carriers .table-card h3 {
    color: #f8fafc !important;
}

/* All Orders — unified reference section */
#panel-all-orders .orders-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    margin-bottom: 16px;
}

#panel-all-orders .orders-kpi-card {
    position: relative;
    min-height: 94px;
    padding: 14px 16px 12px;
    background: #fff;
}

#panel-all-orders .orders-kpi-card:not(:last-child) {
    border-inline-end: 1px solid #e5e7eb;
}

#panel-all-orders .orders-kpi-label {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: none;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
}

#panel-all-orders .orders-kpi-value {
    display: block;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.3rem, 1.45vw, 1.65rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: #4f4a54;
}

#panel-all-orders #ordersStatRevenue {
    font-size: clamp(0.98rem, 1.05vw, 1.12rem);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

#panel-all-orders .orders-kpi-spark {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 10px;
    width: 64px;
    height: 22px;
    pointer-events: none;
}

#panel-all-orders .orders-toolbar-flat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#panel-all-orders .toolbar-start,
#panel-all-orders .toolbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#panel-all-orders .toolbar-btn {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
    border-radius: 10px !important;
    color: #c2bdc8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

#panel-all-orders .toolbar-btn:hover {
    background: #5a5560 !important;
    color: #f4f4f5 !important;
    border-color: #837d8a !important;
}

#panel-all-orders .orders-table-card {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

#panel-all-orders .orders-table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
}

#panel-all-orders .orders-table-card-header h3 {
    display: inline-block;
    margin: 0;
    padding-bottom: 2px;
    border-bottom: none;
    color: #4f4a54;
    font-size: 1rem;
    font-weight: 600;
}

#panel-all-orders .orders-search-box {
    min-width: min(100%, 360px);
}

#panel-all-orders .orders-reference-table {
    width: 100%;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

#panel-all-orders .orders-reference-table thead th {
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid #dbe2ea !important;
}

#panel-all-orders .orders-reference-table td {
    background: #fff;
    color: #4f4a54;
    padding: 14px 12px !important;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
}

#panel-all-orders .orders-reference-table tbody tr:hover td {
    background: #fbfdff;
}

#panel-all-orders .orders-reference-table td:nth-child(3),
#panel-all-orders .orders-reference-table td:nth-child(5),
#panel-all-orders .orders-reference-table td:nth-child(8) {
    white-space: normal;
}

#panel-all-orders .bulk-actions {
    background: #fff !important;
    border: 1px solid #d8dde6 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

body.dark #panel-all-orders .orders-kpi-row {
    background: var(--buld-elevated) !important;
    border-color: var(--buld-hairline) !important;
}

body.dark #panel-all-orders .orders-kpi-card {
    background: transparent !important;
    /* reset the global override that breaks the unified card strip; the cell separator is drawn by premium.css */
    border: none !important;
    border-radius: 0 !important;
    border-inline-end: 0 !important;
    padding: 14px 16px 12px !important;
    box-shadow: none !important;
}

body.dark #panel-all-orders .orders-kpi-card:last-child {
    border-inline-end: none !important;
}

body.dark #panel-all-orders .orders-table-card,
body.dark #panel-all-orders .orders-reference-table td,
body.dark #panel-all-orders .bulk-actions {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
}

body.dark #panel-all-orders .orders-reference-table thead th {
    background: #4f4a54 !important;
    color: #cbd5e1 !important;
    border-bottom-color: #635e69 !important;
}

body.dark #panel-all-orders .orders-kpi-label,
body.dark #panel-all-orders .orders-table-card-header h3 {
    color: #cbd5e1 !important;
}

body.dark #panel-all-orders .orders-kpi-value,
body.dark #panel-all-orders .orders-reference-table td {
    color: #f8fafc !important;
}

@media (max-width: 1100px) {
    #panel-all-orders .orders-kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    #panel-all-orders .orders-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #panel-all-orders .orders-table-card-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Global command-bar system */
.btn-primary,
button.btn-primary,
.btn-success,
a.btn-primary {
    background: linear-gradient(180deg, #23252b 0%, #101114 100%) !important;
    color: #ffffff !important;
    border: 1px solid #4f4a54 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(15,23,42,0.16) !important;
    text-shadow: none !important;
}

.btn-primary::before,
button.btn-primary::before,
.btn-success::before {
    display: none !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.btn-success:hover,
a.btn-primary:hover {
    background: linear-gradient(180deg, #111214 0%, #050607 100%) !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

.btn-outline,
button.btn-outline,
.toolbar-btn,
.topbar-btn,
.spacing-toggle-btn,
.select-scope-btn,
.bulk-btn-more,
#syncAllBtn,
#historyBtn,
#darkModeToggle,
#shortcutsBtn,
#switcherBtn {
    background: #4f4a54 !important;
    color: #c2bdc8 !important;
    border: 1px solid #6e6874 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
}

/* ═══════════ SYSTEM SWITCHER ═══════════ */
.system-switch{
    display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;
    padding:4px 8px;
    border-radius:20px;
    cursor:pointer;
    transition:all .2s;
    margin:0 4px;
}
.system-switch:hover{background:rgba(0,0,0,0.04)}
.system-switch-label{
    font-size:12px;font-weight:500;
    color:#8c9196;
    transition:color .2s;
    white-space:nowrap;
}
.system-switch-label.active{
    color:#4f4a54;font-weight:700;
}
.system-switch-track{
    position:relative;
    width:36px;height:20px;
    background:#e0e0e0;
    border-radius:12px;
    flex-shrink:0;
    transition:background .2s;
}
.system-switch:hover .system-switch-track{
    background:#c9cccf;
}
.system-switch-thumb{
    position:absolute;
    top:2px;
    width:16px;height:16px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
    transition:left .25s, right .25s;
}
body.dark .system-switch:hover{background:rgba(255,255,255,0.06)}
body.dark .system-switch-label{color:#64748b}
body.dark .system-switch-label.active{color:#f8fafc}
body.dark .system-switch-track{background:#404040}
body.dark .system-switch:hover .system-switch-track{background:#555}
body.dark .system-switch-thumb{background:#ccc}

.topbar-system-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: #ffffff;
    color: #4f4a54;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.topbar-system-link:hover {
    background: #f8fafc;
    border-color: #9ca3af;
    color: #4f4a54;
    transform: translateY(-1px);
}

body.dark .topbar-system-link {
    background: #4f4a54;
    color: #f8fafc;
    border-color: #334155;
}

.btn-outline:hover,
button.btn-outline:hover,
.toolbar-btn:hover,
.topbar-btn:hover,
.spacing-toggle-btn:hover,
.select-scope-btn:hover,
.bulk-btn-more:hover {
    background: #5a5560 !important;
    color: #f4f4f5 !important;
    border-color: #837d8a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30) !important;
}

.search-box,
.filter-select,
.per-page-select,
.form-input,
.form-select,
.form-textarea {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}

.search-box:focus-within,
.filter-select:focus,
.per-page-select:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #4f4a54 !important;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.08) !important;
}

.bulk-actions,
.bulk-dropdown-menu,
.stats-modal,
.user-dropdown {
    border: 1px solid #d1d5db !important;
    box-shadow: 0 10px 24px rgba(15,23,42,0.08) !important;
}

body.dark .btn-outline,
body.dark button.btn-outline,
body.dark .toolbar-btn,
body.dark .topbar-btn,
body.dark .spacing-toggle-btn,
body.dark .select-scope-btn,
body.dark .bulk-btn-more,
body.dark #syncAllBtn,
body.dark #historyBtn,
body.dark #darkModeToggle,
body.dark #shortcutsBtn,
body.dark #switcherBtn {
    background: #4f4a54 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark .search-box,
body.dark .filter-select,
body.dark .per-page-select,
body.dark .form-input,
body.dark .form-select,
body.dark .form-textarea {
    background: #4f4a54 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark .bulk-actions,
body.dark .bulk-dropdown-menu,
body.dark .stats-modal,
body.dark .user-dropdown {
    border-color: #334155 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}

.bulk-btn-confirm,
.bulk-btn-ship {
    background: linear-gradient(180deg, #23252b 0%, #101114 100%) !important;
    color: #ffffff !important;
    border: 1px solid #4f4a54 !important;
}

.bulk-btn-confirm:hover,
.bulk-btn-ship:hover {
    background: linear-gradient(180deg, #111214 0%, #050607 100%) !important;
    color: #ffffff !important;
}

.bulk-btn-cancel {
    background: #ffffff !important;
    color: #4f4a54 !important;
    border: 1px solid #d1d5db !important;
}

.bulk-btn-cancel:hover {
    background: #f8fafc !important;
    color: #4f4a54 !important;
    border-color: #9ca3af !important;
}

/* Overview executive command center */
#panel-overview .overview-hero-shell {
    position: relative;
    margin-bottom: 18px;
    padding: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfd 62%, #f2f5f9 100%);
    border: 1px solid #d9dde3;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 16px 34px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

#panel-overview .overview-hero-shell::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, rgba(14,165,233,0) 70%);
    pointer-events: none;
}

#panel-overview .overview-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

#panel-overview .overview-overline {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#panel-overview .overview-hero-copy h1 {
    margin: 0 0 8px;
    font-size: clamp(1.65rem, 2vw, 2.2rem);
    color: #4f4a54;
    letter-spacing: -0.03em;
}

#panel-overview .overview-hero-copy p {
    margin: 0;
    max-width: 760px;
    color: #64748b;
    font-size: 0.98rem;
}

#panel-overview .overview-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

#panel-overview .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    border: 1px solid #dbe2ea;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
}

#panel-overview .hero-tag.success {
    background: #eefbf5;
    color: #0f8a5d;
    border-color: #cceedd;
}

#panel-overview .overview-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#panel-overview .overview-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

#panel-overview .hero-metric-tile {
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(8px);
}

#panel-overview .hero-metric-tile span {
    display: block;
    margin-bottom: 7px;
    color: #475569;
    font-size: 0.77rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#panel-overview .hero-metric-tile strong {
    display: block;
    color: #4f4a54;
    font-size: 1.3rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

#panel-overview .hero-metric-tile small {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: 0.78rem;
}

#panel-overview .command-center-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    position: relative;
    z-index: 1;
}

#panel-overview .command-center-filters,
#panel-overview .command-center-actions,
#panel-overview .command-center-brief {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#panel-overview .command-center-brief {
    justify-content: center;
}

#panel-overview .brief-block {
    min-width: 130px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

#panel-overview .brief-block span {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 4px;
}

#panel-overview .brief-block strong {
    color: #4f4a54;
    font-size: 0.95rem;
    font-weight: 800;
}

#panel-overview .command-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.16s ease;
}

#panel-overview .command-chip:hover {
    border-color: #9ca3af;
    color: #4f4a54;
    background: #f8fafc;
}

#panel-overview .command-chip.active {
    background: #4f4a54;
    color: #ffffff;
    border-color: #4f4a54;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

#panel-overview .command-chip.static-chip {
    background: #f3f4f6;
    color: #6b7280;
    cursor: default;
}

#panel-overview .command-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    color: #4f4a54;
    font-size: 0.8rem;
    font-weight: 700;
}

#panel-overview .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
}

#panel-overview .overview-intelligence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
    margin-top: 18px;
}

#panel-overview .overview-focus-card,
#panel-overview .overview-priority-card {
    overflow: hidden;
}

#panel-overview .overview-mini-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eefbf5;
    color: #0f8a5d;
    border: 1px solid #cceedd;
    font-size: 0.76rem;
    font-weight: 700;
}

#panel-overview .overview-focus-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

#panel-overview .focus-metric-card {
    padding: 14px 14px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

#panel-overview .focus-metric-label {
    display: inline-block;
    margin-bottom: 8px;
    padding-bottom: 2px;
    border-bottom: none;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 600;
}

#panel-overview .focus-metric-card strong {
    display: block;
    color: #4f4a54;
    font-size: 1.25rem;
    line-height: 1.1;
    font-weight: 800;
}

#panel-overview .focus-metric-card small {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: 0.78rem;
}

#panel-overview .overview-priority-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

#panel-overview .priority-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fbfcfe;
}

#panel-overview .priority-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#panel-overview .priority-main strong {
    color: #4f4a54;
    font-size: 0.92rem;
}

#panel-overview .priority-main span {
    color: #6b7280;
    font-size: 0.79rem;
}

#panel-overview .priority-strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    background: #eef2f7;
    color: #4f4a54;
    font-size: 0.9rem;
    font-weight: 800;
}

#panel-overview .priority-item.amber .priority-strong { background: #fff7ed; color: #c2410c; }
#panel-overview .priority-item.violet .priority-strong { background: #f3e8ff; color: #7c3aed; }
#panel-overview .priority-item.red .priority-strong { background: #fef2f2; color: #dc2626; }
#panel-overview .priority-item.green .priority-strong { background: #ecfdf5; color: #059669; }

body.dark #panel-overview .overview-hero-shell,
body.dark #panel-overview .command-center-strip,
body.dark #panel-overview .brief-block,
body.dark #panel-overview .hero-metric-tile,
body.dark #panel-overview .focus-metric-card,
body.dark #panel-overview .priority-item {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
}

body.dark #panel-overview .overview-overline,
body.dark #panel-overview .hero-tag,
body.dark #panel-overview .command-chip,
body.dark #panel-overview .command-pulse-badge,
body.dark #panel-overview .priority-strong {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
    color: #e5e7eb !important;
}

body.dark #panel-overview .hero-tag.success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #7ee2b8 !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
}

body.dark #panel-overview .command-chip.active {
    background: #f8fafc !important;
    color: #4f4a54 !important;
    border-color: #f8fafc !important;
}

body.dark #panel-overview .overview-mini-status {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #7ee2b8 !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
}

body.dark #panel-overview .overview-hero-copy h1,
body.dark #panel-overview .hero-metric-tile strong,
body.dark #panel-overview .brief-block strong,
body.dark #panel-overview .focus-metric-card strong,
body.dark #panel-overview .priority-main strong {
    color: #f8fafc !important;
}

body.dark #panel-overview .overview-hero-copy p,
body.dark #panel-overview .hero-metric-tile small,
body.dark #panel-overview .hero-metric-tile span,
body.dark #panel-overview .brief-block span,
body.dark #panel-overview .focus-metric-card small,
body.dark #panel-overview .priority-main span {
    color: #cbd5e1 !important;
}

@media (max-width: 1180px) {
    #panel-overview .command-center-strip {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    #panel-overview .command-center-brief {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    #panel-overview .overview-hero-metrics,
    #panel-overview .overview-intelligence-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #panel-overview .overview-hero-shell,
    #panel-overview .command-center-strip {
        padding: 12px;
    }

    #panel-overview .overview-focus-metrics {
        grid-template-columns: 1fr;
    }
}

/* Interactive Algeria map */
#panel-overview .overview-geo-grid {
    margin: 18px 0 8px;
}

#panel-overview .dz-map-card {
    overflow: hidden;
}

#panel-overview .dz-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) 300px;
    gap: 14px;
    padding: 14px;
}

#panel-overview .dz-map-visual {
    position: relative;
    min-height: var(--map-height, 320px);
    height: var(--map-height, 320px);
    max-height: var(--map-height, 700px);
    border-radius: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    transition: height 0.2s ease, min-height 0.2s ease;
}

#panel-overview .dz-map-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

#panel-overview .dz-map-surface {
    width: 100%;
    height: 100%;
    min-height: 0;
}

#panel-overview .dz-map-svg {
    width: 100%;
    height: 100%;
}

#panel-overview .dz-map-svg-real {
    overflow: visible;
}

#panel-overview .dz-geo-feature path {
    fill: rgba(14, 165, 233, var(--feature-alpha, 0.24));
    stroke: #ffffff;
    stroke-width: 1.05;
    vector-effect: non-scaling-stroke;
    transition: fill 0.18s ease, filter 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease;
    cursor: pointer;
}

#panel-overview .dz-geo-feature.active path,
#panel-overview .dz-geo-feature:hover path {
    fill: rgba(37, 99, 235, 0.82);
    stroke: #fbbf24;
    stroke-width: 1.7;
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.18));
}

#panel-overview .dz-geo-feature.top-region path {
    stroke: #f59e0b;
    stroke-width: 2;
}

#panel-overview .dz-geo-feature.is-empty path {
    fill: rgba(203, 213, 225, 0.50);
}

#panel-overview .dz-map-loading,
#panel-overview .dz-map-empty {
    height: 100%;
    min-height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 600;
    font-size: 0.95rem;
}

#panel-overview .dz-map-crown {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #f5d38b;
    color: #9a6700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    font-size: 0.77rem;
    font-weight: 800;
}

#panel-overview .dz-country-shadow {
    fill: #e8f4fb;
    stroke: #c7deea;
    stroke-width: 3;
}

#panel-overview .dz-region polygon {
    fill: rgba(6, 182, 212, var(--region-fill, 0.24));
    stroke: rgba(255,255,255,0.96);
    stroke-width: 3;
    transition: fill 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    cursor: pointer;
}

#panel-overview .dz-region text {
    fill: #4f4a54;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

#panel-overview .dz-region:hover polygon,
#panel-overview .dz-region.active polygon {
    fill: rgba(124, 58, 237, 0.82);
    filter: drop-shadow(0 8px 14px rgba(124, 58, 237, 0.24));
}

#panel-overview .dz-region.is-empty polygon {
    fill: rgba(148, 163, 184, 0.2);
}

#panel-overview .dz-map-tooltip {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.15s ease;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

#panel-overview .dz-map-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

#panel-overview .dz-map-tooltip strong,
#panel-overview .dz-map-tooltip span {
    display: block;
    white-space: nowrap;
    font-size: 0.78rem;
}

#panel-overview .dz-map-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#panel-overview .dz-map-focus,
#panel-overview .dz-map-kpi,
#panel-overview .dz-rank-item {
    border: 1px solid #e5e7eb;
    background: #fbfcfe;
    border-radius: 16px;
}

#panel-overview .dz-map-focus {
    padding: 14px;
}

#panel-overview .dz-map-overline {
    display: inline-block;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#panel-overview .dz-map-focus h4 {
    margin: 0 0 6px;
    color: #4f4a54;
    font-size: 1.15rem;
}

#panel-overview .dz-map-focus p {
    margin: 0;
    color: #6b7280;
    line-height: 1.5;
    font-size: 0.84rem;
}

#panel-overview .dz-map-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#panel-overview .dz-map-kpi {
    padding: 12px;
}

#panel-overview .dz-map-kpi span {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    margin-bottom: 6px;
}

#panel-overview .dz-map-kpi strong {
    color: #4f4a54;
    font-size: 1.1rem;
}

#panel-overview .dz-map-ranking {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#panel-overview .dz-rank-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

#panel-overview .dz-rank-item.leader {
    border-color: #f5d38b;
    background: linear-gradient(180deg, #fffdf7 0%, #fff9eb 100%);
}

#panel-overview .dz-rank-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #4f4a54;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

#panel-overview .dz-rank-name {
    color: #4f4a54;
    font-weight: 600;
}

#panel-overview .dz-rank-item strong {
    color: #7c3aed;
}

body.dark #panel-overview .dz-map-visual {
    background: transparent !important;
    border-color: transparent !important;
}
body.dark #panel-overview .dz-map-focus,
body.dark #panel-overview .dz-map-kpi,
body.dark #panel-overview .dz-rank-item {
    background: #4f4a54 !important;
    border-color: #635e69 !important;
}

body.dark #panel-overview .dz-country-shadow {
    fill: #4f4a54;
    stroke: #635e69;
}

body.dark #panel-overview .dz-region text,
body.dark #panel-overview .dz-map-focus h4,
body.dark #panel-overview .dz-map-kpi strong,
body.dark #panel-overview .dz-rank-name {
    color: #f8fafc !important;
}

body.dark #panel-overview .dz-map-focus p,
body.dark #panel-overview .dz-map-overline,
body.dark #panel-overview .dz-map-kpi span {
    color: #cbd5e1 !important;
}

@media (max-width: 980px) {
    #panel-overview .dz-map-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #panel-overview .dz-map-kpis {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   APPEARANCE CUSTOMIZER DRAWER
   ======================================== */
.appearance-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0,0,0,0.3);
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.appearance-overlay.open { opacity: 1; visibility: visible; }

.appearance-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 340px; max-width: 92vw;
    z-index: 999;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    box-shadow: 8px 0 32px rgba(0,0,0,0.12);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column;
    overflow: hidden;
}
body[dir="rtl"] .appearance-drawer {
    left: auto; right: 0;
    border-right: none; border-left: 1px solid #e5e7eb;
    transform: translateX(100%);
}
.appearance-drawer.open { transform: translateX(0) !important; }

.appear-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.appear-header h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700; margin: 0;
}
.appear-close {
    width: 32px; height: 32px; border-radius: 8px;
    border: none; background: #f1f5f9; cursor: pointer;
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.appear-close:hover { background: #e2e8f0; }

.appear-body {
    flex: 1; overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 18px;
}

.appear-section { display: flex; flex-direction: column; gap: 8px; }
.appear-label {
    font-size: 0.82rem; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.03em;
}

.appear-logo-preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px dashed #e2e8f0;
    border-radius: 10px;
    min-height: 56px;
    transition: background 0.2s;
}
body.dark .appear-logo-preview {
    background: #1a2640;
    border-color: #756f7c;
}

.appear-color-row {
    display: flex; align-items: center; gap: 8px;
}
.appear-color-input {
    width: 40px; height: 36px; border: 2px solid #e5e7eb;
    border-radius: 8px; cursor: pointer; padding: 2px;
    background: #fff;
}
.appear-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.appear-color-input::-webkit-color-swatch { border-radius: 5px; border: none; }

.appear-hex-input {
    flex: 1; padding: 8px 12px; border: 1.5px solid #e5e7eb;
    border-radius: 8px; font-family: 'Space Grotesk', monospace;
    font-size: 0.88rem; font-weight: 600; color: #374151;
    text-align: center; direction: ltr;
}
.appear-hex-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(124,58,237,0.08); }

.appear-reset-btn {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1.5px solid #e5e7eb; background: #f8fafc;
    cursor: pointer; font-size: 1rem; color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.appear-reset-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

.appear-presets {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.appear-preset {
    width: 28px; height: 28px; border-radius: 8px;
    border: 2px solid #e5e7eb; cursor: pointer;
    transition: all 0.2s;
}
.appear-preset:hover { transform: scale(1.15); border-color: var(--primary); }

.appear-slider-row {
    display: flex; align-items: center; gap: 12px;
}
.appear-range {
    flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
    background: #e5e7eb; border-radius: 3px; outline: none;
}
.appear-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px;
    background: var(--primary, #7c3aed); border-radius: 50%;
    cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(124,58,237,0.3);
}
.appear-range-val {
    min-width: 44px; text-align: center; font-size: 0.82rem;
    font-weight: 700; color: var(--primary, #7c3aed);
    background: rgba(124,58,237,0.06); padding: 4px 8px;
    border-radius: 6px;
}

.appear-divider {
    height: 1px; background: #e5e7eb; margin: 4px 0;
}

.appear-actions {
    display: flex; gap: 8px; margin-top: 8px;
}
.appear-actions .btn-primary,
.appear-actions .btn-outline {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}

/* Dark mode appearance drawer */
body.dark .appearance-drawer { background: #5a5560; border-color: #334155; }
body.dark .appear-header { background: linear-gradient(135deg, #5a5560, #4f4a54); border-color: #334155; }
body.dark .appear-header h3 { color: #f1f5f9; }
body.dark .appear-close { background: #334155; color: #e2e8f0; }
body.dark .appear-label { color: #cbd5e1; }
body.dark .appear-hex-input { background: #4f4a54; border-color: #334155; color: #e2e8f0; }
body.dark .appear-color-input { background: #4f4a54; border-color: #334155; }
body.dark .appear-reset-btn { background: #4f4a54; border-color: #334155; color: #94a3b8; }
body.dark .appear-preset { border-color: #334155; }
body.dark .appear-range { background: #334155; }
body.dark .appear-divider { background: #334155; }

/* ========================================
   CONSISTENT DESIGN — ALL PANELS
   ======================================== */

/* Products Grid Cards */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.product-card {
    background: var(--card-bg, #f7f9fc);
    border: 1px solid #e0e6ed;
    border-radius: var(--card-radius, 12px);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.product-card:hover {
    border-color: var(--primary, #7c3aed);
    box-shadow: 0 6px 20px rgba(124,58,237,0.1);
    transform: translateY(-2px);
}
.product-thumb {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(6,182,212,0.08));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.product-info { flex: 1; min-width: 0; }
.product-name {
    font-weight: 700; font-size: var(--base-font, 0.92rem);
    color: #4f4a54; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-prices {
    display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.product-price {
    font-weight: 800; color: var(--primary, #7c3aed);
    font-size: calc(var(--base-font, 0.92rem) + 0.05rem);
}
.product-cost {
    font-size: 0.8rem; color: #9ca3af;
    text-decoration: line-through;
}
.product-stock {
    font-size: 0.78rem; color: #6b7280;
}

body.dark .product-card { background: #4f4a54; border-color: #635e69; }
body.dark .product-card:hover { border-color: rgba(124,58,237,0.4); box-shadow: 0 6px 20px rgba(124,58,237,0.15); }
body.dark .product-name { color: #f1f5f9; }
body.dark .product-stock { color: #94a3b8; }

/* Form Layout (Add Product, Store Settings) */
.form-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
}
.form-card {
    background: var(--card-bg, #f7f9fc);
    border: 1px solid #e0e6ed;
    border-radius: var(--card-radius, 12px);
    padding: 24px;
}
.form-card h3 {
    font-size: 1rem; font-weight: 700;
    margin-bottom: 20px; padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #4f4a54;
}
.form-input, .form-textarea {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e0e6ed;
    border-radius: 10px; font-family: inherit;
    font-size: 0.9rem; transition: all 0.2s;
    background: #fff;
}
.form-input:focus, .form-textarea:focus {
    border-color: var(--primary, #7c3aed);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}
.form-label {
    display: block; font-size: 0.82rem;
    font-weight: 600; color: #374151;
    margin-bottom: 6px;
}
.form-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
}
body.dark .form-card { background: #4f4a54; border-color: #635e69; }
body.dark .form-card h3 { color: #f1f5f9; border-color: #334155; }
body.dark .form-input, body.dark .form-textarea { background: #4f4a54; border-color: #334155; color: #e2e8f0; }

/* Upload Zone consistent */
.upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: var(--card-radius, 12px);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(124,58,237,0.02);
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--primary, #7c3aed);
    background: rgba(124,58,237,0.04);
}
body.dark .upload-zone { border-color: #334155; background: rgba(124,58,237,0.04); }

/* Profit Dashboard */
.profit-dashboard { display: flex; flex-direction: column; gap: 20px; }
.profit-main-card {
    background: var(--card-bg, #f7f9fc);
    border: 1px solid #e0e6ed;
    border-radius: var(--card-radius, 12px);
    padding: 24px;
}
.profit-header-row {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.profit-box {
    text-align: center; padding: 16px 24px;
    border-radius: 12px; min-width: 140px;
}
.profit-box.revenue { background: rgba(16,185,129,0.08); }
.profit-box.costs { background: rgba(239,68,68,0.08); }
.profit-box.net { background: rgba(124,58,237,0.08); }
.profit-label { display: block; font-size: 0.78rem; color: #6b7280; font-weight: 600; margin-bottom: 6px; }
.profit-value { display: block; font-size: 1.3rem; font-weight: 800; color: #4f4a54; }
.profit-minus, .profit-equals { font-size: 1.5rem; font-weight: 800; color: #9ca3af; }
.profit-margin-bar {
    position: relative; height: 32px;
    background: #e5e7eb; border-radius: 16px; overflow: hidden;
}
.margin-fill {
    height: 100%; background: linear-gradient(90deg, #7c3aed, #06b6d4);
    border-radius: 16px; transition: width 0.5s ease;
}
.margin-label {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.82rem; font-weight: 700; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

body.dark .profit-main-card { background: #4f4a54; border-color: #635e69; }
body.dark .profit-value { color: #f1f5f9; }
body.dark .profit-margin-bar { background: #334155; }

/* Profit Breakdown */
.profit-breakdown, .profit-per-unit {
    background: var(--card-bg, #f7f9fc);
    border: 1px solid #e0e6ed;
    border-radius: var(--card-radius, 12px);
    padding: 24px;
}
.profit-breakdown h3, .profit-per-unit h3 {
    font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: #4f4a54;
}
.breakdown-rows { display: flex; flex-direction: column; gap: 10px; }
.breakdown-row {
    display: grid; grid-template-columns: 32px 1fr auto auto;
    align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: #fff; border: 1px solid #f1f5f9;
}
.bk-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.bk-label { font-size: 0.88rem; color: #374151; font-weight: 500; }
.bk-value { font-weight: 700; color: #4f4a54; font-size: 0.9rem; }
.bk-percent { font-size: 0.78rem; color: #6b7280; font-weight: 600; min-width: 40px; text-align: right; }
.breakdown-row.negative .bk-value { color: #ef4444; }

body.dark .profit-breakdown, body.dark .profit-per-unit { background: #4f4a54; border-color: #635e69; }
body.dark .profit-breakdown h3, body.dark .profit-per-unit h3 { color: #f1f5f9; }
body.dark .breakdown-row { background: #4f4a54; border-color: #5a5560; }
body.dark .bk-label { color: #cbd5e1; }
body.dark .bk-value { color: #f1f5f9; }

/* Unit Calc */
.unit-calc { display: flex; flex-direction: column; gap: 8px; }
.unit-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-radius: 8px; font-size: 0.9rem;
    background: #fff; border: 1px solid #f1f5f9;
}
.unit-row.total {
    background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(6,182,212,0.06));
    border-color: rgba(124,58,237,0.15);
    font-weight: 700;
}
.unit-row .green { color: #10b981; font-weight: 700; }
.unit-row .red { color: #ef4444; font-weight: 600; }
body.dark .unit-row { background: #4f4a54; border-color: #5a5560; color: #e2e8f0; }

/* Reports Grid */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.report-card {
    background: var(--card-bg, #f7f9fc);
    border: 1px solid #e0e6ed;
    border-radius: var(--card-radius, 12px);
    padding: 24px;
}
.report-card h3 {
    font-size: 0.95rem; font-weight: 700; color: #4f4a54;
    margin-bottom: 18px;
}
.report-chart {
    display: flex; align-items: flex-end; gap: 8px;
    height: 160px; padding-top: 10px;
}
.chart-bar {
    flex: 1; background: linear-gradient(180deg, var(--primary, #7c3aed), rgba(124,58,237,0.5));
    border-radius: 6px 6px 0 0;
    position: relative; cursor: pointer;
    transition: all 0.2s; min-height: 8px;
}
.chart-bar:hover, .chart-bar.active { background: linear-gradient(180deg, #06b6d4, rgba(6,182,212,0.5)); }
.chart-bar::after {
    content: attr(data-label);
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-size: 0.7rem; color: #6b7280; white-space: nowrap;
}

/* Donut Charts */
.donut-container { display: flex; align-items: center; gap: 20px; }
.donut {
    width: 100px; height: 100px; border-radius: 50%;
    background: conic-gradient(var(--color, #10b981) calc(var(--pct, 0) * 1%), #e5e7eb 0);
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
}
.donut::before {
    content: ''; width: 68px; height: 68px; border-radius: 50%;
    background: var(--card-bg, #f7f9fc); position: absolute;
}
.donut-value {
    position: relative; z-index: 1;
    font-size: 1.1rem; font-weight: 800; color: #4f4a54;
}
.donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot.green { background: #10b981; } .dot.amber { background: #f59e0b; }
.dot.red { background: #ef4444; } .dot.cyan { background: #06b6d4; }
.dot.blue { background: #3b82f6; }

body.dark .report-card { background: #4f4a54; border-color: #635e69; }
body.dark .report-card h3 { color: #f1f5f9; }
body.dark .donut::before { background: #4f4a54; }
body.dark .donut-value { color: #f1f5f9; }

/* Wilaya Bars */
.top-wilayas { display: flex; flex-direction: column; gap: 10px; }
.wilaya-bar {
    display: grid; grid-template-columns: 100px 1fr 40px;
    align-items: center; gap: 10px; font-size: 0.85rem;
}
.wilaya-bar span:first-child { font-weight: 600; color: #374151; }
.w-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.w-fill { height: 100%; background: linear-gradient(90deg, var(--primary, #7c3aed), #06b6d4); border-radius: 4px; transition: width 0.4s ease; }
.wilaya-bar span:last-child { font-weight: 700; color: var(--primary, #7c3aed); text-align: right; }
body.dark .wilaya-bar span:first-child { color: #cbd5e1; }
body.dark .w-bar { background: #334155; }

/* Confirmer Stats */
.confirmer-ranking { display: flex; flex-direction: column; gap: 10px; }
.confirmer-rank-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    background: #fff; border: 1px solid #f1f5f9;
}
.rank-number { font-size: 1.1rem; min-width: 28px; text-align: center; }
.rank-info { flex: 1; }
.rank-info strong { display: block; font-size: 0.88rem; color: #4f4a54; }
.rank-detail { font-size: 0.78rem; color: #6b7280; }
.rank-bar { width: 80px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.rank-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
body.dark .confirmer-rank-item { background: #4f4a54; border-color: #5a5560; }
body.dark .rank-info strong { color: #f1f5f9; }
body.dark .rank-detail { color: #94a3b8; }
body.dark .rank-bar { background: #334155; }

/* Pro Badge */
.pro-badge {
    display: inline-block; padding: 2px 8px;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: #fff; font-size: 0.65rem; font-weight: 800;
    border-radius: 6px; letter-spacing: 0.05em;
    vertical-align: middle; margin-left: 6px;
}

/* Responsive form layout */
@media (max-width: 768px) {
    .form-layout { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .profit-header-row { flex-direction: column; }
    .reports-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .appearance-drawer { width: 100%; max-width: 100%; }
}

/* ========== CARRIER LOGO GRID — New Design ========== */
/* ===== Carrier Logo Grid ===== */
.carrier-logos-section {
    margin-top: 20px;
}
.carrier-zoom-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    justify-content: flex-end;
}
.carrier-zoom-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.carrier-zoom-btn:hover { background: #f1f5f9; color: var(--primary, #6366f1); }
.carrier-zoom-val {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 38px;
    text-align: center;
    user-select: none;
}
body.dark .carrier-zoom-val { color: #64748b; }
body.dark .carrier-zoom-btn {
    background: #1a2332;
    border-color: #756f7c;
    color: #94a3b8;
}
body.dark .carrier-zoom-btn:hover { background: #5a5560; color: var(--primary, #818cf8); }
.carrier-logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Logo-only card — the card IS the logo */
.carrier-logo-card {
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.carrier-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.carrier-logo-card.active {
    box-shadow: 0 0 0 2px var(--primary, #6366f1), 0 6px 20px rgba(99,102,241,0.15);
}
.carrier-logo-card .carrier-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block;
}
.carrier-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--c) 10%, #fff 90%);
}
.carrier-logo-fallback span {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--c);
}
.carrier-connected-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(16,185,129,0.5);
    z-index: 2;
}

/* Small popup card */
.carrier-popup {
    width: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 14px;
    animation: cpFadeIn 0.18s ease;
    position: relative;
    margin-top: -4px;
    margin-bottom: 6px;
}
@keyframes cpFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.carrier-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.carrier-popup-header img.carrier-popup-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
}
.carrier-popup-header .carrier-popup-code {
    font-size: 1rem;
    font-weight: 800;
}
.carrier-popup-header div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.carrier-popup-header strong {
    font-size: 0.88rem;
    color: var(--text-primary);
}
.carrier-popup-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 2px;
    border-radius: 4px;
}
.carrier-popup-close:hover { background: rgba(0,0,0,0.06); }
.cp-status {
    font-size: 0.72rem;
    font-weight: 600;
}
.cp-status.online { color: #10b981; }
.cp-status.offline { color: #94a3b8; }

.carrier-popup-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.cps {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.cps.success { background: #dcfce7; color: #16a34a; }
.cps.info    { background: #dbeafe; color: #2563eb; }
.cps.danger  { background: #fee2e2; color: #dc2626; }

.carrier-popup-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.carrier-default-badge {
    background: #6366f1;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
}
.carrier-popup-actions {
    display: flex;
    gap: 6px;
}
.cpa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cpa:hover { background: #f8fafc; }
.cpa.test { color: #3b82f6; }
.cpa.settings { color: #6366f1; }
.cpa.delete { color: #ef4444; border-color: rgba(239,68,68,0.2); }
.cpa.delete:hover { background: #fef2f2; }

.carrier-popup-connect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.carrier-popup-connect:hover { opacity: 0.9; }

/* Dark mode */
body.dark .carrier-logo-card {
    background: #1a2332;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
body.dark .carrier-logo-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
body.dark .carrier-logo-card.active {
    box-shadow: 0 0 0 2px var(--primary, #818cf8), 0 6px 20px rgba(129,140,248,0.15);
}
body.dark .carrier-logo-fallback {
    background: color-mix(in srgb, var(--c) 15%, #1a2332 85%);
}
body.dark .carrier-connected-dot {
    box-shadow: 0 0 0 2px #1a2332, 0 0 6px rgba(16,185,129,0.5);
}
body.dark .carrier-popup {
    background: #5a5560;
    box-shadow: 0 10px 36px rgba(0,0,0,0.4), 0 0 0 1px #635e69;
}
body.dark .carrier-popup-header strong { color: #e2e8f0; }
body.dark .carrier-popup-close { color: #64748b; }
body.dark .carrier-popup-close:hover { background: rgba(255,255,255,0.06); }
body.dark .carrier-popup-info { color: #94a3b8; }
body.dark .cpa {
    background: #1a2332;
    border-color: #635e69;
    color: #94a3b8;
}
body.dark .cpa:hover { background: #4f4a54; }
body.dark .cpa.test { color: #60a5fa; }
body.dark .cpa.settings { color: #a78bfa; }
body.dark .cpa.delete { color: #f87171; border-color: rgba(248,113,113,0.2); }
body.dark .cpa.delete:hover { background: rgba(239,68,68,0.08); }
body.dark .cps.success { background: rgba(22,163,106,0.15); color: #4ade80; }
body.dark .cps.info    { background: rgba(59,130,246,0.15); color: #93c5fd; }
body.dark .cps.danger  { background: rgba(239,68,68,0.15); color: #fca5a5; }

/* Responsive */
@media (max-width: 540px) {
    .carrier-popup { width: 220px; }
}

/* ===== REVENUE CHART — FIX INTERACTIF ===== */

/* Force overflow visible sur la carte revenue pour que labels/tooltips soient visibles */
.revenue-card {
    overflow: visible !important;
    padding-bottom: 20px !important;
}

/* Container du graphique — espace pour tooltips en haut et labels en bas */
.revenue-chart {
    overflow: visible !important;
    padding-top: 28px;
    padding-bottom: 26px;
    height: auto !important;
    min-height: 80px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Label du jour — toujours visible en bas */
.revenue-chart .chart-bar::before {
    content: attr(data-label);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
    pointer-events: none;
}

/* Tooltip valeur — visible au survol / actif */
.revenue-chart .chart-bar::after {
    content: attr(data-value);
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-size: 0.68rem;
    font-weight: 700;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid rgba(124, 58, 237, 0.18);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.revenue-chart .chart-bar:hover::after,
.revenue-chart .chart-bar.active::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Barre active (aujourd'hui) — couleur distincte */
.revenue-chart .chart-bar.active {
    background: var(--gradient-primary, linear-gradient(180deg, #7c3aed, #a78bfa));
    box-shadow: 0 -6px 18px rgba(124, 58, 237, 0.28);
}

/* Hovér interactif amélioré */
.revenue-chart .chart-bar:hover {
    background: var(--gradient-primary, linear-gradient(180deg, #7c3aed, #a78bfa));
    box-shadow: 0 -4px 14px rgba(124, 58, 237, 0.2);
    transform: scaleX(1.04);
    transition: all 0.18s ease;
}

/* Dark mode */
body.dark .revenue-chart .chart-bar::after {
    color: #c4b5fd;
    background: #1e1b4b;
    border-color: rgba(167, 139, 250, 0.25);
}

body.dark .revenue-chart .chart-bar::before {
    color: #64748b;
}

/* ===== Shopify-style flat sidebar ===== */
.nav-section.nav-section-flat { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.sidebar-divider { height: 1px; background: rgba(148,163,184,0.18); margin: 8px 12px; }
.link-badge.link-badge-cyan { background: rgba(6,182,212,0.15); color: #06b6d4; border: 1px solid rgba(6,182,212,0.25); }
.link-badge.link-badge-count { background: #756f7c; color: #64748b; min-width: 22px; text-align: center; padding: 1px 8px; border-radius: 999px; }
body.dark .link-badge.link-badge-count { background: rgba(148,163,184,0.2); color: #cbd5e1; }

/* ===== Store Almost Ready Banner ===== */
.store-ready-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
    border: 1px solid rgba(245,158,11,0.35);
    border-radius: 14px; padding: 14px 18px; margin-bottom: 14px;
}
.store-ready-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(245,158,11,0.2); color: #f59e0b;
    display: grid; place-items: center; flex-shrink: 0;
}
.store-ready-body { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.store-ready-body strong { font-size: 15px; color: #b45309; }
.store-ready-body span { font-size: 13px; color: #92400e; }
.store-ready-cta {
    background: #f59e0b; color: #fff; border: 0; border-radius: 10px;
    padding: 9px 16px; font-weight: 600; cursor: pointer; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
}
.store-ready-cta:hover { background: #d97706; }
body.dark .store-ready-banner { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.05)); }
body.dark .store-ready-body strong { color: #fbbf24; }
body.dark .store-ready-body span { color: #fcd34d; }

/* ===== Adaptive stats grid (7 cards: 4+3 or auto-fit) ===== */
.stats-grid.stats-8 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
@media (min-width: 1400px) { .stats-grid.stats-8 { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 900px)  { .stats-grid.stats-8 { grid-template-columns: repeat(2, 1fr); } }

/* ===== Funnel period toggle ===== */
.funnel-period-toggle { display: inline-flex; gap: 4px; background: #635e69; padding: 3px; border-radius: 10px; }
.fpt-btn {
    background: transparent; border: 0; padding: 6px 12px; border-radius: 8px;
    font-size: 12px; cursor: pointer; color: #64748b; font-weight: 500;
}
.fpt-btn.active { background: #fff; color: #4f4a54; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
body.dark .fpt-btn.active { background: #5a5560; color: #f1f5f9; }

/* ===== Shrunken wilaya map + split grid ===== */
.overview-geo-grid.overview-geo-grid-split {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px;
}
@media (max-width: 1100px) { .overview-geo-grid.overview-geo-grid-split { grid-template-columns: 1fr; } }
.dz-map-card-compact .dz-map-layout-compact { display: block; }
.dz-map-card-compact .dz-map-stage { max-height: 360px; }
.dz-map-card-compact .dz-map-surface { max-height: 340px; }
.dz-map-kpis-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    padding: 12px 16px; border-top: 1px solid #756f7c;
}
.dz-map-kpis-strip .dz-map-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dz-map-kpis-strip .dz-map-kpi span { font-size: 11px; color: #64748b; }
.dz-map-kpis-strip .dz-map-kpi strong { font-size: 15px; color: #4f4a54; }
body.dark .dz-map-kpis-strip .dz-map-kpi strong { color: #f1f5f9; }
.dz-map-focus-hidden { display: none; }

/* ===== Attention Needed card ===== */
.attention-card { display: flex; flex-direction: column; }
.attention-header h3 { display: flex; align-items: center; gap: 8px; }
.attention-list { display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.attention-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 10px; text-decoration: none;
    color: inherit; transition: background 0.15s;
}
.attention-row:hover { background: #635e69; }
.attention-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.attention-ic.amber { background: rgba(245,158,11,0.15); color: #f59e0b; }
.attention-ic.red { background: rgba(239,68,68,0.15); color: #ef4444; }
.attention-ic.purple { background: rgba(124,58,237,0.15); color: #7c3aed; }
.attention-ic.cyan { background: rgba(6,182,212,0.15); color: #06b6d4; }
.attention-body { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.attention-body strong { font-size: 13px; color: #4f4a54; }
.attention-body span { font-size: 11px; color: #64748b; }
.attention-count {
    min-width: 30px; padding: 4px 10px; border-radius: 999px;
    background: rgba(239,68,68,0.12); color: #ef4444;
    font-weight: 700; font-size: 13px; text-align: center;
}
body.dark .attention-body strong { color: #f1f5f9; }

/* ===== Coming soon placeholder ===== */
.coming-soon-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 80px 24px; text-align: center;
    background: var(--card-bg, #f7f9fc); border-radius: 16px;
    border: 2px dashed rgba(148,163,184,0.35);
}
.coming-soon-card i { width: 56px; height: 56px; color: #94a3b8; }
.coming-soon-card h3 { font-size: 20px; color: #4f4a54; margin: 0; }
.coming-soon-card p { font-size: 14px; color: #64748b; margin: 0; }
body.dark .coming-soon-card h3 { color: #f1f5f9; }
body.dark .coming-soon-card { background: rgba(30,41,59,0.5); border-color: rgba(148,163,184,0.2); }

/* ===== Dashboard Overview Grid (3-column layout matching reference) ===== */
.dashboard-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1.15fr;
    gap: 16px;
    margin: 16px 0;
    align-items: stretch;
}
.overview-left-col { display: flex; flex-direction: column; gap: 16px; }
.overview-top-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.overview-bottom-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; flex: 1; }
.overview-right-col { display: flex; }
.overview-right-col > .table-card { flex: 1; display: flex; flex-direction: column; }
@media (max-width: 1200px) {
    .dashboard-overview-grid { grid-template-columns: 1fr; }
    .overview-top-row, .overview-bottom-row { grid-template-columns: 1fr; }
}

/* ===== Gross Orders Value (big dark card) ===== */
.gross-value-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #162a47 100%);
    border-radius: 16px;
    padding: 20px 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.gross-value-top { display: flex; justify-content: flex-end; }
.gross-value-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.gross-value-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; }
.gross-value-badge.is-active { background: rgba(16,185,129,0.18); color: #86efac; border-color: rgba(16,185,129,0.35); }
.gross-value-badge.is-active .gross-value-dot { background: #10b981; }
.gross-value-body {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
    margin: 14px 0 10px;
}
.gross-value-label { font-size: 12px; color: #94a3b8; letter-spacing: 0.3px; }
.gross-value-number { font-size: 28px; font-weight: 800; color: #fff; margin-top: 4px; line-height: 1; }
.gross-value-right { text-align: end; }
.gross-value-sublabel { font-size: 12px; color: #94a3b8; }
.gross-value-count { font-size: 20px; font-weight: 700; color: #fff; margin-top: 4px; line-height: 1; }
.gross-value-bar {
    width: 100%; height: 6px; border-radius: 999px;
    background: rgba(148, 163, 184, 0.15); overflow: hidden;
}
.gross-value-fill {
    height: 100%; background: linear-gradient(90deg, #3b82f6, #06b6d4);
    border-radius: 999px; transition: width 0.3s ease;
}

/* ===== Estimated Revenues card ===== */
.estimated-rev-card {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 160px;
    justify-content: center;
}
.est-rev-header { display: flex; align-items: center; gap: 10px; }
.est-rev-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(16, 185, 129, 0.12); color: #10b981;
    display: grid; place-items: center;
}
.est-rev-label { font-size: 13px; color: #64748b; font-weight: 500; }
.est-rev-value { font-size: 26px; font-weight: 800; color: #4f4a54; line-height: 1; margin: 4px 0; }
.est-rev-change { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.est-rev-change.positive { color: #10b981; }
.est-rev-change.negative { color: #ef4444; }
body.dark .estimated-rev-card { background: #4f4a54; border: 1px solid #6e6874; }
body.dark .est-rev-value { color: #f1f5f9; }

/* ===== Attention Needed — simple list rows (matching reference) ===== */
.attention-row-simple {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: background 0.15s;
}
.attention-row-simple:hover { background: rgba(148, 163, 184, 0.08); }
.attention-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.attention-dot.red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.attention-dot.amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.attention-dot.purple { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.attention-dot.cyan { background: #06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,0.15); }
.attention-view {
    color: #3b82f6; font-size: 12px; font-weight: 600; text-decoration: underline;
}

/* ===== Funnel Performance — pill bars ===== */
.funnel-section-pills { padding: 16px 18px; }
.funnel-section-pills .funnel-header h3 { font-size: 14px; }
.funnel-pills {
    display: flex; flex-direction: column; gap: 10px;
    align-items: center; padding: 16px 0 4px;
}
.funnel-pill {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 18px; border-radius: 999px;
    color: #fff; font-size: 13px; font-weight: 600;
    min-width: 220px; transition: transform 0.15s;
}
.funnel-pill:hover { transform: translateY(-1px); }
.funnel-pill-impressions { background: #94a3b8; width: 95%; }
.funnel-pill-new        { background: #f59e0b; width: 82%; }
.funnel-pill-confirmed  { background: #3b82f6; width: 70%; }
.funnel-pill-shipped    { background: #5eead4; color: #4f4a54; width: 58%; }
.funnel-pill-delivered  { background: #10b981; width: 46%; }
.funnel-pill .fp-label { letter-spacing: 0.2px; }
.funnel-pill .fp-count { font-weight: 800; }

/* Hide legacy funnel bars block (kept only for JS id-compat) */
.funnel-steps-legacy { display: none !important; }

/* ===== Map compact tweaks inside right column ===== */
.overview-right-col .dz-map-card-compact { height: 100%; }
.overview-right-col .dz-map-stage { max-height: none; height: 100%; }
.overview-right-col .dz-map-surface { max-height: none; height: 100%; min-height: 380px; }

/* Hide old overview-geo-grid-split leftover class if rendered */
.overview-geo-grid-split:empty { display: none; }

/* ===== Final polish pass ===== */
.gross-value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 10%, rgba(59, 130, 246, 0.15), transparent 50%);
    pointer-events: none;
}
.gross-value-card > * { position: relative; z-index: 1; }

.funnel-section-pills .funnel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 4px;
}
.funnel-section-pills .funnel-header h3 {
    font-size: 14px; font-weight: 600; color: #4f4a54;
    display: flex; align-items: center; gap: 6px;
    margin: 0;
}
.funnel-section-pills .funnel-subtitle {
    font-size: 11px; color: #94a3b8; font-weight: 500;
}
body.dark .funnel-section-pills .funnel-header h3 { color: #f1f5f9; }
body.dark .funnel-section-pills .funnel-header { border-color: rgba(148, 163, 184, 0.1); }

.attention-card .table-card-header h3 {
    font-size: 14px; margin: 0;
}

/* Align card heights in overview grid */
.overview-top-row > * { display: flex; flex-direction: column; }
.overview-bottom-row > .table-card { display: flex; flex-direction: column; }
.overview-bottom-row > .table-card .attention-list { flex: 1; }

/* ============================================================
   PROFESSIONAL SETUP GUIDE (replaces the old playful onboarding)
   ============================================================ */
.setup-guide {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 28px 32px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f2547 0%, #1e3a6e 55%, #1e40af 100%);
    color: #e8ecf6;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    align-items: center;
    box-shadow:
        0 20px 45px -25px rgba(15, 37, 71, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 960px) { .setup-guide { grid-template-columns: 1fr; padding: 24px; } }

.setup-guide-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(6, 182, 212, 0.18), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.15), transparent 50%);
    pointer-events: none;
}
.setup-guide > * { position: relative; z-index: 1; }

/* Left column */
.setup-guide-left { display: flex; flex-direction: column; gap: 14px; }
.setup-tag {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; color: #cbd5e1;
    letter-spacing: 0.2px;
}
.setup-tag i { color: #67e8f9; }
.setup-title {
    font-size: 26px; font-weight: 800; color: #fff;
    margin: 4px 0 0; line-height: 1.25;
    letter-spacing: -0.3px;
}
.setup-subtitle { font-size: 13.5px; color: rgba(255,255,255,0.72); margin: 0; max-width: 440px; line-height: 1.6; }

/* Progress ring */
.setup-progress-row { display: flex; align-items: center; gap: 18px; margin: 8px 0; }
.setup-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.setup-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.setup-ring-track {
    fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 7;
}
.setup-ring-fill {
    fill: none;
    stroke: #06b6d4;
    stroke: url("#setupRingGradient");
    stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 188.5;
    stroke-dashoffset: calc(188.5 * (1 - 0.16));
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.5));
}
.setup-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.setup-ring-center strong { font-size: 17px; color: #fff; font-weight: 800; }
.setup-ring-center span { font-size: 9.5px; color: rgba(255,255,255,0.6); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

.setup-progress-text { display: flex; flex-direction: column; gap: 4px; }
.setup-progress-count {
    font-size: 28px; font-weight: 800; color: #fff;
    display: flex; align-items: baseline; gap: 2px; line-height: 1;
}
.setup-progress-slash { color: rgba(255,255,255,0.35); font-weight: 500; margin: 0 2px; }
.setup-progress-label { font-size: 12px; color: rgba(255,255,255,0.6); }
.setup-time-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(6, 182, 212, 0.12); color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; align-self: flex-start; margin-top: 3px;
}

.setup-actions { display: flex; gap: 10px; margin-top: 4px; }
.setup-cta-primary {
    background: #fff; color: #1e3a6e;
    border: 0; padding: 11px 22px; border-radius: 10px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    transition: all 0.15s;
}
.setup-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.setup-cta-icon-ltr { display: none; }
[dir="ltr"] .setup-cta-icon-ltr { display: inline-block; }
[dir="ltr"] .setup-cta-icon-rtl { display: none; }
.setup-cta-ghost {
    background: transparent; color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 11px 16px; border-radius: 10px;
    font-weight: 500; font-size: 12.5px; cursor: pointer;
    transition: all 0.15s;
}
.setup-cta-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Right column: step cards */
.setup-guide-right { display: flex; }
.setup-steps-list {
    display: flex; flex-direction: column; gap: 6px; width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 8px;
    backdrop-filter: blur(8px);
}

.sg-step {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.sg-step:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
}
.sg-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700; color: #cbd5e1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    flex-shrink: 0;
}
.sg-step.done { opacity: 0.75; }
.sg-step.done:hover { opacity: 1; }
.sg-step.done .sg-step-num { background: #10b981; border-color: #10b981; color: #fff; }
.sg-step.active { background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.28); }
.sg-step.active .sg-step-num {
    background: #06b6d4; border-color: #06b6d4; color: #fff;
    box-shadow: 0 0 0 4px rgba(6,182,212,0.15);
}
.sg-step-content { flex: 1; display: flex; flex-direction: column; line-height: 1.35; gap: 2px; }
.sg-step-content strong { font-size: 13px; color: #fff; font-weight: 600; }
.sg-step-content span { font-size: 11.5px; color: rgba(255,255,255,0.6); }
.sg-step-status {
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    background: rgba(16,185,129,0.18); color: #6ee7b7;
    border: 1px solid rgba(16,185,129,0.28);
}
.sg-step-time {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.sg-step-time i { opacity: 0.7; }

/* ===== LEGACY onboarding-hero (kept hidden if referenced) ===== */
.onboarding-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 28px 32px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #3b82f6 100%);
    color: #fff;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: stretch;
    box-shadow: 0 20px 40px -20px rgba(37, 99, 235, 0.4);
}
@media (max-width: 980px) {
    .onboarding-hero { grid-template-columns: 1fr; padding: 24px; }
}

/* Decorative background shapes */
.onboarding-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.onb-shape {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
}
.onb-shape-1 { width: 320px; height: 320px; top: -110px; right: -80px; }
.onb-shape-2 { width: 200px; height: 200px; bottom: -60px; left: -40px;
    background: radial-gradient(circle, rgba(6,182,212,0.22), transparent 65%); }
.onb-shape-3 { width: 120px; height: 120px; top: 30%; left: 45%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 65%); }

.onboarding-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.onboarding-tag {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: #fff;
}
.onboarding-title { font-size: 26px; font-weight: 800; margin: 4px 0 0; color: #fff; line-height: 1.2; }
.onboarding-title .wave { display: inline-block; animation: wave 2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.onboarding-subtitle { font-size: 13.5px; color: rgba(255,255,255,0.85); margin: 0; max-width: 520px; line-height: 1.55; }

/* Setup steps grid */
.onboarding-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-top: 4px;
}
@media (max-width: 700px) { .onboarding-steps { grid-template-columns: 1fr; } }
.onb-step {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.onb-step:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); border-color: rgba(255,255,255,0.28); }
.onb-step-ic {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
}
.onb-step.done .onb-step-ic { background: #10b981; border-color: #10b981; color: #fff; }
.onb-step.active .onb-step-ic { background: #fff; color: #2563eb; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.2); }
.onb-step-txt { display: flex; flex-direction: column; line-height: 1.25; }
.onb-step-txt strong { font-size: 13px; color: #fff; font-weight: 600; }
.onb-step-txt span { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 1px; }

/* Progress + CTA */
.onboarding-footer { display: flex; align-items: flex-end; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.onb-progress { flex: 1; min-width: 220px; }
.onb-progress-head { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 6px; }
.onb-progress-head strong { color: #fff; font-weight: 700; }
.onb-progress-bar { height: 6px; background: rgba(255,255,255,0.2); border-radius: 999px; overflow: hidden; }
.onb-progress-fill { height: 100%; background: linear-gradient(90deg, #06b6d4, #10b981); border-radius: 999px; transition: width 0.4s; }
.onboarding-actions { display: flex; gap: 10px; }
.onb-cta-primary {
    background: #fff; color: #1e40af;
    border: 0; padding: 10px 20px; border-radius: 10px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transition: transform 0.15s;
}
.onb-cta-primary:hover { transform: translateY(-1px); }
.onb-cta-secondary {
    background: transparent; color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 16px; border-radius: 10px;
    font-weight: 500; font-size: 12px; cursor: pointer;
    transition: all 0.15s;
}
.onb-cta-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Right-side visual */
.onboarding-visual {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px;
}
.onb-badge-top {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: #fff;
    backdrop-filter: blur(4px);
}
.onb-illustration { position: relative; width: 220px; height: 180px; }
.onb-card-stack { position: relative; width: 100%; height: 100%; }
.onb-mini-card {
    position: absolute;
    background: rgba(255,255,255,0.95);
    color: #1e40af;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
    animation: onbFloat 4s ease-in-out infinite;
}
.onb-mini-card i { width: 18px; height: 18px; color: #2563eb; }
.onb-mini-card-1 { top: 0; left: 0; animation-delay: 0s; }
.onb-mini-card-2 { top: 60px; left: 40px; animation-delay: 0.6s; background: rgba(6,182,212,0.95); color: #fff; }
.onb-mini-card-2 i { color: #fff; }
.onb-mini-card-3 { top: 120px; left: 5px; animation-delay: 1.2s; }
@keyframes onbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.onb-rocket {
    position: absolute; top: 30px; right: 0;
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 16px;
    display: grid; place-items: center;
    box-shadow: 0 10px 24px rgba(251,191,36,0.4);
    animation: onbFloat 3s ease-in-out infinite;
}
.onb-rocket i { width: 26px; height: 26px; color: #fff; }

/* ============================================================
   DARK SIDEBAR + PAGE FRAME (Mirocho style)
   ============================================================ */
body { background: linear-gradient(135deg, #eef2f7 0%, #e3eaf5 100%); }

.app-layout {
    padding: 10px;
    gap: 10px;
    min-height: calc(100vh - 60px);
}

.sidebar {
    background: #1a2332 !important;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}

.sidebar .sidebar-search {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #cbd5e1;
}
.sidebar .sidebar-search input {
    background: transparent; color: #e2e8f0;
}
.sidebar .sidebar-search input::placeholder { color: #64748b; }
.sidebar .sidebar-search kbd {
    background: rgba(255,255,255,0.1); color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.08);
}

.sidebar .sidebar-link {
    color: #b8c1d1 !important;
    border-radius: 10px;
    margin: 1px 8px;
    padding: 9px 12px;
    transition: all 0.15s;
}
.sidebar .sidebar-link i {
    color: #94a3b8 !important;
    width: 18px; height: 18px;
}
.sidebar .sidebar-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
.sidebar .sidebar-link:hover i { color: #e2e8f0 !important; }
.sidebar .sidebar-link.active {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(6,182,212,0.12)) !important;
    color: #fff !important;
    border: 1px solid rgba(59,130,246,0.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.sidebar .sidebar-link.active i { color: #60a5fa !important; }

.sidebar .nav-section-title { color: #64748b !important; font-size: 11px; letter-spacing: 0.6px; padding: 12px 20px 6px; }
.sidebar-divider { background: rgba(255,255,255,0.08) !important; }

.sidebar .link-badge { font-weight: 600; font-size: 10px; padding: 2px 7px; border-radius: 999px; }
.sidebar .link-badge.link-badge-cyan { background: rgba(6,182,212,0.18) !important; color: #67e8f9 !important; border: 1px solid rgba(6,182,212,0.3); }
.sidebar .link-badge.link-badge-count { background: #756f7c !important; color: #cbd5e1 !important; }

.sidebar-footer .credits-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: #cbd5e1;
}
.sidebar-footer .credits-header { color: #e2e8f0; }
.sidebar-footer .credits-bar { background: rgba(255,255,255,0.08); }
.sidebar-footer .credits-info { color: #94a3b8; }
.sidebar-footer .credits-info a { color: #60a5fa; }

.sidebar-footer .user-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.sidebar-footer .user-card strong { color: #f1f5f9; }
.sidebar-footer .user-card .user-info span { color: #94a3b8; }
.sidebar-footer .user-menu-btn { color: #94a3b8; }

/* Page frame (edge-to-edge with sidebar) */
.main-content {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background:
        linear-gradient(180deg, #f5f9ff 0%, #ffffff 180px),
        #ffffff !important;
    overflow: hidden;
    position: relative;
}

.main-content::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6, #06b6d4);
    z-index: 10;
    pointer-events: none;
}

/* Dark mode — sidebar stays dark (already is), main content dark-friendly */
body.dark .sidebar {
    background: #4f4a54 !important;
    border-color: rgba(255,255,255,0.05) !important;
}
body.dark .main-content {
    background:
        linear-gradient(180deg, rgba(30,41,59,0.5) 0%, #4f4a54 180px),
        #4f4a54 !important;
    border-color: rgba(59,130,246,0.2) !important;
}
body.dark { background: #3a363f; }

/* ============================================================
   FRAME EFFECT: sidebar color wraps the whole page
   (no top bar separator — topbar merges with sidebar as one dark frame)
   ============================================================ */
html, body {
    background: #1a2332 !important;
    margin: 0;
}
body[dir="rtl"], body[dir="ltr"] { background: #1a2332 !important; }

/* Top bar blends with the dark frame */
.topbar-global {
    background: #1a2332 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding: 10px 18px !important;
    border: 0 !important;
    position: relative;
    z-index: 20;
}
.topbar-global .topbar-btn,
.topbar-global .topbar-system-link {
    background: rgba(255,255,255,0.05) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.topbar-global .topbar-btn:hover,
.topbar-global .topbar-system-link:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
.topbar-global .topbar-center,
.topbar-global .topbar-center * { color: #e2e8f0 !important; }
.topbar-global .lang-toggle {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.topbar-global .lang-option { color: #94a3b8 !important; }
.topbar-global .lang-option.active { background: rgba(255,255,255,0.15) !important; color: #fff !important; }

/* App layout frame: sidebar flush to left; content area inset on 3 sides */
.app-layout {
    background: #1a2332 !important;
    padding: 0 12px 12px 0 !important;
    gap: 0 !important;
}
body[dir="rtl"] .app-layout { padding: 0 0 12px 12px !important; }

.sidebar {
    background: #1a2332 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.main-content {
    background:
        linear-gradient(180deg, #f5f9ff 0%, #ffffff 180px),
        #ffffff !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: visible;
    min-height: calc(100vh - 80px);
}
body[dir="rtl"] .main-content {
    margin: 0 !important;
}

/* Remove colored top strip (replaced by unified dark frame) */
.main-content::before { display: none !important; }

/* Dark mode keeps the frame consistent */
body.dark, body.dark html { background: #3a363f !important; }
body.dark .app-layout,
body.dark .sidebar,
body.dark .topbar-global { background: #3a363f !important; }
body.dark .main-content {
    background:
        linear-gradient(180deg, rgba(30,41,59,0.6) 0%, #4f4a54 180px),
        #4f4a54 !important;
    box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   WORLD-CLASS PALETTE — Deep Navy Blue (matches Setup Guide gradient)
   Palette: #0f2547 → #1e3a6e → #1e40af with violet-cyan accents
   ============================================================ */

/* --- LIGHT MODE (frame uses setup-guide palette) --- */
html:not(.dark), body:not(.dark) {
    background: #0f2547 !important;
}
.app-layout {
    background: linear-gradient(180deg, #0f2547 0%, #0c1f3d 100%) !important;
}
.sidebar {
    background: linear-gradient(180deg, #0f2547 0%, #0c1f3d 60%, #0a1a35 100%) !important;
}
.topbar-global {
    background: linear-gradient(180deg, #102a52 0%, #0f2547 100%) !important;
}

/* Gradient glow accent on sidebar right-edge (matches setup-guide accent) */
.sidebar {
    position: relative;
}
.sidebar::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    right: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(59,130,246,0.4) 35%, rgba(6,182,212,0.3) 65%, transparent);
    pointer-events: none;
}
body[dir="rtl"] .sidebar::after { right: auto; left: 0; }

/* Main content — LIGHT MODE: soft gray #ebebeb as requested */
.main-content {
    background: #ebebeb !important;
    box-shadow: none !important;
}
/* Cards on light gray bg need white to stand out */
html:not(.dark) .stat-card,
html:not(.dark) .stats-grid .stat-card,
html:not(.dark) .table-card,
html:not(.dark) .revenue-card,
html:not(.dark) .funnel-section,
html:not(.dark) .attention-card,
html:not(.dark) .estimated-rev-card,
html:not(.dark) .dz-map-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 12px !important;
}

/* Sidebar links — Navy Blue premium (matches setup-guide tone) */
.sidebar .sidebar-link {
    color: #8ea5c7 !important;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.sidebar .sidebar-link i { color: #6a81a4 !important; }
.sidebar .sidebar-link:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #e8efff !important;
}
.sidebar .sidebar-link:hover i { color: #60a5fa !important; }
.sidebar .sidebar-link.active {
    background: linear-gradient(135deg, rgba(59,130,246,0.28) 0%, rgba(6,182,212,0.15) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 4px 14px -4px rgba(59, 130, 246, 0.5);
}
.sidebar .sidebar-link.active i { color: #60a5fa !important; filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.5)); }

.sidebar .nav-section-title {
    color: #4d6388 !important;
    font-weight: 600;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px !important;
    padding: 14px 22px 6px !important;
}
.sidebar-divider { background: rgba(59, 130, 246, 0.12) !important; margin: 10px 14px !important; }

.sidebar .link-badge.link-badge-cyan {
    background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(59,130,246,0.2)) !important;
    color: #67e8f9 !important;
    border: 1px solid rgba(6,182,212,0.35);
    font-weight: 700;
}
.sidebar .link-badge.link-badge-count {
    background: rgba(255,255,255,0.06) !important;
    color: #8ea5c7 !important;
    border: 1px solid rgba(59,130,246,0.15);
}

/* Sidebar search */
.sidebar .sidebar-search {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-radius: 10px;
}
.sidebar .sidebar-search input { color: #e8efff !important; }
.sidebar .sidebar-search input::placeholder { color: #4d6388 !important; }
.sidebar .sidebar-search kbd { background: rgba(255,255,255,0.06) !important; color: #6a81a4 !important; border-color: rgba(59,130,246,0.15) !important; }

/* Sidebar footer cards */
.sidebar-footer .credits-card,
.sidebar-footer .user-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-radius: 12px;
}

/* ============================================================
   DARK MODE — Exact Charcoal Palette (user-specified, high-clarity)
   Background: #3a363f · Sidebar: #4f4a54 · Cards: #4f4a54
   Key: crisp white text + defined borders + subtle lift shadow
   ============================================================ */
body.dark, html.dark {
    background: #3a363f !important;
    /* remove any blur/filter on root that may wash colors */
    filter: none !important;
    backdrop-filter: none !important;
}

body.dark .app-layout {
    background: #3a363f !important;
}
body.dark .sidebar {
    background: #4f4a54 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[dir="rtl"].dark .sidebar {
    border-right: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark .topbar-global {
    background: #4f4a54 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* Main content — FLAT edge-to-edge, no border/shadow/radius */
body.dark .main-content {
    background: #3a363f !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #f5f5f7 !important;
    margin: 0 !important;
}
body.dark .main-content::before { display: none !important; }

/* Sidebar links — crisp readable charcoal */
body.dark .sidebar .sidebar-link {
    color: #b8b8bc !important;
    font-weight: 500;
}
body.dark .sidebar .sidebar-link i { color: #9a9a9d !important; }
body.dark .sidebar .sidebar-link:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
}
body.dark .sidebar .sidebar-link:hover i { color: #ffffff !important; }
body.dark .sidebar .sidebar-link.active {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: none !important;
}
body.dark .sidebar .sidebar-link.active i { color: #93c5fd !important; filter: none !important; }

body.dark .sidebar .nav-section-title {
    color: #6e6e72 !important;
}
body.dark .sidebar-divider { background: rgba(255,255,255,0.06) !important; }

body.dark .sidebar .sidebar-search {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
body.dark .sidebar .sidebar-search input { color: #e5e5e7 !important; }
body.dark .sidebar .sidebar-search input::placeholder { color: #6e6e72 !important; }
body.dark .sidebar .sidebar-search kbd { background: rgba(255,255,255,0.06) !important; color: #8a8a8d !important; border-color: rgba(255,255,255,0.08) !important; }

body.dark .sidebar-footer .credits-card,
body.dark .sidebar-footer .user-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
body.dark .sidebar-footer .credits-header,
body.dark .sidebar-footer .user-card strong { color: #f4f4f6 !important; }
body.dark .sidebar-footer .credits-info,
body.dark .sidebar-footer .user-info span { color: #8a8a8d !important; }

body.dark .sidebar .link-badge.link-badge-cyan {
    background: rgba(96,165,250,0.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(96,165,250,0.2) !important;
}
body.dark .sidebar .link-badge.link-badge-count {
    background: rgba(255,255,255,0.06) !important;
    color: #8a8a8d !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Topbar controls — clean charcoal */
body.dark .topbar-global .topbar-btn,
body.dark .topbar-global .topbar-system-link {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e5e5e7 !important;
}
body.dark .topbar-global .topbar-btn:hover,
body.dark .topbar-global .topbar-system-link:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
}
body.dark .topbar-global .lang-toggle {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
body.dark .topbar-global .lang-option { color: #8a8a8d !important; }
body.dark .topbar-global .lang-option.active {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* Cards — exact #4f4a54 with crisp borders + lift shadow for clarity */
body.dark .stat-card,
body.dark .stats-grid .stat-card,
body.dark .stats-grid.stats-8 .stat-card,
body.dark .table-card,
body.dark .revenue-card,
body.dark .funnel-section,
body.dark .attention-card,
body.dark .estimated-rev-card,
body.dark .setup-steps-list,
body.dark .dz-map-card,
body.dark .dashboard-overview-grid .table-card {
    background: #4f4a54 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-inline-start: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    filter: none !important;
    padding: 16px 18px !important;
}
body.dark .stats-grid .stat-card::before,
body.dark .stats-grid.stats-8 .stat-card::before {
    display: none !important;
}
body.dark .stats-grid {
    gap: 14px !important;
}
body.dark .stat-card:hover,
body.dark .stats-grid .stat-card:hover,
body.dark .table-card:hover {
    border-color: rgba(255,255,255,0.18) !important;
    background: #3d3c3e !important;
    transform: translateY(-1px);
    transition: all 0.15s ease;
}

/* Primary text — crisp, near-pure white for Manus-level clarity */
body.dark .stat-card-value,
body.dark .revenue-amount,
body.dark h1, body.dark h2, body.dark h3, body.dark h4,
body.dark .table-card-header h3,
body.dark .est-rev-value,
body.dark .sg-step-content strong,
body.dark .attention-body strong,
body.dark .gross-value-number,
body.dark .gross-value-count,
body.dark .panel-header h1 { color: #fafafa !important; }

body.dark .panel-header p { color: #b8b8bc !important; }

/* Secondary text — readable gray, not washed out */
body.dark .stat-card-label,
body.dark .attention-body span,
body.dark .est-rev-label,
body.dark .rev-label,
body.dark .funnel-subtitle,
body.dark .gross-value-label,
body.dark .gross-value-sublabel { color: #a5a5a8 !important; }

/* Funnel pill colors stay vivid on dark bg */
body.dark .funnel-pill-impressions { background: #3f3f42 !important; color: #f4f4f6 !important; }
body.dark .funnel-pill-new { background: #d97706 !important; }
body.dark .funnel-pill-confirmed { background: #2563eb !important; }
body.dark .funnel-pill-shipped { background: #14b8a6 !important; color: #f4f4f6 !important; }
body.dark .funnel-pill-delivered { background: #059669 !important; }

body.dark .funnel-section-pills .funnel-header h3 { color: #f4f4f6 !important; }
body.dark .funnel-section-pills .funnel-header { border-color: rgba(255,255,255,0.08) !important; }
body.dark .fpt-btn { color: #8a8a8d !important; }
body.dark .fpt-btn.active { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; box-shadow: none !important; }

/* Map KPIs strip */
body.dark .dz-map-kpis-strip { border-top-color: rgba(255,255,255,0.08) !important; }
body.dark .dz-map-kpis-strip .dz-map-kpi strong { color: #f4f4f6 !important; }
body.dark .dz-map-kpis-strip .dz-map-kpi span { color: #8a8a8d !important; }

/* Coming-soon placeholder panels */
body.dark .coming-soon-card {
    background: #4f4a54 !important;
    border: 2px dashed rgba(255,255,255,0.1) !important;
}
body.dark .coming-soon-card h3 { color: #f4f4f6 !important; }
body.dark .coming-soon-card p { color: #8a8a8d !important; }
body.dark .coming-soon-card i { color: #6e6e72 !important; }

/* Attention rows */
body.dark .attention-row-simple:hover {
    background: rgba(255,255,255,0.04) !important;
}
body.dark .attention-view { color: #60a5fa !important; }

/* Buttons — primary becomes white with dark text (Manus-style) */
body.dark .btn-primary {
    background: #ffffff !important;
    color: #1a1a1c !important;
    border: 0 !important;
    font-weight: 600;
}
body.dark .btn-primary:hover {
    background: #f4f4f6 !important;
    color: #1a1a1c !important;
}
body.dark .btn-outline {
    background: transparent !important;
    color: #e5e5e7 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
body.dark .btn-outline:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Setup guide card stays navy-blue in both modes (hero visual identity) */
body.dark .setup-guide {
    background: linear-gradient(135deg, #0f2547 0%, #1e3a6e 55%, #1e40af 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Gross Orders Value dark card — same family */
body.dark .gross-value-card {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
}

/* Tables */
body.dark table th {
    background: #2f2e30 !important;
    color: #9a9a9d !important;
    border-color: rgba(255,255,255,0.06) !important;
}
body.dark table td {
    border-color: rgba(255,255,255,0.06) !important;
    color: #e5e5e7 !important;
}
body.dark table tbody tr:hover {
    background: rgba(255,255,255,0.03) !important;
}

/* Inputs */
body.dark input, body.dark select, body.dark textarea {
    background: #2f2e30 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e5e5e7 !important;
}
body.dark input::placeholder, body.dark textarea::placeholder { color: #6e6e72 !important; }
body.dark input:focus, body.dark select:focus, body.dark textarea:focus {
    border-color: rgba(96,165,250,0.5) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
}

/* Toggles (lang, boutique/commandes) */
body.dark .switch-knob, body.dark .toggle-knob { background: #f4f4f6 !important; }

/* Links */
body.dark a:not(.btn-primary):not(.btn-outline):not(.sidebar-link) { color: #60a5fa; }

/* ============================================================
   NUCLEAR DARK-MODE CARD OVERRIDE
   (defeats ALL legacy `transparent` / `#4f4a54` / `.stats-grid` rules)
   Selector chain crafted for maximum specificity + !important
   ============================================================ */
html body.dark .panel .stats-grid .stat-card,
html body.dark #panel-overview .stats-grid .stat-card,
html body.dark #panel-overview .stats-grid.stats-8 .stat-card,
html body.dark .stats-grid .stat-card,
html body.dark .stats-grid.stats-8 .stat-card,
html body.dark #panel-overview .stat-card,
html body.dark .orders-kpi-card,
html body.dark .integ-stat-card,
html body.dark .track-stat,
html body.dark .stat-card {
    background: #4f4a54 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.18) !important;
    color: #f5f5f7 !important;
    min-height: auto !important;
}
html body.dark .stats-grid .stat-card::before,
html body.dark .stats-grid.stats-8 .stat-card::before {
    display: none !important;
    content: none !important;
}

/* Dark main-content — edge-to-edge, no gap with sidebar */
html body.dark .main-content {
    background:
        radial-gradient(1400px 500px at 50% -120px, rgba(255,255,255,0.02), transparent 70%),
        #3a363f !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    color: #f5f5f7 !important;
}

/* Make sure gap + responsive padding on the grid */
html body.dark .stats-grid { gap: 14px !important; }

/* stat card typography in dark — uniform + crisp */
html body.dark .stat-card .stat-card-value,
html body.dark .stats-grid .stat-card .stat-card-value { color: #fafafa !important; font-weight: 700 !important; }
html body.dark .stat-card .stat-card-label,
html body.dark .stats-grid .stat-card .stat-card-label {
    color: #c5c5c8 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    filter: none !important;
}
html body.dark .stat-card .stat-card-change.positive { color: #34d399 !important; }
html body.dark .stat-card .stat-card-change.negative { color: #f87171 !important; }
html body.dark .stat-card .stat-card-change { color: #9a9a9d !important; }

/* Dashed sparkline underline under stat cards — remove in dark, clean look */
html body.dark .stats-grid .stat-card-label::after,
html body.dark .stats-grid .stat-card::after {
    display: none !important;
}

/* ============================================================
   TOPBAR LOGO — light + dark variants
   ============================================================ */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.topbar-logo {
    height: 38px;
    width: auto;
    max-width: none;
    object-fit: contain;
    transition: height 0.2s ease, opacity 0.25s ease;
}
.topbar-logo-dark { display: none; }
body.dark .topbar-logo-light { display: none; }
body.dark .topbar-logo-dark {
    display: inline-block;
    height: 44px;
    max-width: none;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
}

/* Topbar controls — premium */
.topbar-global .topbar-btn,
.topbar-global .topbar-system-link {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    color: #cbd5e1 !important;
}
.topbar-global .topbar-btn:hover,
.topbar-global .topbar-system-link:hover {
    background: rgba(139,92,246,0.12) !important;
    border-color: rgba(139,92,246,0.3) !important;
    color: #fff !important;
}

/* ============================================================
   FIX MAP — force bright visible wilayas (override any stored color)
   ============================================================ */
#panel-overview .dz-geo-feature path {
    fill: rgba(14, 165, 233, 0.28) !important;
    stroke: rgba(255, 255, 255, 0.85) !important;
    stroke-width: 1.1 !important;
    transition: all 0.2s ease !important;
}
#panel-overview .dz-geo-feature:hover path,
#panel-overview .dz-geo-feature.active path {
    fill: #2563eb !important;
    stroke: #fbbf24 !important;
    stroke-width: 1.8 !important;
    filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.35)) !important;
}
#panel-overview .dz-geo-feature.top-region path {
    stroke: #f59e0b !important;
    stroke-width: 2 !important;
}
#panel-overview .dz-geo-feature.is-empty path {
    fill: rgba(203, 213, 225, 0.45) !important;
}

/* [DISABLED] — was forcing light gradient on map in dark mode (the white rectangle culprit) */
/*
body.dark #panel-overview .dz-map-visual {
    background: linear-gradient(135deg, #f8fafc, #eef2f7) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}
*/
body.dark #panel-overview .dz-map-visual {
    background: transparent !important;
    border-color: transparent !important;
}

/* ============================================================
   SETUP GUIDE — bulletproof flex layout (no grid dependency)
   ============================================================ */
.setup-guide {
    display: flex !important;
    flex-direction: row !important;
    gap: 26px !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    min-height: 340px;
    padding: 26px 30px !important;
}
body[dir="rtl"] .setup-guide { flex-direction: row-reverse !important; }

.setup-guide-left {
    flex: 0 0 44% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    min-width: 0;
}
.setup-guide-right {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0;
}
.setup-guide-right .setup-steps-list {
    flex: 1 !important;
    width: 100% !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Fill bottom of left column with mini feature highlights */
.setup-features-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.setup-feat {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: rgba(255,255,255,0.65);
}
.setup-feat i { width: 14px; height: 14px; color: #67e8f9; }

@media (max-width: 960px) {
    .setup-guide { flex-direction: column !important; }
    body[dir="rtl"] .setup-guide { flex-direction: column !important; }
    .setup-guide-left, .setup-guide-right { flex: 1 1 auto !important; width: 100%; }
}

/* ============================================================
   TIGHTEN DASHBOARD OVERVIEW GRID — no empty spaces
   ============================================================ */
.dashboard-overview-grid {
    min-height: 480px;
}
.overview-right-col .dz-map-card-compact {
    display: flex !important;
    flex-direction: column !important;
}
.overview-right-col .dz-map-layout-compact {
    flex: 1 !important;
    display: flex !important;
    min-height: 280px;
}
.overview-right-col .dz-map-visual {
    flex: 1 !important;
    min-height: 280px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important;
    border-radius: 12px;
}

/* Active item in ltr (Fr) mode - use right border on LTR */
[dir="ltr"] .sidebar .sidebar-link.active { border-left: 3px solid transparent; }

/* ============================================================
   ANALYTICS DASHBOARD — Shopify-style flat French analytics
   ============================================================ */

#panel-analytics { padding: 20px 26px 60px; }

/* === Header === */
.an-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.an-header-title { display: flex; align-items: center; gap: 10px; color: #4f4a54; }
.an-header-title h1 { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.an-last-update { font-size: 0.78rem; color: #64748b; font-weight: 400; margin-inline-start: 8px; }
body.dark .an-header-title { color: #e2e8f0; }
body.dark .an-last-update { color: #94a3b8; }

.an-header-actions { display: flex; align-items: center; gap: 8px; }
.an-icon-btn {
    width: 32px; height: 32px; border: 1px solid #e2e8f0; background: #fff;
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #475569; transition: all 0.15s;
}
.an-icon-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
body.dark .an-icon-btn { background: #4f4a54; border-color: #756f7c; color: #cbd5e1; }
body.dark .an-icon-btn:hover { background: #5a5560; }

.an-primary-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #4f4a54; color: #fff; border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.an-primary-btn:hover { background: #5a5560; }
body.dark .an-primary-btn { background: #fff; color: #4f4a54; }
body.dark .an-primary-btn:hover { background: #f1f5f9; }

/* === Filters Bar === */
.an-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 16px; padding-bottom: 4px;
}
.an-filter-group { position: relative; }
.an-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 7px 12px; font-size: 0.82rem; font-weight: 500; color: #334155;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.an-filter-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
body.dark .an-filter-btn { background: #4f4a54; border-color: #756f7c; color: #cbd5e1; }
body.dark .an-filter-btn:hover { background: #5a5560; }

.an-dropdown {
    position: absolute; top: calc(100% + 4px); inset-inline-start: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.08); padding: 6px; z-index: 50;
    min-width: 200px; display: flex; flex-direction: column;
}
.an-dropdown[hidden] { display: none; }
.an-dropdown button {
    text-align: start; padding: 8px 12px; background: transparent; border: none;
    border-radius: 6px; font-size: 0.82rem; color: #334155; cursor: pointer;
    transition: background 0.12s;
}
.an-dropdown button:hover { background: #f1f5f9; }
.an-dropdown button.active { background: #f1f5f9; color: #4f4a54; font-weight: 600; }
body.dark .an-dropdown { background: #4f4a54; border-color: #756f7c; }
body.dark .an-dropdown button { color: #cbd5e1; }
body.dark .an-dropdown button:hover,
body.dark .an-dropdown button.active { background: #5a5560; color: #fff; }

/* === Loading state === */
.an-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 40px; color: #64748b; font-size: 0.88rem;
}
.an-loading[hidden] { display: none; }
.an-spinner {
    width: 18px; height: 18px; border: 2px solid #e2e8f0; border-top-color: #4f4a54;
    border-radius: 50%; animation: an-spin 0.8s linear infinite;
}
@keyframes an-spin { to { transform: rotate(360deg); } }

/* === KPI Row === */
.an-kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border: 1px solid #e8edf2; border-radius: 12px;
    overflow: hidden; margin-bottom: 12px;
}
body.dark .an-kpi-row { background: #4f4a54; border-color: #635e69; }
.an-kpi-card {
    padding: 14px 18px; border-inline-end: 1px solid #f1f5f9;
    display: flex; flex-direction: column; gap: 8px; cursor: pointer;
    transition: background 0.15s;
}
.an-kpi-card:last-child { border-inline-end: none; }
.an-kpi-card:hover { background: #fafbfc; }
body.dark .an-kpi-card { border-inline-end-color: rgba(148,163,184,0.08); }
body.dark .an-kpi-card:hover { background: #1a2640; }

.an-kpi-head {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.an-kpi-label {
    font-size: 0.78rem; font-weight: 600; color: #5a5560;
    text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 3px;
}
body.dark .an-kpi-label { color: #e2e8f0; text-decoration-color: rgba(148,163,184,0.3); }

.an-kpi-edit {
    width: 22px; height: 22px; padding: 0; background: transparent; border: none;
    border-radius: 5px; cursor: pointer; color: #94a3b8; opacity: 0;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s, background 0.15s;
}
.an-kpi-card:hover .an-kpi-edit { opacity: 1; }
.an-kpi-edit:hover { background: #f1f5f9; color: #4f4a54; }

.an-kpi-body {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.an-kpi-value {
    font-size: 1.35rem; font-weight: 700; color: #4f4a54; letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
body.dark .an-kpi-value { color: #fff; }

.an-kpi-delta {
    font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px;
}
.an-delta-up { color: #16a34a; }
.an-delta-down { color: #dc2626; }
.an-delta-neutral { color: #94a3b8; }

.an-kpi-spark {
    margin-inline-start: auto; height: 24px; min-width: 70px; display: inline-flex;
}
.an-kpi-spark svg { display: block; }

/* === Action Tiles === */
.an-action-tiles { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.an-tile {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e8edf2; border-radius: 10px;
    padding: 10px 16px; font-size: 0.82rem; color: #334155; cursor: pointer;
    transition: all 0.15s;
}
.an-tile:hover { background: #f8fafc; border-color: #cbd5e1; }
.an-tile strong { font-weight: 700; color: #4f4a54; }
body.dark .an-tile { background: #4f4a54; border-color: #635e69; color: #cbd5e1; }
body.dark .an-tile strong { color: #fff; }

/* === Generic card === */
.an-card {
    background: #fff; border: 1px solid #e8edf2; border-radius: 12px;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
    min-height: 240px;
}
body.dark .an-card { background: #4f4a54; border-color: #635e69; }

.an-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.an-card-header h3 {
    margin: 0; font-size: 0.86rem; font-weight: 600; color: #4f4a54;
    text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 3px;
}
body.dark .an-card-header h3 { color: #e2e8f0; text-decoration-color: rgba(148,163,184,0.3); }

.an-card-summary { display: flex; align-items: baseline; gap: 10px; }
.an-card-value {
    font-size: 1.5rem; font-weight: 700; color: #4f4a54; letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
body.dark .an-card-value { color: #fff; }

/* === Rows === */
.an-row { display: grid; gap: 12px; margin-bottom: 12px; }
.an-row-2-1 { grid-template-columns: 2fr 1fr; }
.an-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1280px) {
    .an-row-2-1, .an-row-3 { grid-template-columns: 1fr 1fr; }
    .an-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .an-kpi-card { border-bottom: 1px solid #f1f5f9; }
}
@media (max-width: 768px) {
    .an-row-2-1, .an-row-3 { grid-template-columns: 1fr; }
    .an-kpi-row { grid-template-columns: 1fr; }
    #panel-analytics { padding: 16px; }
}

/* === Chart area (line/area SVG) === */
.an-chart-area { width: 100%; height: 260px; position: relative; }
.an-chart-mini { height: 80px; }
.an-chart-area svg { width: 100%; height: 100%; display: block; }

.an-chart-legend {
    display: flex; gap: 16px; padding-top: 4px; font-size: 0.75rem; color: #64748b;
    justify-content: center;
}
.an-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.an-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.an-legend-current { background: #0ea5e9; }
.an-legend-compare { background: #bae6fd; }
body.dark .an-legend-compare { background: #0c4a6e; }

/* === Breakdown list === */
.an-breakdown-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.an-breakdown-list li {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem;
}
.an-breakdown-list li:last-child { border-bottom: none; }
body.dark .an-breakdown-list li { border-bottom-color: rgba(148,163,184,0.08); }
.an-bk-label { color: #0ea5e9; cursor: pointer; }
.an-bk-label:hover { text-decoration: underline; }
.an-bk-value { color: #4f4a54; font-weight: 600; font-feature-settings: 'tnum'; }
body.dark .an-bk-value { color: #e2e8f0; }
.an-bk-delta { font-size: 0.74rem; font-weight: 600; min-width: 50px; text-align: end; }
.an-bk-total { padding-top: 12px !important; border-top: 1px solid #e2e8f0 !important; }
.an-bk-total .an-bk-label { color: #4f4a54; font-weight: 700; }
body.dark .an-bk-total .an-bk-label { color: #fff; }

/* === Donut === */
.an-donut-wrap {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 180px;
}
.an-donut { width: 160px; height: 160px; transform: rotate(-90deg); }
.an-donut-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; pointer-events: none;
}
.an-donut-value {
    display: block; font-size: 1.35rem; font-weight: 700; color: #4f4a54;
    font-feature-settings: 'tnum';
}
body.dark .an-donut-value { color: #fff; }
.an-donut-label { display: block; font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }

.an-legend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.an-legend-list li {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center;
    font-size: 0.78rem; color: #475569;
}
body.dark .an-legend-list li { color: #cbd5e1; }
.an-legend-list .an-legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.an-legend-list .an-legend-name { color: #334155; }
body.dark .an-legend-list .an-legend-name { color: #e2e8f0; }
.an-legend-list .an-legend-count { font-weight: 600; color: #4f4a54; font-feature-settings: 'tnum'; }
body.dark .an-legend-list .an-legend-count { color: #fff; }
.an-legend-list .an-legend-pct { font-size: 0.72rem; }

/* === Bar list (horizontal bars) === */
.an-bar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.an-bar-list li { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.an-bar-row-top { display: flex; align-items: center; gap: 8px; }
.an-bar-name { color: #475569; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark .an-bar-name { color: #cbd5e1; }
.an-bar-count { font-weight: 600; color: #4f4a54; font-feature-settings: 'tnum'; }
body.dark .an-bar-count { color: #fff; }
.an-bar-pct { font-size: 0.72rem; }
.an-bar-track {
    height: 6px; background: transparent; border-radius: 3px; overflow: hidden;
    display: flex; gap: 2px;
}
.an-bar-fill { height: 100%; background: #0ea5e9; border-radius: 3px; min-width: 2px; }
.an-bar-fill-compare { background: #bae6fd; }
body.dark .an-bar-fill-compare { background: #0c4a6e; }

.an-bar-list-grouped li.an-bar-group-head {
    font-size: 0.8rem; color: #4f4a54; font-weight: 600; padding-top: 6px;
}
body.dark .an-bar-list-grouped li.an-bar-group-head { color: #fff; }

/* === Vertical bars (compare 2 bars side by side) === */
.an-bar-vertical {
    display: flex; align-items: flex-end; gap: 12px; height: 200px;
    padding: 16px 0;
}
.an-vbar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.an-vbar-bars { display: flex; gap: 4px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.an-vbar { width: 50%; min-height: 6px; background: #0ea5e9; border-radius: 4px 4px 0 0; position: relative; }
.an-vbar-compare { background: #bae6fd; }
body.dark .an-vbar-compare { background: #0c4a6e; }
.an-vbar-label { font-size: 0.72rem; color: #64748b; text-align: center; }
.an-vbar-value {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    font-size: 0.7rem; font-weight: 600; color: #4f4a54; white-space: nowrap;
}
body.dark .an-vbar-value { color: #fff; }

/* === Cohort table === */
.an-cohort-wrap { overflow-x: auto; }
.an-cohort-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 0.78rem; }
.an-cohort-table th {
    padding: 8px 10px; text-align: start; color: #64748b; font-weight: 500;
    font-size: 0.74rem;
}
.an-cohort-table td {
    padding: 8px 6px; text-align: center; min-width: 56px; height: 32px;
    background: #f8fafc; border-radius: 4px; color: #475569; font-feature-settings: 'tnum';
}
body.dark .an-cohort-table td { background: #1a2640; color: #cbd5e1; }
.an-cohort-table td.an-coh-label {
    background: transparent; text-align: start; color: #475569; font-weight: 500;
    min-width: 80px;
}
body.dark .an-cohort-table td.an-coh-label { color: #cbd5e1; }
/* Heat shades — sky blue scale */
.an-cohort-table td[data-heat="0"] { background: #f8fafc; }
.an-cohort-table td[data-heat="1"] { background: #e0f2fe; color: #0c4a6e; }
.an-cohort-table td[data-heat="2"] { background: #bae6fd; color: #0c4a6e; }
.an-cohort-table td[data-heat="3"] { background: #7dd3fc; color: #fff; }
.an-cohort-table td[data-heat="4"] { background: #38bdf8; color: #fff; }
.an-cohort-table td[data-heat="5"] { background: #0284c7; color: #fff; font-weight: 600; }
body.dark .an-cohort-table td[data-heat="0"] { background: #1a2640; }

/* === Sell-through (left colored stripe) === */
.an-sell-through { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.an-sell-through li {
    border-inline-start: 3px solid #0ea5e9; padding: 6px 0 6px 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.an-sell-through .an-st-name { font-size: 0.78rem; color: #64748b; }
.an-sell-through .an-st-value { font-size: 0.86rem; font-weight: 600; color: #4f4a54; font-feature-settings: 'tnum'; }
body.dark .an-sell-through .an-st-value { color: #fff; }

/* === Empty state === */
.an-empty {
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 0.82rem; padding: 40px 20px; text-align: center;
    flex: 1;
}


/* ============================================================
   ANALYTICS DASHBOARD — runtime renderer styles
   ============================================================ */
.an-spark-svg { width: 110px; height: 32px; display: block; }
.an-spark-path { fill: none; stroke: #0ea5e9; stroke-width: 1.5; }
body.dark .an-spark-path { stroke: #38bdf8; }

.an-chart-svg { width: 100%; height: 100%; display: block; }
.an-line-current { stroke: #0ea5e9; stroke-width: 2; }
.an-area-current { fill: rgba(14, 165, 233, 0.08); stroke: none; }
.an-line-compare { stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 4 3; }
.an-axis-label { font: 11px Inter, system-ui, sans-serif; fill: #94a3b8; }
.an-grid-line { stroke: #f1f5f9; stroke-width: 1; }
body.dark .an-area-current { fill: rgba(56, 189, 248, 0.10); }
body.dark .an-line-compare { stroke: #475569; }
body.dark .an-axis-label { fill: #64748b; }
body.dark .an-grid-line { stroke: #5a5560; }

.an-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 13px;
}
.an-bar-row:last-child { border-bottom: none; }
.an-bar-name {
    color: #4f4a54;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.an-bar-track {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}
.an-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
    border-radius: 3px;
}
.an-bar-val { color: #475569; font-variant-numeric: tabular-nums; font-weight: 500; }
body.dark .an-bar-row { border-color: #5a5560; }
body.dark .an-bar-name { color: #e2e8f0; }
body.dark .an-bar-track { background: #5a5560; }
body.dark .an-bar-val { color: #94a3b8; }

.an-vb-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
}
.an-vb-label { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-vb-bar { height: 10px; background: #f1f5f9; border-radius: 3px; }
.an-vb-fill { height: 100%; background: #5a5560; border-radius: 3px; }
.an-vb-value { color: #4f4a54; font-weight: 600; font-variant-numeric: tabular-nums; }
body.dark .an-vb-label { color: #94a3b8; }
body.dark .an-vb-bar { background: #5a5560; }
body.dark .an-vb-fill { background: #38bdf8; }
body.dark .an-vb-value { color: #e2e8f0; }

.an-legend-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed #f1f5f9;
}
.an-legend-row:last-child { border-bottom: none; }
.an-legend-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.an-legend-name { color: #4f4a54; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.an-legend-val { color: #475569; font-variant-numeric: tabular-nums; font-weight: 500; }
body.dark .an-legend-row { border-color: #5a5560; }
body.dark .an-legend-name { color: #e2e8f0; }
body.dark .an-legend-val { color: #94a3b8; }

.an-st-item { padding: 10px 0; border-bottom: 1px dashed #f1f5f9; }
.an-st-item:last-child { border-bottom: none; }
.an-st-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.an-st-name { color: #4f4a54; font-weight: 500; }
.an-st-pct { color: #0ea5e9; font-weight: 600; font-variant-numeric: tabular-nums; }
.an-st-track { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.an-st-fill { height: 100%; background: linear-gradient(90deg, #0ea5e9, #38bdf8); border-radius: 3px; }
.an-st-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #94a3b8; }
body.dark .an-st-item { border-color: #5a5560; }
body.dark .an-st-name { color: #e2e8f0; }
body.dark .an-st-track { background: #5a5560; }
body.dark .an-st-meta { color: #64748b; }

.an-cohort-month { font-weight: 500; color: #475569; padding: 6px 10px; text-align: left; font-size: 12px; }
body.dark .an-cohort-month { color: #94a3b8; }

.an-delta-up { color: #10b981; font-weight: 500; }
.an-delta-down { color: #ef4444; font-weight: 500; }
.an-delta-neutral { color: #94a3b8; font-weight: 500; }

/* ============================================================
 * DOMAINS PANEL — Shopify-style professional design
 * ============================================================ */
#panel-domains { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; color: #1a1a1a; }

.dom-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 4px 0 22px; flex-wrap: wrap;
}
.dom-title {
    font-size: 22px; font-weight: 650; letter-spacing: -0.015em;
    margin: 0 0 4px; display: flex; align-items: center; gap: 10px; color: #1a1a1a;
}
.dom-title-ico { width: 22px; height: 22px; color: #1a1a1a; }
.dom-subtitle { font-size: 13.5px; color: #6b7280; margin: 0; }

.dom-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Buttons — compact Shopify-style (matches reference image 2) */
.dom-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .12s ease, border-color .12s ease,
                box-shadow .12s ease, transform .06s ease, color .12s ease;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    line-height: 1; -webkit-font-smoothing: antialiased;
    user-select: none; letter-spacing: .005em; flex-shrink: 0;
}
.dom-btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(26,26,26,.18);
}
.dom-btn:active { transform: translateY(.5px); }
.dom-btn[disabled],
.dom-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.dom-btn i { width: 14px; height: 14px; flex-shrink: 0; }

/* Primary — solid black, raised 3D look */
.dom-btn-primary {
    background: #1a1a1a; color: #fff; border-color: #1a1a1a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.40),
        0 1px 0 rgba(0,0,0,.10),
        0 2px 4px -1px rgba(0,0,0,.20);
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.dom-btn-primary:hover {
    background: #2c2c2c; border-color: #2c2c2c;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(0,0,0,.45),
        0 1px 0 rgba(0,0,0,.12),
        0 3px 6px -1px rgba(0,0,0,.24);
}
.dom-btn-primary:active {
    background: #000; border-color: #000;
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,.55),
        inset 0 -1px 0 rgba(255,255,255,.04);
    transform: translateY(1px);
}

/* Secondary — clean white card with raised 3D edge */
.dom-btn-secondary {
    background: #fff; color: #1a1a1a; border-color: #babfc3;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,.06),
        0 1px 0 rgba(0,0,0,.05),
        0 2px 4px -2px rgba(0,0,0,.10);
}
.dom-btn-secondary:hover {
    background: #f6f6f7; border-color: #8c9196;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,.08),
        0 1px 0 rgba(0,0,0,.06),
        0 2px 5px -1px rgba(0,0,0,.12);
}
.dom-btn-secondary:active {
    background: #ebecef; border-color: #6d7175;
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,.12),
        inset 0 -1px 0 rgba(255,255,255,.6);
    transform: translateY(1px);
}

/* Connect dropdown trigger — fixed width with truncation (matches "Connecter un..." in image 2) */
.dom-btn-connect {
    width: 180px;
    justify-content: space-between;
    padding: 0 12px;
}
.dom-btn-connect .dom-btn-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0; text-align: center;
}
.dom-btn-connect .dom-btn-chevron {
    width: 14px; height: 14px; color: #5c5f62; flex-shrink: 0;
    transition: transform .15s ease;
}
.dom-dropdown.open .dom-btn-connect .dom-btn-chevron { transform: rotate(180deg); }

/* Ghost */
.dom-btn-ghost {
    background: transparent; color: #5c5f62; border-color: transparent;
}
.dom-btn-ghost:hover { background: #f1f2f3; color: #1a1a1a; }
.dom-btn-ghost:active { background: #e6e7e8; }

/* Danger */
.dom-btn-danger {
    background: #d72c0d; color: #fff; border-color: #d72c0d;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.dom-btn-danger:hover { background: #bc1f04; border-color: #bc1f04; }
.dom-btn-danger:active { background: #a51a02; border-color: #a51a02; }

/* Sizes */
.dom-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.dom-btn-lg { height: 38px; padding: 0 18px; font-size: 14px; border-radius: 9px; }
.dom-btn-icon { width: 32px; padding: 0; }
.dom-btn-icon.dom-btn-sm { width: 28px; }

/* Dropdown */
.dom-dropdown { position: relative; }
.dom-dropdown-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 320px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    padding: 6px; z-index: 50; display: none;
}
.dom-dropdown.open .dom-dropdown-menu { display: block; }
.dom-dropdown-item {
    display: flex; align-items: flex-start; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; background: transparent;
    text-align: left; cursor: pointer; border-radius: 7px;
    color: #1a1a1a; font-family: inherit; font-size: 13px;
    transition: background-color .1s ease;
}
.dom-dropdown-item:hover { background: #f4f5f7; }
.dom-dropdown-item:active { background: #ebecef; }
.dom-dropdown-item:focus-visible {
    outline: none; background: #f4f5f7;
    box-shadow: inset 0 0 0 2px rgba(26,26,26,.15);
}
.dom-dropdown-item i { color: #6b7280; flex-shrink: 0; margin-top: 2px; transition: color .12s ease; }
.dom-dropdown-item:hover i { color: #1a1a1a; }
.dom-dropdown-title { font-size: 13px; font-weight: 550; line-height: 1.3; }
.dom-dropdown-desc { font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.35; }

/* Card / Table */
.dom-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.dom-table-head {
    display: grid; grid-template-columns: 1fr 180px 80px;
    padding: 12px 18px; background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: .04em;
}
.dom-table-body { background: #fff; }
.dom-row {
    display: grid; grid-template-columns: 1fr 180px 80px;
    align-items: center; padding: 14px 18px;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer; transition: background .12s ease;
}
.dom-row:last-child { border-bottom: 0; }
.dom-row:hover { background: #fafbfc; }
.dom-row-sub { padding-left: 44px; background: #fcfcfd; }
.dom-row-sub:hover { background: #f7f8fa; }
.dom-row-name {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500; color: #1a1a1a; min-width: 0;
}
.dom-row-name i { color: #6b7280; flex-shrink: 0; width: 16px; height: 16px; }
.dom-row-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-badge-primary {
    display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 5px;
    font-size: 11px; font-weight: 550; color: #4b5563;
    margin-left: 6px;
}
.dom-status {
    display: inline-flex; align-items: center; gap: 5px; height: 24px;
    padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 550;
}
.dom-status-ok { background: #d1fae5; color: #065f46; }
.dom-status-warn { background: #f3f4f6; color: #4b5563; }
.dom-status-err { background: #fee2e2; color: #991b1b; }
.dom-status-pending { background: #fef3c7; color: #92400e; }
.dom-status-dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    opacity: .85;
}
.dom-row-actions {
    display: flex; justify-content: flex-end; gap: 4px;
}
.dom-icon-btn {
    width: 28px; height: 28px; border-radius: 6px; border: 0;
    background: transparent; color: #6b7280; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s ease;
}
.dom-icon-btn:hover { background: #f3f4f6; color: #1a1a1a; }
.dom-icon-btn.danger:hover { background: #fee2e2; color: #b91c1c; }

.dom-empty {
    padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 13.5px;
}

.dom-help-row { padding: 22px 0; text-align: center; }
.dom-help-link {
    color: #2563eb; font-size: 13px; font-weight: 500;
    text-decoration: none;
}
.dom-help-link:hover { text-decoration: underline; }

/* Modal */
.dom-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 20px;
    animation: domFade .18s ease-out;
}
@keyframes domFade { from { opacity: 0 } to { opacity: 1 } }
.dom-modal {
    background: #fff; border-radius: 14px;
    max-width: 520px; width: 100%;
    box-shadow: 0 25px 60px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.08);
    animation: domSlide .2s ease-out;
    overflow: hidden;
}
@keyframes domSlide { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
.dom-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid #f1f3f5;
}
.dom-modal-head h3 {
    margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.dom-modal-close {
    width: 32px; height: 32px; border-radius: 7px; border: 0;
    background: transparent; color: #6b7280; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.dom-modal-close:hover { background: #f3f4f6; color: #1a1a1a; }
.dom-modal-body { padding: 22px; }
.dom-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 22px; background: #fafafa; border-top: 1px solid #f1f3f5;
}
.dom-label {
    display: block; font-size: 13px; font-weight: 550; color: #1a1a1a; margin-bottom: 6px;
}
.dom-input {
    width: 100%; height: 40px; padding: 0 14px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; color: #1a1a1a; font-family: inherit;
    transition: all .12s ease; box-sizing: border-box;
}
.dom-input:focus {
    outline: none; border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26,26,26,.08);
}
.dom-input-group {
    display: flex; align-items: stretch;
    border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden;
    transition: all .12s ease;
}
.dom-input-group:focus-within {
    border-color: #1a1a1a; box-shadow: 0 0 0 3px rgba(26,26,26,.08);
}
.dom-input-group .dom-input {
    border: 0; border-radius: 0; height: 40px;
}
.dom-input-group .dom-input:focus { box-shadow: none; }
.dom-input-suffix {
    display: inline-flex; align-items: center; padding: 0 14px;
    background: #f9fafb; color: #6b7280; font-size: 13.5px; font-weight: 500;
    border-left: 1px solid #e5e7eb;
}
.dom-hint { font-size: 12.5px; color: #6b7280; margin: 8px 0 0; }
.dom-hint code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 11.5px; }

/* ============== DETAIL VIEW ============== */
.dom-detail-back {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: 0; cursor: pointer;
    color: #6b7280; font-size: 13px; font-weight: 500;
    padding: 6px 8px 6px 4px; margin: 0 0 6px -4px;
    border-radius: 6px; font-family: inherit;
    transition: background-color .12s ease, color .12s ease;
}
.dom-detail-back:hover { color: #1a1a1a; background: #f3f4f6; }
.dom-detail-back:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(26,26,26,.15);
}
.dom-detail-back i { transition: transform .12s ease; }
.dom-detail-back:hover i { transform: translateX(-2px); }

.dom-detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 0 0 22px; flex-wrap: wrap;
}
.dom-detail-title-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.dom-detail-title {
    font-size: 22px; font-weight: 650; letter-spacing: -.015em;
    margin: 0; color: #1a1a1a;
}
.dom-detail-managed {
    font-size: 13px; color: #6b7280; margin: 0;
}
.dom-detail-managed a { color: #2563eb; text-decoration: none; }
.dom-detail-managed a:hover { text-decoration: underline; }

.dom-detail-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* Hero brand connection */
.dom-brand-hero {
    position: relative; padding: 40px 24px 28px; text-align: center;
    background:
        radial-gradient(ellipse at center top, rgba(99,102,241,.05), transparent 60%),
        linear-gradient(180deg, #fafbfc, #fff);
    border-bottom: 1px solid #f1f3f5;
    overflow: hidden;
}
.dom-brand-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.02) 1px, transparent 1px),
        radial-gradient(circle at 75% 70%, rgba(0,0,0,.02) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px;
    pointer-events: none; opacity: .5;
}
.dom-brand-row {
    position: relative; display: inline-flex; align-items: center; gap: 18px;
}
.dom-brand-circle {
    width: 64px; height: 64px; border-radius: 50%;
    background: #fff; border: 1px solid #e5e7eb;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.dom-brand-circle.godaddy { background: #1bdbdb; color: #fff; font-size: 28px; }
.dom-brand-arrows {
    display: inline-flex; gap: 2px; color: #9ca3af;
}
.dom-brand-arrows i { width: 14px; height: 14px; }

/* Helper banner */
.dom-helper-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 18px; margin: 18px 22px 0;
    background: #faf9ff; border: 1px solid #e9e7fb; border-radius: 10px;
}
.dom-helper-left { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #1a1a1a; }
.dom-helper-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
}

/* Steps */
.dom-steps { padding: 22px; }
.dom-step {
    display: flex; gap: 14px; padding: 16px 0;
    border-top: 1px solid #f1f3f5;
}
.dom-step:first-child { border-top: 0; padding-top: 0; }
.dom-step-icon {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px dashed #cbd5e1; display: inline-flex; align-items: center;
    justify-content: center; margin-top: 2px;
}
.dom-step.active .dom-step-icon { border-style: dashed; border-color: #6366f1; }
.dom-step.done .dom-step-icon {
    background: #10b981; border: 0; color: #fff;
}
.dom-step.done .dom-step-icon i { width: 14px; height: 14px; }
.dom-step-body { flex: 1; min-width: 0; }
.dom-step-title {
    font-size: 14px; font-weight: 600; color: #1a1a1a;
    display: flex; align-items: center; gap: 10px;
}
.dom-step-title-text { flex: 1; }
.dom-step-pending .dom-step-title { color: #9ca3af; font-weight: 500; }
.dom-step-content { margin-top: 14px; }

/* Provider connect card (inside step 1) */
.dom-provider-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 16px 18px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
}
.dom-provider-info { min-width: 0; }
.dom-provider-name { font-size: 14px; font-weight: 600; color: #1a1a1a; margin: 0 0 2px; }
.dom-provider-desc { font-size: 12.5px; color: #6b7280; margin: 0; }

.dom-manual-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 18px 0 0 auto; padding: 6px 8px; border: 0; background: transparent;
    cursor: pointer; font-size: 13px; font-weight: 500; color: #4b5563;
    font-family: inherit; float: right; clear: both;
    border-radius: 6px;
    transition: background-color .12s ease, color .12s ease;
}
.dom-manual-toggle:hover { color: #1a1a1a; background: #f3f4f6; }
.dom-manual-toggle:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(26,26,26,.15);
}
.dom-manual-toggle i { transition: transform .2s cubic-bezier(.4,0,.2,1); width: 16px; height: 16px; }
.dom-manual-toggle.open i { transform: rotate(180deg); }

.dom-manual-content {
    clear: both;
    margin-top: 14px; padding: 0;
    display: none;
    border-top: 1px solid #f1f3f5; padding-top: 18px;
}
.dom-manual-content.open { display: block; }

/* Sub-steps inside manual config */
.dom-substep { margin-bottom: 22px; }
.dom-substep:last-child { margin-bottom: 0; }
.dom-substep-title {
    font-size: 13.5px; color: #1a1a1a; margin: 0 0 10px;
    line-height: 1.5;
}
.dom-substep-num { color: #6b7280; margin-right: 4px; font-weight: 500; }
.dom-substep-title a { color: #1a1a1a; text-decoration: underline; text-decoration-color: #d1d5db; text-underline-offset: 2px; }
.dom-substep-title a:hover { text-decoration-color: #1a1a1a; }
.dom-substep-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.dom-provider-card-sm { padding: 12px 16px; }
.dom-provider-info-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dom-provider-mini-logo {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #1a1a1a; font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.dom-provider-mini-logo.godaddy { background: #1bdbdb; color: #fff; }
.dom-provider-mini-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }

.dom-dns-table {
    width: 100%; border-collapse: collapse; font-size: 13px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.dom-dns-table th, .dom-dns-table td {
    padding: 12px 14px; text-align: left; border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}
.dom-dns-table th { background: #fafafa; font-weight: 500; color: #6b7280; font-size: 12px; letter-spacing: .01em; }
.dom-dns-table tr:last-child td { border-bottom: 0; }
.dom-dns-table code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12.5px; color: #1a1a1a;
}
.dom-dns-arrow { width: 28px; text-align: center !important; color: #9ca3af; }
.dom-dns-arrow i { width: 16px; height: 16px; vertical-align: middle; }
.dom-dns-current { font-size: 12.5px; color: #9ca3af; font-style: italic; }

.dom-copy-btn {
    margin-left: 6px; padding: 2px 8px; background: #1a1a1a; color: #fff;
    border: 0; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 500;
}
.dom-copy-btn:hover { background: #000; }
.dom-copy-btn-icon {
    margin-left: 8px; width: 26px; height: 26px; padding: 0;
    background: #fff; color: #6b7280;
    border: 1px solid #e1e3e5; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease, transform .06s ease;
    vertical-align: middle;
    box-shadow: 0 1px 0 rgba(16,24,40,.04);
}
.dom-copy-btn-icon:hover {
    background: #f6f6f7; color: #1a1a1a; border-color: #d2d5d8;
    box-shadow: 0 1px 0 rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
}
.dom-copy-btn-icon:active { transform: translateY(.5px); background: #ebecef; }
.dom-copy-btn-icon:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(26,26,26,.15);
}
.dom-copy-btn-icon i { width: 13px; height: 13px; }
.dom-copy-btn-icon.copied {
    background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
    box-shadow: 0 1px 0 rgba(21,128,61,.10);
}

/* Other actions menu (top right of detail) */
.dom-actions-menu { position: relative; }
.dom-actions-menu .dom-dropdown-menu { right: 0; min-width: 220px; }

/* Buy domain modal — wider */
#domBuyModal .dom-modal { max-width: 640px; }
.dom-buy-search {
    display: flex; gap: 8px; align-items: stretch; margin-top: 14px;
}
.dom-buy-search .dom-input { flex: 1; }
.dom-suggestion {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid #f1f3f5;
}
.dom-suggestion:last-child { border-bottom: 0; }
.dom-suggestion-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dom-suggestion-info i { color: #10b981; width: 16px; height: 16px; flex-shrink: 0; }
.dom-suggestion-name { font-size: 13.5px; color: #1a1a1a; font-weight: 500; }
.dom-suggestion-price { font-size: 12.5px; color: #6b7280; margin-top: 2px; }

@media (max-width: 720px) {
    .dom-table-head, .dom-row { grid-template-columns: 1fr 110px 60px; }
    .dom-table-head > div:nth-child(2), .dom-row > div:nth-child(2) { font-size: 11px; }
}

/* Spinner used inside Connecter automatiquement */
.dom-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    border-radius: 50%; animation: dom-spin .7s linear infinite;
    vertical-align: -2px; margin-right: 6px;
}
@keyframes dom-spin { to { transform: rotate(360deg) } }

/* ============================================================
 * Connecting / Success modal (Polaris-grade)
 * ============================================================ */
.dom-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15,17,21,.45);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
    animation: dom-fade-in .18s ease;
    overflow-y: auto;
}
@keyframes dom-fade-in { from { opacity: 0 } to { opacity: 1 } }

.dom-progress-modal {
    width: 100%; max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.20), 0 6px 20px rgba(0,0,0,.10);
    padding: 24px 26px 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    color: #1a1a1a;
    animation: dom-pop-in .28s cubic-bezier(.34,1.4,.6,1);
    margin: auto;
}
@keyframes dom-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(.97) }
    to   { opacity: 1; transform: translateY(0) scale(1) }
}

.dom-progress-head { text-align: center; margin-bottom: 22px; }
.dom-progress-head h2 {
    font-size: 18px; font-weight: 600; margin: 14px 0 6px;
    letter-spacing: -.01em; color: #1a1a1a;
}
.dom-progress-head p {
    font-size: 13px; color: #6b7280; margin: 0; line-height: 1.55;
}

.dom-progress-spinner {
    width: 44px; height: 44px;
    border: 3px solid #e5e7eb; border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: dom-spin .7s linear infinite;
    margin: 0 auto;
}

.dom-progress-steps {
    list-style: none; padding: 0; margin: 0 0 22px;
    background: #fafafa; border-radius: 10px; padding: 14px 16px;
}
.dom-pstep {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
    font-size: 13.5px; color: #6b7280;
    transition: color .2s ease;
}
.dom-pstep:not(:last-child) { border-bottom: 1px dashed #e5e7eb; }
.dom-pstep .dom-pdot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px dashed #c9cccf; flex-shrink: 0;
}
.dom-pstep i {
    width: 14px; height: 14px; flex-shrink: 0;
    color: #15803d;
}
.dom-pstep.done { color: #1a1a1a; }
.dom-pstep.done .dom-pdot {
    border: 0; background: #15803d; position: relative;
}
.dom-pstep.done .dom-pdot::after {
    content: ''; position: absolute;
    top: 3px; left: 4px; width: 4px; height: 7px;
    border: solid #fff; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.dom-pstep.active { color: #1a1a1a; font-weight: 500; }
.dom-pstep.active .dom-pdot {
    border: 1.5px solid #1a1a1a;
    border-top-color: transparent;
    animation: dom-spin .8s linear infinite;
}

.dom-progress-meta {
    text-align: center; font-size: 12px; color: #9ca3af;
    margin-bottom: 18px; font-variant-numeric: tabular-nums;
}

.dom-progress-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 6px; border-top: 1px solid #f1f3f5;
    margin-top: 6px; padding-top: 18px;
}

/* Success state */
.dom-success-modal { text-align: center; }
.dom-success-icon {
    margin: 0 auto 16px;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
}
.dom-svg-circle {
    stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: dom-circle-draw .55s ease-out forwards;
}
.dom-svg-check {
    stroke-dasharray: 50; stroke-dashoffset: 50;
    animation: dom-check-draw .35s .45s ease-out forwards;
}
@keyframes dom-circle-draw { to { stroke-dashoffset: 0 } }
@keyframes dom-check-draw  { to { stroke-dashoffset: 0 } }
.dom-success-modal h2 { color: #15803d; }
.dom-success-modal .dom-progress-steps { background: #f0fdf4; }

/* Wider modal for the guided flow */
.dom-progress-wide { max-width: 560px; }

/* Step-by-step guide inside the connecting modal */
.dom-guide {
    background: #fafafa;
    border: 1px solid #f1f3f5;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.dom-guide-step {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
}
.dom-guide-step:first-child { padding-top: 4px; }
.dom-guide-step:last-child { padding-bottom: 4px; border-bottom: 0; }

.dom-guide-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #1a1a1a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.15);
}
.dom-guide-body { flex: 1; min-width: 0; }
.dom-guide-title {
    font-size: 13px; font-weight: 500;
    color: #1a1a1a; margin: 2px 0 3px; line-height: 1.4;
}
.dom-guide-desc {
    font-size: 12px; color: #6b7280; margin: 0; line-height: 1.45;
}
.dom-guide-desc em { color: #4b5563; font-style: normal; font-weight: 500; }

.dom-guide-table {
    width: 100%; border-collapse: collapse;
    margin-top: 8px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
    font-size: 12.5px;
    table-layout: fixed;
}
.dom-guide-table th, .dom-guide-table td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
    word-break: break-all;
}
.dom-guide-table th {
    background: #fafafa; font-weight: 500; color: #6b7280;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
}
.dom-guide-table td code {
    background: transparent; border: 0; padding: 0; color: #1a1a1a;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12px; font-weight: 500;
}
.dom-guide-table tr:last-child td { border-bottom: 0; }
.dom-guide-table th:nth-child(1), .dom-guide-table td:nth-child(1) { width: 60px; }
.dom-guide-table th:nth-child(4), .dom-guide-table td:nth-child(4) { width: 70px; font-size: 11.5px; color: #6b7280; }

.dom-mini-copy {
    margin-left: 4px; padding: 2px 5px;
    background: transparent; color: #9ca3af;
    border: 1px solid #e5e7eb; border-radius: 4px;
    cursor: pointer; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.dom-mini-copy:hover { background: #f3f4f6; color: #1a1a1a; border-color: #c9cccf; }
.dom-mini-copy.copied { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.dom-mini-copy i { width: 11px; height: 11px; }

.dom-guide-tip {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 8px 0 0; padding: 8px 10px;
    background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 6px;
    font-size: 12px; color: #0c4a6e; line-height: 1.45;
}
.dom-guide-tip i { flex-shrink: 0; margin-top: 1px; }
.dom-guide-tip span { flex: 1; }
.dom-guide-tip strong { color: #075985; }

/* Compact action row in guided modal */
.dom-progress-modal .dom-progress-actions {
    flex-wrap: wrap; gap: 8px; padding-top: 14px;
}

/* Live DNS diagnostic surfaced during polling */
.dom-progress-diag {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    font-size: 12px;
    color: #7c2d12;
    line-height: 1.45;
}
.dom-diag-row {
    display: flex; gap: 8px; align-items: baseline;
    padding: 2px 0;
}
.dom-diag-lbl {
    flex-shrink: 0; width: 64px;
    color: #9a3412; font-weight: 500;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
}
.dom-diag-val {
    flex: 1; color: #7c2d12; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12px;
}
.dom-diag-val.ok { color: #15803d; }
.dom-diag-hint {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed #fed7aa;
    color: #9a3412; font-size: 12px; line-height: 1.5;
}
.dom-diag-hint code {
    background: #fff; border: 1px solid #fed7aa; border-radius: 3px;
    padding: 1px 5px; font-size: 11px;
}

/* =====================================================
   KPI cards strip — neutralise the global stat-card override
   that adds border-radius/border to each individual card
   and breaks the unified horizontal strip in dark mode
   ===================================================== */
html body.dark #panel-all-orders .orders-kpi-row {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    gap: 0 !important;
    box-shadow: none !important;
}

html body.dark #panel-all-orders .orders-kpi-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-inline-end: 0 !important;
    padding: 14px 16px 12px !important;
    box-shadow: none !important;
    min-height: 94px !important;
}

html body.dark #panel-all-orders .orders-kpi-card:last-child {
    border-inline-end: none !important;
}

html body.dark #panel-all-orders .orders-kpi-row .orders-kpi-value {
    color: var(--buld-ink-1) !important;
}

html body.dark #panel-all-orders .orders-kpi-label {
    color: var(--buld-ink-3) !important;
    border-bottom-color: var(--buld-hairline) !important;
}

/* Toolbar buttons — Barbaros signature dark */
html body.dark #panel-all-orders .toolbar-btn {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
    color: #c2bdc8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

html body.dark #panel-all-orders .toolbar-btn:hover {
    background: #5a5560 !important;
    border-color: #837d8a !important;
    color: #f4f4f5 !important;
}

html body.dark #panel-all-orders .toolbar-btn i,
html body.dark #panel-all-orders .toolbar-btn svg {
    color: #c2bdc8 !important;
    stroke: #c2bdc8 !important;
}

html body.dark #panel-all-orders .orders-table-card {
    background: #4f4a54 !important;
    border: 1px solid #635e69 !important;
}

html body.dark #panel-all-orders .orders-table-card-header {
    border-bottom-color: #635e69 !important;
}

html body.dark #panel-all-orders .orders-reference-table thead th {
    background: #5a5560 !important;
    border-bottom-color: #635e69 !important;
}

html body.dark #panel-all-orders .orders-reference-table td {
    background: #4f4a54 !important;
    border-bottom-color: #5a5560 !important;
}

html body.dark #panel-all-orders .orders-reference-table tbody tr:hover td {
    background: #5a5560 !important;
}

/* =====================================================
   Orders UI dark-mode refinements and actions polish
   ===================================================== */

/* Status dropdown: always opened under badge via JS top, with clear dark contrast */
.status-dropdown {
    transform-origin: top left;
    overscroll-behavior: contain;
}

body.dark .status-dropdown {
    background: #2f333b;
    border: 1px solid #495061;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}

body.dark .sd-item {
    color: #dbe4f3;
}

body.dark .sd-item:hover {
    background: #3b4250;
}

/* ==============================================================
   ✦ ORDER ACTION BUTTONS — UNIFIED SYSTEM (V4)
   One neutral white button. Dark icon. Soft slate hover.
   Status/intent expressed only via tiny dot or single accent
   on the most semantic button (Quote = teal, Edit = primary).
   ============================================================== */
.ord-actions { gap: 4px; }

.ord-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ord-action-btn:hover {
    background: #f4f6fa;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: none;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.ord-action-btn:active { background: #eef2f7; }
.ord-action-btn:focus-visible {
    outline: none;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

/* Subtle semantic emphasis — only on hover, no rainbow at rest */
.ord-action-btn.act-edit:hover {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.ord-action-btn.act-quote {
    color: #0f766e;
}
.ord-action-btn.act-quote:hover {
    background: #ecfdf5;
    border-color: #99f6e4;
    color: #0f766e;
}

/* Note action button — small dot when a note exists */
.ord-action-btn.act-note { position: relative; }
.ord-action-btn.act-note.has-note { color: #0f172a; }
.ord-action-btn.act-note .act-note-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0f172a;
    border: 1.5px solid #fff;
}
[dir="rtl"] .ord-action-btn.act-note .act-note-dot { right: auto; left: 4px; }

/* Color tag action button */
.ord-action-btn.act-color { position: relative; }
.ord-action-btn.act-color .color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 0 0 2px #fff;
}

/* Dark mode */
body.dark .ord-action-btn {
    background: #25262a;
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}
body.dark .ord-action-btn:hover {
    background: #2e2f33;
    border-color: rgba(255, 255, 255, 0.16);
    color: #f1f5f9;
}
body.dark .ord-action-btn.act-edit:hover {
    background: #f8fafc;
    border-color: #f8fafc;
    color: #0f172a;
}
body.dark .ord-action-btn.act-quote { color: #5eead4; }
body.dark .ord-action-btn.act-quote:hover { background: rgba(20, 184, 166, 0.12); border-color: rgba(94, 234, 212, 0.22); color: #5eead4; }
body.dark .ord-action-btn.act-note .act-note-dot { background: #f8fafc; border-color: #1f2024; }


/* Delivery chips in dark mode */
body.dark .deliv-toggle.tag-home {
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(180,83,9,0.2));
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,0.38);
}

body.dark .deliv-toggle.tag-desk {
    background: linear-gradient(135deg, rgba(14,165,233,0.24), rgba(3,105,161,0.19));
    color: #7dd3fc;
    border: 1px solid rgba(14,165,233,0.35);
}

/* Tracking action buttons in dark mode */
body.dark .track-copy-btn {
    background: #38404c;
    color: #dbe4f3;
    border: 1px solid #4c5566;
}

body.dark .track-copy-btn:hover {
    background: #475164;
}

body.dark .track-action-btn.success {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(22,163,74,0.35);
}

body.dark .track-action-btn.primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37,99,235,0.34);
}

/* =====================================================
   Professional overview dashboard — dark-mode repair
   Scoped to #panel-overview to avoid breaking All Orders
   ===================================================== */

html body.dark #panel-overview {
    color: #f8fafc;
}

html body.dark #panel-overview .panel-header h1,
html body.dark #panel-overview .panel-header h2,
html body.dark #panel-overview .panel-header h3 {
    color: #f8fafc !important;
}

html body.dark #panel-overview .panel-header p {
    color: #aeb8c7 !important;
}

html body.dark #panel-overview .stats-grid.stats-8,
html body.dark #panel-overview .stats-grid {
    display: grid !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: #4f4a54 !important;
    border: 1px solid #635e69 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22) !important;
}

html body.dark #panel-overview .stats-grid .stat-card,
html body.dark #panel-overview .stats-grid.stats-8 .stat-card,
html body.dark #panel-overview .panel .stats-grid .stat-card {
    display: block !important;
    min-height: 112px !important;
    padding: 16px 18px 14px !important;
    background: #4f4a54 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-inline-end: 1px solid #635e69 !important;
    box-shadow: none !important;
    color: #f8fafc !important;
}

html body.dark #panel-overview .stats-grid .stat-card:last-child,
html body.dark #panel-overview .stats-grid.stats-8 .stat-card:last-child {
    border-inline-end: none !important;
}

html body.dark #panel-overview .stats-grid .stat-card::before,
html body.dark #panel-overview .stats-grid .stat-card::after {
    display: none !important;
    content: none !important;
}

html body.dark #panel-overview .stats-grid .stat-card:hover {
    background: #5a5560 !important;
}

html body.dark #panel-overview .stat-card-header {
    display: block !important;
}

html body.dark #panel-overview .stats-grid .stat-card-label {
    display: inline-block !important;
    padding: 0 0 3px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dotted #756f7c !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #aeb8c7 !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
}

html body.dark #panel-overview .stats-grid .stat-card-value {
    display: block !important;
    margin-top: 10px !important;
    color: #f8fafc !important;
    font-size: clamp(1.7rem, 2vw, 2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    font-weight: 760 !important;
    text-shadow: none !important;
}

html body.dark #panel-overview .stats-grid .stat-card-change {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

html body.dark #panel-overview .stats-grid .stat-card-change.positive {
    color: #34d399 !important;
}

html body.dark #panel-overview .stats-grid .stat-card-change.negative {
    color: #f87171 !important;
}

html body.dark #panel-overview .stats-grid .stat-card-icon {
    display: none !important;
}

html body.dark #panel-overview .stat-card-spark .trend-current-path,
html body.dark #panel-overview .stats-grid .trend-current-path {
    stroke: #38bdf8 !important;
}

html body.dark #panel-overview .stat-card-spark .trend-compare-path,
html body.dark #panel-overview .stats-grid .trend-compare-path {
    stroke: #64748b !important;
    opacity: 0.7 !important;
}

html body.dark #panel-overview .revenue-card,
html body.dark #panel-overview .table-card,
html body.dark #panel-overview .attention-card,
html body.dark #panel-overview .funnel-section,
html body.dark #panel-overview .profit-summary-card,
html body.dark #panel-overview .profit-breakdown,
html body.dark #panel-overview .profit-per-unit,
html body.dark #panel-overview .dz-map-card,
html body.dark #panel-overview .gross-value-card {
    background: #4f4a54 !important;
    background-image: none !important;
    border: 1px solid #635e69 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22) !important;
    color: #f8fafc !important;
}

html body.dark #panel-overview .gross-value-card {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.30) !important;
}

html body.dark #panel-overview .revenue-card::before,
html body.dark #panel-overview .gross-value-card::before {
    display: none !important;
    content: none !important;
}

html body.dark #panel-overview .revenue-header,
html body.dark #panel-overview .table-card-header,
html body.dark #panel-overview .funnel-section-pills .funnel-header,
html body.dark #panel-overview .dz-map-card .table-card-header {
    background: transparent !important;
    border-bottom: none !important;
}

html body.dark #panel-overview .revenue-header h3,
html body.dark #panel-overview .table-card-header h3,
html body.dark #panel-overview .funnel-header h3,
html body.dark #panel-overview .report-card h3,
html body.dark #panel-overview .profit-breakdown h3,
html body.dark #panel-overview .profit-per-unit h3 {
    color: #f8fafc !important;
    border-bottom-color: #756f7c !important;
}

html body.dark #panel-overview .revenue-amount,
html body.dark #panel-overview .metric-value,
html body.dark #panel-overview .track-stat-value {
    color: #f8fafc !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.dark #panel-overview .funnel-subtitle,
html body.dark #panel-overview .table-card p,
html body.dark #panel-overview .revenue-card p,
html body.dark #panel-overview .attention-list span,
html body.dark #panel-overview .dz-map-hint,
html body.dark #panel-overview .dz-map-meta {
    color: #aeb8c7 !important;
}

html body.dark #panel-overview .attention-item,
html body.dark #panel-overview .order-list-item,
html body.dark #panel-overview .funnel-row {
    border-color: #635e69 !important;
}

html body.dark #panel-overview .dz-map-surface {
    background: #f8fafc !important;
    border-color: #dbe2ea !important;
}

html body.dark #panel-overview .funnel-period-toggle {
    background: #5a5560 !important;
    border: 1px solid #635e69 !important;
}

html body.dark #panel-overview .funnel-period-toggle button {
    color: #aeb8c7 !important;
}

html body.dark #panel-overview .funnel-period-toggle button.active {
    background: #ffffff !important;
    color: #334155 !important;
}

/* Professional configuration / setup guide */
html body #panel-overview .setup-guide {
    padding: 26px 30px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(900px 260px at 12% 0%, rgba(96,165,250,0.24), transparent 62%),
        linear-gradient(135deg, #10243f 0%, #182f57 52%, #214ba6 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html body.dark #panel-overview .setup-guide {
    background:
        radial-gradient(800px 260px at 12% 0%, rgba(59,130,246,0.2), transparent 62%),
        linear-gradient(135deg, #2f2e30 0%, #38373a 52%, #4f4a54 100%) !important;
    border: 1px solid #635e69 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

html body #panel-overview .setup-guide-bg {
    background:
        radial-gradient(circle at 100% 0%, rgba(59,130,246,0.2), transparent 36%),
        radial-gradient(circle at 0% 100%, rgba(16,185,129,0.13), transparent 44%) !important;
}

html body #panel-overview .setup-tag,
html body #panel-overview .setup-time-badge {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #dbeafe !important;
}

html body #panel-overview .setup-title {
    color: #ffffff !important;
    letter-spacing: -0.04em !important;
}

html body #panel-overview .setup-subtitle,
html body #panel-overview .setup-progress-label,
html body #panel-overview .setup-ring-center span {
    color: rgba(226,232,240,0.78) !important;
}

html body #panel-overview .setup-ring-track {
    stroke: rgba(255,255,255,0.12) !important;
}

html body #panel-overview .setup-ring-fill {
    stroke: #38bdf8 !important;
    filter: drop-shadow(0 0 5px rgba(56,189,248,0.42)) !important;
}

html body #panel-overview .setup-cta-primary {
    background: #ffffff !important;
    color: #172554 !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,0.22) !important;
}

html body #panel-overview .setup-cta-primary:hover {
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
}

html body #panel-overview .setup-cta-ghost {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #e2e8f0 !important;
}

html body #panel-overview .setup-cta-ghost:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

html body #panel-overview .setup-features-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

html body #panel-overview .setup-feat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #dbeafe !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

html body #panel-overview .setup-feat i,
html body #panel-overview .setup-feat svg {
    width: 13px !important;
    height: 13px !important;
    color: #67e8f9 !important;
    stroke: #67e8f9 !important;
}

html body #panel-overview .setup-steps-list {
    gap: 8px !important;
    padding: 10px !important;
    background: rgba(15,23,42,0.2) !important;
    border: 1px solid rgba(148,163,184,0.16) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(10px) !important;
}

html body.dark #panel-overview .setup-steps-list {
    background: rgba(255,255,255,0.035) !important;
    border-color: #635e69 !important;
}

html body #panel-overview .sg-step {
    min-height: 52px !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

html body #panel-overview .sg-step:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(147,197,253,0.32) !important;
}

html body #panel-overview .sg-step.active {
    background: rgba(56,189,248,0.14) !important;
    border-color: rgba(56,189,248,0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(56,189,248,0.08) !important;
}

html body #panel-overview .sg-step.done {
    opacity: 1 !important;
    background: rgba(16,185,129,0.1) !important;
    border-color: rgba(16,185,129,0.22) !important;
}

html body #panel-overview .sg-step-num {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: #e2e8f0 !important;
}

html body #panel-overview .sg-step-content strong {
    color: #f8fafc !important;
    font-weight: 700 !important;
}

html body #panel-overview .sg-step-content span,
html body #panel-overview .sg-step-time {
    color: rgba(226,232,240,0.66) !important;
}

html body #panel-overview .sg-step-status {
    background: rgba(16,185,129,0.16) !important;
    color: #86efac !important;
    border-color: rgba(74,222,128,0.28) !important;
}

@media (max-width: 960px) {
    html body #panel-overview .setup-guide {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }
}

/* =====================================================
   Final cleanup — clean dark dashboard KPIs + config ad
   ===================================================== */

html body.dark #panel-overview .stats-grid.stats-8,
html body.dark #panel-overview .stats-grid {
    gap: 0 !important;
    padding: 0 !important;
    background: #4f4a54 !important;
    border: 1px solid #635e69 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

html body.dark #panel-overview .stats-grid .stat-card,
html body.dark #panel-overview .stats-grid.stats-8 .stat-card,
html body.dark #panel-overview .panel .stats-grid .stat-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 96px !important;
    padding: 20px 18px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #f8fafc !important;
}

html body.dark #panel-overview .stats-grid .stat-card:not(:last-child),
html body.dark #panel-overview .stats-grid.stats-8 .stat-card:not(:last-child) {
    border-inline-end: 0 !important;
}

html body.dark #panel-overview .stats-grid .stat-card:hover {
    background: rgba(255,255,255,0.025) !important;
    transform: none !important;
}

html body.dark #panel-overview .stats-grid .stat-card-header {
    display: contents !important;
}

html body.dark #panel-overview .stats-grid .stat-card-value {
    order: 1 !important;
    margin: 0 0 5px !important;
    color: #f8fafc !important;
    font-size: clamp(1.6rem, 2vw, 1.95rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
    font-weight: 780 !important;
}

html body.dark #panel-overview .stats-grid .stat-card-label {
    order: 2 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #aeb8c7 !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

html body.dark #panel-overview .stats-grid .stat-card-change {
    order: 3 !important;
    margin-top: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

html body.dark #panel-overview .stats-grid .stat-card::before,
html body.dark #panel-overview .stats-grid .stat-card::after,
html body.dark #panel-overview .stats-grid .stat-card-label::before,
html body.dark #panel-overview .stats-grid .stat-card-label::after {
    display: none !important;
    content: none !important;
}

html body #panel-overview .setup-guide-left {
    position: relative !important;
    padding: 22px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(6,78,59,0.94), rgba(30,64,175,0.88)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1200&q=90&auto=format&fit=crop") center/cover no-repeat !important;
    border: 1px solid rgba(167,243,208,0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 18px 38px rgba(15,23,42,0.2) !important;
}

html body.dark #panel-overview .setup-guide-left {
    background:
        linear-gradient(135deg, rgba(15,23,42,0.9), rgba(21,94,117,0.82)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1200&q=90&auto=format&fit=crop") center/cover no-repeat !important;
    border-color: rgba(103,232,249,0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.32) !important;
}

html body #panel-overview .setup-guide-left::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.22), transparent 34%),
        linear-gradient(180deg, rgba(15,23,42,0.04), rgba(15,23,42,0.2)) !important;
    pointer-events: none !important;
}

html body #panel-overview .setup-guide-left > * {
    position: relative !important;
    z-index: 1 !important;
}

html body #panel-overview .setup-ad-visual {
    position: relative !important;
    min-height: 118px !important;
    margin-top: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(15,23,42,0.1), rgba(15,23,42,0.48)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1100&q=90&auto=format&fit=crop") center/cover no-repeat !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 14px 26px rgba(0,0,0,0.18) !important;
}

html body #panel-overview .setup-ad-copy {
    position: absolute !important;
    inset-inline: 14px !important;
    bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    color: #ffffff !important;
}

html body #panel-overview .setup-ad-copy span {
    width: fit-content !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

html body #panel-overview .setup-ad-copy strong {
    max-width: 260px !important;
    font-size: 1rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.28) !important;
}

/* =========================================================
   APPLICATIONS MARKETPLACE — Meta Pixel + CAPI
   Light + dark mode, flat French analytics aesthetic
========================================================= */
#panel-applications .panel-header { margin-bottom: 18px; }
.apps-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:10px 14px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; margin:0 0 18px; }
.apps-search { flex:1 1 280px; min-width:220px; position:relative; display:flex; align-items:center; background:#f6f7f9; border:1px solid #e5e7eb; border-radius:10px; padding:6px 12px 6px 36px; transition:border-color .15s, background .15s; }
.apps-search:focus-within { border-color:#0866ff; background:#fff; }
.apps-search > svg { position:absolute; left:12px; width:16px; height:16px; color:#6b7280; }
.apps-search input { flex:1; border:0; outline:0; background:transparent; font:14px Inter,system-ui,sans-serif; color:#0f172a; padding:6px 0; }
.apps-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.apps-tab { background:transparent; border:1px solid transparent; color:#475569; font:600 13px Inter,system-ui,sans-serif; padding:7px 14px; border-radius:999px; cursor:pointer; transition:all .15s; }
.apps-tab:hover { background:#f1f5f9; color:#0f172a; }
.apps-tab.active { background:#0f172a; color:#fff; }

.apps-section-title { font:600 13px Inter,system-ui,sans-serif; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px 4px; }
.apps-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px; }
.apps-empty { padding:60px 20px; text-align:center; color:#6b7280; background:#fff; border:1px dashed #e5e7eb; border-radius:14px; }

.apps-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s, border-color .15s; }
.apps-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,.08); border-color:#cbd5e1; }
.apps-card.is-installed { border-color:#0866ff; }

.apps-hero { position:relative; aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.apps-hero-logo { width:96px; height:96px; display:flex; align-items:center; justify-content:center; transition:transform .15s ease, width .15s ease, height .15s ease; }
.apps-hero-logo svg { width:100%; height:100%; object-fit:contain; }
.apps-installed-tag { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.96); color:#0866ff; font:600 11px Inter,system-ui,sans-serif; padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; box-shadow:0 2px 6px rgba(0,0,0,.12); }

.apps-body { padding:16px 18px 8px; flex:1; display:flex; flex-direction:column; gap:8px; }
.apps-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.apps-name { font:700 16px Inter,system-ui,sans-serif; color:#0f172a; margin:0; }
.apps-vendor { font:500 12px Inter,system-ui,sans-serif; color:#6b7280; }
.apps-tagline { font:400 13px/1.5 Inter,system-ui,sans-serif; color:#475569; margin:0; min-height:36px; }
.apps-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.apps-pill { background:#f1f5f9; color:#475569; font:500 11px Inter,system-ui,sans-serif; padding:3px 8px; border-radius:999px; }

.apps-actions { padding:12px 18px 16px; display:flex; gap:8px; justify-content:flex-end; }
.apps-btn { font:600 13px Inter,system-ui,sans-serif; padding:8px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
.apps-btn:disabled { opacity:.55; cursor:not-allowed; }
.apps-btn-primary { background:#0f172a; color:#fff; }
.apps-btn-primary:not(:disabled):hover { background:#1e293b; }
.apps-btn-secondary { background:#fff; color:#0f172a; border-color:#e5e7eb; }
.apps-btn-secondary:hover { background:#f6f7f9; }
.apps-btn-ghost { background:transparent; color:#475569; border-color:#e5e7eb; }
.apps-btn-ghost:hover { background:#f6f7f9; }
.apps-btn-danger { background:#fff; color:#b91c1c; border-color:#fecaca; }
.apps-btn-danger:hover { background:#fef2f2; }

/* ---- Drawer ---- */
.apps-drawer-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; z-index:9000; }
.apps-drawer-overlay.open { display:flex; justify-content:flex-end; }
.apps-drawer { width:min(520px, 100vw); height:100%; background:#fff; display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.18); animation:apps-slide .22s ease-out; }
@keyframes apps-slide { from { transform:translateX(20px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.apps-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e5e7eb; }
.apps-drawer-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.apps-drawer-icon { width:44px; height:44px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:8px; }
.apps-drawer-icon svg { width:100%; height:100%; }
.apps-drawer-title { font:700 16px Inter,system-ui,sans-serif; color:#0f172a; }
.apps-drawer-sub { font:500 12px Inter,system-ui,sans-serif; color:#6b7280; margin-top:2px; }
.apps-drawer-close { background:transparent; border:0; font-size:24px; line-height:1; color:#6b7280; cursor:pointer; padding:4px 10px; border-radius:6px; }
.apps-drawer-close:hover { background:#f1f5f9; color:#0f172a; }
.apps-drawer-body { flex:1; overflow-y:auto; padding:20px; }
.apps-drawer-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid #e5e7eb; background:#fafbfc; }

.apps-section-block { margin-bottom:24px; }
.apps-section-block h4 { font:600 12px Inter,system-ui,sans-serif; color:#6b7280; text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px; }
.apps-drawer-tagline { font:400 14px/1.55 Inter,system-ui,sans-serif; color:#334155; margin:0 0 12px; }
.apps-caps { margin:0 0 12px; padding:0 0 0 18px; color:#475569; font:400 13px/1.6 Inter,system-ui,sans-serif; }
.apps-link { font:600 13px Inter,system-ui,sans-serif; color:#0866ff; text-decoration:none; }
.apps-link:hover { text-decoration:underline; }

.apps-field { margin-bottom:16px; }
.apps-field label { display:block; font:600 13px Inter,system-ui,sans-serif; color:#0f172a; margin-bottom:6px; }
.apps-field input { width:100%; padding:10px 12px; font:400 14px Inter,system-ui,sans-serif; color:#0f172a; background:#fff; border:1px solid #d4d8de; border-radius:8px; transition:border-color .15s, box-shadow .15s; box-sizing:border-box; }
.apps-field input:focus { outline:0; border-color:#0866ff; box-shadow:0 0 0 3px rgba(8,102,255,.12); }
.apps-help { font:400 12px/1.5 Inter,system-ui,sans-serif; color:#6b7280; margin-top:6px; }
.apps-help code { background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }

.apps-test-ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:10px 12px; border-radius:8px; font:500 13px Inter,system-ui,sans-serif; }
.apps-test-err { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px 12px; border-radius:8px; font:500 13px Inter,system-ui,sans-serif; }

/* ---- Logo Studio ---- */
.apps-ls-trigger { margin-inline-start:auto; }
.apps-logo-studio { background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 12px 28px rgba(15,23,42,.08); margin:0 0 18px; overflow:hidden; }
.apps-ls-head { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid #e5e7eb; }
.apps-ls-head strong { font:700 13px Inter,system-ui,sans-serif; color:#0f172a; text-transform:uppercase; letter-spacing:.05em; }
.apps-ls-tabs { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.apps-ls-tab { background:transparent; border:1px solid transparent; color:#475569; font:600 12.5px Inter,system-ui,sans-serif; padding:5px 12px; border-radius:999px; cursor:pointer; transition:all .15s; }
.apps-ls-tab:hover { background:#f1f5f9; color:#0f172a; }
.apps-ls-tab.active { background:#0f172a; color:#fff; }
.apps-ls-close { background:transparent; border:0; font-size:22px; line-height:1; color:#6b7280; cursor:pointer; padding:2px 8px; border-radius:6px; }
.apps-ls-close:hover { background:#f1f5f9; color:#0f172a; }
.apps-ls-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 22px; padding:16px; }
.apps-ls-row { display:flex; flex-direction:column; gap:6px; }
.apps-ls-row label { display:flex; justify-content:space-between; align-items:center; font:600 12px Inter,system-ui,sans-serif; color:#475569; text-transform:uppercase; letter-spacing:.04em; }
.apps-ls-row label output { font:600 12px Inter,system-ui,sans-serif; color:#0f172a; background:#f1f5f9; padding:2px 8px; border-radius:6px; text-transform:none; letter-spacing:0; }
.apps-ls-row input[type=range] { width:100%; accent-color:#0866ff; }
.apps-ls-swatch { width:26px; height:26px; border-radius:6px; border:1px solid #d4d8de; cursor:pointer; padding:0; transition:transform .15s, border-color .15s; }
.apps-ls-swatch:hover { transform:scale(1.08); }
.apps-ls-swatch.active { border-color:#0866ff; box-shadow:0 0 0 2px rgba(8,102,255,.2); }
.apps-ls-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #e5e7eb; background:#fafbfc; }
body.dark .apps-logo-studio { background:#1a1d24; border-color:#2a2e38; }
body.dark .apps-ls-head, body.dark .apps-ls-foot { border-color:#2a2e38; background:#15171c; }
body.dark .apps-ls-head strong { color:#f1f5f9; }
body.dark .apps-ls-tab { color:#94a3b8; }
body.dark .apps-ls-tab:hover { background:#2a2e38; color:#e2e8f0; }
body.dark .apps-ls-tab.active { background:#e2e8f0; color:#0f172a; }
body.dark .apps-ls-row label { color:#94a3b8; }
body.dark .apps-ls-row label output { background:#2a2e38; color:#f1f5f9; }
body.dark .apps-ls-swatch { border-color:#2a2e38; }

/* ---- Dark mode ---- */
body.dark .apps-toolbar,
body.dark .apps-card,
body.dark .apps-drawer,
body.dark .apps-drawer-footer { background:#1a1d24; border-color:#2a2e38; }
body.dark .apps-drawer-footer { background:#15171c; }
body.dark .apps-search { background:#0f1115; border-color:#2a2e38; }
body.dark .apps-search input { color:#e2e8f0; }
body.dark .apps-tab { color:#c2bdc8; }
body.dark .apps-tab:hover { background:#5a5560; color:#f4f4f5; }
body.dark .apps-tab.active { background:#6a6470; color:#f4f4f5; }
body.dark .apps-empty { background:#1a1d24; border-color:#2a2e38; color:#94a3b8; }
body.dark .apps-card.is-installed { border-color:#3b82f6; }
body.dark .apps-name { color:#f1f5f9; }
body.dark .apps-vendor, body.dark .apps-tagline { color:#94a3b8; }
body.dark .apps-pill { background:#2a2e38; color:#cbd5e1; }
body.dark .apps-section-title, body.dark .apps-section-block h4 { color:#94a3b8; }
body.dark .apps-drawer-header { border-bottom-color:#2a2e38; }
body.dark .apps-drawer-footer { border-top-color:#2a2e38; }
body.dark .apps-drawer-title { color:#f1f5f9; }
body.dark .apps-drawer-sub { color:#94a3b8; }
body.dark .apps-drawer-tagline { color:#cbd5e1; }
body.dark .apps-caps { color:#cbd5e1; }
body.dark .apps-help { color:#94a3b8; }
body.dark .apps-help code { background:#2a2e38; color:#e2e8f0; }
body.dark .apps-field label { color:#f1f5f9; }
body.dark .apps-field input { background:#0f1115; color:#e2e8f0; border-color:#2a2e38; }
body.dark .apps-btn-primary { background:#f1f5f9; color:#0f172a; }
body.dark .apps-btn-primary:not(:disabled):hover { background:#cbd5e1; }
body.dark .apps-btn-secondary, body.dark .apps-btn-ghost { background:#1a1d24; color:#e2e8f0; border-color:#2a2e38; }
body.dark .apps-btn-secondary:hover, body.dark .apps-btn-ghost:hover { background:#2a2e38; }
body.dark .apps-btn-danger { background:#1a1d24; color:#f87171; border-color:#7f1d1d; }
body.dark .apps-btn-danger:hover { background:#3f1d1d; }
body.dark .apps-test-ok { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:#a7f3d0; }
body.dark .apps-test-err { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fca5a5; }

/* ===== Multi-pixel manager (drawer) — rebuilt pixel card ===== */
.pix-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pix-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 7px; margin-left:8px; background:#eef2f7; color:#0f172a; border:1px solid #dbe3ed; border-radius:999px; font:700 11px Inter,system-ui,sans-serif; }
.pix-add { padding:7px 14px !important; }
.pix-list { display:flex; flex-direction:column; gap:12px; }
.pix-empty-state { padding:32px 16px; text-align:center; background:#fafbfc; border:1px dashed #e5e7eb; border-radius:14px; color:#64748b; }
.pix-empty-state p { margin:8px 0 0; font:500 13px Inter,system-ui,sans-serif; }

.pix-card {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#4f4a54 !important;
    border:1px solid #635e69 !important;
    border-radius:13px;
    padding:14px 16px 16px;
    color:#f8fafc;
    box-shadow:none;
    transition:border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}
.pix-card::before { content:none; }
.pix-card.is-on { border-color:#635e69 !important; }
.pix-card.is-off { background:#4f4a54 !important; opacity:.68; }
.pix-card:hover { border-color:#756f7c !important; box-shadow:none; transform:none; }

.pix-card-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:0 0 14px 0;
    margin:0 0 14px 0;
    border-bottom:1px solid #635e69;
}
.pix-card-name { display:flex; align-items:center; gap:10px; min-width:0; }
.pix-name-input {
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    max-width:170px;
    height:32px;
    padding:0 4px !important;
    font:800 14px/32px Inter,system-ui,sans-serif !important;
    color:#fff !important;
    background:transparent !important;
    border:1px solid transparent !important;
    border-radius:7px;
    box-shadow:none;
    letter-spacing:-.01em;
}
.pix-name-input:hover { background:rgba(255,255,255,.05) !important; border-color:transparent !important; }
.pix-name-input:focus { outline:0; background:rgba(255,255,255,.06) !important; border-color:#756f7c !important; box-shadow:0 0 0 3px rgba(107,106,109,.28) !important; }

.pix-status-pill {
    display:inline-flex;
    align-items:center;
    height:24px;
    padding:0 9px;
    border-radius:999px;
    border:1px solid rgba(16,185,129,.45);
    background:rgba(16,185,129,.13);
    color:#6ee7b7;
    font:800 10px Inter,system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:.08em;
    white-space:nowrap;
}
.pix-status-pill::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.12); }
.pix-status-pill.off { background:rgba(255,255,255,.05); color:#cbd5e1; border-color:rgba(255,255,255,.14); }
.pix-status-pill.off::before { background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.10); }

.pix-card-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:0;
}
.pix-created-mini {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#b8c0cc;
    font:600 11px Inter,system-ui,sans-serif;
    white-space:nowrap;
}

.pix-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
.pix-toggle input { position:absolute; opacity:0; width:0; height:0; }
.pix-toggle-track { display:block; width:42px; height:24px; background:#5b5a5d; border:1px solid rgba(255,255,255,.14); border-radius:999px; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; position:relative; }
.pix-toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.45); transition:transform .18s ease; }
.pix-toggle input:checked + .pix-toggle-track { background:#10b981; border-color:#34d399; }
.pix-toggle input:checked + .pix-toggle-track .pix-toggle-thumb { transform:translateX(18px); }
.pix-toggle input:focus-visible + .pix-toggle-track { box-shadow:0 0 0 3px rgba(16,185,129,.28); }

.pix-del {
    width:30px;
    height:30px;
    border-radius:8px;
    border:1px solid #635e69;
    background:rgba(255,255,255,.05);
    color:#cbd5e1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.pix-del:hover { background:rgba(239,68,68,.16); border-color:rgba(248,113,113,.45); color:#fca5a5; transform:translateY(-1px); }

.pix-card-body { display:grid; grid-template-columns:1fr; gap:10px; }
.pix-field { display:flex; flex-direction:column; gap:7px; }
.pix-field label { color:#aeb7c5; font:800 10.5px Inter,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.pix-input {
    width:100%;
    min-height:38px;
    padding:9px 12px;
    color:#f8fafc;
    background:#4f4a54 !important;
    border:1px solid #635e69;
    border-radius:9px;
    box-sizing:border-box;
    font:500 13px Inter,system-ui,sans-serif;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pix-input::placeholder { color:#77777a; }
.pix-input.pix-mono { font-family:'SF Mono',Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.01em; }
.pix-input:hover { border-color:#756f7c; }
.pix-input:focus { outline:0; background:#4f4a54 !important; border-color:#8a898c; box-shadow:0 0 0 3px rgba(107,106,109,.28); }
.pix-card .apps-help { color:#b8c0cc !important; font-weight:500; }

body.dark .pix-card,
body.dark .pix-card.is-on { background:#4f4a54 !important; border-color:#635e69 !important; }
body.dark .pix-card.is-off { background:#4f4a54 !important; }
body.dark .pix-count { background:#252932; color:#e2e8f0; border-color:#353a45; }
body.dark .pix-empty-state { background:#15171c; border-color:#2a2e38; color:#94a3b8; }
body.dark .pix-name-input { color:#fff !important; background:transparent !important; border-color:transparent !important; }
body.dark .pix-name-input:hover { background:rgba(255,255,255,.05) !important; border-color:transparent !important; }
body.dark .pix-name-input:focus { background:rgba(255,255,255,.06) !important; border-color:#756f7c !important; box-shadow:0 0 0 3px rgba(107,106,109,.28) !important; }
body.dark .pix-input { background:#4f4a54 !important; color:#f8fafc; border-color:#635e69; }
body.dark .pix-input:hover { border-color:#756f7c; }
body.dark .pix-input:focus { background:#4f4a54 !important; border-color:#8a898c; box-shadow:0 0 0 3px rgba(107,106,109,.28); }
body.dark .pix-card .apps-help { color:#b8c0cc !important; }

@media (max-width:560px) {
    .pix-card { padding:14px; }
    .pix-card-head { grid-template-columns:1fr; align-items:stretch; }
    .pix-card-name { justify-content:space-between; }
    .pix-name-input { max-width:none; }
    .pix-card-actions { justify-content:space-between; }
    .pix-created-mini { flex:1; justify-content:center; }
}

/* Final pixel-card hard overrides: same flat surface as the Meta app card */
.pix-card,
.pix-card.is-on,
body.dark .pix-card,
body.dark .pix-card.is-on {
    background:#4f4a54 !important;
    background-color:#4f4a54 !important;
    border:1px solid #635e69 !important;
    box-shadow:none !important;
    transform:none !important;
}
.pix-card:hover,
body.dark .pix-card:hover { border-color:#756f7c !important; box-shadow:none !important; transform:none !important; }
.pix-card .pix-card-head,
body.dark .pix-card .pix-card-head { border-bottom:1px solid #635e69 !important; }
.pix-card .pix-name-input,
body.dark .pix-card .pix-name-input {
    appearance:none !important;
    -webkit-appearance:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#fff !important;
    outline:0;
}
.pix-card .pix-name-input:hover,
body.dark .pix-card .pix-name-input:hover,
.pix-card .pix-name-input:focus,
body.dark .pix-card .pix-name-input:focus { background:transparent !important; border:0 !important; box-shadow:none !important; }
.pix-card .pix-created-mini,
body.dark .pix-card .pix-created-mini {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    color:#b8c0cc !important;
}
.pix-card .pix-input,
body.dark .pix-card .pix-input {
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    border-radius:0 !important;
    padding:9px 2px !important;
    box-shadow:none !important;
    color:#f8fafc !important;
}


/* =============================================================
   LANDING PAGE BUILDER — Pro UI (v2)
   Flat analytics style · LTR layout · keeps RTL inside content
   ============================================================= */
#panel-landing-pages { direction: ltr; }
#panel-landing-pages .creator-controls { display: flex; flex-direction: column; gap: 14px; }

/* --- Card -------------------------------------------------- */
.lp-card {
    position: relative;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color .15s, box-shadow .15s;
}
.lp-card:hover { border-color: #e2e6ea; }
body.dark .lp-card { background: #0f172a; border-color: rgba(255,255,255,.06); }

.lp-card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.lp-card-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
}
.lp-card-icon.brand  { background: #fef3c7; color: #92400e; }
.lp-card-icon.form   { background: #ddd6fe; color: #5b21b6; }
.lp-card-icon.theme  { background: #cffafe; color: #155e75; }
.lp-card-icon.price  { background: #dcfce7; color: #14532d; }
.lp-card-icon.offers { background: #fee2e2; color: #991b1b; }
.lp-card-icon.notes  { background: #e0e7ff; color: #3730a3; }

.lp-card-title { flex: 1; min-width: 0; }
.lp-card-title h3 {
    margin: 0; font-size: 14.5px; font-weight: 600;
    color: #0f172a; line-height: 1.3;
    display: inline-flex; align-items: center; gap: 8px;
}
.lp-card-title p {
    margin: 2px 0 0; font-size: 12px; color: #64748b; line-height: 1.45;
}
body.dark .lp-card-title h3 { color: #f1f5f9; }
body.dark .lp-card-title p  { color: #94a3b8; }

/* Pills/tags */
.lp-pill {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    letter-spacing: .02em;
}
.lp-pill.new { background: #ecfeff; color: #0369a1; border: 1px solid #bae6fd; }
.lp-section-tag {
    display: inline-flex; align-items: center;
    background: #f1f5f9; color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 10.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
}
.lp-field-opt { color: #94a3b8; font-weight: 400; font-size: 11.5px; }

/* Pro divider */
.lp-pro-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 4px;
    color: #64748b; font-size: 11.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.lp-pro-divider::before, .lp-pro-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}
.lp-pro-divider span { white-space: nowrap; }

/* --- Switch (FIXED LTR — no RTL bleed) -------------------- */
.lp-switch {
    position: relative; display: inline-block;
    width: 38px; height: 22px; flex-shrink: 0; cursor: pointer;
    direction: ltr;
}
.lp-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.lp-switch-slider {
    position: absolute; inset: 0;
    background: #e2e8f0;
    border-radius: 999px;
    transition: background .2s ease;
}
.lp-switch-slider::before {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.lp-switch input:checked + .lp-switch-slider { background: #0f172a; }
.lp-switch input:checked + .lp-switch-slider::before { transform: translateX(16px); }
body.dark .lp-switch-slider { background: rgba(255,255,255,.18); }
body.dark .lp-switch input:checked + .lp-switch-slider { background: #fff; }
body.dark .lp-switch input:checked + .lp-switch-slider::before { background: #0f172a; }

/* --- Fields ----------------------------------------------- */
.lp-field { margin-bottom: 12px; }
.lp-field:last-child { margin-bottom: 0; }
.lp-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-field-label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; color: #475569;
    letter-spacing: .01em;
}
body.dark .lp-field-label { color: #cbd5e1; }
.lp-field-hint { margin: 6px 0 0; font-size: 11.5px; color: #94a3b8; line-height: 1.55; }
.lp-row-between { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.lp-input, .lp-textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px; font-family: inherit; color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
}
.lp-input:focus, .lp-textarea:focus {
    outline: 0; border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}
body.dark .lp-input, body.dark .lp-textarea {
    background: #0b1220; color: #f1f5f9; border-color: rgba(255,255,255,.1);
}

/* Native select cleanup */
.lp-select-wrap { position: relative; }
.lp-fancy-select {
    appearance: none; -webkit-appearance: none;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 9px 36px 9px 12px;
    font-size: 13.5px; font-family: inherit; color: #0f172a;
    cursor: pointer; line-height: 1.4;
}
.lp-fancy-select:focus { outline: 0; border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.lp-select-caret {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: #64748b;
}
body.dark .lp-fancy-select { background: #0b1220; color: #f1f5f9; border-color: rgba(255,255,255,.1); }

/* --- Segmented -------------------------------------------- */
.lp-segmented {
    display: inline-flex;
    background: #f6f7f9;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 3px; gap: 2px;
    width: 100%;
}
.lp-segmented button {
    flex: 1;
    appearance: none; border: 0; background: transparent;
    padding: 7px 14px;
    font-size: 12.5px; font-weight: 500; color: #475569;
    border-radius: 7px; cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lp-segmented button:hover { color: #0f172a; }
.lp-segmented button.is-active {
    background: #fff; color: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(15,23,42,.04);
    font-weight: 600;
}
.lp-segmented.lp-lang-seg button.is-active {
    background: #0f172a; color: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.15);
}
body.dark .lp-segmented { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark .lp-segmented button { color: rgba(255,255,255,.65); }
body.dark .lp-segmented button.is-active { background: #1e293b; color: #fff; }

/* --- Collapsible ------------------------------------------ */
.lp-collapsible {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}
body.dark .lp-collapsible { border-color: rgba(255,255,255,.06); }

/* --- Logo drop -------------------------------------------- */
.lp-logo-drop {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lp-logo-drop:hover { background: #f1f5f9; border-color: #94a3b8; }
.lp-logo-preview {
    width: 48px; height: 48px; border-radius: 10px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: #94a3b8; flex-shrink: 0;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.lp-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.lp-logo-text { display: flex; flex-direction: column; line-height: 1.3; }
.lp-logo-text strong { font-size: 13px; color: #0f172a; font-weight: 600; }
.lp-logo-text span { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
body.dark .lp-logo-drop { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
body.dark .lp-logo-text strong { color: #f1f5f9; }

/* Brand colors */
.lp-brand-colors { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.lp-brand-color-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #eef0f3;
    border-radius: 8px;
}
.lp-brand-color-label {
    font-size: 12px; font-weight: 600; color: #475569;
    width: 60px; flex-shrink: 0;
}
.lp-hex { flex: 1; min-width: 0; font-family: ui-monospace,monospace; font-size: 12px; }
body.dark .lp-brand-color-item { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }

/* --- Style cards (Dark/Light apparence) ------------------- */
.lp-style-row { display: flex; gap: 10px; }
.lp-style-card {
    flex: 1;
    appearance: none; background: #fff;
    border: 1.5px solid #e5e7eb; border-radius: 12px;
    padding: 14px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; font-family: inherit;
    color: #475569;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.lp-style-card:hover { border-color: #94a3b8; transform: translateY(-1px); }
.lp-style-card.is-active {
    border-color: #0f172a; color: #0f172a;
    box-shadow: 0 0 0 4px rgba(15,23,42,.06);
}
.lp-style-card strong { font-size: 13px; font-weight: 600; }
.lp-style-card small { font-size: 11px; color: #94a3b8; }

.lp-style-swatch {
    width: 100%; height: 64px; border-radius: 8px;
    position: relative; overflow: hidden;
    margin-bottom: 6px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.lp-style-swatch.dark  {
    background: linear-gradient(135deg,#0f172a,#1e293b);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.lp-style-swatch.light {
    background: linear-gradient(135deg,#fafafa,#e5e7eb);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.lp-swatch-dot { width: 10px; height: 10px; border-radius: 50%; }
.lp-swatch-bar {
    width: 70%; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,.45);
}
.lp-swatch-bar.short { width: 40%; }
.lp-style-swatch.light .lp-swatch-bar { background: rgba(15,23,42,.35); }

body.dark .lp-style-card { background: #0f172a; border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
body.dark .lp-style-card.is-active { border-color: #fff; color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.1); }

/* Disabled overlay (when brand colors are active) */
.lp-card[data-locked="true"] .lp-style-row,
.lp-card[data-locked="true"] .lp-color-row,
.lp-card[data-locked="true"] .lp-segmented {
    opacity: .35; pointer-events: none; filter: grayscale(.4);
}
.lp-disabled-overlay {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fde68a; border-radius: 8px;
    font-size: 11.5px; font-weight: 500;
    margin-bottom: 10px;
}

/* --- Color picker row ------------------------------------- */
.lp-color-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.lp-color-row input[type="color"] {
    appearance: none; -webkit-appearance: none;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid #e5e7eb; border-radius: 8px;
    cursor: pointer; background: transparent;
}
.lp-color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.lp-color-row input[type="color"]::-moz-color-swatch    { border: 0; border-radius: 6px; }
.lp-color-presets { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lp-color-presets button {
    width: 26px; height: 26px; border-radius: 7px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
    cursor: pointer; padding: 0;
    transition: transform .15s, box-shadow .15s;
}
.lp-color-presets button:hover { transform: scale(1.1); box-shadow: 0 0 0 2px #0f172a; }

/* --- Offers ---------------------------------------------- */
.lp-offers-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.lp-offer-item {
    display: flex; gap: 6px; align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px;
}
.lp-offer-item input {
    flex: 1; appearance: none; border: 0; background: transparent;
    padding: 7px 10px; font-size: 13px; font-family: inherit; color: #0f172a;
    outline: 0;
}
.lp-offer-item .lp-offer-remove {
    appearance: none; border: 0; background: transparent;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; color: #94a3b8; cursor: pointer;
    font-size: 18px;
}
.lp-offer-item .lp-offer-remove:hover { background: #fef2f2; color: #b91c1c; }
body.dark .lp-offer-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark .lp-offer-item input { color: #f1f5f9; }

.lp-add-btn {
    appearance: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #0f172a;
    border: 1px dashed #cbd5e1; border-radius: 8px;
    padding: 8px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.lp-add-btn:hover { background: #f8fafc; border-color: #0f172a; }
body.dark .lp-add-btn { background: transparent; color: #f1f5f9; border-color: rgba(255,255,255,.18); }
body.dark .lp-add-btn:hover { background: rgba(255,255,255,.04); border-color: #fff; }

/* Counter */
.lp-counter {
    margin-top: 6px; text-align: right;
    font-size: 11px; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* --- Publish bar (preview top) --------------------------- */
.preview-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#lpPreviewActions { display: flex; gap: 8px; }
.lp-pub-btn {
    appearance: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    cursor: pointer;
    transition: transform .15s, opacity .15s, background .15s, box-shadow .15s;
}
.lp-pub-btn:disabled { opacity: .5; cursor: not-allowed; }
.lp-pub-btn:not(:disabled):hover { transform: translateY(-1px); }
.lp-pub-secondary {
    background: #fff; color: #0f172a;
    border: 1px solid #e5e7eb;
}
.lp-pub-secondary:not(:disabled):hover { background: #f8fafc; border-color: #0f172a; }
.lp-pub-primary {
    background: #0f172a; color: #fff; border: 0;
    box-shadow: 0 2px 8px rgba(15,23,42,.2);
}
.lp-pub-primary:not(:disabled):hover {
    background: #1e293b; box-shadow: 0 4px 12px rgba(15,23,42,.3);
}
body.dark .lp-pub-secondary { background: transparent; color: #f1f5f9; border-color: rgba(255,255,255,.18); }

/* --- Saved pages section --------------------------------- */
.lp-saved-section {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid #eef0f3;
}
body.dark .lp-saved-section { border-color: rgba(255,255,255,.06); }
.lp-saved-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.lp-saved-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #0f172a; }
.lp-saved-head p  { margin: 2px 0 0; font-size: 12.5px; color: #64748b; }
body.dark .lp-saved-head h3 { color: #f1f5f9; }

.lp-saved-tabs {
    display: inline-flex;
    background: #f6f7f9; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 3px; gap: 2px;
}
.lp-saved-tabs button {
    appearance: none; border: 0; background: transparent;
    padding: 6px 12px; font-size: 12px; font-weight: 500;
    color: #475569; cursor: pointer; border-radius: 7px;
    font-family: inherit;
}
.lp-saved-tabs button.is-active {
    background: #fff; color: #0f172a; font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.lp-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.lp-saved-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    background: #f8fafc;
    border: 1.5px dashed #e5e7eb;
    border-radius: 12px;
    color: #94a3b8;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.lp-saved-empty p { margin: 0; font-size: 13px; }

.lp-saved-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lp-saved-card:hover {
    border-color: #cbd5e1; transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15,23,42,.08);
}
.lp-saved-thumb {
    aspect-ratio: 9/14;
    background: #f1f5f9;
    background-size: cover; background-position: center top;
    position: relative;
}
.lp-saved-status {
    position: absolute; top: 8px; right: 8px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.lp-saved-status.published { background: #dcfce7; color: #14532d; }
.lp-saved-status.draft     { background: #fef3c7; color: #92400e; }

.lp-saved-body { padding: 10px 12px; }
.lp-saved-body h4 {
    margin: 0; font-size: 13px; font-weight: 600; color: #0f172a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-saved-body p {
    margin: 2px 0 8px; font-size: 11px; color: #94a3b8;
}
.lp-saved-actions { display: flex; gap: 6px; }
.lp-saved-actions button {
    flex: 1; appearance: none; border: 1px solid #e5e7eb;
    background: #fff; color: #475569;
    padding: 5px 8px; font-size: 11px; font-weight: 500;
    border-radius: 6px; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.lp-saved-actions button:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.lp-saved-actions .danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
body.dark .lp-saved-card { background: #0f172a; border-color: rgba(255,255,255,.08); }
body.dark .lp-saved-body h4 { color: #f1f5f9; }
body.dark .lp-saved-actions button { background: transparent; color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.12); }


/* Saved-pages section in full-width below the builder */
#panel-landing-pages > .lp-saved-section {
    margin: 28px 0 0;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
}
body.dark #panel-landing-pages > .lp-saved-section {
    background: #0f172a; border-color: rgba(255,255,255,.06);
}
.toast.warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ============================================================
   LIGHT-MODE FLAT GREY (#ebebeb) — overrides the navy frame
   User request: page background + topbar = #ebebeb in light mode.
   Sidebar stays as the existing navy theme (untouched).
   ============================================================ */
html:not(.dark), body:not(.dark) {
    background: #ebebeb !important;
}
html:not(.dark) .app-layout {
    background: #ebebeb !important;
}
html:not(.dark) .topbar-global {
    background: #ebebeb !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
}
html:not(.dark) .main-content {
    background: #ebebeb !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Sidebar : same background as page in light mode */
html:not(.dark) .sidebar {
    background: #ebebeb !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
}
html:not(.dark) .sidebar::after { display: none !important; }
body[dir="rtl"] html:not(.dark) .sidebar {
    border-right: 0 !important;
    border-left: 1px solid rgba(0,0,0,0.06) !important;
}

/* Sidebar links readable on light grey */
html:not(.dark) .sidebar .sidebar-link {
    color: #475569 !important;
}
html:not(.dark) .sidebar .sidebar-link i { color: #64748b !important; }
html:not(.dark) .sidebar .sidebar-link:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #0f172a !important;
}
html:not(.dark) .sidebar .sidebar-link:hover i { color: #0f172a !important; }
html:not(.dark) .sidebar .sidebar-link.active {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
html:not(.dark) .sidebar .sidebar-link.active i { color: #0f172a !important; filter: none !important; }

html:not(.dark) .sidebar .nav-section-title {
    color: #94a3b8 !important;
}
html:not(.dark) .sidebar-divider { background: rgba(0,0,0,0.08) !important; }

html:not(.dark) .sidebar .sidebar-search {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
html:not(.dark) .sidebar .sidebar-search input { color: #0f172a !important; }
html:not(.dark) .sidebar .sidebar-search input::placeholder { color: #94a3b8 !important; }
html:not(.dark) .sidebar .sidebar-search kbd {
    background: #f1f5f9 !important; color: #64748b !important; border-color: rgba(0,0,0,0.06) !important;
}

html:not(.dark) .sidebar-footer .credits-card,
html:not(.dark) .sidebar-footer .user-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

html:not(.dark) .sidebar .link-badge.link-badge-count {
    background: rgba(0,0,0,0.05) !important;
    color: #64748b !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Topbar buttons readable on grey */
html:not(.dark) .topbar-global .topbar-btn,
html:not(.dark) .topbar-global .topbar-system-link {
    color: #303030 !important;
    background: rgba(255,255,255,0.55) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
html:not(.dark) .topbar-global .topbar-btn:hover,
html:not(.dark) .topbar-global .topbar-system-link:hover {
    background: #fff !important;
}
html:not(.dark) .topbar-global .lang-toggle { background: rgba(255,255,255,0.55) !important; }
html:not(.dark) .topbar-global .lang-option { color: #6b7280 !important; }
html:not(.dark) .topbar-global .lang-option.active { background: #303030 !important; color: #fff !important; }

/* ============================================================
   Topbar-right: System switcher card (small pill, legacy-style)
   ============================================================ */
.topbar-system-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px 0 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    cursor: pointer;
    font: 600 12.5px/1 'Inter', system-ui, sans-serif;
    color: #303030;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.topbar-system-card:hover {
    background: #f7f7f7;
    border-color: rgba(0,0,0,0.14);
}
.topbar-system-card.active {
    background: #303030;
    color: #fff;
    border-color: #303030;
}
.topbar-system-card.active .sys-card-icon { background: rgba(255,255,255,0.18); color: #fff; }
.topbar-system-card.active i { color: rgba(255,255,255,0.7) !important; }
.sys-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #475569;
}
.sys-card-label { font-weight: 600; letter-spacing: 0.1px; }

body.dark .topbar-system-card {
    background: #3a363f;
    border-color: rgba(255,255,255,0.1);
    color: #f5f5f7;
}
body.dark .topbar-system-card:hover { background: #3a393b; }
body.dark .sys-card-icon { background: rgba(255,255,255,0.06); color: #c9c9cc; }

/* Topbar-right: store switcher host alignment (when present) */
.topbar-right #store-switcher-host { display: inline-flex; align-items: center; }

/* ============================================================
   FINAL ENFORCED OVERRIDE — Sidebar = page bg (#ebebeb) in light
   Doubled selector specificity to beat any later cascade rule.
   ============================================================ */
html:not(.dark) body .sidebar,
html:not(.dark) body aside.sidebar,
html:not(.dark) body #sidebar,
html:not(.dark) body .ds-sidebar,
html:not(.dark) body aside.ds-sidebar {
    background: #ebebeb !important;
    background-image: none !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
}
html:not(.dark) body .sidebar::after,
html:not(.dark) body .sidebar::before,
html:not(.dark) body .ds-sidebar::after,
html:not(.dark) body .ds-sidebar::before { display: none !important; }

html:not(.dark) body .ds-sidebar__brand,
html:not(.dark) body .ds-sidebar__nav,
html:not(.dark) body .ds-sidebar__footer,
html:not(.dark) body .ds-sidebar__search {
    background: #ebebeb !important;
    background-image: none !important;
}
html:not(.dark) body .ds-sidebar__search input {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: #0f172a !important;
}
html:not(.dark) body .ds-sidebar__item {
    color: #475569 !important;
}
html:not(.dark) body .ds-sidebar__item:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #0f172a !important;
}
html:not(.dark) body .ds-sidebar__item.is-active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
}
html:not(.dark) body .ds-sidebar__group-label {
    color: #94a3b8 !important;
}
html:not(.dark) body .ds-sidebar__divider {
    background: rgba(0,0,0,0.08) !important;
}

html:not(.dark) body .app-layout {
    background: #ebebeb !important;
    background-image: none !important;
}
html:not(.dark) body .topbar-global {
    background: #ebebeb !important;
    background-image: none !important;
    box-shadow: none !important;
}
html:not(.dark) body .main-content {
    background: #ebebeb !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* ============================================================
   ORDER COLOR TAG + NOTE TOOLTIP + COLOR PICKER POPOVER
   ============================================================ */
.order-row.has-color-tag {
    box-shadow: inset 4px 0 0 0 var(--row-color, transparent);
}
[dir="rtl"] .order-row.has-color-tag {
    box-shadow: inset -4px 0 0 0 var(--row-color, transparent);
}

/* Note action button — dot styles handled in unified system block above */
.ord-action-btn.act-note { position: relative; }
.ord-action-btn.act-note.has-note { color: #0f172a; }
.ord-action-btn.act-note .act-note-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0f172a;
    border: 1.5px solid #fff;
}
[dir="rtl"] .ord-action-btn.act-note .act-note-dot { right: auto; left: 4px; }
body.dark .ord-action-btn.act-note.has-note { color: #f8fafc; }
body.dark .ord-action-btn.act-note .act-note-dot { background: #f8fafc; border-color: #1f2024; }

/* Color tag action button */
.ord-action-btn.act-color { position: relative; }
.ord-action-btn.act-color .color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1.5px solid rgba(0,0,0,0.15);
    box-shadow: 0 0 0 2px #fff;
}

/* Hover tooltip showing note + timestamp */
.note-hover-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    min-width: 200px;
    background: #1e293b;
    color: #f8fafc;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    font-size: 0.8rem;
    line-height: 1.4;
    pointer-events: none;
    animation: noteTipFade .14s ease-out;
}
@keyframes noteTipFade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.note-hover-tooltip .nht-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.72rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 6px;
    margin-bottom: 6px;
}
.note-hover-tooltip .nht-date {
    margin-left: auto;
    font-weight: 400;
    color: #94a3b8;
    font-size: 0.68rem;
}
[dir="rtl"] .note-hover-tooltip .nht-date { margin-left: 0; margin-right: auto; }
.note-hover-tooltip .nht-body {
    white-space: pre-wrap;
    word-break: break-word;
    color: #f1f5f9;
}

/* Color picker popover */
.color-picker-pop {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15,23,42,0.18);
    padding: 12px 14px;
    min-width: 220px;
    animation: noteTipFade .12s ease-out;
}
.color-picker-pop .cpp-title {
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
}
.color-picker-pop .cpp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.color-picker-pop .cpp-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, box-shadow .12s ease;
}
.color-picker-pop .cpp-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px #7c3aed;
}
.color-picker-pop .cpp-swatch.is-active {
    box-shadow: 0 0 0 2px #7c3aed, 0 0 0 4px #ede9fe;
}
.color-picker-pop .cpp-swatch.cpp-custom {
    background: conic-gradient(
        from 0deg,
        #ef4444, #f59e0b, #eab308, #10b981,
        #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444
    );
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}
.color-picker-pop .cpp-swatch.cpp-clear {
    background: #fff;
    box-shadow: 0 0 0 2px #c4b5fd;
    position: relative;
}
.color-picker-pop .cpp-swatch.cpp-clear::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: repeating-linear-gradient(45deg, #f1f5f9 0 4px, #fff 4px 8px);
}

/* Dark mode tweaks */
.dark-mode .color-picker-pop {
    background: #1e293b;
    border-color: #334155;
}
.dark-mode .color-picker-pop .cpp-title { color: #cbd5e1; }
.dark-mode .color-picker-pop .cpp-swatch.cpp-clear { background: #0f172a; }
.dark-mode .color-picker-pop .cpp-swatch.cpp-clear::after {
    background: repeating-linear-gradient(45deg, #1e293b 0 4px, #0f172a 4px 8px);
}

/* ============================================================
   ORDER COLOR TAG — MULTI-COLOR STRIPES & PICKER (v3)
   ============================================================ */
/* Multiple vertical stripes stacked on the left edge of the row */
.row-color-host { position: relative; }
.row-color-stack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
[dir="rtl"] .row-color-stack {
    left: auto;
    right: 0;
}
.row-color-stripe {
    flex: 1 1 0;
    width: 100%;
    min-height: 6px;
}

/* Color action button stack of dots */
.color-dot-stack {
    display: inline-flex;
    align-items: center;
    gap: -4px;
    height: 16px;
}
.color-dot-stack .color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
    margin-left: -3px;
}
.color-dot-stack .color-dot:first-child { margin-left: 0; }
.color-dot-stack .color-dot-more {
    margin-left: 2px;
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0 4px;
    line-height: 12px;
    height: 12px;
}

/* Selected-colors chip row inside picker */
.color-picker-pop .cpp-hint {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 4px;
}
.color-picker-pop .cpp-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 10px;
    min-height: 36px;
}
.color-picker-pop .cpp-empty {
    text-align: center;
    font-size: 0.72rem;
    color: #94a3b8;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 10px;
}
.color-picker-pop .cpp-chip {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.color-picker-pop .cpp-chip-x {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1e293b;
    color: #fff;
    border: 1.5px solid #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
[dir="rtl"] .color-picker-pop .cpp-chip-x { right: auto; left: -4px; }

.color-picker-pop .cpp-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}
.color-picker-pop .cpp-clear-btn,
.color-picker-pop .cpp-done-btn {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.color-picker-pop .cpp-clear-btn {
    background: transparent;
    color: #ef4444;
}
.color-picker-pop .cpp-clear-btn:hover {
    background: #fee2e2;
}
.color-picker-pop .cpp-done-btn {
    background: #7c3aed;
    color: #fff;
}
.color-picker-pop .cpp-done-btn:hover {
    background: #6d28d9;
}

/* Dark mode */
.dark-mode .color-picker-pop .cpp-selected,
.dark-mode .color-picker-pop .cpp-empty {
    background: #0f172a;
}
.dark-mode .color-picker-pop .cpp-footer { border-top-color: #334155; }
.dark-mode .color-dot-stack .color-dot-more {
    background: #334155;
    color: #cbd5e1;
}

/* Inline native color input styled as a swatch with rainbow gradient */
.color-picker-pop .cpp-swatch.cpp-custom {
    background: conic-gradient(
        from 0deg,
        #ef4444, #f59e0b, #eab308, #10b981,
        #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444
    );
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.color-picker-pop .cpp-swatch.cpp-custom .cpp-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}
.color-picker-pop .cpp-swatch.cpp-custom .cpp-plus {
    pointer-events: none;
    z-index: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* === Color picker: search / hex code input === */
.cpp-search-row { display:flex; align-items:center; gap:6px; margin-top:10px; }
.cpp-search-preview {
    width:24px; height:24px; border-radius:6px; border:1px solid #cbd5e1;
    background:transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
    flex-shrink:0;
}
.cpp-search-input {
    flex:1; min-width:0;
    border:1px solid #cbd5e1; border-radius:6px;
    padding:6px 8px; font-size:12px; outline:none;
    background:#fff; color:#0f172a;
}
.cpp-search-input:focus { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,0.18); }
.cpp-search-add {
    border:0; border-radius:6px; padding:6px 10px;
    background:#7c3aed; color:#fff; font-size:11px; font-weight:600;
    cursor:pointer;
}
.cpp-search-add:disabled { background:#cbd5e1; cursor:not-allowed; }
.cpp-suggest {
    display:none; flex-direction:column; gap:2px;
    margin-top:6px; max-height:160px; overflow-y:auto;
    border:1px solid #e2e8f0; border-radius:6px; background:#f8fafc; padding:4px;
}
.cpp-suggest-item {
    display:flex; align-items:center; gap:8px;
    width:100%; border:0; background:transparent;
    padding:5px 6px; border-radius:4px; cursor:pointer;
    font-size:12px; color:#0f172a; text-align:left;
}
.cpp-suggest-item:hover { background:#fff; }
.cpp-suggest-dot {
    width:14px; height:14px; border-radius:50%;
    border:1px solid rgba(0,0,0,0.15); flex-shrink:0;
}
.cpp-suggest-name { flex:1; text-transform:capitalize; }
.cpp-suggest-hex { color:#64748b; font-family: ui-monospace, Menlo, monospace; font-size:10.5px; }

/* ============================================================
   FIX — Row checkboxes must always be clickable
   (older absolute overlays were sitting on top of them)
   ============================================================ */
.table-card::before,
.table-card::after {
    pointer-events: none !important;
}
.orders-reference-table th:first-child,
.orders-reference-table td:first-child,
#panel-shipping table th:first-child,
#panel-shipping table td:first-child {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 6px !important;
    text-align: center !important;
}
.ord-select-cell {
    position: relative !important;
    z-index: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 6px !important;
    overflow: visible !important;
    pointer-events: auto !important;
}
.ord-select-head {
    position: relative !important;
    z-index: 4 !important;
    overflow: visible !important;
}
.ord-select-hit {
    position: relative !important;
    z-index: 20 !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.ord-select-hit:hover {
    background: #eaf2ff !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16) inset !important;
}
.ord-select-hit:active {
    transform: scale(0.96);
}
.ord-select-hit input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0.001 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}
.ord-select-box {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 2px solid #94a3b8 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    pointer-events: none !important;
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.ord-select-hit input[type="checkbox"]:checked + .ord-select-box {
    background: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}
.ord-select-hit input[type="checkbox"]:checked + .ord-select-box::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(4px, 4px) rotate(-45deg);
}
.order-row.is-selected td,
#shippingBody tr.is-selected td {
    background: #eff6ff !important;
}
body.dark .ord-select-hit:hover {
    background: rgba(96, 165, 250, 0.14) !important;
}
body.dark .ord-select-box {
    background: #2d2c2f !important;
    border-color: #64748b !important;
}
body.dark .order-row.is-selected td,
body.dark #shippingBody tr.is-selected td {
    background: rgba(37, 99, 235, 0.14) !important;
}
.order-row .row-color-host,
.order-row td:first-child {
    position: relative;
    z-index: 1;
}
.order-row .row-color-stack,
.row-color-stack {
    pointer-events: none !important;
    z-index: 0 !important;
}
.order-check,
.ship-check,
.ord-check,
#selectAll,
#selectAllShip {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    cursor: pointer;
    /* make the click target a bit larger than the 16px box */
    min-width: 18px;
    min-height: 18px;
}

/* Final override: the visual square and hidden input must share the same 32px hit target. */
.ord-select-hit input.order-check,
.ord-select-hit input.ship-check,
.ord-select-hit input#selectAll,
.ord-select-hit input#selectAllShip {
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: #2563eb !important;
}
.ord-select-hit .ord-select-box {
    display: none !important;
}

.ord-product-mini,
.ord-id-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.carrier-upload-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: max-content;
    max-width: 110px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #dc2626;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(220,38,38,0.18);
}
.carrier-upload-badge i { display: none; }
body.dark .carrier-upload-badge {
    background: #ef4444;
    color: #ffffff;
    border-color: #b91c1c;
}
.order-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 170px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark .order-source-badge {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.22);
}
/* act-quote handled in unified system block above */

.codq-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .18s ease;
}
.codq-overlay.show { opacity: 1; }
.codq-card {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
    transform: translateY(12px) scale(.98);
    transition: transform .2s cubic-bezier(.2,.9,.25,1.05);
}
.codq-overlay.show .codq-card { transform: translateY(0) scale(1); }
.codq-card::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, #0f766e, #2563eb 36%, #f59e0b 68%, #e11d48);
}
.codq-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.codq-close:hover { background: #f8fafc; color: #0f172a; }
.codq-hero { padding: 24px 24px 12px; }
.codq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #a5f3fc;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.codq-kicker span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .16);
}
.codq-hero h3 {
    margin: 14px 0 4px;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: 0;
}
.codq-hero p { margin: 0; color: #64748b; font-size: .84rem; }
.codq-main-total {
    margin: 10px 24px 16px;
    padding: 18px;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.codq-main-total span { color: #cbd5e1; font-size: .78rem; font-weight: 700; }
.codq-main-total strong { font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.codq-grid {
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.codq-metric {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.codq-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.codq-metric span { display: block; color: #64748b; font-size: .72rem; font-weight: 700; }
.codq-metric strong { display: block; color: #0f172a; font-size: .92rem; font-weight: 850; font-variant-numeric: tabular-nums; margin-top: 2px; }
.codq-blue .codq-metric-icon { background: #dbeafe; color: #1d4ed8; }
.codq-amber .codq-metric-icon { background: #fef3c7; color: #b45309; }
.codq-violet .codq-metric-icon { background: #ede9fe; color: #6d28d9; }
.codq-cyan .codq-metric-icon { background: #cffafe; color: #0e7490; }
.codq-rose .codq-metric-icon { background: #ffe4e6; color: #be123c; }
.codq-policy {
    margin: 14px 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.codq-policy > div {
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 13px;
    background: #fff;
}
.codq-policy span { display: block; color: #64748b; font-size: .72rem; font-weight: 700; }
.codq-policy strong { display: block; color: #0f172a; margin-top: 3px; font-size: .8rem; line-height: 1.35; }
.codq-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px 22px;
}
.codq-btn {
    border-radius: 11px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}
.codq-btn.secondary { background: #fff; color: #334155; }
.codq-btn.secondary:hover { background: #f8fafc; }
.codq-btn.primary { background: #0f766e; color: #fff; border-color: #0f766e; box-shadow: 0 8px 18px rgba(15, 118, 110, .22); }
.codq-btn.primary:hover { background: #115e59; }
body.dark .codq-card,
body.dark .codq-close,
body.dark .codq-policy > div { background: #1c1d20; border-color: rgba(255,255,255,.08); }
body.dark .codq-hero h3,
body.dark .codq-metric strong,
body.dark .codq-policy strong { color: #f8fafc; }
body.dark .codq-hero p,
body.dark .codq-metric span,
body.dark .codq-policy span { color: #94a3b8; }
body.dark .codq-metric { background: #25262a; border-color: rgba(255,255,255,.08); }
body.dark .codq-btn.secondary { background: #25262a; color: #e2e8f0; border-color: rgba(255,255,255,.1); }
@media (max-width: 560px) {
    .codq-grid,
    .codq-policy { grid-template-columns: 1fr; }
    .codq-main-total { align-items: flex-start; flex-direction: column; }
    .codq-footer { flex-direction: column-reverse; }
    .codq-btn { width: 100%; }
}

/* ==============================================================
   ✦ EDIT ORDER MODAL — V4 (unified pro design)
   Restrained French-analytics palette, no rainbow, consistent
   slate borders, accent only where it adds real meaning.
   ============================================================== */
.eo2-overlay {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.eo2-modal {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
}
.eo2-modal::before { content: none; }

.eo2-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e6e9ef;
    padding: 0 20px;
}
.eo2-topbar::before { content: none; }

.eo2-iconbtn {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    color: #5b6473;
}
.eo2-iconbtn:hover { background: #eef2f7; color: #0f172a; }

.eo2-btn-ghost {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    color: #475569;
    border-radius: 10px;
    font-weight: 600;
}
.eo2-btn-ghost:hover { background: #eef2f7; color: #0f172a; border-color: #e6e9ef; }

.eo2-btn-primary {
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #0f172a;
    border-radius: 10px;
    padding: 9px 18px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.eo2-btn-primary:hover { background: #1f2937; border-color: #1f2937; }

.eo2-body { background: #f4f6fa; }
.eo2-nav { background: #ffffff; border-right: 1px solid #e6e9ef; }
.eo2-nav-card { background: #f4f6fa; border: 1px solid #e6e9ef; }

.eo2-nav-link {
    color: #5b6473;
    border-radius: 10px;
    border: 1px solid transparent;
}
.eo2-nav-link:hover {
    background: #eef2f7;
    color: #0f172a;
    border-color: #e6e9ef;
}
.eo2-nav-link.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: none;
}
.eo2-nav-link.active .eo2-nav-num { color: inherit; opacity: 0.65; }

.eo2-section {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.eo2-sec-head { border-bottom: 1px solid #eef1f5; padding-bottom: 14px; }
.eo2-sec-num,
.eo2-section:nth-of-type(1) .eo2-sec-num,
.eo2-section:nth-of-type(2) .eo2-sec-num,
.eo2-section:nth-of-type(3) .eo2-sec-num,
.eo2-section:nth-of-type(4) .eo2-sec-num,
.eo2-section:nth-of-type(5) .eo2-sec-num {
    width: 30px;
    height: 30px;
    background: #eef2f7;
    color: #0f172a;
    border: 1px solid #e6e9ef;
    border-radius: 9px;
    font-weight: 800;
    box-shadow: none;
}
.eo2-sec-title { color: #0f172a; font-weight: 700; }
.eo2-sec-title i { color: #5b6473; }
.eo2-sec-sub { color: #94a3b8; }

.eo2-field input,
.eo2-field select,
.eo2-field textarea {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 11px 12px;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.eo2-field input:focus,
.eo2-field select:focus,
.eo2-field textarea:focus {
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.eo2-stepper { border: 1px solid #e6e9ef; border-radius: 10px; }
.eo2-stepper button { background: #f4f6fa; }
.eo2-stepper button:hover { background: #eef2f7; }

.eo2-rcard {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: 13px 14px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.eo2-rcard:hover { border-color: #cbd5e1; }
.eo2-rcard.active {
    border-color: #0f172a;
    background: #eef2f7;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}
.eo2-rcard.active i { color: #0f172a; }

.eo2-chip {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    color: #5b6473;
    border-radius: 999px;
    padding: 7px 13px;
    font-weight: 600;
}
.eo2-chip:hover { border-color: #cbd5e1; color: #0f172a; }
.eo2-chip.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.eo2-carrier { background: #ffffff; border: 1px solid #e6e9ef; border-radius: 12px; }
.eo2-carrier:hover { border-color: #cbd5e1; }
.eo2-carrier.active { background: #ecfdf5; border-color: #0f766e; }
.eo2-carrier.active .eo2-carrier-tick { color: #0f766e; }

.eo2-aside { background: #ffffff; border-left: 1px solid #e6e9ef; }
.eo2-aside-card {
    background: #f4f6fa;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: none;
    padding: 16px;
}
.eo2-aside-label { color: #94a3b8; }
.eo2-aside-row strong { color: #0f172a; }
.eo2-aside-divider { background: #e6e9ef; }
.eo2-aside-total span { color: #5b6473; font-weight: 600; }
.eo2-aside-total strong { color: #0f172a; font-weight: 800; letter-spacing: -0.02em; }

/* Compact density on common laptops */
@media (min-width: 1100px) {
    .eo2-form { padding: 22px 26px 60px; }
    .eo2-section { padding: 20px 22px; margin-bottom: 14px; }
}

/* Dark mode overrides */
body.dark .eo2-overlay { background: rgba(0, 0, 0, 0.55); }
body.dark .eo2-modal { background: #1f2024; border-color: rgba(255, 255, 255, 0.07); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); }
body.dark .eo2-topbar { background: #1f2024; border-bottom-color: rgba(255, 255, 255, 0.07); }
body.dark .eo2-iconbtn { background: #25262a; border-color: rgba(255, 255, 255, 0.07); color: #cbd5e1; }
body.dark .eo2-iconbtn:hover { background: #2e2f33; color: #f1f5f9; }
body.dark .eo2-btn-ghost { background: #25262a; border-color: rgba(255, 255, 255, 0.07); color: #cbd5e1; }
body.dark .eo2-btn-ghost:hover { background: #2e2f33; color: #f1f5f9; }
body.dark .eo2-btn-primary { background: #f8fafc; color: #0f172a; border-color: #f8fafc; }
body.dark .eo2-btn-primary:hover { background: #ffffff; }
body.dark .eo2-body { background: #18191c; }
body.dark .eo2-nav,
body.dark .eo2-aside { background: #1f2024; border-color: rgba(255, 255, 255, 0.07); }
body.dark .eo2-nav-card { background: #18191c; border-color: rgba(255, 255, 255, 0.07); }
body.dark .eo2-nav-link { color: #94a3b8; }
body.dark .eo2-nav-link:hover { background: #2e2f33; color: #f1f5f9; border-color: rgba(255, 255, 255, 0.07); }
body.dark .eo2-nav-link.active { background: #f8fafc; color: #0f172a; border-color: #f8fafc; }
body.dark .eo2-section { background: #1f2024; border-color: rgba(255, 255, 255, 0.07); box-shadow: none; }
body.dark .eo2-sec-head { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.dark .eo2-sec-num,
body.dark .eo2-section:nth-of-type(1) .eo2-sec-num,
body.dark .eo2-section:nth-of-type(2) .eo2-sec-num,
body.dark .eo2-section:nth-of-type(3) .eo2-sec-num,
body.dark .eo2-section:nth-of-type(4) .eo2-sec-num,
body.dark .eo2-section:nth-of-type(5) .eo2-sec-num {
    background: #25262a; color: #f1f5f9; border-color: rgba(255, 255, 255, 0.07);
}
body.dark .eo2-sec-title { color: #f1f5f9; }
body.dark .eo2-sec-title i { color: #94a3b8; }
body.dark .eo2-field input,
body.dark .eo2-field select,
body.dark .eo2-field textarea { background: #25262a; border-color: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
body.dark .eo2-field input:focus,
body.dark .eo2-field select:focus,
body.dark .eo2-field textarea:focus { border-color: #f8fafc; box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.08); }
body.dark .eo2-stepper { border-color: rgba(255, 255, 255, 0.08); }
body.dark .eo2-stepper button { background: #2e2f33; color: #f1f5f9; }
body.dark .eo2-stepper button:hover { background: #3a3b40; }
body.dark .eo2-rcard { background: #25262a; border-color: rgba(255, 255, 255, 0.07); }
body.dark .eo2-rcard.active { background: rgba(248, 250, 252, 0.06); border-color: #f8fafc; }
body.dark .eo2-rcard.active i { color: #f8fafc; }
body.dark .eo2-chip { background: #25262a; border-color: rgba(255, 255, 255, 0.07); color: #cbd5e1; }
body.dark .eo2-chip.active { background: #f8fafc; color: #0f172a; border-color: #f8fafc; }
body.dark .eo2-carrier { background: #25262a; border-color: rgba(255, 255, 255, 0.07); }
body.dark .eo2-carrier.active { background: rgba(16, 185, 129, 0.10); border-color: #10b981; }
body.dark .eo2-carrier.active .eo2-carrier-tick { color: #34d399; }
body.dark .eo2-aside-card { background: #18191c; border-color: rgba(255, 255, 255, 0.07); box-shadow: none; }
body.dark .eo2-aside-label { color: #94a3b8; }
body.dark .eo2-aside-row strong { color: #f1f5f9; }
body.dark .eo2-aside-divider { background: rgba(255, 255, 255, 0.07); }
body.dark .eo2-aside-total span { color: #cbd5e1; }
body.dark .eo2-aside-total strong { color: #f1f5f9; }

html[dir="rtl"] .eo2-aside { border-left: none; border-right: 1px solid #e6e9ef; }
html[dir="rtl"] .eo2-nav { border-right: none; border-left: 1px solid #e6e9ef; }
html[dir="rtl"] body.dark .eo2-aside { border-right-color: rgba(255, 255, 255, 0.07); }
html[dir="rtl"] body.dark .eo2-nav { border-left-color: rgba(255, 255, 255, 0.07); }
.client-badge {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.client-badge:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}
.client-history-modal {
    max-width: 680px;
}
.client-history-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
}
.client-history-row:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.ch-main,
.ch-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ch-main {
    flex-direction: column;
    align-items: flex-start;
}
.ch-main span {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    font-size: 0.78rem;
}
.ch-meta {
    justify-content: flex-end;
    flex-wrap: wrap;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}
.ch-note {
    grid-column: 1 / -1;
    color: #991b1b;
    background: #fef2f2;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 0.76rem;
}
.client-history-empty {
    padding: 24px;
    text-align: center;
    color: #64748b;
}
body.dark .client-history-row {
    background: #2d2c2f;
    border-color: #3f3e42;
}
body.dark .client-history-row:hover {
    background: #353438;
}

/* ===== Origin wilaya selector (Shipping sidebar) ===== */
.origin-wilaya-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.origin-wilaya-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.2px;
}
.origin-wilaya-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 8px 30px 8px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
        no-repeat right 10px center;
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.origin-wilaya-select:hover { border-color: #cbd5e1; }
.origin-wilaya-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.origin-wilaya-hint {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.35;
}
body.dark .origin-wilaya-block { border-top-color: rgba(255,255,255,0.08); }
body.dark .origin-wilaya-label { color: #cbd5e1; }
body.dark .origin-wilaya-select {
    background-color: #25262a;
    border-color: rgba(255,255,255,0.08);
    color: #f1f5f9;
}
body.dark .origin-wilaya-hint { color: #94a3b8; }

/* ===== SWITCH SYSTEM (flat French analytics style) ===== */
#panel-switches { font-family: 'Inter', sans-serif; }
.sw-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin: 16px 0 18px;
    overflow: hidden;
}
.sw-kpi {
    padding: 16px 20px;
    border-right: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sw-kpi:last-child { border-right: none; }
.sw-kpi-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #94a3b8;
    border-bottom: 1px dotted #cbd5e1;
    padding-bottom: 4px;
    width: max-content;
}
.sw-kpi-value {
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.5px;
}
.sw-kpi-value.sw-kpi-accent { color: #2563eb; }

.sw-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 14px;
}
.sw-tab {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.sw-tab.active {
    color: #0f172a;
    border-bottom-color: #0f172a;
}
.sw-tab:hover:not(.active) { color: #1e293b; }

.sw-list { display: flex; flex-direction: column; gap: 12px; }
.sw-empty {
    padding: 32px;
    text-align: center;
    color: #94a3b8;
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
}

.sw-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
}
.sw-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.sw-card-title { display: flex; align-items: center; gap: 10px; }
.sw-card-id {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}
.sw-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.sw-badge-pending { background: #fef3c7; color: #92400e; }
.sw-badge-info { background: #dbeafe; color: #1e3a8a; }
.sw-badge-success { background: #dcfce7; color: #166534; }
.sw-badge-failed { background: #fee2e2; color: #991b1b; }
.sw-badge-muted { background: #f1f5f9; color: #64748b; }

.sw-match-type {
    font-size: 10.5px;
    padding: 2px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #64748b;
}
.sw-mt-exact { border-color: #bbf7d0; color: #166534; background: #f0fdf4; }
.sw-mt-nearby { border-color: #fde68a; color: #92400e; background: #fffbeb; }
.sw-mt-national { border-color: #c7d2fe; color: #3730a3; background: #eef2ff; }
.sw-mt-manual { border-color: #c7d2fe; color: #3730a3; background: #eef2ff; }
.sw-order-badge {
    font-size: 10.5px;
    padding: 2px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-weight: 600;
}
.sw-order-confirmed { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.sw-order-shipped { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.sw-order-muted { background: #f8fafc; border-color: #e5e7eb; color: #64748b; }

/* ====== Explorer (Yalidine-style 2-pane picker) ====== */
.sw-explorer {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1100px) { .sw-explorer { grid-template-columns: 1fr; } }
.sw-pane {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}
.sw-pane-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.sw-pane-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.1px;
}
.sw-pane-sub {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}
.sw-pane-count {
    font-size: 11px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
}
.sw-pane-toolbar { padding: 8px 12px 10px; border-bottom: 1px solid #f8fafc; }
.sw-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12.5px;
    color: #0f172a;
    font-family: inherit;
    background: #f8fafc;
}
.sw-input:focus { outline: none; border-color: #0f172a; background: #fff; }

.sw-returns-list {
    flex: 1;
    overflow-y: auto;
    max-height: 620px;
}
.sw-rt-row {
    display: block;
    width: 100%;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.sw-rt-row:hover { background: #f8fafc; }
.sw-rt-row.is-selected {
    background: #f0f7ff;
    box-shadow: inset 3px 0 0 #2563eb;
}
.sw-rt-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sw-rt-product {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sw-rt-qty {
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.sw-rt-mid { font-size: 11.5px; color: #475569; margin-bottom: 4px; }
.sw-rt-mid .sw-rt-wilaya { font-weight: 600; color: #0f172a; }
.sw-rt-mid .sw-rt-dot { margin: 0 6px; color: #cbd5e1; }
.sw-rt-tracking { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: #64748b; }
.sw-rt-bot { display: flex; justify-content: space-between; align-items: center; }
.sw-rt-time { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px; }
.sw-rt-cand { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.sw-rt-cand-on { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.sw-rt-cand-off { background: #f8fafc; color: #94a3b8; border: 1px solid #e5e7eb; }

.sw-color-chip {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.sw-cands-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 700px;
}
.sw-cand-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.sw-cand-card:hover { border-color: #cbd5e1; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
.sw-cand-card-passive { background: #fcfcfd; }
.sw-cand-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f1f5f9;
}
.sw-cand-id { display: flex; align-items: center; gap: 8px; }
.sw-cand-num {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sw-cand-total { font-size: 14px; font-weight: 700; color: #0f172a; }
.sw-cand-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
}
@media (max-width: 720px) { .sw-cand-body { grid-template-columns: repeat(2, 1fr); } }
.sw-cand-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-cell-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    border-bottom: 1px dotted #e5e7eb;
    padding-bottom: 2px;
    width: max-content;
    max-width: 100%;
}
.sw-cell-value {
    font-size: 12.5px;
    color: #0f172a;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sw-cell-value small { color: #64748b; font-weight: 400; margin-left: 4px; }
.sw-cand-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}
.sw-cand-foot-muted {
    color: #94a3b8;
    font-size: 11px;
    justify-content: flex-start;
    border-top: 1px dashed #f1f5f9;
    padding-top: 10px;
}
.sw-pick { font-size: 12.5px; padding: 7px 14px; }

.sw-empty-sm { padding: 20px; font-size: 12px; }
.sw-header .sw-btn-ghost { background: #0f172a; color: #fff; border: none; }
.sw-header .sw-btn-ghost:hover { background: #1e293b; }

body.dark .sw-pane { background: #0f172a; border-color: #1e293b; }
body.dark .sw-pane-head { border-color: #1e293b; }
body.dark .sw-pane-title { color: #f1f5f9; }
body.dark .sw-rt-row { background: #0f172a; border-color: #1e293b; }
body.dark .sw-rt-row:hover { background: #15233f; }
body.dark .sw-rt-row.is-selected { background: #1e3a8a33; box-shadow: inset 3px 0 0 #60a5fa; }
body.dark .sw-rt-product, body.dark .sw-rt-mid .sw-rt-wilaya { color: #f1f5f9; }
body.dark .sw-input { background: #020617; border-color: #1e293b; color: #f1f5f9; }
body.dark .sw-cand-card { background: #0f172a; border-color: #1e293b; }
body.dark .sw-cand-num, body.dark .sw-cand-total, body.dark .sw-cell-value { color: #f1f5f9; }

.sw-card-savings { text-align: right; }
.sw-savings-label {
    display: block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}
.sw-savings-value {
    font-size: 16px;
    font-weight: 600;
    color: #16a34a;
}

.sw-card-grid {
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    align-items: stretch;
    gap: 10px;
    background: #fafbfc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 12px;
}
.sw-side { display: flex; flex-direction: column; gap: 6px; }
.sw-side-tag {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ef4444;
    margin-bottom: 4px;
    border-bottom: 1px dotted #fecaca;
    padding-bottom: 3px;
    width: max-content;
}
.sw-side-tag-new { color: #2563eb; border-bottom-color: #bfdbfe; }
.sw-side-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #475569;
}
.sw-side-row b { color: #0f172a; font-weight: 600; }
.sw-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 18px;
}

.sw-card-meta {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: #64748b;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.sw-card-meta b { color: #0f172a; font-weight: 600; }

.sw-error {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 6px;
    font-size: 12px;
}

.sw-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.sw-manual {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
    max-width: 480px;
}
.sw-manual-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sw-manual-row label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    font-weight: 600;
}
.sw-manual-row input {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    color: #0f172a;
    font-family: inherit;
}
.sw-manual-row input:focus { outline: none; border-color: #0f172a; }
.sw-manual-actions { margin-top: 8px; }
.sw-manual-hint { font-size: 12px; color: #94a3b8; margin-top: 12px; }

/* Dark mode */
body.dark .sw-kpis,
body.dark .sw-card,
body.dark .sw-manual {
    background: #0f172a;
    border-color: #1e293b;
}
body.dark .sw-kpi { border-right-color: #1e293b; }
body.dark .sw-kpi-value { color: #f1f5f9; }
body.dark .sw-card-id { color: #f1f5f9; }
body.dark .sw-side-row b,
body.dark .sw-card-meta b,
body.dark .sw-manual-row input { color: #f1f5f9; }
body.dark .sw-card-grid { background: #020617; border-color: #1e293b; }
body.dark .sw-card-meta,
body.dark .sw-tabs { border-color: #1e293b; }
body.dark .sw-tab.active { color: #f1f5f9; border-bottom-color: #f1f5f9; }
body.dark .sw-empty { background: var(--buld-surface-2); border-color: var(--buld-hairline); }
body.dark .sw-manual-row input { background: #020617; border-color: #1e293b; }

/* ============================================================
   YAYA DESIGN — Orders list (scoped to #panel-all-orders)
   Applies the validated yaya-design.html look to the production list.
   ============================================================ */
#panel-all-orders .yaya-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 16px 6px;
    border-bottom: 1px solid #eef0f4;
    background: #ffffff;
}
body.dark #panel-all-orders .yaya-filters { background: #4f4a54; border-bottom-color: #635e69; }

/* Premium batch 1: the gradient status chips were deleted — chips are now the shared .p-chip primitive
   (app/design-system/premium/premium.css), with a 6px status dot instead of a coloured fill. */

/* === Yaya orders table — all key rules use !important to override old .orders-reference-table rules === */
#panel-all-orders .yaya-orders-table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; table-layout: auto !important; }
#panel-all-orders .yaya-orders-table thead th {
    background: #fafbfc !important;
    border-bottom: 1px solid #eceff3 !important;
    border-top: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #8a93a3 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 14px 12px !important;
    text-align: start !important;
    font-family: 'Inter', sans-serif !important;
}
body.dark #panel-all-orders .yaya-orders-table thead th {
    background: #4f4a54 !important;
    border-bottom-color: #635e69 !important;
    color: #a0a8b8 !important;
}
#panel-all-orders .yaya-orders-table tbody td {
    padding: 14px 12px !important;
    border-bottom: 1px solid #eceff3 !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    background: #fff !important;
    white-space: normal !important;
    color: #0f1722 !important;
}
body.dark #panel-all-orders .yaya-orders-table tbody td {
    border-bottom-color: #635e69 !important;
    background: #4f4a54 !important;
    color: #f1f5f9 !important;
}
#panel-all-orders .yaya-orders-table tbody tr { transition: background .12s; position: relative; }
#panel-all-orders .yaya-orders-table tbody tr:hover td { background: #fafbfc !important; }
body.dark #panel-all-orders .yaya-orders-table tbody tr:hover td { background: #5a5560 !important; }

/* Yaya cell widgets */
#panel-all-orders .yaya-orders-table .y-order-id {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
    color: #0f1722 !important; padding: 5px 11px; background: #f5f6f8 !important;
    border-radius: 7px; display: inline-block;
}
body.dark #panel-all-orders .yaya-orders-table .y-order-id { background: #5a5560 !important; color: #f1f5f9 !important; }

#panel-all-orders .yaya-orders-table .y-prod { display: flex !important; align-items: center; gap: 12px; min-width: 0; }
#panel-all-orders .yaya-orders-table .y-prod-img {
    width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
    background: linear-gradient(135deg,#e2e8f0,#cbd5e1) !important;
    border: 1px solid #eceff3; flex-shrink: 0;
    display: grid; place-items: center; font-size: 22px;
}
#panel-all-orders .yaya-orders-table .y-prod-info { min-width: 0; flex: 1; }
#panel-all-orders .yaya-orders-table .y-prod-name { font-size: 13.5px; font-weight: 600; color: #0f1722 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; max-width: 200px; }
body.dark #panel-all-orders .yaya-orders-table .y-prod-name { color: #f1f5f9 !important; }
#panel-all-orders .yaya-orders-table .y-prod-sku  { font-size: 11.5px; color: #8a93a3 !important; margin-top: 2px; }

#panel-all-orders .yaya-orders-table .y-cust { display: flex !important; align-items: center; gap: 12px; min-width: 0; }
#panel-all-orders .yaya-orders-table .y-cust-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: #ede9fe !important; color: #6d28d9 !important;
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e6ed; flex-shrink: 0;
}
body.dark #panel-all-orders .yaya-orders-table .y-cust-avatar { background: rgba(124,58,237,.18) !important; color: #c4b5fd !important; border-color: #4f4a54 !important; }
#panel-all-orders .yaya-orders-table .y-cust-name { font-size: 13.5px; font-weight: 600; color: #0f1722 !important; }
body.dark #panel-all-orders .yaya-orders-table .y-cust-name { color: #f1f5f9 !important; }
#panel-all-orders .yaya-orders-table .y-cust-meta { font-size: 11.5px; color: #8a93a3 !important; margin-top: 3px; }

#panel-all-orders .yaya-orders-table .y-price { font-size: 14px; font-weight: 700; color: #0f1722 !important; white-space: nowrap !important; }
body.dark #panel-all-orders .yaya-orders-table .y-price { color: #f1f5f9 !important; }
#panel-all-orders .yaya-orders-table .y-price small { font-size: 11px; color: #8a93a3 !important; font-weight: 500; margin-inline-start: 4px; }

#panel-all-orders .yaya-orders-table .y-qty {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; background: #f5f6f8 !important;
    border-radius: 8px; font-size: 13px; font-weight: 700; color: #0f1722 !important;
}
body.dark #panel-all-orders .yaya-orders-table .y-qty { background: #5a5560 !important; color: #f1f5f9 !important; }

#panel-all-orders .yaya-orders-table .y-loc-w { font-size: 13px; font-weight: 600; color: #0f1722 !important; }
body.dark #panel-all-orders .yaya-orders-table .y-loc-w { color: #f1f5f9 !important; }
#panel-all-orders .yaya-orders-table .y-loc-c { font-size: 11.5px; color: #8a93a3 !important; margin-top: 2px; }
#panel-all-orders .yaya-orders-table .y-addr {
    font-size: 12.5px; color: #4a5568 !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 220px; white-space: normal !important;
}
body.dark #panel-all-orders .yaya-orders-table .y-addr { color: #d0d8e4 !important; }

#panel-all-orders .yaya-orders-table .y-phone {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 6px 11px; background: #f5f6f8 !important; border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    color: #4a5568 !important; direction: ltr; white-space: nowrap !important;
}
body.dark #panel-all-orders .yaya-orders-table .y-phone { background: #5a5560 !important; color: #d0d8e4 !important; }
#panel-all-orders .yaya-orders-table .y-phone i { width: 13px; height: 13px; color: #8a93a3; }

#panel-all-orders .yaya-orders-table .y-status-stack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
#panel-all-orders .yaya-orders-table .y-status {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap !important;
}
#panel-all-orders .yaya-orders-table .y-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#panel-all-orders .yaya-orders-table .y-st-new       { background: #e0f2fe !important; color: #0284c7 !important; }
#panel-all-orders .yaya-orders-table .y-st-confirmed { background: #dcfce7 !important; color: #16a34a !important; }
#panel-all-orders .yaya-orders-table .y-st-noanswer  { background: #fef3c7 !important; color: #d97706 !important; }
#panel-all-orders .yaya-orders-table .y-st-postponed { background: #ffedd5 !important; color: #ea580c !important; }
#panel-all-orders .yaya-orders-table .y-st-shipped   { background: #ede9fe !important; color: #7c3aed !important; }
#panel-all-orders .yaya-orders-table .y-st-delivered { background: #d1fae5 !important; color: #15803d !important; }
#panel-all-orders .yaya-orders-table .y-st-cancelled { background: #fee2e2 !important; color: #dc2626 !important; }

#panel-all-orders .yaya-orders-table .y-status-meta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 5px;
    background: #f5f6f8 !important; color: #8a93a3 !important;
    font-size: 10.5px; font-weight: 600;
}
body.dark #panel-all-orders .yaya-orders-table .y-status-meta { background: #5a5560 !important; }
#panel-all-orders .yaya-orders-table .y-status-meta i { width: 11px; height: 11px; }

/* === Yaya actions === */
#panel-all-orders .yaya-orders-table .y-actions { display: flex !important; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
#panel-all-orders .yaya-orders-table .y-btn {
    display: inline-grid !important; place-items: center;
    width: 44px !important; height: 36px !important;
    border: none !important; cursor: pointer; border-radius: 10px !important;
    color: #fff !important; transition: all .15s;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
    position: relative; flex-shrink: 0;
}
#panel-all-orders .yaya-orders-table .y-btn i { width: 18px !important; height: 18px !important; stroke-width: 2.5; }
#panel-all-orders .yaya-orders-table .y-btn-confirm { background: #16a34a !important; }
#panel-all-orders .yaya-orders-table .y-btn-confirm:hover { background: #15803d !important; box-shadow: 0 4px 10px rgba(22,163,74,.35); transform: translateY(-1px); }
#panel-all-orders .yaya-orders-table .y-btn-cancel  { background: #dc2626 !important; }
#panel-all-orders .yaya-orders-table .y-btn-cancel:hover  { background: #b91c1c !important; box-shadow: 0 4px 10px rgba(220,38,38,.35); transform: translateY(-1px); }

#panel-all-orders .yaya-orders-table .y-cluster {
    display: inline-flex !important;
    background: #f5f6f8 !important; border: 1px solid #eceff3 !important;
    border-radius: 10px; padding: 3px; gap: 2px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.dark #panel-all-orders .yaya-orders-table .y-cluster { background: #5a5560 !important; border-color: #635e69 !important; }
#panel-all-orders .yaya-orders-table .y-ic {
    width: 32px !important; height: 30px !important; border-radius: 7px !important;
    background: transparent !important; border: none !important; cursor: pointer;
    color: #4a5568 !important; display: grid; place-items: center;
    transition: all .15s;
}
#panel-all-orders .yaya-orders-table .y-ic:hover { background: #fff !important; color: #334756 !important; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
body.dark #panel-all-orders .yaya-orders-table .y-ic { color: #d0d8e4 !important; }
body.dark #panel-all-orders .yaya-orders-table .y-ic:hover { background: #4f4a54 !important; color: #c4b5fd !important; }
#panel-all-orders .yaya-orders-table .y-ic i { width: 16px !important; height: 16px !important; stroke-width: 2; }

/* Color stripe */
#panel-all-orders .yaya-orders-table .y-row-color-host { position: relative; }
#panel-all-orders .yaya-orders-table .y-row-stripe {
    position: absolute; top: 0; bottom: 0;
    width: 3px; background: var(--y-color, transparent);
}
[dir="rtl"] #panel-all-orders .yaya-orders-table .y-row-stripe { right: 0; }
[dir="ltr"] #panel-all-orders .yaya-orders-table .y-row-stripe { left: 0; }

@media (max-width: 1380px) {
    #panel-all-orders .yaya-orders-table .y-prod-img { width: 42px !important; height: 42px !important; }
    #panel-all-orders .yaya-orders-table .y-cust-avatar { width: 36px !important; height: 36px !important; }
    #panel-all-orders .yaya-orders-table .y-prod-name { max-width: 160px; }
    #panel-all-orders .yaya-orders-table .y-addr { max-width: 180px; }
    #panel-all-orders .yaya-orders-table .y-btn { width: 38px !important; height: 32px !important; }
    #panel-all-orders .yaya-orders-table .y-btn i { width: 16px !important; height: 16px !important; }
}

/* ============================================================
   YAYA GRID TABLE — div-based CSS grid replacing <table>
   Matches yaya-design.html exactly.
   ============================================================ */
#panel-all-orders .yaya-grid-table {
    background: #ffffff;
    overflow-x: auto;
}
body.dark #panel-all-orders .yaya-grid-table { background: #4f4a54; }

/* Grid columns: check | id | product | customer | price | qty | location | address | phone | status | actions */
#panel-all-orders .yaya-thead,
#panel-all-orders .yaya-row {
    display: grid;
    grid-template-columns: 40px 80px 1.6fr 1.3fr 90px 50px 1fr 1.4fr 140px 140px 186px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-width: 1300px;
}

#panel-all-orders .yaya-thead {
    background: #fafbfc;
    border-bottom: 1px solid #eceff3;
    font-size: 11px;
    font-weight: 700;
    color: #8a93a3;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: 'Inter', sans-serif;
    position: sticky;
    top: 0;
    z-index: 2;
}
body.dark #panel-all-orders .yaya-thead {
    background: #5a5560;
    border-bottom-color: #635e69;
    color: #a0a8b8;
}

#panel-all-orders .yaya-row {
    border-bottom: 1px solid #eceff3;
    transition: background .12s;
    position: relative;
    cursor: default;
}
#panel-all-orders .yaya-row:last-child { border-bottom: none; }
#panel-all-orders .yaya-row:hover { background: #fafbfc; }
body.dark #panel-all-orders .yaya-row { border-bottom-color: #635e69; }
body.dark #panel-all-orders .yaya-row:hover { background: #5a5560; }

/* Color stripe on the right (RTL) */
#panel-all-orders .yaya-row::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--row-color, transparent);
    border-radius: 0 2px 2px 0;
}

/* ---- Cell widgets ---- */
#panel-all-orders .yaya-order-id {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 13px;
    color: #0f1722;
    padding: 5px 10px;
    background: #f5f6f8;
    border-radius: 7px;
    display: inline-block;
    white-space: nowrap;
}
body.dark #panel-all-orders .yaya-order-id { background: #5a5560; color: #f1f5f9; }

#panel-all-orders .yaya-product-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
#panel-all-orders .yaya-product-img {
    width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    border: 1px solid #eceff3; flex-shrink: 0;
}
#panel-all-orders .yaya-product-emoji {
    display: grid; place-items: center; font-size: 22px;
}
#panel-all-orders .yaya-product-info { min-width: 0; flex: 1; }
#panel-all-orders .yaya-product-name {
    font-size: 13.5px; font-weight: 600; color: #0f1722;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark #panel-all-orders .yaya-product-name { color: #f1f5f9; }
#panel-all-orders .yaya-product-sku { font-size: 11.5px; color: #8a93a3; margin-top: 2px; }

#panel-all-orders .yaya-customer-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
#panel-all-orders .yaya-customer-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: #ede9fe; color: #6d28d9;
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e2e6ed;
    flex-shrink: 0;
}
body.dark #panel-all-orders .yaya-customer-avatar {
    background: rgba(124,58,237,.2); color: #c4b5fd;
    border-color: #4f4a54; box-shadow: 0 0 0 1px #635e69;
}
#panel-all-orders .yaya-customer-name { font-size: 13.5px; font-weight: 600; color: #0f1722; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark #panel-all-orders .yaya-customer-name { color: #f1f5f9; }
#panel-all-orders .yaya-customer-meta { font-size: 11.5px; color: #8a93a3; margin-top: 3px; }

#panel-all-orders .yaya-price { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: #0f1722; white-space: nowrap; }
body.dark #panel-all-orders .yaya-price { color: #f1f5f9; }
#panel-all-orders .yaya-price small { font-size: 11px; color: #8a93a3; font-weight: 500; margin-inline-start: 4px; }

#panel-all-orders .yaya-qty-chip {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    background: #f5f6f8; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: #0f1722;
}
body.dark #panel-all-orders .yaya-qty-chip { background: #5a5560; color: #f1f5f9; }

#panel-all-orders .yaya-loc-w { font-size: 13px; font-weight: 600; color: #0f1722; }
body.dark #panel-all-orders .yaya-loc-w { color: #f1f5f9; }
#panel-all-orders .yaya-loc-c { font-size: 11.5px; color: #8a93a3; margin-top: 2px; }

#panel-all-orders .yaya-address-cell {
    font-size: 12.5px; color: #4a5568; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
body.dark #panel-all-orders .yaya-address-cell { color: #d0d8e4; }

#panel-all-orders .yaya-phone-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; background: #f5f6f8; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
    color: #4a5568; direction: ltr; white-space: nowrap;
}
body.dark #panel-all-orders .yaya-phone-chip { background: #5a5560; color: #d0d8e4; }
#panel-all-orders .yaya-phone-chip svg { width: 13px; height: 13px; color: #8a93a3; flex-shrink: 0; }

#panel-all-orders .yaya-status-stack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
#panel-all-orders .yaya-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
    cursor: pointer; white-space: nowrap;
}
#panel-all-orders .yaya-status-pill::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
#panel-all-orders .yaya-st-new       { background: #e0f2fe; color: #0284c7; }
#panel-all-orders .yaya-st-confirmed { background: #dcfce7; color: #16a34a; }
#panel-all-orders .yaya-st-noanswer  { background: #fef3c7; color: #d97706; }
#panel-all-orders .yaya-st-postponed { background: #ffedd5; color: #ea580c; }
#panel-all-orders .yaya-st-shipped   { background: #ede9fe; color: #7c3aed; }
#panel-all-orders .yaya-st-delivered { background: #d1fae5; color: #15803d; }
#panel-all-orders .yaya-st-cancelled { background: #fee2e2; color: #dc2626; }

#panel-all-orders .yaya-status-meta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 5px;
    background: #f5f6f8; color: #8a93a3;
    font-size: 10.5px; font-weight: 600;
    white-space: nowrap;
}
body.dark #panel-all-orders .yaya-status-meta { background: #5a5560; color: #a0a8b8; }
#panel-all-orders .yaya-status-meta svg { width: 11px; height: 11px; }

/* Actions */
#panel-all-orders .yaya-actions {
    display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
}
#panel-all-orders .yaya-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 36px;
    border: none; cursor: pointer; border-radius: 10px;
    color: #fff; transition: all .15s;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
    position: relative; flex-shrink: 0;
}
#panel-all-orders .yaya-btn svg { width: 18px; height: 18px; stroke-width: 2.5; }
#panel-all-orders .yaya-btn::after {
    content: attr(data-tip);
    position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
    background: #0f1722; color: #fff;
    font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
    white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 10;
}
#panel-all-orders .yaya-btn:hover::after { opacity: 1; }
#panel-all-orders .yaya-btn-confirm { background: #16a34a; }
#panel-all-orders .yaya-btn-confirm:hover { background: #15803d; box-shadow: 0 4px 10px rgba(22,163,74,.35); transform: translateY(-1px); }
#panel-all-orders .yaya-btn-cancel  { background: #dc2626; }
#panel-all-orders .yaya-btn-cancel:hover  { background: #b91c1c; box-shadow: 0 4px 10px rgba(220,38,38,.35); transform: translateY(-1px); }

#panel-all-orders .yaya-action-cluster {
    display: inline-flex;
    background: #f5f6f8; border: 1px solid #eceff3;
    border-radius: 10px; padding: 3px; gap: 2px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.dark #panel-all-orders .yaya-action-cluster { background: #5a5560; border-color: #635e69; }
#panel-all-orders .yaya-ac-btn {
    width: 30px; height: 28px; border-radius: 7px;
    background: transparent; border: none; cursor: pointer;
    color: #4a5568; display: grid; place-items: center;
    transition: all .15s; position: relative; flex-shrink: 0;
}
#panel-all-orders .yaya-ac-btn svg { width: 15px; height: 15px; stroke-width: 2; }
#panel-all-orders .yaya-ac-btn:hover { background: #fff; color: #334756; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
body.dark #panel-all-orders .yaya-ac-btn { color: #d0d8e4; }
body.dark #panel-all-orders .yaya-ac-btn:hover { background: #4f4a54; color: #c4b5fd; }
#panel-all-orders .yaya-ac-btn::after {
    content: attr(data-tip);
    position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
    background: #0f1722; color: #fff;
    font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
    white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 10;
}
#panel-all-orders .yaya-ac-btn:hover::after { opacity: 1; }
#panel-all-orders .yaya-color-dot {
    position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 2.5px; border-radius: 2px;
    background: var(--row-color, transparent);
}

#panel-all-orders .yaya-cell-check { display: flex; align-items: center; justify-content: center; }

@media (max-width: 1400px) {
    #panel-all-orders .yaya-thead,
    #panel-all-orders .yaya-row {
        grid-template-columns: 40px 72px 1.4fr 1.1fr 84px 44px 90px 1.1fr 130px 130px 176px;
    }
}

/* ============ YAYA TOOLBAR (matches yaya-design.html) ============ */
#panel-all-orders .yaya-card { padding: 0; overflow: hidden; }
#panel-all-orders .yaya-toolbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
body.dark #panel-all-orders .yaya-toolbar { background: #4f4a54; border-bottom-color: #635e69; }
#panel-all-orders .yaya-toolbar-spacer { flex: 1; }
#panel-all-orders .yaya-toolbar-sep { width: 1px; height: 22px; background: #e2e8f0; margin: 0 4px; }
body.dark #panel-all-orders .yaya-toolbar-sep { background: #635e69; }

#panel-all-orders .yaya-row-check {
    width: 24px; height: 24px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
#panel-all-orders .yaya-row-check input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
#panel-all-orders .yaya-row-check-box {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.5px solid #cbd5e1; background: #fff;
    display: grid; place-items: center; transition: all .15s;
}
#panel-all-orders .yaya-row-check:hover .yaya-row-check-box { border-color: #6366f1; }
#panel-all-orders .yaya-row-check input:checked + .yaya-row-check-box {
    background: #6366f1; border-color: #6366f1;
}
#panel-all-orders .yaya-row-check input:checked + .yaya-row-check-box::after {
    content: ''; width: 12px; height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
body.dark #panel-all-orders .yaya-row-check-box { background: #5a5560; border-color: #5a595c; }

#panel-all-orders .yaya-theme-toggle {
    width: 36px; height: 36px; border-radius: 9px;
    background: #f1f5f9; border: none; cursor: pointer;
    display: grid; place-items: center; color: #475569;
    transition: all .15s;
}
#panel-all-orders .yaya-theme-toggle:hover { background: #e2e8f0; color: #0f172a; }
#panel-all-orders .yaya-theme-toggle [data-lucide] { width: 16px; height: 16px; }
body.dark #panel-all-orders .yaya-theme-toggle { background: #5a5560; color: #d0d8e4; }
body.dark #panel-all-orders .yaya-theme-toggle:hover { background: #635e69; color: #f1f5f9; }

/* Filters inline in toolbar (no separate strip) */
#panel-all-orders .yaya-filters {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: transparent; padding: 0; border: none; box-shadow: none;
}

/* ============================================================
   YAYA SCOPE — verbatim port from yaya-design.html
   All selectors prefixed with .yaya-scope to avoid conflicts.
   ============================================================ */
.yaya-scope { font-family: "IBM Plex Sans Arabic","Inter",-apple-system,system-ui,sans-serif; font-size: 14px; line-height: 1.5; color: #0f1722; }
.yaya-scope * { box-sizing: border-box; }

/* ---- Toolbar ---- */
.yaya-scope .toolbar {
    background: #ffffff;
    border: 1px solid #eceff3;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
body.dark .yaya-scope .toolbar { background: #4f4a54; border-color: #635e69; }
.yaya-scope .toolbar-sep { width: 1px; height: 22px; background: #eceff3; margin: 0 4px; }
body.dark .yaya-scope .toolbar-sep { background: #635e69; }
.yaya-scope .toolbar-spacer { flex: 1; }

/* row-check (toolbar selectAll + body row check) */
.yaya-scope .row-check {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.5px solid #e2e6ed; cursor: pointer;
    display: grid; place-items: center; background: #ffffff;
    transition: all .15s; position: relative;
}
.yaya-scope .row-check-input,
.yaya-scope .row-check input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: none !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
.yaya-scope .row-check:hover { border-color: #334756; }
.yaya-scope .row-check.checked, .yaya-scope .row-check.partial {
    background: #334756; border-color: #334756;
}
.yaya-scope .row-check.checked::after {
    content: ''; width: 12px; height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.yaya-scope .row-check.partial::after { content: ''; width: 10px; height: 2px; background: #fff; border-radius: 1px; }
body.dark .yaya-scope .row-check { background: #4f4a54; border-color: #5a595c; }
body.dark .yaya-scope .row-check.checked, body.dark .yaya-scope .row-check.partial {
    background: #c4b5fd; border-color: #c4b5fd;
}
body.dark .yaya-scope .row-check.checked::after {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1b4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* theme toggle */
.yaya-scope .theme-toggle {
    width: 36px; height: 36px; border-radius: 9px;
    background: #f5f6f8; border: none; cursor: pointer;
    display: grid; place-items: center; color: #4a5568;
    transition: all .15s;
}
.yaya-scope .theme-toggle:hover { background: #eceff3; color: #0f1722; }
.yaya-scope .theme-toggle [data-lucide] { width: 16px; height: 16px; }
body.dark .yaya-scope .theme-toggle { background: #5a5560; color: #d0d8e4; }
body.dark .yaya-scope .theme-toggle:hover { background: #635e69; color: #f1f5f9; }

/* ---- Filter pills: styled by the shared .p-chip primitive in premium.css (the gradient palette was deleted) ---- */

/* ---- Table ---- */
.yaya-scope .orders-table {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eceff3;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
body.dark .yaya-scope .orders-table { background: #4f4a54; border-color: #635e69; }

.yaya-scope .table-head, .yaya-scope .table-row {
    display: grid;
    grid-template-columns: 36px 76px 1.4fr 1.2fr 88px 50px 1fr 1.3fr 130px 130px 110px 240px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}
.yaya-scope .table-head {
    background: #fafbfc;
    border-bottom: 1px solid #eceff3;
    font-size: 11.5px; font-weight: 600; color: #8a93a3;
    text-transform: uppercase; letter-spacing: .06em;
    font-family: "Inter",sans-serif;
}
body.dark .yaya-scope .table-head { background: #5a5560; border-bottom-color: #635e69; color:#a0a8b8; }

.yaya-scope .table-row {
    border-bottom: 1px solid #eceff3;
    transition: background .12s;
    position: relative;
}
.yaya-scope .table-row:last-child { border-bottom: none; }
.yaya-scope .table-row:hover { background: #fafbfc; }
.yaya-scope .table-row.selected { background: rgba(51,71,86,.06); }
body.dark .yaya-scope .table-row { border-bottom-color: #635e69; }
body.dark .yaya-scope .table-row:hover { background: #5a5560; }
body.dark .yaya-scope .table-row.selected { background: rgba(196,181,253,.08); }
.yaya-scope .table-row::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 3px; background: var(--row-color, transparent);
}

/* ---- Cells ---- */
.yaya-scope .order-id {
    font-family: "Inter",sans-serif; font-weight: 600; font-size: 13px;
    color: #0f1722; padding: 5px 11px; background: #f5f6f8;
    border-radius: 7px; display: inline-block;
}
body.dark .yaya-scope .order-id { background:#5a5560; color:#f1f5f9; }

.yaya-scope .product-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yaya-scope .product-img {
    width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
    background: linear-gradient(135deg,#e2e8f0,#cbd5e1);
    border: 1px solid #eceff3; flex-shrink: 0;
}
.yaya-scope .product-info { min-width: 0; flex: 1; }
.yaya-scope .product-name {
    font-size: 13.5px; font-weight: 600; color: #0f1722;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yaya-scope .product-sku { font-size: 11.5px; color: #8a93a3; margin-top: 2px; font-family: "Inter",sans-serif; }
body.dark .yaya-scope .product-name { color:#f1f5f9; }

.yaya-scope .customer-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yaya-scope .customer-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid #ffffff; box-shadow: 0 0 0 1px #e2e6ed;
    flex-shrink: 0;
}
body.dark .yaya-scope .customer-avatar { border-color:#4f4a54; box-shadow:0 0 0 1px #5a595c; }
.yaya-scope .customer-info { min-width: 0; flex: 1; }
.yaya-scope .customer-name {
    font-size: 13.5px; font-weight: 600; color: #0f1722;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark .yaya-scope .customer-name { color:#f1f5f9; }
.yaya-scope .customer-meta { font-size: 11.5px; color: #8a93a3; margin-top: 3px; }

.yaya-scope .price { font-family: "Inter",sans-serif; font-size: 14px; font-weight: 700; color: #0f1722; }
.yaya-scope .price small { font-size: 11px; color: #8a93a3; font-weight: 500; margin-left: 4px; }
body.dark .yaya-scope .price { color:#f1f5f9; }

.yaya-scope .qty-chip {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; background: #f5f6f8;
    border-radius: 8px; font-family: "Inter",sans-serif;
    font-size: 13px; font-weight: 700; color: #0f1722;
}
body.dark .yaya-scope .qty-chip { background:#5a5560; color:#f1f5f9; }

.yaya-scope .location { min-width: 0; }
.yaya-scope .location-wilaya { font-size: 13px; font-weight: 600; color: #0f1722; }
body.dark .yaya-scope .location-wilaya { color:#f1f5f9; }
.yaya-scope .location-commune { font-size: 11.5px; color: #8a93a3; margin-top: 2px; }

.yaya-scope .address-cell {
    font-size: 12.5px; color: #4a5568; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
body.dark .yaya-scope .address-cell { color:#d0d8e4; }

.yaya-scope .phone-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; background: #f5f6f8; border-radius: 8px;
    font-family: "Inter",sans-serif; font-size: 12.5px; font-weight: 600;
    color: #4a5568; direction: ltr;
    white-space: nowrap;
}
body.dark .yaya-scope .phone-chip { background:#5a5560; color:#d0d8e4; }
.yaya-scope .phone-chip [data-lucide] { width: 13px; height: 13px; color: #8a93a3; }

.yaya-scope .status-stack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.yaya-scope .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    font-family: "Inter",sans-serif;
    cursor: pointer;
}
.yaya-scope .status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.yaya-scope .st-new       { background: #e0f2fe; color: #0284c7; }
.yaya-scope .st-confirmed { background: #dcfce7; color: #16a34a; }
.yaya-scope .st-noanswer  { background: #fef3c7; color: #d97706; }
.yaya-scope .st-postponed { background: #ffedd5; color: #ea580c; }
.yaya-scope .st-shipped   { background: #ede9fe; color: #7c3aed; }
.yaya-scope .st-delivered { background: #dcfce7; color: #15803d; }
.yaya-scope .st-cancelled { background: #fee2e2; color: #dc2626; }

.yaya-scope .status-meta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 5px;
    background: #f5f6f8; color: #8a93a3;
    font-size: 10.5px; font-weight: 600;
    font-family: "Inter",sans-serif;
}
body.dark .yaya-scope .status-meta { background:#5a5560; color:#a0a8b8; }
.yaya-scope .status-meta [data-lucide] { width: 11px; height: 11px; }

/* ---- Action buttons ---- */
.yaya-scope .actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.yaya-scope .btn-action {
    display: inline-grid; place-items: center;
    width: 44px; height: 36px;
    border: none; cursor: pointer; border-radius: 10px;
    color: #fff; transition: all .15s;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
    position: relative;
}
.yaya-scope .btn-action [data-lucide] { width: 18px; height: 18px; stroke-width: 2.5; }
.yaya-scope .btn-confirm { background: #16a34a; }
.yaya-scope .btn-confirm:hover { background: #15803d; box-shadow: 0 4px 10px rgba(22,163,74,.35); transform: translateY(-1px); }
.yaya-scope .btn-cancel { background: #dc2626; }
.yaya-scope .btn-cancel:hover { background: #b91c1c; box-shadow: 0 4px 10px rgba(220,38,38,.35); transform: translateY(-1px); }
.yaya-scope .btn-action::after {
    content: attr(data-tip);
    position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
    background: #0f1722; color: #fff;
    font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .15s; z-index: 10;
}
.yaya-scope .btn-action:hover::after { opacity: 1; }

.yaya-scope .action-cluster {
    display: inline-flex;
    background: #f5f6f8;
    border: 1px solid #eceff3;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.dark .yaya-scope .action-cluster { background:#5a5560; border-color:#635e69; }
.yaya-scope .ac-btn {
    width: 30px; height: 28px; border-radius: 7px;
    background: transparent; border: none; cursor: pointer;
    color: #4a5568; display: grid; place-items: center;
    transition: all .15s; position: relative;
}
.yaya-scope .ac-btn:hover { background: #ffffff; color: #334756; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
body.dark .yaya-scope .ac-btn { color:#d0d8e4; }
body.dark .yaya-scope .ac-btn:hover { background:#c4b5fd; color:#1e1b4b; }
.yaya-scope .ac-btn [data-lucide] { width: 15px; height: 15px; stroke-width: 2; }
.yaya-scope .ac-btn .color-dot-ind {
    position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 2.5px; border-radius: 2px;
    background: var(--row-color, transparent);
}
.yaya-scope .ac-btn::after {
    content: attr(data-tip);
    position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
    background: #0f1722; color: #fff;
    font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .15s; z-index: 10;
}
.yaya-scope .ac-btn:hover::after { opacity: 1; }

@media (max-width: 1380px) {
    .yaya-scope .table-head, .yaya-scope .table-row {
        grid-template-columns: 32px 70px 1.3fr 1.1fr 80px 44px 1fr 1.2fr 120px 120px 230px;
        gap: 8px; padding: 12px 12px;
    }
    .yaya-scope .product-img { width: 42px; height: 42px; }
    .yaya-scope .customer-avatar { width: 36px; height: 36px; }
}
@media (max-width: 980px) {
    .yaya-scope .orders-table { overflow-x: auto; }
    .yaya-scope .table-head, .yaya-scope .table-row { min-width: 1500px; }
}

/* ---- Ship table grid (no qty / no status, with carrier + delivery) ---- */
.yaya-scope .ship-table .table-head,
.yaya-scope .ship-table .table-row {
    grid-template-columns: 36px 92px 1.4fr 1.2fr 90px 1fr 1.3fr 130px 110px 110px 200px;
}
@media (max-width: 1380px) {
    .yaya-scope .ship-table .table-head,
    .yaya-scope .ship-table .table-row {
        grid-template-columns: 32px 84px 1.3fr 1.1fr 84px 1fr 1.2fr 120px 100px 100px 190px;
    }
}
@media (max-width: 980px) {
    .yaya-scope .ship-table .table-head,
    .yaya-scope .ship-table .table-row { min-width: 1300px; }
}
.yaya-scope .carrier-cell {
    font-size: 12.5px; font-weight: 600; color: #4a5568;
}
body.dark .yaya-scope .carrier-cell { color: #d0d8e4; }

/* ---- Cell with copy button ---- */
.yaya-scope .cell-with-copy {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.yaya-scope .copy-btn {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    background: transparent; border: 1px solid transparent;
    border-radius: 6px; cursor: pointer; color: #8a93a3;
    padding: 0; flex-shrink: 0;
    opacity: 0; transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.yaya-scope .table-row:hover .copy-btn { opacity: 1; }
.yaya-scope .copy-btn:hover {
    background: #f5f6f8; color: #0f1722; border-color: #e2e6ed;
}
.yaya-scope .copy-btn.copied { color: #16a34a; opacity: 1; }
.yaya-scope .copy-btn [data-lucide] { width: 12px; height: 12px; }
body.dark .yaya-scope .copy-btn:hover { background: #5a5560; color: #f1f5f9; border-color: #5a595c; }
.yaya-scope .copy-btn-inline { width: 18px; height: 18px; }
.yaya-scope .copy-btn-inline [data-lucide] { width: 11px; height: 11px; }

/* ---- Track / Returns / Scheduled / Team grids ---- */
.yaya-scope .track-table .table-head,
.yaya-scope .track-table .table-row {
    grid-template-columns: 36px 130px 130px 1.4fr 130px 1fr 1fr 1fr 150px;
}
.yaya-scope .returns-table .table-head,
.yaya-scope .returns-table .table-row {
    grid-template-columns: 36px 92px 1.4fr 1.2fr 130px 1fr 130px 110px 100px 150px;
}
.yaya-scope .scheduled-table .table-head,
.yaya-scope .scheduled-table .table-row {
    grid-template-columns: 36px 92px 1.4fr 1.2fr 140px 90px 1fr 120px 150px;
}
.yaya-scope .team-table .table-head,
.yaya-scope .team-table .table-row {
    grid-template-columns: 1.5fr 1.5fr 1fr 110px 150px;
}
@media (max-width: 980px) {
    .yaya-scope .track-table .table-head,
    .yaya-scope .track-table .table-row,
    .yaya-scope .returns-table .table-head,
    .yaya-scope .returns-table .table-row,
    .yaya-scope .scheduled-table .table-head,
    .yaya-scope .scheduled-table .table-row { min-width: 1300px; }
    .yaya-scope .track-table,
    .yaya-scope .returns-table,
    .yaya-scope .scheduled-table { overflow-x: auto; }
}

/* Tracking number chip */
.yaya-scope .track-num {
    font-family: "Inter",monospace; font-weight: 600; font-size: 12px;
    color: #0f1722; padding: 5px 10px; background: #f5f6f8;
    border-radius: 7px; display: inline-block; letter-spacing: .02em;
}
body.dark .yaya-scope .track-num { background:#5a5560; color:#f1f5f9; }

/* Generic status chip */
.yaya-scope .y-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    border: 1px solid transparent; white-space: nowrap;
}
.yaya-scope .y-status.s-pending    { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.yaya-scope .y-status.s-transit    { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.yaya-scope .y-status.s-out        { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.yaya-scope .y-status.s-delivered  { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.yaya-scope .y-status.s-returned   { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.yaya-scope .y-status.s-active     { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.yaya-scope .y-status.s-inactive   { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
body.dark .yaya-scope .y-status.s-pending   { background:rgba(194,65,12,.15); color:#fdba74; border-color:rgba(254,215,170,.2); }
body.dark .yaya-scope .y-status.s-transit   { background:rgba(29,78,216,.18); color:#93c5fd; border-color:rgba(191,219,254,.2); }
body.dark .yaya-scope .y-status.s-out       { background:rgba(109,40,217,.18); color:#c4b5fd; border-color:rgba(221,214,254,.2); }
body.dark .yaya-scope .y-status.s-delivered { background:rgba(4,120,87,.18); color:#6ee7b7; border-color:rgba(167,243,208,.2); }
body.dark .yaya-scope .y-status.s-returned  { background:rgba(185,28,28,.18); color:#fca5a5; border-color:rgba(254,202,202,.2); }
body.dark .yaya-scope .y-status.s-active    { background:rgba(4,120,87,.18); color:#6ee7b7; border-color:rgba(167,243,208,.2); }
body.dark .yaya-scope .y-status.s-inactive  { background:#5a5560; color:#94a3b8; border-color:#5a595c; }

/* Generic role chip */
.yaya-scope .y-role {
    display: inline-block; padding: 4px 10px; border-radius: 7px;
    background: #f5f6f8; color: #475569; font-size: 11.5px; font-weight: 600;
    border: 1px solid #e2e6ed;
}
body.dark .yaya-scope .y-role { background:#5a5560; color:#cbd5e1; border-color:#5a595c; }

/* Note ellipsis cell */
.yaya-scope .y-note {
    font-size: 12.5px; color: #4a5568; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
body.dark .yaya-scope .y-note { color:#d0d8e4; }

/* Attempts chip */
.yaya-scope .y-attempts {
    display: inline-grid; place-items: center;
    min-width: 48px; height: 28px; padding: 0 10px;
    background: #f5f6f8; border-radius: 8px;
    font-size: 12px; font-weight: 700; color: #0f1722;
}
body.dark .yaya-scope .y-attempts { background:#5a5560; color:#f1f5f9; }
.yaya-scope .y-attempts.warn { background:#fff7ed; color:#c2410c; }
body.dark .yaya-scope .y-attempts.warn { background:rgba(194,65,12,.18); color:#fdba74; }


/* ============================================================
   YAYA SCOPE — Legacy <table> compatibility layer
   Restyle existing legacy tables (tracking/returns/scheduled/team)
   to match the new professional yaya design without rewriting
   their renderers.
   ============================================================ */
.yaya-scope .table-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #eceff3;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
    overflow: hidden;
}
body.dark .yaya-scope .table-card { background: #4f4a54; border-color: #635e69; }

.yaya-scope .table-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #eceff3;
    gap: 12px; flex-wrap: wrap;
}
body.dark .yaya-scope .table-card-header { border-bottom-color: #635e69; }
.yaya-scope .table-card-header h3 {
    font-size: 14px; font-weight: 600; color: #0f1722; margin: 0;
    font-family: "Inter",sans-serif;
}
body.dark .yaya-scope .table-card-header h3 { color: #f1f5f9; }

.yaya-scope .table-responsive { overflow-x: auto; }

.yaya-scope table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-family: "Inter",sans-serif;
}
.yaya-scope table thead th {
    background: #fafbfc;
    border-bottom: 1px solid #eceff3;
    font-size: 11.5px; font-weight: 600; color: #8a93a3;
    text-transform: uppercase; letter-spacing: .06em;
    text-align: left;
    padding: 14px 16px;
    white-space: nowrap;
}
body.dark .yaya-scope table thead th { background: #5a5560; border-bottom-color: #635e69; color: #a0a8b8; }

.yaya-scope table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f7;
    font-size: 13px; color: #0f1722;
    vertical-align: middle;
}
body.dark .yaya-scope table tbody td { border-bottom-color: #5a5560; color: #f1f5f9; }
.yaya-scope table tbody tr:last-child td { border-bottom: none; }
.yaya-scope table tbody tr:hover td { background: #fafbfc; }
body.dark .yaya-scope table tbody tr:hover td { background: #5a5560; }
.yaya-scope table tbody tr.is-selected td { background: rgba(51,71,86,.06); }
body.dark .yaya-scope table tbody tr.is-selected td { background: rgba(196,181,253,.08); }

/* Order id chip inside legacy tables */
.yaya-scope table .ord-id,
.yaya-scope table td .ord-id {
    font-family: "Inter",sans-serif; font-weight: 600; font-size: 13px;
    color: #0f1722; padding: 5px 11px; background: #f5f6f8;
    border-radius: 7px; display: inline-block; text-decoration: none;
}
body.dark .yaya-scope table .ord-id { background:#5a5560; color:#f1f5f9; }

/* Action buttons inside legacy tables */
.yaya-scope table .btn-success,
.yaya-scope table .btn-primary,
.yaya-scope table .btn-outline,
.yaya-scope table .ord-action-btn {
    border-radius: 8px; font-family: "Inter",sans-serif;
    font-size: 12.5px; font-weight: 600;
}

/* Hide noisy legacy badges inside yaya-scope tables (Shopify, Yalidine source badges) */
.yaya-scope table .ord-source-badge,
.yaya-scope table .ord-carrier-badge { display: none !important; }

/* Override legacy tracking-reference-table specifics inside yaya-scope */
.yaya-scope .tracking-reference-table thead th {
    background: #fafbfc !important;
    color: #8a93a3 !important;
    border-bottom: 1px solid #eceff3 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
}
body.dark .yaya-scope .tracking-reference-table thead th {
    background: #5a5560 !important;
    color: #a0a8b8 !important;
    border-bottom-color: #635e69 !important;
}
.yaya-scope .tracking-reference-table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f3f4f7 !important;
    border-top: none !important;
    font-size: 13px !important;
    color: #0f1722 !important;
}
body.dark .yaya-scope .tracking-reference-table tbody td {
    border-bottom-color: #5a5560 !important;
    color: #f1f5f9 !important;
}
.yaya-scope .tracking-reference-table tbody tr:hover td {
    background: #fafbfc !important;
}
body.dark .yaya-scope .tracking-reference-table tbody tr:hover td {
    background: #5a5560 !important;
}



/* ============ YAYA SCOPE — prototype checkbox structure ============ */
/* The Yaya table uses the prototype's .row-check visual, not the legacy .ord-select-box. */

/* Carriers KPI — mirror the All Orders unified strip (4 columns) */
#panel-carriers .orders-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    margin-bottom: 16px;
}
#panel-carriers .orders-kpi-card {
    position: relative;
    min-height: 94px;
    padding: 14px 16px 12px;
    background: #fff;
}
#panel-carriers .orders-kpi-card:not(:last-child) {
    border-inline-end: 1px solid #e5e7eb;
}
#panel-carriers .orders-kpi-label {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: none;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
}
#panel-carriers .orders-kpi-value {
    display: block;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.3rem, 1.45vw, 1.65rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: #4f4a54;
}
html body.dark #panel-carriers .orders-kpi-row {
    background: #4f4a54 !important;
    border: 1px solid #635e69 !important;
}
html body.dark #panel-carriers .orders-kpi-card {
    background: #4f4a54 !important;
    border: none !important;
    border-radius: 0 !important;
    border-inline-end: 1px solid #635e69 !important;
    padding: 14px 16px 12px !important;
    box-shadow: none !important;
    min-height: 94px !important;
}
html body.dark #panel-carriers .orders-kpi-card:last-child {
    border-inline-end: none !important;
}
html body.dark #panel-carriers .orders-kpi-value {
    color: #f0f4ff !important;
}
html body.dark #panel-carriers .orders-kpi-label {
    color: #9baabb !important;
    border-bottom-color: #635e69 !important;
}
@media (max-width: 900px) {
    #panel-carriers .orders-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== TEAM PANEL — rules bar + modal ========== */
#panel-team .panel-header { flex-wrap: wrap; row-gap: 12px; }
#panel-team .team-rules-bar {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}
#panel-team .team-stats { display: flex; gap: 18px; color: #475569; font-size: 13px; }
#panel-team .team-stats strong { color: #0f172a; font-weight: 700; margin-right: 4px; }
#panel-team .team-rules-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#panel-team .team-rules-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; }
#panel-team .team-rules-toggle select {
    padding: 6px 10px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
body.dark #panel-team .team-rules-bar { background: #4f4a54 !important; border-color: #6e6874 !important; }
body.dark #panel-team .team-stats, body.dark #panel-team .team-rules-toggle { color: #cbd5e1 !important; }
body.dark #panel-team .team-stats strong { color: #f8fafc !important; }
body.dark #panel-team .team-rules-toggle select { background: #1f1e21 !important; border-color: #6e6874 !important; color: #f8fafc !important; }

/* Modal */
.team-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    padding: 16px;
    backdrop-filter: blur(2px);
}
.team-modal-overlay.open { display: flex; }
.team-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 50px rgba(15,23,42,0.25);
    overflow: hidden;
    animation: teamModalIn .15s ease-out;
}
@keyframes teamModalIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.team-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef2f7;
}
.team-modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.team-modal-close {
    background: transparent; border: 0; font-size: 26px; line-height: 1;
    color: #6b7280; cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.team-modal-close:hover { color: #0f172a; }
.team-modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.team-field { display: flex; flex-direction: column; gap: 6px; }
.team-field > span { font-size: 12.5px; font-weight: 600; color: #475569; }
.team-field input, .team-field select {
    padding: 10px 12px;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.team-field input:focus, .team-field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.team-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 8px; margin-top: 4px;
    border-top: 1px solid #eef2f7;
    padding: 14px 0 0;
}
@media (max-width: 540px) {
    .team-field-row { grid-template-columns: 1fr; }
}
body.dark .team-modal { background: #4f4a54 !important; }
body.dark .team-modal-header { border-bottom-color: #6e6874 !important; }
body.dark .team-modal-header h3, body.dark .team-modal-close { color: #f8fafc !important; }
body.dark .team-modal-footer { border-top-color: #6e6874 !important; }
body.dark .team-field > span { color: #cbd5e1 !important; }
body.dark .team-field input, body.dark .team-field select {
    background: #1f1e21 !important;
    border-color: #6e6874 !important;
    color: #f8fafc !important;
}

/* ============================================================
 * PRODUCTS — yaya design (white cards, flat French analytics)
 * ============================================================ */
.yaya-scope .products-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 4px 0 14px;
    flex-wrap: wrap;
}
.yaya-scope .products-toolbar .search-box { min-width: 280px; flex: 1 1 280px; max-width: 380px; }
.yaya-scope .products-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.yaya-scope .prod-stat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #ececef; border-radius: 999px;
    padding: 6px 12px; font-size: 12px; color: #6b7280; font-weight: 500;
    letter-spacing: .02em;
}
.yaya-scope .prod-stat-chip strong { color: #0f1722; font-weight: 700; font-size: 13px; }
.yaya-scope .prod-stat-chip.warn strong { color: #b45309; }
.yaya-scope .prod-stat-chip.danger strong { color: #b91c1c; }

.yaya-scope .products-grid-yaya {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.yaya-scope .prod-card-yaya {
    background: #fff; border: 1px solid #ececef; border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.yaya-scope .prod-card-yaya:hover {
    border-color: #d8d8df;
    box-shadow: 0 6px 18px -10px rgba(15,23,34,.18);
    transform: translateY(-1px);
}
.yaya-scope .prod-thumb-yaya {
    position: relative; aspect-ratio: 4 / 3; background: #f7f7f9;
    display: grid; place-items: center; overflow: hidden;
}
.yaya-scope .prod-thumb-yaya img { width: 100%; height: 100%; object-fit: cover; }
.yaya-scope .prod-thumb-yaya .prod-emoji { font-size: 44px; }
.yaya-scope .prod-stock-badge {
    position: absolute; top: 8px; left: 8px;
    padding: 4px 9px; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: #fff; border: 1px solid #ececef; color: #0f1722;
}
.yaya-scope .prod-stock-badge.st-low { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.yaya-scope .prod-stock-badge.st-out { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

.yaya-scope .prod-body-yaya { padding: 12px 14px 4px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.yaya-scope .prod-name-yaya {
    font-weight: 700; color: #0f1722; font-size: 14px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.yaya-scope .prod-sku-yaya { font-size: 11px; color: #9aa0a8; letter-spacing: .04em; text-transform: uppercase; }
.yaya-scope .prod-prices-yaya { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yaya-scope .prod-price-yaya { font-weight: 800; color: #0f1722; font-size: 15px; }
.yaya-scope .prod-price-yaya small { font-weight: 600; font-size: 11px; color: #6b7280; margin-left: 2px; }
.yaya-scope .prod-cost-yaya { font-size: 11.5px; color: #9aa0a8; text-decoration: line-through; }
.yaya-scope .prod-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.yaya-scope .prod-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; background: #f7f7f9; border-radius: 6px;
    font-size: 11px; color: #4b5563; font-weight: 600;
}
.yaya-scope .prod-meta-chip.pos { color: #166534; background: #f0fdf4; }
.yaya-scope .prod-meta-chip.neg { color: #b91c1c; background: #fef2f2; }
.yaya-scope .prod-actions-yaya {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-top: 1px solid #f1f1f3; gap: 8px;
}

.yaya-scope .prod-empty-yaya {
    grid-column: 1/-1;
    background: #fff; border: 1px dashed #ececef; border-radius: 14px;
    padding: 48px 24px; text-align: center;
}
.yaya-scope .prod-empty-title { font-weight: 700; color: #0f1722; font-size: 16px; margin: 12px 0 4px; }
.yaya-scope .prod-empty-sub { font-size: 13px; color: #6b7280; }

/* Inventory table — yaya grid columns */
.yaya-scope .inventory-table .table-head,
.yaya-scope .inventory-table .order-row {
    display: grid;
    grid-template-columns: minmax(220px,2fr) 90px 1fr 1fr 1fr 110px;
    gap: 14px; align-items: center;
    padding: 10px 16px;
}
.yaya-scope .inventory-table .table-head {
    border-bottom: 1px solid #ececef;
    font-size: 11px; color: #9aa0a8; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.yaya-scope .inventory-table .order-row {
    border-bottom: 1px solid #f3f3f5;
    background: #fff;
}
.yaya-scope .inventory-table .order-row:last-child { border-bottom: 0; }
.yaya-scope .inventory-table .order-row:hover { background: #fafafb; }

/* Dark mode */
body.dark .yaya-scope .prod-card-yaya { background: #2a292c; border-color: #3a393c; }
body.dark .yaya-scope .prod-card-yaya:hover { border-color: #6e6874; }
body.dark .yaya-scope .prod-thumb-yaya { background: #1f1e21; }
body.dark .yaya-scope .prod-name-yaya { color: #f8fafc; }
body.dark .yaya-scope .prod-price-yaya { color: #f8fafc; }
body.dark .yaya-scope .prod-meta-chip { background: #1f1e21; color: #cbd5e1; }
body.dark .yaya-scope .prod-actions-yaya { border-top-color: #3a393c; }
body.dark .yaya-scope .prod-stat-chip { background: #2a292c; border-color: #3a393c; color: #cbd5e1; }
body.dark .yaya-scope .prod-stat-chip strong { color: #f8fafc; }
body.dark .yaya-scope .prod-stock-badge { background: #1f1e21; border-color: #3a393c; color: #f8fafc; }
body.dark .yaya-scope .prod-empty-yaya { background: #2a292c; border-color: #3a393c; }
body.dark .yaya-scope .prod-empty-title { color: #f8fafc; }
body.dark .yaya-scope .inventory-table .table-head { border-bottom-color: #3a393c; color: #9aa0a8; }
body.dark .yaya-scope .inventory-table .order-row { background: #2a292c; border-bottom-color: #3a393c; }
body.dark .yaya-scope .inventory-table .order-row:hover { background: #4f4a54; }

/* ============================================================
 * STORE CONNECTION DRAWER (Apps panel)
 * ============================================================ */
.apps-store-mode-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef2ff; color: #3730a3;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    margin-bottom: 12px;
}
.apps-store-steps {
    list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px;
}
.apps-store-steps li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: #374151; line-height: 1.5;
}
.apps-store-step-num {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: #0f1722; color: #fff;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
}
.apps-store-scopes {
    margin-top: 12px; padding: 10px 12px;
    background: #f7f7f9; border-radius: 8px;
    font-size: 12px; color: #4b5563;
}
.apps-store-scopes code {
    display: inline-block;
    background: #fff; border: 1px solid #ececef; border-radius: 4px;
    padding: 1px 6px; font-size: 11px; margin: 2px 2px 0 0;
    font-family: ui-monospace, Menlo, Monaco, monospace;
    color: #0f1722;
}

/* Connected stores list */
.apps-store-count {
    background: #0f1722; color: #fff;
    border-radius: 999px; padding: 1px 8px;
    font-size: 11px; font-weight: 700; margin-left: 6px;
    vertical-align: middle;
}
.apps-store-list { display: flex; flex-direction: column; gap: 8px; }
.apps-store-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid #ececef; border-radius: 10px;
    padding: 10px 12px;
}
.apps-store-item-info { min-width: 0; flex: 1; }
.apps-store-item-name { font-weight: 700; color: #0f1722; font-size: 13.5px; }
.apps-store-item-url { font-size: 11.5px; color: #6b7280; word-break: break-all; }
.apps-store-item-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: #9aa0a8; margin-top: 4px;
}
.apps-store-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.apps-btn.apps-btn-sm { padding: 6px 9px; }
.apps-btn.apps-btn-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.apps-btn.apps-btn-danger:hover { background: #fee2e2; }

/* Progress steps inside drawer */
.apps-store-progress-list {
    display: flex; flex-direction: column; gap: 8px;
    background: #f7f7f9; border-radius: 10px; padding: 12px;
}
.apps-store-progress-step {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 4px;
}
.apps-store-progress-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 1px solid #ececef; color: #9aa0a8;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
}
.apps-store-progress-step.loading .apps-store-progress-icon { border-color: #0f1722; color: #0f1722; }
.apps-store-progress-step.success .apps-store-progress-icon { background: #16a34a; border-color: #16a34a; color: #fff; }
.apps-store-progress-step.error .apps-store-progress-icon { background: #dc2626; border-color: #dc2626; color: #fff; }
.apps-store-progress-text { flex: 1; min-width: 0; }
.apps-store-progress-title { font-weight: 600; color: #0f1722; font-size: 13px; }
.apps-store-progress-step.pending .apps-store-progress-title { color: #9aa0a8; }
.apps-store-progress-detail { font-size: 11.5px; color: #6b7280; margin-top: 2px; }

.apps-store-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(15,23,34,.15); border-top-color: #0f1722;
    animation: apps-store-spin .7s linear infinite;
}
@keyframes apps-store-spin { to { transform: rotate(360deg); } }

.apps-store-result {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13px; line-height: 1.4;
}
.apps-store-result.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.apps-store-result.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Dark mode */
body.dark .apps-store-mode-badge { background: #1e293b; color: #c7d2fe; }
body.dark .apps-store-step-num { background: #f8fafc; color: #0f1722; }
body.dark .apps-store-scopes { background: #1f1e21; color: #cbd5e1; }
body.dark .apps-store-scopes code { background: #2a292c; border-color: #3a393c; color: #f8fafc; }
body.dark .apps-store-item { background: #2a292c; border-color: #3a393c; }
body.dark .apps-store-item-name { color: #f8fafc; }
body.dark .apps-store-progress-list { background: #1f1e21; }
body.dark .apps-store-progress-icon { background: #2a292c; border-color: #3a393c; color: #9aa0a8; }
body.dark .apps-store-progress-step.loading .apps-store-progress-icon { border-color: #f8fafc; color: #f8fafc; }
body.dark .apps-store-progress-title { color: #f8fafc; }
body.dark .apps-store-result.success { background: #052e16; color: #86efac; border-color: #166534; }
body.dark .apps-store-result.error { background: #450a0a; color: #fca5a5; border-color: #b91c1c; }

/* ===========================================================
   DASHBOARD v2 — Unified KPI strip + Geo Hero
   =========================================================== */

/* Dashboard KPI strip (8 cells) */
#panel-overview .dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    margin-bottom: 18px;
}
#panel-overview .dash-kpi-row .orders-kpi-card {
    position: relative;
    min-height: 96px;
    padding: 14px 16px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#panel-overview .dash-kpi-row .orders-kpi-card:not(:last-child) {
    border-inline-end: 1px solid #e5e7eb;
}
#panel-overview .dash-kpi-row .orders-kpi-label {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: none;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
}
#panel-overview .dash-kpi-row .orders-kpi-value {
    display: block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.18rem, 1.25vw, 1.45rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#panel-overview .dash-kpi-row .orders-kpi-trend {
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.01em;
}
#panel-overview .dash-kpi-row .orders-kpi-trend.pos { color: #047857; }
#panel-overview .dash-kpi-row .orders-kpi-trend.neg { color: #b91c1c; }
#panel-overview .dash-kpi-row .orders-kpi-trend.warn { color: #b45309; }

@media (max-width: 1280px) {
    #panel-overview .dash-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #panel-overview .dash-kpi-row .orders-kpi-card:nth-child(4) { border-inline-end: none; }
    #panel-overview .dash-kpi-row .orders-kpi-card:nth-child(-n+4) { border-bottom: 1px solid #e5e7eb; }
}
@media (max-width: 720px) {
    #panel-overview .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.dark #panel-overview .dash-kpi-row {
    background: #4f4a54 !important;
    border-color: #6e6874 !important;
}
body.dark #panel-overview .dash-kpi-row .orders-kpi-card {
    background: #4f4a54 !important;
    border: none !important;
    border-radius: 0 !important;
    border-inline-end: 1px solid #6e6874 !important;
    padding: 14px 16px 12px !important;
    box-shadow: none !important;
}
body.dark #panel-overview .dash-kpi-row .orders-kpi-card:last-child { border-inline-end: none !important; }
body.dark #panel-overview .dash-kpi-row .orders-kpi-value { color: #f0f4ff !important; }
body.dark #panel-overview .dash-kpi-row .orders-kpi-label { color: #9baabb !important; border-bottom-color: #635e69 !important; }

/* ===== GEO HERO (no card chrome) ===== */
.geo-hero {
    margin: 0 0 22px;
    padding: 0;
}
.geo-hero-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0 4px;
}
.geo-hero-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.geo-hero-title h2 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.35rem, 1.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0f172a;
}
.geo-hero-meta { display: flex; align-items: center; gap: 14px; font-size: 0.78rem; color: #64748b; }
.geo-hero-pulse { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #ecfdf5; color: #047857; border-radius: 999px; font-weight: 600; font-size: 0.72rem; }
.geo-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: geoPulse 1.6s infinite; }
@keyframes geoPulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.geo-hero-update { font-variant-numeric: tabular-nums; }

.geo-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
    gap: 18px;
    align-items: stretch;
}
.geo-hero-stage {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    min-height: 460px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.geo-hero-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(15,23,42,0.045) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: 0.6;
}
.geo-hero-stage .dz-map-stage,
.geo-hero-stage .dz-map-surface { position: relative; z-index: 1; }

.geo-hero-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.geo-side-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}
.geo-strip-cell {
    padding: 14px 14px 12px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.geo-strip-cell:nth-child(2n) { border-right: none; }
.geo-strip-cell:nth-child(n+3) { border-bottom: none; }
.geo-strip-label {
    display: inline-block;
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: none;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 600;
}
.geo-strip-cell strong {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.geo-side-panel {
    flex: 1;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    min-height: 220px;
}
.geo-side-panel h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.geo-side-panel p { margin: 0; font-size: 0.78rem; color: #64748b; }
.geo-side-panel .dz-map-ranking { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 1100px) {
    .geo-hero-grid { grid-template-columns: 1fr; }
    .geo-hero-stage { min-height: 380px; }
}

body.dark .geo-hero-title h2 { color: #f8fafc !important; }
body.dark .geo-hero-eyebrow, body.dark .geo-hero-meta { color: #9baabb !important; }
body.dark .geo-hero-pulse { background: rgba(16,185,129,0.15) !important; color: #6ee7b7 !important; }
body.dark .geo-hero-stage { background: transparent !important; border: 0 !important; }
body.dark .geo-hero-stage::before { display: none !important; background: transparent !important; }
body.dark .geo-side-strip, body.dark .geo-side-panel { background: #4f4a54 !important; border-color: #6e6874 !important; }
body.dark .geo-strip-cell { background: #4f4a54 !important; border-color: #6e6874 !important; }
body.dark .geo-strip-cell strong { color: #f8fafc !important; }
body.dark .geo-strip-label { color: #cbd5e1 !important; border-bottom-color: #635e69 !important; }
body.dark .geo-side-panel h4 { color: #f8fafc !important; }
body.dark .geo-side-panel p { color: #9baabb !important; }

/* Compact remaining overview grid (no map) */
.dashboard-overview-grid-v2 { grid-template-columns: 1fr !important; }
.dashboard-overview-grid-v2 .overview-right-col { display: none; }

/* ============================================================
 * INVENTORY — KPI strip + filters
 * ============================================================ */
.yaya-scope .inv-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #fff; border: 1px solid #ececef; border-radius: 14px;
    overflow: hidden; margin-bottom: 14px;
}
.yaya-scope .inv-kpi {
    padding: 14px 16px;
    border-right: 1px solid #f1f1f3;
    display: flex; flex-direction: column; gap: 4px;
}
.yaya-scope .inv-kpi:last-child { border-right: 0; }
.yaya-scope .inv-kpi-label {
    font-size: 10.5px; color: #9aa0a8; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px dotted #d8d8df; padding-bottom: 4px; width: fit-content;
}
.yaya-scope .inv-kpi-value {
    font-size: 22px; font-weight: 700; color: #0f1722;
    font-family: "Inter", sans-serif;
}
.yaya-scope .inv-kpi-value small { font-size: 12px; font-weight: 600; color: #6b7280; }
.yaya-scope .inv-kpi-warn .inv-kpi-value { color: #b45309; }
.yaya-scope .inv-kpi-danger .inv-kpi-value { color: #b91c1c; }

.yaya-scope .inv-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.yaya-scope .inv-toolbar .search-box { min-width: 260px; flex: 1 1 260px; max-width: 360px; }
.yaya-scope .inv-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.yaya-scope .inv-pill {
    padding: 7px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #ececef; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #4b5563;
    transition: all .15s;
}
.yaya-scope .inv-pill:hover { border-color: #d8d8df; }
.yaya-scope .inv-pill.active { background: #0f1722; color: #fff; border-color: #0f1722; }
.yaya-scope .inv-pill.warn.active { background: #b45309; border-color: #b45309; }
.yaya-scope .inv-pill.danger.active { background: #b91c1c; border-color: #b91c1c; }

@media (max-width: 1100px) {
    .yaya-scope .inv-kpi-strip { grid-template-columns: repeat(3, 1fr); }
    .yaya-scope .inv-kpi:nth-child(3n) { border-right: 0; }
    .yaya-scope .inv-kpi:nth-child(-n+3) { border-bottom: 1px solid #f1f1f3; }
}
@media (max-width: 640px) {
    .yaya-scope .inv-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .yaya-scope .inv-kpi { border-right: 1px solid #f1f1f3 !important; border-bottom: 1px solid #f1f1f3; }
    .yaya-scope .inv-kpi:nth-child(2n) { border-right: 0 !important; }
}

body.dark .yaya-scope .inv-kpi-strip { background: #2a292c; border-color: #3a393c; }
body.dark .yaya-scope .inv-kpi { border-right-color: #3a393c; }
body.dark .yaya-scope .inv-kpi-value { color: #f8fafc; }
body.dark .yaya-scope .inv-kpi-label { color: #a0a8b8; border-bottom-color: #635e69; }
body.dark .yaya-scope .inv-pill { background: #2a292c; border-color: #3a393c; color: #cbd5e1; }
body.dark .yaya-scope .inv-pill.active { background: #f8fafc; color: #0f1722; border-color: #f8fafc; }

/* ============================================================
 * PRODUCT VIEW / EDIT MODAL
 * ============================================================ */
.pv-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,34,.55);
    display: grid; place-items: center; z-index: 9999;
    padding: 20px; backdrop-filter: blur(2px);
    animation: pvFade .15s ease-out;
}
@keyframes pvFade { from { opacity: 0; } to { opacity: 1; } }
.pv-modal {
    background: #fff; border-radius: 16px; width: 100%; max-width: 720px;
    max-height: 90vh; overflow: auto; position: relative;
    box-shadow: 0 24px 60px -20px rgba(15,23,34,.4);
}
.pv-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: #f7f7f9; border: 1px solid #ececef; color: #4b5563;
    display: grid; place-items: center; cursor: pointer; z-index: 2;
    transition: all .15s;
}
.pv-close:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 720px) { .pv-grid { grid-template-columns: 1fr; } }
.pv-image {
    background: #f7f7f9; min-height: 280px;
    display: grid; place-items: center; padding: 30px;
    border-right: 1px solid #ececef;
}
.pv-image img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; }
.pv-info { padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.pv-source {
    font-size: 11px; color: #9aa0a8; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.pv-name { margin: 0; font-size: 20px; font-weight: 800; color: #0f1722; line-height: 1.25; }
.pv-sku { font-size: 12px; color: #6b7280; font-family: ui-monospace, Menlo, monospace; }
.pv-prices { margin-top: 8px; }
.pv-price-main { font-size: 26px; font-weight: 800; color: #0f1722; }
.pv-price-main small { font-size: 13px; color: #6b7280; font-weight: 600; }
.pv-cost { font-size: 12.5px; color: #6b7280; margin-top: 4px; }
.pv-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    background: #f7f7f9; border-radius: 10px; padding: 12px; margin-top: 8px;
}
.pv-stat { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pv-stat-lbl { font-size: 10px; color: #9aa0a8; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pv-stat-val { font-size: 14px; color: #0f1722; font-weight: 700; }
.pv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

body.dark .pv-modal { background: #2a292c; }
body.dark .pv-image { background: #1f1e21; border-right-color: #3a393c; }
body.dark .pv-name { color: #f8fafc; }
body.dark .pv-price-main { color: #f8fafc; }
body.dark .pv-stat-val { color: #f8fafc; }
body.dark .pv-stats { background: #1f1e21; }
body.dark .pv-close { background: #1f1e21; border-color: #3a393c; color: #cbd5e1; }

/* Card action danger button */
.yaya-scope .ac-btn.ac-btn-danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* =====================================================================
   DASHBOARD v2.1 polish — Setup flat, Map 3D, Ops cards, Quick mini, Recent table
   ===================================================================== */

/* ---------- 1) Setup Guide v2 (flat French) ---------- */
.setup-guide.setup-guide-v2 {
    background: #ffffff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    color: #0f172a !important;
    padding: 26px !important;
    overflow: hidden;
}
.setup-guide.setup-guide-v2 .setup-guide-bg,
.setup-guide.setup-guide-v2 .setup-ad-visual { display: none !important; }

.setup-guide.setup-guide-v2 .setup-tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 5px 11px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px !important;
}
.setup-guide.setup-guide-v2 .setup-tag i { color: #64748b !important; }

.setup-guide.setup-guide-v2 .setup-title {
    color: #0f172a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.35rem, 1.6vw, 1.75rem) !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
}
.setup-guide.setup-guide-v2 .setup-subtitle { color: #64748b !important; font-size: 0.92rem !important; }

.setup-guide.setup-guide-v2 .setup-ring-track { stroke: #e2e8f0 !important; }
.setup-guide.setup-guide-v2 .setup-ring-fill { stroke: #1d4ed8 !important; }
.setup-guide.setup-guide-v2 .setup-ring-center strong { color: #0f172a !important; }
.setup-guide.setup-guide-v2 .setup-ring-center span { color: #64748b !important; }
.setup-guide.setup-guide-v2 .setup-progress-count { color: #0f172a !important; }
.setup-guide.setup-guide-v2 .setup-progress-slash { color: #cbd5e1 !important; }
.setup-guide.setup-guide-v2 .setup-progress-label {
    display: inline-block; padding-bottom: 2px;
    border-bottom: none;
    color: #475569 !important; font-weight: 600;
}
.setup-guide.setup-guide-v2 .setup-time-badge {
    background: #f8fafc !important; color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important; padding: 3px 10px !important;
    font-size: 0.72rem !important;
}

.setup-guide.setup-guide-v2 .setup-cta-primary {
    background: #0f172a !important; color: #fff !important;
    border: 1px solid #0f172a !important;
    border-radius: 10px !important;
    padding: 10px 18px !important; font-weight: 600 !important;
    box-shadow: none !important;
}
.setup-guide.setup-guide-v2 .setup-cta-primary:hover { background: #1e293b !important; }
.setup-guide.setup-guide-v2 .setup-cta-ghost {
    background: #f8fafc !important; color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important; font-weight: 600 !important;
}
.setup-guide.setup-guide-v2 .setup-cta-ghost:hover { background: #eef2f7 !important; }

.setup-guide.setup-guide-v2 .setup-features-strip { gap: 8px !important; }
.setup-guide.setup-guide-v2 .setup-feat {
    background: #f8fafc !important; color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important; padding: 6px 12px !important;
    font-size: 0.74rem !important; font-weight: 500 !important;
}
.setup-guide.setup-guide-v2 .setup-feat i { color: #64748b !important; }

.setup-guide.setup-guide-v2 .sg-step {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    transition: all .15s ease;
}
.setup-guide.setup-guide-v2 .sg-step:hover {
    border-color: #cbd5e1 !important;
    background: #fbfdff !important;
    transform: none !important;
}
.setup-guide.setup-guide-v2 .sg-step.active {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29,78,216,.08) !important;
    background: #fff !important;
}
.setup-guide.setup-guide-v2 .sg-step.done { background: #f8fafc !important; }
.setup-guide.setup-guide-v2 .sg-step-num {
    background: #f1f5f9 !important; color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    width: 26px !important; height: 26px !important;
    border-radius: 8px !important; font-weight: 700 !important;
}
.setup-guide.setup-guide-v2 .sg-step.active .sg-step-num {
    background: #1d4ed8 !important; color: #fff !important; border-color: #1d4ed8 !important;
}
.setup-guide.setup-guide-v2 .sg-step.done .sg-step-num {
    background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important;
}
.setup-guide.setup-guide-v2 .sg-step-content strong { color: #0f172a !important; font-weight: 600 !important; }
.setup-guide.setup-guide-v2 .sg-step-content span { color: #64748b !important; font-size: 0.78rem !important; }
.setup-guide.setup-guide-v2 .sg-step-time {
    background: #f8fafc !important; color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important; padding: 3px 9px !important; font-size: 0.7rem !important;
}
.setup-guide.setup-guide-v2 .sg-step-status.done {
    background: #ecfdf5 !important; color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 999px !important; padding: 3px 10px !important;
    font-size: 0.7rem !important; font-weight: 600 !important;
}

body.dark .setup-guide.setup-guide-v2 {
    background: #4f4a54 !important; border-color: #6e6874 !important;
}
body.dark .setup-guide.setup-guide-v2 .setup-title,
body.dark .setup-guide.setup-guide-v2 .setup-progress-count,
body.dark .setup-guide.setup-guide-v2 .setup-ring-center strong,
body.dark .setup-guide.setup-guide-v2 .sg-step-content strong { color: #f0f4ff !important; }
body.dark .setup-guide.setup-guide-v2 .setup-subtitle,
body.dark .setup-guide.setup-guide-v2 .sg-step-content span { color: #9baabb !important; }
body.dark .setup-guide.setup-guide-v2 .sg-step,
body.dark .setup-guide.setup-guide-v2 .setup-feat,
body.dark .setup-guide.setup-guide-v2 .setup-time-badge,
body.dark .setup-guide.setup-guide-v2 .sg-step-num,
body.dark .setup-guide.setup-guide-v2 .setup-tag,
body.dark .setup-guide.setup-guide-v2 .sg-step-time {
    background: #272728 !important; border-color: #6e6874 !important; color: #cbd5e1 !important;
}
body.dark .setup-guide.setup-guide-v2 .setup-cta-ghost {
    background: #272728 !important; color: #cbd5e1 !important; border-color: #6e6874 !important;
}

/* ---------- 2) Geo Hero — FLAT map, no card chrome, no 3D ---------- */
.geo-hero-stage {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 16px !important;
    min-height: 480px !important;
    /* perspective REMOVED — was creating 3D card illusion */
}
.geo-hero-stage::before { display: none !important; }
.geo-hero-stage::after { display: none !important; }
.geo-hero-stage .dz-map-stage {
    /* 3D transforms REMOVED — see buld-theme.css for flat user-controlled transform */
    transition: none !important;
    will-change: auto !important;
}
.geo-hero-stage:hover .dz-map-stage {
    /* hover 3D rotation REMOVED */
}
.geo-hero-stage #dzOrdersMap svg,
.geo-hero-stage #dzOrdersMap > svg {
    /* drop-shadow filters REMOVED — were creating dark "card" outline */
    filter: none !important;
}
.geo-hero-stage .dz-map-crown {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 3;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #b45309;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
body.dark .geo-hero-stage::after { display: none !important; background: transparent !important; }
body.dark .geo-hero-stage .dz-map-crown { background: #272728 !important; border-color: #6e6874 !important; color: #fbbf24 !important; }

/* ---------- 3) Ops cards — Barbaros signature ---------- */
#panel-overview .gross-value-card {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.30) !important;
    color: #f4f4f5 !important;
    padding: 18px 20px !important;
    overflow: hidden;
}
#panel-overview .gross-value-card * { color: inherit !important; }
#panel-overview .gross-value-badge {
    background: #ecfdf5 !important; color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 999px !important; padding: 4px 10px !important;
    font-size: 0.72rem !important; font-weight: 600 !important;
}
#panel-overview .gross-value-dot { background: #10b981 !important; }
#panel-overview .gross-value-label {
    display: inline-block; padding-bottom: 2px;
    border-bottom: none;
    color: #475569 !important; font-size: 0.78rem !important; font-weight: 600 !important;
}
#panel-overview .gross-value-number {
    color: #0f172a !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: -0.025em;
    margin-top: 4px;
}
#panel-overview .gross-value-sublabel {
    display: inline-block; padding-bottom: 2px;
    border-bottom: none;
    color: #475569 !important; font-size: 0.74rem !important; font-weight: 600 !important;
}
#panel-overview .gross-value-count {
    color: #0f172a !important; font-weight: 700 !important;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
#panel-overview .gross-value-bar {
    background: #eef2f7 !important; height: 5px !important;
    border-radius: 999px !important; margin-top: 14px !important;
}
#panel-overview .gross-value-fill {
    background: #0f172a !important;
    border-radius: 999px !important;
}

#panel-overview .estimated-rev-card {
    background: #4f4a54 !important;
    border: 1px solid #6e6874 !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.30) !important;
    padding: 18px 20px !important;
    color: #f4f4f5 !important;
}
#panel-overview .est-rev-icon {
    background: #f1f5f9 !important; color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    width: 34px !important; height: 34px !important;
    border-radius: 10px !important;
}
#panel-overview .est-rev-icon i { color: #475569 !important; }
#panel-overview .est-rev-label {
    display: inline-block; padding-bottom: 2px;
    border-bottom: none;
    color: #475569 !important; font-size: 0.8rem !important; font-weight: 600 !important;
}
#panel-overview .est-rev-value {
    color: #0f172a !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: -0.025em;
}
#panel-overview .est-rev-change.positive { color: #047857 !important; }
#panel-overview .est-rev-change { font-size: 0.78rem !important; font-weight: 600 !important; }

#panel-overview .attention-card {
    background: #ffffff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
}
#panel-overview .attention-card .table-card-header {
    border-bottom: none !important;
    padding: 14px 18px !important;
}
#panel-overview .attention-card .table-card-header h3 {
    display: inline-block; margin: 0;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    color: #f4f4f5 !important;
    font-size: 0.95rem !important; font-weight: 600 !important;
}
#panel-overview .attention-row {
    padding: 12px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fff !important;
    color: #0f172a !important;
    text-decoration: none;
}
#panel-overview .attention-row:hover { background: #fbfdff !important; }
#panel-overview .attention-row:last-child { border-bottom: none !important; }
#panel-overview .attention-row strong { color: #0f172a !important; font-weight: 600 !important; }
#panel-overview .attention-row .attention-body span { color: #64748b !important; font-size: 0.78rem !important; }
#panel-overview .attention-view { color: #2563eb !important; font-weight: 600 !important; font-size: 0.78rem !important; }
#panel-overview .attention-count {
    background: #f1f5f9 !important; color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important; padding: 2px 10px !important;
    font-weight: 700 !important; font-size: 0.78rem !important;
}

#panel-overview .funnel-section {
    background: #ffffff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
    padding: 16px 18px !important;
}
#panel-overview .funnel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#panel-overview .funnel-header h3 {
    display: inline-block; margin: 0;
    padding-bottom: 2px;
    border-bottom: none;
    color: #0f172a !important;
    font-size: 0.95rem !important; font-weight: 600 !important;
}
#panel-overview .funnel-subtitle { color: #64748b !important; font-weight: 500 !important; font-size: 0.78rem !important; border-bottom: none !important; }
#panel-overview .funnel-period-toggle {
    display: inline-flex; gap: 0;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 3px !important;
}
#panel-overview .fpt-btn {
    background: transparent !important; border: none !important;
    padding: 6px 12px !important; font-size: 0.74rem !important; font-weight: 600 !important;
    color: #64748b !important; border-radius: 7px !important; cursor: pointer;
}
#panel-overview .fpt-btn.active {
    background: #fff !important; color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.08) !important;
}

#panel-overview .funnel-pills { display: flex; flex-direction: column; gap: 8px; }
#panel-overview .funnel-pill {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    display: flex; align-items: center; justify-content: space-between;
    color: #0f172a !important;
    box-shadow: none !important;
    background-image: none !important;
    position: relative; overflow: hidden;
}
#panel-overview .funnel-pill .fp-label { color: #475569 !important; font-weight: 600 !important; font-size: 0.82rem !important; }
#panel-overview .funnel-pill .fp-count { color: #0f172a !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
#panel-overview .funnel-pill-impressions { background: #f1f5f9 !important; }
#panel-overview .funnel-pill-new { border-color: #bfdbfe !important; background: #eff6ff !important; }
#panel-overview .funnel-pill-confirmed { border-color: #93c5fd !important; background: #dbeafe !important; }
#panel-overview .funnel-pill-shipped { border-color: #a7f3d0 !important; background: #ecfdf5 !important; }
#panel-overview .funnel-pill-delivered { border-color: #6ee7b7 !important; background: #d1fae5 !important; }

body.dark #panel-overview .gross-value-card,
body.dark #panel-overview .estimated-rev-card,
body.dark #panel-overview .attention-card,
body.dark #panel-overview .funnel-section {
    background: #4f4a54 !important; border-color: #6e6874 !important;
}
body.dark #panel-overview .gross-value-number,
body.dark #panel-overview .gross-value-count,
body.dark #panel-overview .est-rev-value,
body.dark #panel-overview .attention-row strong,
body.dark #panel-overview .attention-card .table-card-header h3,
body.dark #panel-overview .funnel-header h3,
body.dark #panel-overview .funnel-pill .fp-count { color: #f0f4ff !important; }
body.dark #panel-overview .gross-value-label,
body.dark #panel-overview .gross-value-sublabel,
body.dark #panel-overview .est-rev-label,
body.dark #panel-overview .attention-row .attention-body span,
body.dark #panel-overview .funnel-pill .fp-label { color: #9baabb !important; border-bottom-color: #635e69 !important; }
body.dark #panel-overview .gross-value-bar { background: #272728 !important; }
body.dark #panel-overview .gross-value-fill { background: #f0f4ff !important; }
body.dark #panel-overview .est-rev-icon { background: #272728 !important; border-color: #6e6874 !important; color: #cbd5e1 !important; }
body.dark #panel-overview .est-rev-icon i { color: #cbd5e1 !important; }
body.dark #panel-overview .attention-row { background: #4f4a54 !important; border-color: #272728 !important; }
body.dark #panel-overview .attention-row:hover { background: #4f4a54 !important; }
body.dark #panel-overview .attention-count { background: #272728 !important; border-color: #6e6874 !important; color: #f0f4ff !important; }
body.dark #panel-overview .funnel-period-toggle { background: #272728 !important; border-color: #6e6874 !important; }
body.dark #panel-overview .fpt-btn { color: #9baabb !important; }
body.dark #panel-overview .fpt-btn.active { background: #6e6874 !important; color: #f0f4ff !important; }
body.dark #panel-overview .funnel-pill { background: #272728 !important; border-color: #6e6874 !important; }
body.dark #panel-overview .funnel-pill-new,
body.dark #panel-overview .funnel-pill-confirmed,
body.dark #panel-overview .funnel-pill-shipped,
body.dark #panel-overview .funnel-pill-delivered { background: #272728 !important; }

/* ---------- 4) Quick mini cards ---------- */
#panel-overview .qa-mini-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 18px;
}
#panel-overview .qa-mini-card {
    background: #ffffff;
    border: 1px solid #d8dde6;
    border-radius: 14px;
    padding: 16px 14px;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,.035);
    text-align: center;
}
#panel-overview .qa-mini-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
#panel-overview .qa-mini-icon {
    width: 38px; height: 38px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #334155;
    transition: background .15s ease, color .15s ease;
}
#panel-overview .qa-mini-icon i { width: 18px; height: 18px; color: #334155; }
#panel-overview .qa-mini-card:hover .qa-mini-icon { background: #0f172a; border-color: #0f172a; color: #fff; }
#panel-overview .qa-mini-card:hover .qa-mini-icon i { color: #fff; }
#panel-overview .qa-mini-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
}

@media (max-width: 1100px) {
    #panel-overview .qa-mini-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    #panel-overview .qa-mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.dark #panel-overview .qa-mini-card { background: #4f4a54; border-color: #6e6874; }
body.dark #panel-overview .qa-mini-card:hover { border-color: #5a5759; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
body.dark #panel-overview .qa-mini-icon { background: #272728; border-color: #6e6874; color: #cbd5e1; }
body.dark #panel-overview .qa-mini-icon i { color: #cbd5e1; }
body.dark #panel-overview .qa-mini-card:hover .qa-mini-icon { background: #f0f4ff; border-color: #f0f4ff; color: #0f172a; }
body.dark #panel-overview .qa-mini-card:hover .qa-mini-icon i { color: #0f172a; }
body.dark #panel-overview .qa-mini-label { color: #f0f4ff; }

/* ---------- 5) Recent orders table — unified ---------- */
#panel-overview .dash-recent-card {
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
#panel-overview .dash-recent-card .orders-table-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
}
#panel-overview .dash-recent-card .orders-table-card-header h3 {
    display: inline-block; margin: 0;
    padding-bottom: 2px;
    border-bottom: none;
    color: #0f172a;
    font-size: 1rem; font-weight: 600;
}
#panel-overview .orders-reference-table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
}
#panel-overview .orders-reference-table thead th {
    background: #f8fafc;
    color: #334155;
    font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 14px 12px;
    border-bottom: 1px solid #dbe2ea;
    text-align: start;
}
#panel-overview .orders-reference-table td {
    background: #fff; color: #4f4a54;
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
}
#panel-overview .orders-reference-table tbody tr:hover td { background: #fbfdff; }

body.dark #panel-overview .dash-recent-card { background: #4f4a54; border-color: #6e6874; }
body.dark #panel-overview .dash-recent-card .orders-table-card-header { border-bottom-color: #6e6874; }
body.dark #panel-overview .dash-recent-card .orders-table-card-header h3 { color: #f0f4ff; border-bottom-color: #635e69; }
body.dark #panel-overview .orders-reference-table thead th { background: #4f4a54; color: #cbd5e1; border-bottom-color: #6e6874; }
body.dark #panel-overview .orders-reference-table td { background: #4f4a54; color: #f0f4ff; border-bottom-color: #6e6874; }
body.dark #panel-overview .orders-reference-table tbody tr:hover td { background: #6e6874; }

/* ================================================================
   DASHBOARD v2.2 — Launch Studio, Period bar, Map controls,
   Funnel pill colors, KPI tones
   ================================================================ */

/* ---------- Launch Studio (replaces Setup Guide) ---------- */
.launch-studio {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6e8ee;
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 16px 40px -28px rgba(15,23,42,.18);
}
.launch-dismiss {
    position: absolute; top: 14px; right: 14px;
    width: 28px; height: 28px; border-radius: 8px;
    background: #f1f5f9; border: 1px solid #e6e8ee;
    color: #64748b; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    transition: all .18s ease;
}
.launch-dismiss:hover { background: #0f172a; color: #fff; border-color: #0f172a; }
.launch-studio-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr;
    gap: 36px;
    align-items: stretch;
}
@media (max-width: 980px) { .launch-studio-grid { grid-template-columns: 1fr; gap: 24px; } }
.launch-hero { display: flex; flex-direction: column; gap: 14px; padding-right: 8px; }
.launch-eyebrow {
    font-size: 11px; letter-spacing: .18em; font-weight: 700;
    color: #1d4ed8; text-transform: uppercase;
    border-bottom: none;
    padding-bottom: 6px; align-self: flex-start;
}
.launch-title {
    font-size: 28px; font-weight: 700; color: #0f172a;
    line-height: 1.18; margin: 0; letter-spacing: -0.02em;
}
.launch-sub {
    font-size: 14px; color: #64748b; line-height: 1.55; margin: 0;
    max-width: 46ch;
}
.launch-meter {
    margin-top: 6px;
    background: #f8fafc;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.launch-meter-num {
    display: flex; align-items: baseline; gap: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.launch-meter-num strong { font-size: 22px; color: #0f172a; font-weight: 700; }
.launch-meter-num span { font-size: 13px; color: #94a3b8; }
.launch-meter-bar {
    position: relative; height: 6px; background: #e6e8ee;
    border-radius: 99px; overflow: hidden;
}
.launch-meter-fill {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #1d4ed8, #2563eb);
    border-radius: 99px;
    transition: width .5s cubic-bezier(.22,1,.36,1);
}
.launch-meter-foot {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: #64748b;
}
.launch-meter-foot strong { color: #0f172a; font-weight: 700; }
.launch-meter-eta { display: inline-flex; align-items: center; gap: 5px; }
.launch-cta-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.launch-cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0f172a; color: #fff;
    padding: 11px 18px; border: 0; border-radius: 10px;
    font-weight: 600; font-size: 13.5px; cursor: pointer;
    transition: transform .15s ease, background .2s ease;
}
.launch-cta-primary:hover { background: #1e293b; transform: translateY(-1px); }
.launch-cta-link {
    background: transparent; border: 0; color: #1d4ed8;
    font-weight: 600; font-size: 13px; cursor: pointer;
    padding: 8px 4px;
}
.launch-cta-link:hover { text-decoration: underline; }
.launch-trust-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.launch-trust-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: #475569; font-weight: 500;
    background: #f1f5f9; border: 1px solid #e6e8ee;
    padding: 4px 9px; border-radius: 99px;
}
.launch-trust-pill i { color: #1d4ed8; }

.launch-checklist {
    background: #fafbfc;
    border: 1px solid #eef1f6;
    border-radius: 14px;
    padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
    position: relative;
}
.launch-checklist::before {
    content: ""; position: absolute;
    top: 28px; bottom: 28px; left: 30px; width: 2px;
    background: linear-gradient(to bottom, #e6e8ee, transparent);
    z-index: 0;
}
.lc-row {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center; gap: 12px;
    padding: 10px 14px;
    background: transparent; border: 1px solid transparent;
    border-radius: 10px; cursor: pointer;
    text-align: left; font: inherit; color: inherit;
    transition: all .18s ease;
}
.lc-row:hover { background: #fff; border-color: #e6e8ee; }
.lc-row.active { background: #fff; border-color: #dbe2ea; box-shadow: 0 4px 14px -8px rgba(15,23,42,.14); }
.lc-bullet {
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 1.5px solid #d6dbe3;
    color: #64748b; font-size: 12.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.lc-row.done .lc-bullet { background: #047857; border-color: #047857; color: #fff; }
.lc-row.active .lc-bullet { background: #0f172a; border-color: #0f172a; color: #fff; }
.lc-body { display: flex; flex-direction: column; min-width: 0; }
.lc-body strong { font-size: 13.5px; color: #0f172a; font-weight: 600; }
.lc-body span { font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.lc-row.done .lc-body strong { color: #475569; text-decoration: line-through; text-decoration-color: #cbd5e1; }
.lc-tag {
    font-size: 10.5px; font-weight: 600; color: #64748b;
    background: #f1f5f9; border: 1px solid #e6e8ee;
    padding: 3px 8px; border-radius: 99px;
}
.lc-tag.done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.lc-row.active .lc-tag { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* ---------- Period bar (above KPI strip) ---------- */
.dash-period-bar {
    position: relative;
    display: flex; align-items: center;
    margin-bottom: 14px;
}
.dash-period-left { display: flex; align-items: center; gap: 12px; }
.dash-period-label-eyebrow {
    font-size: 10.5px; letter-spacing: .18em; font-weight: 700;
    color: #94a3b8; text-transform: uppercase;
}
.dash-period-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e6e8ee;
    color: #0f172a; font-weight: 600; font-size: 13px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    transition: all .18s ease;
}
.dash-period-trigger:hover { border-color: #c5cedb; }
.dash-period-trigger i { color: #64748b; }
.dash-period-range-hint {
    font-size: 12px; color: #64748b;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dash-period-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    background: #fff; border: 1px solid #e6e8ee;
    border-radius: 12px; padding: 6px;
    min-width: 230px;
    box-shadow: 0 12px 36px -10px rgba(15,23,42,.18);
    display: none; z-index: 40;
}
.dash-period-menu.open { display: block; }
.dash-period-option {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0;
    padding: 8px 12px; border-radius: 8px;
    font-size: 13px; color: #0f172a; cursor: pointer;
    transition: background .15s ease;
}
.dash-period-option:hover { background: #f1f5f9; }
.dash-period-option.active { background: #0f172a; color: #fff; font-weight: 600; }
.dash-custom-wrap {
    display: none; padding: 10px;
    border-top: 1px dotted #e6e8ee; margin-top: 6px;
    flex-direction: column; gap: 8px;
}
.dash-custom-wrap.open { display: flex; }
.dash-custom-wrap label {
    font-size: 11px; color: #64748b; font-weight: 600;
    display: flex; flex-direction: column; gap: 4px;
}
.dash-custom-wrap input[type="date"] {
    border: 1px solid #e6e8ee; border-radius: 8px;
    padding: 7px 10px; font-size: 13px; color: #0f172a;
    font-family: inherit;
}
.dash-custom-apply {
    background: #0f172a; color: #fff; border: 0;
    padding: 8px 12px; border-radius: 8px;
    font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.dash-custom-apply:hover { background: #1e293b; }

/* ---------- KPI tone accents (subtle left bar) ---------- */
.dash-kpi-row .orders-kpi-card { position: relative; overflow: hidden; }
.dash-kpi-row .orders-kpi-card::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: #e6e8ee;
}
.kpi-tone-blue::before   { background: #1d4ed8 !important; }
.kpi-tone-amber::before  { background: #f59e0b !important; }
.kpi-tone-violet::before { background: #7c3aed !important; }
.kpi-tone-teal::before   { background: #0d9488 !important; }
.kpi-tone-green::before  { background: #047857 !important; }
.kpi-tone-rose::before   { background: #e11d48 !important; }
.kpi-tone-slate::before  { background: #64748b !important; }
.kpi-tone-indigo::before { background: #4f46e5 !important; }

/* ---------- Map controls cluster ---------- */
.geo-hero-stage { position: relative; }
.map-controls-cluster {
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 6px 22px -10px rgba(15,23,42,.18);
    z-index: 12;
}
.map-ctrl-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: transparent; border: 0; color: #475569;
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    transition: all .15s ease;
}
.map-ctrl-btn:hover { background: #0f172a; color: #fff; }
.map-ctrl-btn.is-flat { background: #1d4ed8; color: #fff; }
.map-ctrl-reset { color: #1d4ed8; }
.map-ctrl-sep {
    width: 1px; height: 18px; background: #e6e8ee;
    display: inline-block; margin: 0 2px;
}
/* smooth stage transform */
.geo-hero-stage .dz-map-stage {
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    transform-origin: center center;
}

/* ---------- Funnel pill colored fills ---------- */
.funnel-pills .funnel-pill {
    position: relative; overflow: hidden;
    background: #f8fafc; border: 1px solid #eef1f6;
    border-radius: 10px; padding: 12px 14px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 0;
}
.funnel-pills .funnel-pill::before {
    content: ""; position: absolute; inset: 0;
    width: var(--w, 8%);
    background: linear-gradient(90deg, var(--pill-c, #1d4ed8) 0%, var(--pill-c2, #2563eb) 100%);
    opacity: .12;
    border-radius: 10px 0 0 10px;
    transition: width .8s cubic-bezier(.22,1,.36,1);
    z-index: -1;
}
.funnel-pill .fp-label, .funnel-pill .fp-count { position: relative; z-index: 1; }
.funnel-pill-impressions { --pill-c: #64748b;  --pill-c2: #94a3b8; }
.funnel-pill-impressions .fp-count { color: #64748b; }
.funnel-pill-new         { --pill-c: #f59e0b;  --pill-c2: #fbbf24; }
.funnel-pill-new .fp-count { color: #b45309; }
.funnel-pill-confirmed   { --pill-c: #1d4ed8;  --pill-c2: #2563eb; }
.funnel-pill-confirmed .fp-count { color: #1d4ed8; }
.funnel-pill-shipped     { --pill-c: #0d9488;  --pill-c2: #14b8a6; }
.funnel-pill-shipped .fp-count { color: #0d9488; }
.funnel-pill-delivered   { --pill-c: #047857;  --pill-c2: #10b981; }
.funnel-pill-delivered .fp-count { color: #047857; }

/* Funnel period toggle now actually active */
.funnel-period-toggle .fpt-btn {
    cursor: pointer; transition: all .15s ease;
}
.funnel-period-toggle .fpt-btn.active {
    background: #0f172a !important; color: #fff !important;
    border-color: #0f172a !important;
}

/* ================================================================
   DASHBOARD v2.3 — Compact Launch Stepper, Map drag hint, Recent rows
   ================================================================ */

/* Hide old Launch Studio markup if any survives */
.launch-studio { display: none !important; }
.map-controls-cluster { display: none !important; }

/* ---------- Launch card ----------
   Premium batch 1: the 13-dot launch stepper and the zero-store welcome card are gone. The compact
   `.launch-card` (#onboardingHero, inside #panel-overview) and `.ls-hidden-note` are styled with tokens
   in app/design-system/premium/premium.css; the three welcome actions now live in the store switcher. */

/* ---------- Map drag hint + cursor ---------- */
.geo-hero-stage { cursor: grab; user-select: none; }
.geo-hero-stage.is-dragging { cursor: grabbing; }
.geo-hero-stage.is-dragging .dz-map-stage { transition: none !important; }
.map-drag-hint {
    position: absolute; bottom: 12px; right: 14px;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(15,23,42,.85); color: #fff;
    font-size: 10.5px; font-weight: 600;
    padding: 5px 9px; border-radius: 99px;
    pointer-events: none; z-index: 12;
    transition: opacity .35s ease;
    backdrop-filter: blur(4px);
}
.map-drag-hint.is-hidden { opacity: 0; }

/* ---------- Recent orders unified rows ---------- */
.dash-recent-card .recent-row td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.dash-recent-card .recent-prod,
.dash-recent-card .recent-client {
    display: flex; align-items: center; gap: 10px;
}
.dash-recent-card .recent-prod .product-img {
    width: 38px; height: 38px; border-radius: 8px; object-fit: cover;
    background: #f1f5f9; border: 1px solid #e6e8ee; flex-shrink: 0;
}
.dash-recent-card .recent-prod .product-info,
.dash-recent-card .recent-client .customer-info { min-width: 0; }
.dash-recent-card .recent-prod .product-name,
.dash-recent-card .recent-client .customer-name {
    font-weight: 600; font-size: 13px; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.dash-recent-card .recent-prod .product-sku,
.dash-recent-card .recent-client .customer-meta {
    font-size: 11px; color: #94a3b8;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dash-recent-card .customer-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #475569; font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.dash-recent-card .phone-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f1f5f9; border: 1px solid #e6e8ee;
    padding: 4px 9px; border-radius: 99px;
    font-size: 12px; color: #475569; font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dash-recent-card .phone-chip i { color: #1d4ed8; width: 11px; height: 11px; }
.dash-recent-card .location .location-wilaya {
    font-size: 12.5px; font-weight: 600; color: #0f172a;
}
.dash-recent-card .price {
    font-size: 14px; font-weight: 700; color: #0f172a;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dash-recent-card .price small {
    font-size: 10.5px; color: #94a3b8; font-weight: 500; margin-left: 3px;
}
.dash-recent-card .recent-date {
    font-size: 11.5px; color: #64748b;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dash-recent-card .actions { display: inline-flex; gap: 4px; }
.dash-recent-card .actions .btn-action {
    width: 28px; height: 28px; border-radius: 7px;
    background: #f1f5f9; border: 1px solid #e6e8ee;
    color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.dash-recent-card .actions .btn-action:hover {
    background: #0f172a; color: #fff; border-color: #0f172a;
}
.dash-recent-card .actions .btn-action i { width: 13px; height: 13px; }

/* status-pill colors carried over for recent rows */
.dash-recent-card .status-pill {
    display: inline-flex; padding: 4px 10px; border-radius: 99px;
    font-size: 11px; font-weight: 600;
}

/* ================================================================
   DASHBOARD v2.4 — Recent orders use unified yaya-scope table
   ================================================================ */
.dash-recent-card {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 16px;
    padding: 18px 18px 22px;
    margin-top: 18px;
}
.dash-recent-card .orders-table-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding: 0 4px;
}
.dash-recent-card .orders-table-card-header h3 {
    font-size: 14px; font-weight: 700; color: #0f172a;
    margin: 0;
    border-bottom: none; padding-bottom: 4px;
    align-self: flex-start;
}
/* Keep the unified .orders-table look but tighten last column for dashboard */
.dash-recent-card .yaya-scope .orders-table.dash-recent-table .table-head,
.dash-recent-card .yaya-scope .orders-table.dash-recent-table .table-row {
    grid-template-columns: 36px 76px 1.4fr 1.2fr 88px 50px 1fr 1.3fr 130px 130px 110px 110px;
}
/* Hide select-all cell visually but keep the spacer */
.dash-recent-card .row-check { opacity: .55; }
.dash-recent-card .actions { display: inline-flex; gap: 4px; }
.dash-recent-card .actions .btn-action {
    width: 30px; height: 30px; border-radius: 7px;
    background: #f1f5f9; border: 1px solid #e6e8ee;
    color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.dash-recent-card .actions .btn-action:hover {
    background: #0f172a; color: #fff; border-color: #0f172a;
}
.dash-recent-card .actions .btn-action i { width: 13px; height: 13px; }

/* =====================================================================
   STOP-DESK (BUREAU) PANEL — flat French analytics style
   ===================================================================== */
#panel-stopdesk { padding: 24px 28px 80px; }
#panel-stopdesk .yaya-scope { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; }

#panel-stopdesk .sd-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; margin-bottom: 20px;
}
#panel-stopdesk .sd-eyebrow {
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
    color: #64748b; border-bottom: none; padding-bottom: 4px;
    display: inline-block; margin-bottom: 10px;
}
#panel-stopdesk .sd-title { font-size: 22px; font-weight: 600; color: #0f172a; margin: 0 0 4px; letter-spacing: -0.01em; }
#panel-stopdesk .sd-sub { font-size: 13px; color: #64748b; margin: 0; }

#panel-stopdesk .sd-header-actions { display: flex; gap: 10px; align-items: center; }
#panel-stopdesk .sd-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
    border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid transparent; transition: all .15s ease;
}
#panel-stopdesk .sd-btn i { width: 14px; height: 14px; }
#panel-stopdesk .sd-btn-ghost { background: #fff; border-color: #e2e8f0; color: #334155; }
#panel-stopdesk .sd-btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }
#panel-stopdesk .sd-btn-primary { background: #0f172a; color: #fff; }
#panel-stopdesk .sd-btn-primary:hover:not(:disabled) { background: #1e293b; }
#panel-stopdesk .sd-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
#panel-stopdesk .sd-btn-count {
    background: rgba(255,255,255,.18); padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; min-width: 22px; text-align: center;
}

/* KPI strip */
#panel-stopdesk .sd-kpi-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: #fff; border: 1px solid #e8edf3; border-radius: 12px;
    margin-bottom: 18px; overflow: hidden;
}
#panel-stopdesk .sd-kpi {
    padding: 18px 22px; border-right: 1px solid #eef2f6;
    display: flex; flex-direction: column; gap: 6px;
}
#panel-stopdesk .sd-kpi:last-child { border-right: none; }
#panel-stopdesk .sd-kpi-label {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: #64748b; border-bottom: none; padding-bottom: 3px;
    display: inline-block; align-self: flex-start;
}
#panel-stopdesk .sd-kpi-value { font-size: 26px; font-weight: 600; color: #0f172a; line-height: 1; letter-spacing: -0.02em; }
#panel-stopdesk .sd-kpi-trend { font-size: 11px; color: #94a3b8; }
#panel-stopdesk .sd-kpi-trend.sd-kpi-good { color: #059669; }
#panel-stopdesk .sd-kpi-trend.sd-kpi-warn { color: #d97706; }

/* Toolbar */
#panel-stopdesk .sd-toolbar {
    display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
    background: #fff; border: 1px solid #e8edf3; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 14px;
}
#panel-stopdesk .sd-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
#panel-stopdesk .sd-filter-label {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #64748b;
}
#panel-stopdesk .sd-select {
    height: 34px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 7px;
    font-size: 13px; color: #0f172a; background: #fff; cursor: pointer;
}
#panel-stopdesk .sd-select:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.1); }
#panel-stopdesk .sd-search {
    flex: 1; min-width: 220px; position: relative; display: flex; align-items: center;
}
#panel-stopdesk .sd-search i { position: absolute; left: 10px; width: 14px; height: 14px; color: #94a3b8; }
#panel-stopdesk .sd-search input {
    width: 100%; height: 34px; padding: 0 12px 0 32px;
    border: 1px solid #e2e8f0; border-radius: 7px; font-size: 13px;
}
#panel-stopdesk .sd-search input:focus { outline: none; border-color: #1d4ed8; }

/* Table — reuse .orders-table with custom column widths */
#panel-stopdesk .sd-table .table-head,
#panel-stopdesk .sd-table .table-row {
    grid-template-columns: 36px 76px 1.4fr 1.2fr 88px 50px 1fr 1.5fr 130px 130px 100px !important;
}

/* Office picker cell */
.sd-office-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-office-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; background: #ecfdf5; color: #047857;
    border: 1px solid #a7f3d0; border-radius: 6px;
    font-size: 11.5px; font-weight: 500; max-width: 100%;
}
.sd-office-pill i { width: 11px; height: 11px; }
.sd-office-pill .sd-office-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sd-office-change {
    background: none; border: none; color: #1d4ed8; font-size: 11px;
    cursor: pointer; padding: 0; text-align: left; align-self: flex-start;
}
.sd-office-change:hover { text-decoration: underline; }
.sd-office-picker {
    height: 30px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 12px; color: #0f172a; background: #fff; cursor: pointer; max-width: 100%;
}
.sd-office-picker:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,.12); }
.sd-office-picker.sd-empty { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.sd-office-hint { font-size: 10.5px; color: #94a3b8; }

/* Carrier mini-pill */
.sd-carrier-mini {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.sd-carrier-mini.sd-c-yalidine { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sd-carrier-mini.sd-c-zr { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.sd-carrier-mini.sd-c-maystro { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
.sd-carrier-mini.sd-c-procolis { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.sd-carrier-mini.sd-c-ecotrack { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.sd-carrier-mini.sd-c-noest { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.sd-carrier-none { color: #94a3b8; font-size: 11.5px; font-style: italic; }

/* Empty state */
.sd-empty-state {
    padding: 80px 20px; text-align: center; color: #64748b;
}
.sd-empty-state i { width: 48px; height: 48px; opacity: .35; margin-bottom: 14px; }
.sd-empty-state .sd-empty-title { font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.sd-empty-state .sd-empty-msg { font-size: 13px; }

/* Confirmation flow office picker (used inline in editor & call center) */
.office-picker-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px 16px; margin-top: 12px;
}
.office-picker-card .opc-label {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: #64748b; border-bottom: none; padding-bottom: 3px;
    display: inline-block; margin-bottom: 10px;
}
.office-picker-card select {
    width: 100%; height: 36px; padding: 0 10px;
    border: 1px solid #cbd5e1; border-radius: 7px; background: #fff;
    font-size: 13px; color: #0f172a; cursor: pointer;
}
.office-picker-card .opc-meta {
    margin-top: 8px; font-size: 11.5px; color: #64748b; line-height: 1.5;
}


/* =====================================================================
   LAYOUT FIX v2 — يلغي جميع قواعد .main-content المتضاربة
   ===================================================================== */

/* تأكيد هيكل الصفحة الرئيسي */
html, body { height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }

/* المحتوى الرئيسي يملأ المساحة كاملة بدون اقتطاع */
html #mainContent.main-content {
    flex: 1 1 auto \!important;
    overflow-x: hidden \!important;
    overflow-y: auto \!important;
    min-height: calc(100vh - 60px) \!important;
    width: 100% \!important;
    box-sizing: border-box \!important;
    margin: 0 \!important;
    padding: 0 \!important;
}

/* كل panel يأخذ عرض كامل ويظهر بشكل صحيح */
html #mainContent .panel {
    display: none;
    width: 100% \!important;
    box-sizing: border-box \!important;
    min-height: 100% \!important;
    padding: 28px 32px 80px \!important;
}

html #mainContent .panel.active,
html #mainContent .panel[style*="display: block"],
html #mainContent .panel[style*="display:block"] {
    display: block \!important;
}

/* panel-overview spécifique — grille du dashboard */
html #mainContent #panel-overview {
    padding: 24px 28px 80px \!important;
}

/* V1 — un panneau qui anime un `transform` devient le bloc contenant de tous ses
   descendants `position: fixed` (dashboard.css: panelSlideIn translateY). Le backdrop
   d'une fenêtre modale montée dans le panneau se mesure alors au panneau, pas à
   l'écran : le haut de la page reste éclairé et la fenêtre se pose hors centre.
   Entrée en opacité seulement — même durée, aucun transform, aucun piège. */
html #mainContent .panel.active {
    animation-name: buldPanelFade;
}

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

/* buld-theme.css range toute classe contenant « progress » en barre de progression :
   `[class*="progress"]` reçoit `border-radius: 980px` et un fond surface-2, les deux en
   `!important`. Or nos listes d'étapes ne sont pas des barres : sur un conteneur de
   468×349 le rayon se réduit en ellipse peinte par-dessus ses propres lignes, et sur un
   titre de 13px il devient une capsule sombre. Accroche par id : la règle du design
   system porte `!important` et gagnerait sinon en spécificité. */
html[data-buld-theme] body #connectModal .connect-progress,
html[data-buld-theme] body #apps-store-progress .apps-store-progress-step,
html[data-buld-theme] body #apps-store-progress .apps-store-progress-title,
html[data-buld-theme] body #apps-store-progress .apps-store-progress-detail {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

html[data-buld-theme] body #apps-store-progress .apps-store-progress-list {
    border-radius: 10px !important;
    overflow: visible !important;
}

/* النافذة الجانبية (spytools) لا تؤثر على mainContent */
#mainContentSpy {
    display: none \!important;
}
body.spytools-open #mainContentSpy {
    display: flex \!important;
    flex: 1 1 auto;
    overflow: hidden;
}
body.spytools-open #mainContent {
    display: none \!important;
}

/* =====================================================================
   DELIVERY TYPE PILLS — في كل صف طلب
   ===================================================================== */
.delivery-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    border: 1px solid transparent;
}
.delivery-pill i { width: 12px; height: 12px; flex-shrink: 0; }
.delivery-pill-home {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.delivery-pill-desk {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}
body.dark .delivery-pill-home { background: rgba(37,99,235,.15); color: #93c5fd; border-color: rgba(37,99,235,.3); }
body.dark .delivery-pill-desk { background: rgba(22,163,74,.15); color: #86efac; border-color: rgba(22,163,74,.3); }

/* ===== Edit Modal — Office Picker (Stop-Desk) ===== */
.eo2-office-picker select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #0f172a;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s;
}
.eo2-office-picker select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.eo2-office-picker select:disabled { background-color: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.eo2-hint {
    margin: 5px 0 0;
    font-size: 11.5px;
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   COMPACT EDIT ORDER MODAL — emo-* (modern, smart, professional)
   ============================================================ */
.emo-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    padding: 20px;
    opacity: 0; transition: opacity .18s ease;
    font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
}
.emo-overlay.show { opacity: 1; }
.emo-card {
    width: 100%; max-width: 640px; max-height: 92vh;
    background: #fff; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15,23,42,.25), 0 4px 16px rgba(15,23,42,.08);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.emo-overlay.show .emo-card { transform: translateY(0) scale(1); }
body.dark .emo-card { background: #1f2937; color: #f1f5f9; }

/* Header */
.emo-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eef1f5;
    gap: 12px;
}
body.dark .emo-head { border-bottom-color: #334155; }
.emo-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.emo-thumb {
    width: 44px; height: 44px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid #e8edf3;
    background: #f8fafc;
}
.emo-thumb-fb { display: grid; place-items: center; font-size: 22px; }
.emo-head-info { min-width: 0; flex: 1; }
.emo-head-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #0f172a;
}
body.dark .emo-head-title { color: #f1f5f9; }
.emo-id {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    background: #f1f5f9; color: #475569;
    padding: 3px 9px; border-radius: 6px;
}
body.dark .emo-id { background: #334155; color: #cbd5e1; }
.emo-head-sub {
    font-size: 12.5px; color: #64748b; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emo-close {
    width: 32px; height: 32px; border-radius: 8px;
    border: none; background: #f1f5f9; color: #64748b;
    cursor: pointer; display: grid; place-items: center;
    transition: all .15s; flex-shrink: 0;
}
.emo-close:hover { background: #e2e8f0; color: #0f172a; }
body.dark .emo-close { background: #334155; color: #cbd5e1; }
body.dark .emo-close:hover { background: #475569; color: #fff; }

/* Tabs */
.emo-tabs {
    display: flex; gap: 2px; padding: 8px 12px;
    border-bottom: 1px solid #eef1f5;
    background: #fafbfc;
    overflow-x: auto;
}
body.dark .emo-tabs { background: #111827; border-bottom-color: #334155; }
.emo-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: none; background: transparent;
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    color: #64748b; cursor: pointer; border-radius: 7px;
    white-space: nowrap; transition: all .15s;
}
.emo-tab:hover { background: #eef2f7; color: #0f172a; }
.emo-tab.active { background: #0f172a; color: #fff; font-weight: 600; }
body.dark .emo-tab { color: #94a3b8; }
body.dark .emo-tab:hover { background: #1f2937; color: #f1f5f9; }
body.dark .emo-tab.active { background: #6366f1; color: #fff; }

/* Body */
.emo-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}
.emo-pane { display: none; }
.emo-pane.active { display: block; animation: emoFade .18s ease; }
@keyframes emoFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

.emo-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 12px;
}
.emo-row:last-child { margin-bottom: 0; }
.emo-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.emo-field.full { grid-column: 1 / -1; }
.emo-field label {
    font-size: 11.5px; font-weight: 600; color: #64748b;
    letter-spacing: .02em;
}
body.dark .emo-field label { color: #94a3b8; }
.emo-req { color: #ef4444; font-weight: 700; }
.emo-field input[type="text"],
.emo-field input[type="tel"],
.emo-field input[type="number"],
.emo-field input[type="date"],
.emo-field select,
.emo-field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px; font-family: inherit;
    color: #0f172a; background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
body.dark .emo-field input,
body.dark .emo-field select,
body.dark .emo-field textarea {
    background: #111827; border-color: #334155; color: #f1f5f9;
}
.emo-field input:focus,
.emo-field select:focus,
.emo-field textarea:focus {
    outline: none; border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.emo-mono { font-family: 'Inter', monospace; letter-spacing: .02em; }
.emo-field textarea { resize: vertical; min-height: 60px; }
.emo-field select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
    padding-right: 30px;
}
[dir="rtl"] .emo-field select { background-position: left 11px center; padding-right: 11px; padding-left: 30px; }

/* Stepper */
.emo-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid #e2e8f0; border-radius: 8px;
    overflow: hidden; background: #fff;
}
body.dark .emo-stepper { background: #111827; border-color: #334155; }
.emo-stepper button {
    width: 32px; border: none; background: #f8fafc;
    cursor: pointer; font-size: 16px; font-weight: 600; color: #475569;
    transition: background .12s;
}
.emo-stepper button:hover { background: #e2e8f0; }
body.dark .emo-stepper button { background: #1f2937; color: #cbd5e1; }
.emo-stepper input {
    width: 50px; text-align: center; border: none !important;
    background: transparent !important; padding: 9px 4px !important;
    box-shadow: none !important;
    font-weight: 600;
}

/* Suffix (DA) */
.emo-suffix {
    display: inline-flex; align-items: stretch;
    border: 1px solid #e2e8f0; border-radius: 8px;
    overflow: hidden; background: #fff;
}
body.dark .emo-suffix { background: #111827; border-color: #334155; }
.emo-suffix input {
    flex: 1; border: none !important; background: transparent !important;
    padding: 9px 11px !important; box-shadow: none !important;
}
.emo-suffix span {
    display: grid; place-items: center;
    padding: 0 11px;
    background: #f8fafc; color: #64748b;
    font-size: 11.5px; font-weight: 600;
    border-left: 1px solid #e2e8f0;
}
body.dark .emo-suffix span { background: #1f2937; color: #94a3b8; border-left-color: #334155; }
[dir="rtl"] .emo-suffix span { border-left: none; border-right: 1px solid #e2e8f0; }

/* Smart segmented (delivery type) */
.emo-segment {
    display: grid; grid-template-columns: 1fr 1fr;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 4px; gap: 4px;
}
body.dark .emo-segment { background: #111827; border-color: #334155; }
.emo-segment input[type="radio"] { display: none; }
.emo-segment label {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: 7px;
    cursor: pointer; transition: all .15s;
    color: #64748b;
}
.emo-segment label > i { flex-shrink: 0; color: #94a3b8; }
.emo-segment label > span {
    display: flex; flex-direction: column; line-height: 1.2;
    min-width: 0;
}
.emo-segment label strong { font-size: 13px; font-weight: 600; color: #0f172a; }
body.dark .emo-segment label strong { color: #f1f5f9; }
.emo-segment label small { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.emo-segment input:checked + label {
    background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px #6366f1;
}
.emo-segment input:checked + label > i { color: #6366f1; }
body.dark .emo-segment input:checked + label { background: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px #818cf8; }

/* Carriers compact */
.emo-carriers {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.emo-carrier {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; cursor: pointer;
    transition: all .15s;
    font-size: 12.5px; font-weight: 500; color: #475569;
}
body.dark .emo-carrier { background: #111827; border-color: #334155; color: #cbd5e1; }
.emo-carrier input { display: none; }
.emo-carrier img, .emo-clogo-fb {
    width: 22px; height: 22px; border-radius: 5px; object-fit: contain;
    display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.emo-carrier:hover { border-color: #cbd5e1; }
.emo-carrier.active { border-color: #6366f1; background: #eef2ff; color: #4338ca; }
body.dark .emo-carrier.active { background: rgba(99,102,241,.15); color: #c7d2fe; }

/* Alert */
.emo-alert {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 12px;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fde68a; border-radius: 8px;
    font-size: 12px;
}
body.dark .emo-alert { background: rgba(251,191,36,.12); color: #fcd34d; border-color: rgba(251,191,36,.3); }

/* Status chips */
.emo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.emo-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid #e2e8f0; background: #fff;
    font-family: inherit; font-size: 12px; font-weight: 500; color: #475569;
    cursor: pointer; transition: all .15s;
}
body.dark .emo-chip { background: #111827; border-color: #334155; color: #cbd5e1; }
.emo-chip:hover { border-color: #cbd5e1; }
.emo-chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--chip-dot, #94a3b8);
}
.emo-chip.active {
    border-color: var(--chip-dot, #0f172a);
    background: color-mix(in srgb, var(--chip-dot, #0f172a) 12%, white);
    color: var(--chip-dot, #0f172a);
    font-weight: 600;
}
body.dark .emo-chip.active { background: color-mix(in srgb, var(--chip-dot, #fff) 18%, #111827); }

/* Footer */
.emo-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 18px;
    border-top: 1px solid #eef1f5;
    background: #fafbfc;
    gap: 12px;
}
body.dark .emo-foot { background: #111827; border-top-color: #334155; }
.emo-total-mini {
    display: flex; align-items: baseline; gap: 7px;
    min-width: 0; flex-wrap: wrap;
}
.emo-total-lbl { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.emo-total-mini strong { font-size: 16px; font-weight: 700; color: #0f172a; font-family: 'Inter', sans-serif; }
body.dark .emo-total-mini strong { color: #f1f5f9; }
.emo-total-sub { font-size: 11px; color: #94a3b8; font-family: 'Inter', sans-serif; }

.emo-foot-actions { display: flex; gap: 8px; flex-shrink: 0; }
.emo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s; border: none;
}
.emo-btn-ghost { background: transparent; color: #64748b; }
.emo-btn-ghost:hover { background: #f1f5f9; color: #0f172a; }
body.dark .emo-btn-ghost { color: #cbd5e1; }
body.dark .emo-btn-ghost:hover { background: #334155; color: #fff; }
.emo-btn-primary { background: #0f172a; color: #fff; }
.emo-btn-primary:hover { background: #1e293b; box-shadow: 0 4px 12px rgba(15,23,42,.25); }
body.dark .emo-btn-primary { background: #6366f1; }
body.dark .emo-btn-primary:hover { background: #4f46e5; }

/* Responsive */
@media (max-width: 580px) {
    .emo-row { grid-template-columns: 1fr; }
    .emo-segment { grid-template-columns: 1fr; }
    .emo-card { max-height: 96vh; }
}

/* ============================================================
   DOMAINS PANEL — Dark mode support + Yaya design system theme
   ============================================================ */
body.dark #panel-domains { color: #e8edf4; }
body.dark .dom-title,
body.dark .dom-title-ico { color: #f1f5f9; }
body.dark .dom-subtitle { color: #94a3b8; }

body.dark .dom-card {
    background: #3a363f;
    border-color: #5a5560;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
body.dark .dom-table-head {
    background: #4f4a54;
    border-bottom-color: #5a5560;
    color: #94a3b8;
}
body.dark .dom-table-body { background: #3a363f; }
body.dark .dom-row { border-bottom-color: #4f4a54; }
body.dark .dom-row:hover { background: #4f4a54; }
body.dark .dom-row-sub { background: #252426; }
body.dark .dom-row-sub:hover { background: #2f2e30; }
body.dark .dom-row-name { color: #f1f5f9; }
body.dark .dom-row-name i { color: #94a3b8; }
body.dark .dom-badge-primary {
    background: #4f4a54; border-color: #635e69; color: #cbd5e1;
}
body.dark .dom-status-warn { background: #4f4a54; color: #cbd5e1; }
body.dark .dom-status-ok { background: rgba(16,185,129,.18); color: #6ee7b7; }
body.dark .dom-status-err { background: rgba(239,68,68,.18); color: #fca5a5; }
body.dark .dom-status-pending { background: rgba(245,158,11,.18); color: #fcd34d; }

body.dark .dom-icon-btn { color: #94a3b8; }
body.dark .dom-icon-btn:hover { background: #4f4a54; color: #f1f5f9; }
body.dark .dom-icon-btn.danger:hover { background: rgba(239,68,68,.18); color: #fca5a5; }

body.dark .dom-empty { color: #94a3b8; }
body.dark .dom-help-link { color: #93c5fd; }

/* Buttons in dark mode — keep contrast */
body.dark .dom-btn-primary {
    background: #f1f5f9; color: #0f172a; border-color: #f1f5f9;
    text-shadow: none;
}
body.dark .dom-btn-primary:hover { background: #e2e8f0; border-color: #e2e8f0; }
body.dark .dom-btn-secondary {
    background: #4f4a54; color: #e8edf4; border-color: #5a5560;
}
body.dark .dom-btn-secondary:hover { background: #5a5560; border-color: #635e69; }

/* Dropdown */
body.dark .dom-dropdown-menu {
    background: #3a363f; border-color: #5a5560;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
body.dark .dom-dropdown-item { color: #e8edf4; }
body.dark .dom-dropdown-item:hover { background: #4f4a54; }
body.dark .dom-dropdown-title { color: #f1f5f9; }
body.dark .dom-dropdown-desc { color: #94a3b8; }

/* Modal */
body.dark .dom-modal {
    background: #3a363f;
    box-shadow: 0 25px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);
}
body.dark .dom-modal-head { border-bottom-color: #5a5560; }
body.dark .dom-modal-head h3 { color: #f1f5f9; }
body.dark .dom-modal-close { color: #94a3b8; }
body.dark .dom-modal-close:hover { background: #4f4a54; color: #f1f5f9; }
body.dark .dom-modal-foot {
    background: #252426; border-top-color: #5a5560;
}
body.dark .dom-label { color: #f1f5f9; }
body.dark .dom-modal input,
body.dark .dom-modal select,
body.dark .dom-modal textarea {
    background: #1f1e20; border-color: #635e69; color: #f1f5f9;
}
body.dark .dom-modal input::placeholder { color: #6b7280; }