:root {   
  /* Theme Colors */
  --primary-color: #00f3ff;        
  --primary: 0, 243, 255;          
  
  /* Text Colors */
  --text-strong-color: rgb(255, 255, 255);     
  --text-strong: 255, 255, 255;
  --text-soft-color: rgb(215, 215, 215);      
  --text-soft: 215 , 215, 215;
  
  --border-color: rgb(54, 54, 54);
  --border: 55, 55, 55 ;


/* Glass Header */
  --header-glass-bg: rgba(0, 0, 0, 0.850);
  --header-glass-border: rgb(44, 44, 44);
  --header-glass-blur: blur(10px) saturate(200%);
  
  /* Glass Sidebar */
  --menu-glass-bg: rgba(0, 0, 0, 0.850);
  --menu-glass-border: rgb(44, 44, 44);
  --menu-glass-blur: blur(10px) saturate(200%);
  
  /* Glass للبوكسات العامة */
  --glass-bg: rgba(18, 18, 18, 0.6);
  --glass-border: rgba(255, 255, 255, 0.125);
  --glass-blur: blur(10px) saturate(200%);





  /* Box Colors */
  --box-dark-color: oklch(100% 0.00011 271.152 / 0);
  --box-dark: 3, 3, 3;
  --box-light-color: oklch(0% 0 0 / 0.614);
  --box-light: 0, 0, 0 ;
  
  /* ===== (Status Colors) ===== */
  --success-color: #22c55e;          
  --success: 34, 197, 94;
  --info-color: #3b82f6;            
  --info: 59, 130, 246;
  --warning-color: #eab308;          
  --warning: 234, 179, 8;
  --danger-color: #ef4444;           
  --danger: 239, 68, 68;
  --scheduled-color: #a855f7;        
  --scheduled: 168, 85, 247;
  
  /* ===== (Service Icons) ===== */
  --icon-blue-color: #ffffff;        /* Web Dev */
  --icon-blue: 96, 165, 250;
  --icon-purple-color: #a855f7;      /* E-Commerce */
  --icon-purple: 168, 85, 247;
  --icon-green-color: #22c55e;       /* WordPress */
  --icon-green: 34, 197, 94;
  --icon-pink-color: #ec4899;        /* Design */
  --icon-pink: 236, 72, 153;
  --icon-orange-color: #fb923c;      /* Editing */
  --icon-orange: 251, 146, 60;
  --icon-cyan-color: #06b6d4;        /* Photography */
  --icon-cyan: 6, 182, 212;
  --icon-red-color: #ef4444;         /* Social Media */
  --icon-red: 239, 68, 68;
  --icon-yellow-color: #eab308;      /* Branding */
  --icon-yellow: 234, 179, 8;
  --icon-indigo-color: #6366f1;      /* Marketing */
  --icon-indigo: 99, 102, 241;
  
  /* =====  (Gradient Colors) ===== */
  --gradient-green-start-color: #22c55e;
  --gradient-green-start: 34, 197, 94;
  --gradient-green-end-color: #10b981;
  --gradient-green-end: 16, 185, 129;
  --gradient-purple-start-color: #a855f7;
  --gradient-purple-start: 168, 85, 247;
  --gradient-purple-end-color: #ec4899;
  --gradient-purple-end: 236, 72, 153;
}

body.theme-cyan { 
  --primary-color: #1281cb; 
  --primary: 0, 243, 255; 
}
body.theme-purple { 
  --primary-color: #ffffff; 
  --primary: 255, 255, 255; 
}
body.theme-green { 
  --primary-color: rgb(226, 194, 14); 
  --primary: 226, 194, 14; 
}
body.theme-orange { 
  --primary-color: #a600ff; 
  --primary: 166, 0, 255; 
}
body.theme-pink { 
  --primary-color: #ff0080; 
  --primary: 255, 0, 128; 
}

