/*
Theme Name: Profit CRM
Theme URI: https://profitcrm.com
Author: Fekry Farok
Description: Custom theme for Profit CRM.
Version: 1.12.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Tailwind Base (Partial) */
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

/* Custom Variables */
:root {
    /* Profit CRM Brand Colors */
    --background: 210 25% 97%;
    --foreground: 220 30% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 30% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 30% 10%;
    --primary: 220 60% 12%;
    --primary-foreground: 0 0% 100%;
    --accent: 18 100% 60%;
    --accent-foreground: 0 0% 100%;
    --secondary: 180 60% 45%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 20% 94%;
    --muted-foreground: 220 15% 45%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 20% 88%;
    --input: 210 20% 88%;
    --ring: 18 100% 60%;
    --radius: 0.5rem;

    /* Gradients from React App */
    --gradient-hero: linear-gradient(135deg, hsl(220 60% 12%) 0%, hsl(220 50% 20%) 50%, hsl(240 40% 25%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(18 100% 60%) 0%, hsl(35 100% 55%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 25% 98%) 100%);
    --gradient-dark: linear-gradient(180deg, hsl(220 60% 12%) 0%, hsl(220 50% 8%) 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px -2px hsl(220 60% 12% / 0.08);
    --shadow-md: 0 8px 24px -4px hsl(220 60% 12% / 0.12);
    --shadow-lg: 0 16px 48px -8px hsl(220 60% 12% / 0.16);
    --shadow-accent: 0 8px 32px -4px hsl(18 100% 60% / 0.35);

    /* Sidebar */
    --sidebar-background: 220 60% 12%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 18 100% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 50% 20%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 40% 25%;
    --sidebar-ring: 18 100% 60%;
}

.dark {
    --background: 220 30% 6%;
    --foreground: 210 25% 95%;
    --card: 220 30% 10%;
    --card-foreground: 210 25% 95%;
    --popover: 220 30% 10%;
    --popover-foreground: 210 25% 95%;
    --primary: 18 100% 60%;
    --primary-foreground: 220 60% 12%;
    --secondary: 180 60% 45%;
    --secondary-foreground: 0 0% 100%;
    --muted: 220 25% 15%;
    --muted-foreground: 210 15% 60%;
    --accent: 18 100% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 25% 18%;
    --input: 220 25% 18%;
    --ring: 18 100% 60%;
}

* {
    border-color: hsl(var(--border));
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsl(var(--background));
    font-family: Inter, Cairo, sans-serif;
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* RTL Support */
[dir="rtl"] {
    font-family: 'Cairo', sans-serif;
}

[dir="ltr"] {
    font-family: 'Inter', sans-serif;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* Custom Utilities */
.hero-pattern {
    background-image:
        radial-gradient(circle at 20% 80%, hsl(18 100% 60% / 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, hsl(180 60% 45% / 0.1) 0%, transparent 50%),
        linear-gradient(135deg, hsl(220 60% 12%) 0%, hsl(220 50% 18%) 100%);
}

.network-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.card-hover {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.card-hover:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    box-shadow: var(--shadow-lg);
}

.btn-accent {
    background: var(--gradient-accent);
    border-radius: var(--radius);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    color: hsl(var(--accent-foreground));
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-accent);
}

.btn-accent:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px -4px hsl(18 100% 60% / 0.45);
}

.gradient-text {
    background: linear-gradient(135deg, hsl(18 100% 60%) 0%, hsl(35 100% 55%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-gradient {
    background: var(--gradient-dark);
}

.hero-section {
    position: relative;
    background: var(--gradient-hero);
    color: white;
    padding-top: 8rem;
    padding-bottom: 6rem;
    overflow: hidden;
}

/* Ensure text colors in hero are white/light */
.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

.hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    max-width: 600px;
}

.stats-grid {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.stat-item {
    text-align: left;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: hsl(var(--accent));
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}