/*
 * ═══════════════════════════════════════════════════════════════
 * WhatsAPI — Theme Variables v2.0
 * غيّر هذا الملف فقط لتغيير شكل المنصة بالكامل
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    /* ── Brand / Primary ── */
    --primary: #00ad6a;
    --primary-hover: #009d5e;
    --primary-dark: #008a52;
    --primary-light: rgba(0, 173, 106, 0.12);
    --primary-rgb: 0, 173, 106;
    --primary-gradient: linear-gradient(135deg, #00ad6a, #009d5e);
    --primary-shadow: 0 4px 18px rgba(0, 173, 106, 0.35);

    /* ── Secondary ── */
    --secondary: #1a1a2e;
    --secondary-light: rgba(26, 26, 46, 0.08);

    /* ── Status Colors ── */
    --success: #28c76f;
    --success-light: rgba(40, 199, 111, 0.12);
    --success-rgb: 40, 199, 111;

    --danger: #ea5455;
    --danger-light: rgba(234, 84, 85, 0.12);
    --danger-rgb: 234, 84, 85;

    --warning: #ff9f43;
    --warning-light: rgba(255, 159, 67, 0.12);
    --warning-rgb: 255, 159, 67;

    --info: #00cfe8;
    --info-light: rgba(0, 207, 232, 0.12);
    --info-rgb: 0, 207, 232;

    --purple: #7367f0;
    --purple-light: rgba(115, 103, 240, 0.12);

    --orange: #ff6f22;
    --orange-light: rgba(255, 111, 34, 0.12);

    /* ── Light Theme (Default) ── */
    --bg-body: #f7f8fa;
    --bg-card: #ffffff;
    --bg-sidebar: #1a1a2e;
    --bg-input: #ffffff;
    --bg-hover: rgba(0, 173, 106, 0.04);
    --bg-hover-strong: rgba(0, 173, 106, 0.08);
    --bg-tooltip: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.4);
    --bg-offcanvas: #ffffff;
    --bg-bottom-nav: rgba(255, 255, 255, 0.95);
    --bg-ticker: #ffffff;
    --bg-muted: #f1f3f6;
    --bg-skeleton: #e8e8e8;

    /* ── Text Colors ── */
    --text-color: #6e6b7b;
    --text-heading: #1a1a1a;
    --text-muted: #a1acb8;
    --text-white: #ffffff;
    --text-link: var(--primary);
    --text-sidebar: #8b8fa3;
    --text-sidebar-heading: #ffffff;
    --text-sidebar-section: #555770;
    --text-placeholder: #b4b7bd;

    /* ── Borders ── */
    --border-color: #eff0f2;
    --border-light: rgba(0, 0, 0, 0.02);
    --border-input: #e4e6ef;
    --border-active: var(--primary);
    --border-dashed: #e0e0e0;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 50px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.02);
    --shadow-bottom-nav: 0 -2px 20px rgba(0, 0, 0, 0.05);
    --shadow-scroll-card: 0 10px 20px rgba(0, 0, 0, 0.05);

    /* ── Font ── */
    --font-family: 'Cairo', 'Segoe UI', sans-serif;
    --font-size-2xs: 0.5rem;
    --font-size-xs: 0.5625rem;
    --font-size-sm: 0.625rem;
    --font-size-base: 0.6875rem;
    --font-size-md: 0.75rem;
    --font-size-lg: 0.875rem;
    --font-size-xl: 1rem;
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.875rem;

    /* ── Radius ── */
/*
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 30px;
    --radius-full: 50%;
    --radius-pill: 9999px;
*/
    
    
    
    
    /* بعد — أقل انحناء */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 12px;
--radius-2xl: 14px;
--radius-3xl: 18px;
--radius-full: 50%;
--radius-pill: 20px;   /* ← ده الأهم — بدل 9999px بيبقى أوفال جداً */
    
    
    
    
    
    
    
    

    /* ── Layout ── */
    --sidebar-w: 260px;
    --topbar-h: 70px;
    --bottom-nav-h: 80px;
    --status-bar-h: 28px;

    /* ── Transitions ── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-Index ── */
    /* الترتيب من الأسفل للأعلى */
    --z-dropdown:    100;
    --z-sticky:      200;
    --z-sidebar:     400;
    --z-topbar:      500;
    --z-bottom-nav:  600;
    --z-overlay:     700;   /* overlay خلف الـ offcanvas */
    --z-offcanvas:   800;
    --z-chat-modal:  900;   /* مودال المحادثة */
    --z-toast:      1000;   /* التوست يطلع فوق المودال */
    --z-modal:      1100;   /* كل .modal-overlay + .bottom-sheet-overlay */
    --z-swal:       9999;   /* SweetAlert2 — فوق الكل دائماً */

    /* ── Scroll Card Presets ── */
    --card-green: #00ad6a;
    --card-blue-from: #1d4ed8;
    --card-blue-to: #4338ca;
    --card-dark: #1a1a1a;
    --card-orange: #f97316;
}

/* ═══════════════════════════════════
   Dark Theme Override
   ═══════════════════════════════════ */
.dark-style {
    --bg-body: #0f0f23;
    --bg-card: #1a1a2e;
    --bg-sidebar: #12122a;
    --bg-input: #1a1a2e;
    --bg-hover: rgba(0, 173, 106, 0.08);
    --bg-hover-strong: rgba(0, 173, 106, 0.15);
    --bg-tooltip: #252540;
    --bg-offcanvas: #1a1a2e;
    --bg-bottom-nav: rgba(15, 15, 35, 0.95);
    --bg-ticker: #1a1a2e;
    --bg-muted: #252540;
    --bg-skeleton: #2d2d50;

    --text-color: #cfd3ec;
    --text-heading: #e7e3fc;
    --text-muted: #7c82a6;
    --text-placeholder: #555770;

    --border-color: #2d2d50;
    --border-light: rgba(255, 255, 255, 0.04);
    --border-input: #2d2d50;
    --border-dashed: #2d2d50;

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.15);
    --shadow-bottom-nav: 0 -2px 20px rgba(0, 0, 0, 0.3);
    --shadow-scroll-card: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ── Dark-specific component tweaks ── */
.dark-style .icon-circle-btn { background: var(--bg-muted); }
.dark-style .quick-action-btn:not(.quick-action-primary) { background: var(--bg-card); border-color: var(--border-color); }
.dark-style .services-icon { background: rgba(255,255,255,0.05); border-color: var(--border-color); }
.dark-style .channel-bar-track { background: #2d2d50; }
.dark-style .timeline-line { background: var(--border-color); }
.dark-style .timeline-dot-wrap { background: var(--bg-card); border-color: var(--border-color); }
.dark-style .chat-item:active { background: var(--bg-hover); }
.dark-style .bottom-sheet-body { background: var(--bg-card); }
.dark-style .alert-banner { background: rgba(0, 173, 106, 0.08); border-color: rgba(0, 173, 106, 0.15); }
.dark-style .ticker-wrap { border-color: rgba(0, 173, 106, 0.1); }
.dark-style .oppo-card,
.dark-style .card { border-color: var(--border-color); }
.dark-style .circle-progress .bg-circle { stroke: #2d2d50; }
.dark-style .invoice-card.cancelled { background: rgba(255,255,255,0.02); }