/* Base */
body {
    background-color: transparent; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgb(var(--box-dark)); }
::-webkit-scrollbar-thumb { background: rgba(var(--primary), 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary), 0.8); }

/* Components */
.glass {
    background-color: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass:hover {
    border-color: rgba(var(--primary), 0.5);
    box-shadow: 0 0 20px rgba(var(--primary), 0.1);
}

.glass-dark {
    background: rgba(var(--box-dark), 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--border), 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

.clean-bg-container {
    position: fixed;       
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -999;       
    background-color: var(--glass-bg); 
    overflow: hidden;      
    pointer-events: none;  
}

.clean-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(200px);    
    opacity: 0.6;          
    z-index: -99;
}

.orb-top-left {
    top: -100px;
    left: -100px;
    width: 20vw;
    height: 20vw;
    background: var(--primary-color); 
}

.orb-bottom-right {
    bottom: -100px;
    right: -100px;
    width: 20vw;
    height: 20vw;
    background: var(--primary-color); 
}

.clean-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2; 
    
    background-size: 60px 60px;
    background-image: 
        linear-gradient(to right, rgb(40, 40, 40) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(40, 40, 40) 1px, transparent 1px);
    
    mask-image: radial-gradient(circle, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
}
.glass-header {
    background-color: var(--header-glass-bg);
    backdrop-filter: var(--header-glass-blur);
    -webkit-backdrop-filter: var(--header-glass-blur);
    border-bottom: 1px solid var(--header-glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.glass-menu {
    background-color: var(--menu-glass-bg);
    backdrop-filter: var(--menu-glass-blur);
    -webkit-backdrop-filter: var(--menu-glass-blur);
    border-right: 1px solid var(--menu-glass-border);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}



#bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#boot-screen { transition: opacity 0.5s ease; }

/* Animations */
.pipeline-dash { stroke-dasharray: 10; animation: dashDraw 1s linear infinite; }
@keyframes dashDraw { to { stroke-dashoffset: -20; } }
.rotate-180 { transform: rotate(180deg); }

/* Typography & Utils */
.brand-text { font-family: 'Rajdhani', sans-serif; letter-spacing: 0.1em; }
.brand-x { color: rgb(var(--primary)); font-weight: 800; }
#mobile-drawer { width: 60%; max-width: 300px; } 

/* Reusable Classes */
.nav-link { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  padding: 0.625rem 1rem; 
  border-radius: 0.5rem; 
  color: rgb(var(--text-soft)); 
  transition: color 0.15s, background-color 0.15s; 
}
.nav-link:hover { 
  color: rgb(var(--text-strong)); 
  background-color: rgba(var(--border), 0.05); 
}

.footer-btn { 
  flex: 1; 
  text-align: center; 
  padding: 0.625rem 0.5rem; 
  border-radius: 0.375rem; 
  background-color: rgba(var(--border), 0.05); 
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--text-soft)); 
  transition: all 0.15s;
}
.footer-btn:hover { 
  background-color: rgba(var(--border), 0.1);
  color: rgb(var(--text-strong));
}

.mobile-link { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  padding: 0.75rem; 
  border-radius: 0.5rem; 
  color: rgb(var(--text-soft)); 
  transition: background-color 0.15s; 
}
.mobile-link:hover { 
  background-color: rgba(var(--border), 0.05); 
}

.theme-btn { 
  width: 1rem; 
  height: 1rem; 
  border-radius: 9999px; 
  transition: transform 0.15s; 
  cursor: pointer; 
}
.theme-btn:hover { 
  transform: scale(1.25); 
}

.sidebar-expanded .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.service-card { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 0.5rem; 
  padding: 1rem; 
  border-radius: 0.75rem; 
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all 0.3s; 
  cursor: pointer; 
  text-align: center; 
}
.service-card:hover { 
  border-color: rgba(var(--primary), 0.5);
  box-shadow: 0 0 20px rgba(var(--primary), 0.1);
}

.service-card:hover { 
  border-color: rgba(var(--primary), 0.5); 
  box-shadow: 0 0 20px rgba(var(--primary), 0.1); 
  background: linear-gradient(180deg, rgba(var(--box-light), 0.85) 0%, rgba(var(--box-dark), 0.9) 100%);
}
.service-icon { 
  padding: 0.5rem; 
  border-radius: 9999px; 
  transition: transform 0.3s; 
}
.service-card:hover .service-icon { 
  transform: scale(1.1); 
}

.pipeline-step { 
  position: relative; 
  z-index: 10; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.75rem; 
}
.step-icon { 
  width: 2.5rem; 
  height: 2.5rem; 
  border-radius: 0.5rem; 
  background: rgba(var(--box-light), 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--border), 0.1); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: all 0.3s; 
}
.step-label { 
  font-size: 10px; 
  font-family: 'JetBrains Mono', monospace; 
  color: rgb(var(--text-soft)); 
  transition: color 0.3s; 
}

@media (max-width: 768px) {
    header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        will-change: transform;
        touch-action: none;
        pointer-events: auto;
    }
    
    header * {
        pointer-events: auto;
        touch-action: auto;
    }
    
    body {
        overscroll-behavior-y: contain;
    }
}

/* ========================================== */
/* Sidebar Toggle Styles (Desktop Only) */
/* ========================================== */

/* ========================================== */
/* Sidebar Toggle Styles (Desktop Only) */
/* ========================================== */

@media (min-width: 768px) {
    /* Sidebar Collapsed - 70px width */
    #sidebar.sidebar-collapsed {
        width: 70px;
    }
    
    #sidebar.sidebar-collapsed .sidebar-icon {
        width: 2rem;
        height: 2rem;
    }
    
    #sidebar.sidebar-collapsed .sidebar-toggle-btn {
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #sidebar.sidebar-collapsed .sidebar-text {
        display: none;
    }
    
    #sidebar.sidebar-collapsed .sidebar-text-only {
        display: none;
    }
    
    #sidebar.sidebar-collapsed .nav-link {
        justify-content: center;
        padding: 0.75rem;
    }
    
    #sidebar.sidebar-collapsed .sidebar-footer {
        padding: 0.5rem;
    }
    
    /* Sidebar Expanded - 280px width */
    #sidebar.sidebar-expanded {
        width: 280px;
    }
    
    #sidebar.sidebar-expanded .sidebar-icon {
        width: 3rem;
        height: 3rem;
    }
    
    #sidebar.sidebar-expanded .sidebar-toggle-btn {
        left: 0.5rem;
        transform: translateY(-50%);
    }
    
    #sidebar.sidebar-expanded .sidebar-text {
        display: inline;
    }
    
    #sidebar.sidebar-expanded .sidebar-text-only {
        display: block;
    }
}

@media (max-width: 767px) {
    #sidebar {
        display: none !important;
    }
}


@supports (height: 100dvh) {
    #root, .flex.h-screen {
        height: 100dvh !important;
    }
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

main {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    body.menu-open main {
        overflow: hidden;
        touch-action: none;
    }
    
    header {
        position: sticky;
        top: 0;
        z-index: 30;
    }
}
.pipeline-dash {
  stroke-dasharray: 10 10; 
  
  animation: pipelineFlow 1s linear infinite;
}

@keyframes pipelineFlow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -20; 
  }
}




@media screen and (max-width: 768px) {
    
    .orb-top-left, .orb-bottom-right {
        width: 230px;     
        height: 230px;
        opacity: 0.8;      
        filter: blur(100px); 
        
        transform: translateZ(0); 
        will-change: transform, opacity;
    }

    .orb-top-left {
        top: -40px; 
        left: -40px;
    }

    .orb-bottom-right {
        bottom: -40px;
        right: -40px;
    }
}