@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700;800&family=Domine:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=Josefin+Sans:wght@400;500;600;700&family=Karla:wght@400;500;600;700;800&family=Lato:wght@400;700;900&family=Lora:wght@400;500;600;700&family=Merriweather:wght@400;700;900&family=Montserrat:wght@400;500;600;700;800;900&family=Mulish:wght@400;500;600;700;800;900&family=Nunito:wght@400;500;600;700;800;900&family=Open+Sans:wght@400;500;600;700;800&family=PT+Sans:wght@400;700&family=Poppins:wght@400;500;600;700;800;900&family=Raleway:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&family=Rubik:wght@400;500;600;700;800;900&family=Source+Sans+3:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Work+Sans:wght@400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@100..900&family=Cairo:wght@200..1000&family=Tajawal:wght@200..900&family=Almarai:wght@300..800&family=IBM+Plex+Sans+Arabic:wght@100..700&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Changa:wght@200..800&family=El+Messiri:wght@400..700&family=Harmattan:wght@400;700&family=Markazi+Text:wght@400..700&family=Reem+Kufi:wght@400..700&family=Scheherazade+New:wght@400;700&family=Readex+Pro:wght@200..700&family=Lateef:wght@200..800&family=Mirza:wght@400..700&family=Aref+Ruqaa:wght@400;700&family=Katibeh&family=Lemonada:wght@300..700&family=Jomhuria&family=Blaka&display=swap");

:root {
    --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --background: #f6f7fb;
    --foreground: #111827;
    --card: #ffffff;
    --sidebar: #ffffff;
    --topbar: rgba(255, 255, 255, 0.88);
    --muted: #eef2f7;
    --muted-light: #f4f6fb;
    --muted-foreground: #64748b;
    --border: #dbe3ee;
    --input: #ffffff;
    --primary: #1877f2;
    --primary-foreground: #ffffff;
    --primary-light: color-mix(in srgb, var(--primary) 12%, transparent);
    --primary-hover: color-mix(in srgb, var(--primary) 88%, black);
    --accent: #42a5f5;
    --amber: #d97706;
    --amber-soft: #fef3c7;
    --focus-ring: color-mix(in srgb, var(--primary) 18%, transparent);
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --success-soft: #dcfce7;
    --warning-soft: #fef3c7;
    --danger-soft: #fee2e2;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
    --shadow: 0 4px 10px rgb(15 23 42 / 0.08);
    --shadow-md: 0 8px 20px rgb(15 23 42 / 0.10);
    --shadow-lg: 0 18px 45px rgb(15 23 42 / 0.14);
    --shadow-xl: 0 28px 60px rgb(15 23 42 / 0.20);
    --shadow-glow: 0 0 0 4px var(--focus-ring), 0 8px 24px rgb(15 23 42 / 0.12);
}

html[data-mode="dark"] {
    --background: #0b1020;
    --foreground: #eef2ff;
    --card: #12192b;
    --sidebar: #0f172a;
    --topbar: rgba(15, 23, 42, 0.88);
    --muted: #1f2a3d;
    --muted-light: #182133;
    --muted-foreground: #aab6ca;
    --border: #2d3a52;
    --input: #101827;
    --primary-foreground: #ffffff;
    --primary-light: color-mix(in srgb, var(--primary) 18%, transparent);
    --primary-hover: color-mix(in srgb, var(--primary) 80%, white);
    --amber: #fbbf24;
    --amber-soft: color-mix(in srgb, #fbbf24 20%, transparent);
    --success-soft: color-mix(in srgb, #22c55e 20%, transparent);
    --warning-soft: color-mix(in srgb, #f59e0b 20%, transparent);
    --danger-soft: color-mix(in srgb, #ef4444 20%, transparent);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.25);
    --shadow: 0 4px 10px rgb(0 0 0 / 0.20);
    --shadow-md: 0 8px 20px rgb(0 0 0 / 0.28);
    --shadow-lg: 0 18px 45px rgb(0 0 0 / 0.35);
    --shadow-xl: 0 28px 60px rgb(0 0 0 / 0.45);
    --shadow-glow: 0 0 0 4px var(--focus-ring), 0 8px 24px rgb(0 0 0 / 0.30);
}

html[data-font="space-mono"] { --font-body: "Space Mono", monospace; }
html[data-font="josefin-sans"] { --font-body: "Josefin Sans", Arial, sans-serif; }
html[data-font="domine"] { --font-body: Domine, Georgia, serif; }
html[data-font="cabin"] { --font-body: Cabin, Arial, sans-serif; }
html[data-font="karla"] { --font-body: Karla, Arial, sans-serif; }
html[data-font="mulish"] { --font-body: Mulish, Arial, sans-serif; }
html[data-font="work-sans"] { --font-body: "Work Sans", Arial, sans-serif; }
html[data-font="rubik"] { --font-body: Rubik, Arial, sans-serif; }
html[data-font="nunito"] { --font-body: Nunito, Arial, sans-serif; }
html[data-font="raleway"] { --font-body: Raleway, Arial, sans-serif; }
html[data-font="pt-sans"] { --font-body: "PT Sans", Arial, sans-serif; }
html[data-font="merriweather"] { --font-body: Merriweather, Georgia, serif; }
html[data-font="lora"] { --font-body: Lora, Georgia, serif; }
html[data-font="montserrat"] { --font-body: Montserrat, Arial, sans-serif; }
html[data-font="poppins"] { --font-body: Poppins, Arial, sans-serif; }
html[data-font="source-sans-3"] { --font-body: "Source Sans 3", Arial, sans-serif; }
html[data-font="source-sans"] { --font-body: "Source Sans 3", Arial, sans-serif; }
html[data-font="open-sans"] { --font-body: "Open Sans", Arial, sans-serif; }
html[data-font="lato"] { --font-body: Lato, Arial, sans-serif; }
html[data-font="roboto"] { --font-body: Roboto, Arial, sans-serif; }
html[data-font="inter"] { --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }

/* Arabic Fonts */
html[data-font="noto-sans-arabic"] { --font-body: 'Noto Sans Arabic', sans-serif; }
html[data-font="cairo"] { --font-body: 'Cairo', sans-serif; }
html[data-font="tajawal"] { --font-body: 'Tajawal', sans-serif; }
html[data-font="almarai"] { --font-body: 'Almarai', sans-serif; }
html[data-font="ibm-plex-sans-arabic"] { --font-body: 'IBM Plex Sans Arabic', sans-serif; }
html[data-font="amiri"] { --font-body: 'Amiri', serif; }
html[data-font="changa"] { --font-body: 'Changa', sans-serif; }
html[data-font="el-messiri"] { --font-body: 'El Messiri', sans-serif; }
html[data-font="harmattan"] { --font-body: 'Harmattan', sans-serif; }
html[data-font="markazi-text"] { --font-body: 'Markazi Text', serif; }
html[data-font="reem-kufi"] { --font-body: 'Reem Kufi', sans-serif; }
html[data-font="scheherazade-new"] { --font-body: 'Scheherazade New', serif; }
html[data-font="readex-pro"] { --font-body: 'Readex Pro', sans-serif; }
html[data-font="lateef"] { --font-body: 'Lateef', cursive; }
html[data-font="mirza"] { --font-body: 'Mirza', cursive; }
html[data-font="aref-ruqaa"] { --font-body: 'Aref Ruqaa', cursive; }
html[data-font="katibeh"] { --font-body: 'Katibeh', cursive; }
html[data-font="lemonada"] { --font-body: 'Lemonada', cursive; }
html[data-font="jomhuria"] { --font-body: 'Jomhuria', cursive; }
html[data-font="blaka"] { --font-body: 'Blaka', cursive; }

html[data-theme="facebook"] {
    --primary: #1877f2;
    --accent: #42a5f5;
}

html[data-theme="instagram"] {
    --primary: #c13584;
    --accent: #f77737;
}

html[data-theme="whatsapp"] {
    --primary: #25d366;
    --primary-foreground: #052e16;
    --accent: #128c7e;
}

html[data-theme="youtube"] {
    --primary: #ff0000;
    --accent: #282828;
}

html[data-theme="spotify"] {
    --primary: #1db954;
    --primary-foreground: #052e16;
    --accent: #191414;
}

html[data-theme="netflix"] {
    --primary: #e50914;
    --accent: #221f1f;
}

html[data-theme="slack"] {
    --primary: #4a154b;
    --accent: #36c5f0;
}

html[data-theme="discord"] {
    --primary: #5865f2;
    --accent: #57f287;
}

html[data-theme="tiktok"] {
    --primary: #00f2ea;
    --primary-foreground: #07111f;
    --accent: #ff0050;
}

html[data-theme="linkedin"] {
    --primary: #0a66c2;
    --accent: #004182;
}

html[data-mode="dark"][data-theme="whatsapp"],
html[data-mode="dark"][data-theme="spotify"],
html[data-mode="dark"][data-theme="tiktok"] {
    --primary-foreground: #07111f;
}

html[data-ui-design="minimal"] {
    --radius: 6px;
    --radius-lg: 8px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

html[data-ui-design="glass"] {
    --card: color-mix(in srgb, var(--background) 22%, white 78%);
    --sidebar: color-mix(in srgb, var(--background) 18%, white 82%);
    --topbar: color-mix(in srgb, var(--background) 35%, white 65%);
    --border: color-mix(in srgb, var(--primary) 22%, transparent);
    --shadow-sm: 0 10px 30px rgb(15 23 42 / 0.08);
}

html[data-mode="dark"][data-ui-design="glass"] {
    --card: color-mix(in srgb, var(--background) 65%, white 8%);
    --sidebar: color-mix(in srgb, var(--background) 78%, white 7%);
    --topbar: color-mix(in srgb, var(--background) 72%, white 8%);
}

html[data-ui-design="outlined"] {
    --radius: 4px;
    --radius-lg: 4px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

html[data-ui-design="outlined"] .panel,
html[data-ui-design="outlined"] .stat-card,
html[data-ui-design="outlined"] .table-wrap,
html[data-ui-design="outlined"] .theme-choice,
html[data-ui-design="outlined"] .form input,
html[data-ui-design="outlined"] .form select,
html[data-ui-design="outlined"] .form textarea {
    border-width: 2px;
}

html[data-ui-design="soft"] {
    --background: color-mix(in srgb, var(--primary) 5%, #f8fafc);
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 12px 35px rgb(15 23 42 / 0.07);
}

html[data-mode="dark"][data-ui-design="soft"] {
    --background: color-mix(in srgb, var(--primary) 12%, #07111f);
}

html[data-ui-design="classic"] {
    --radius: 2px;
    --radius-lg: 2px;
    --background: #f3f4f6;
    --shadow-sm: 0 1px 0 rgb(15 23 42 / 0.08);
    --shadow-md: 0 2px 0 rgb(15 23 42 / 0.10);
    --shadow-lg: 0 4px 0 rgb(15 23 42 / 0.12);
}

html[data-mode="dark"][data-ui-design="classic"] {
    --background: #111827;
}

html[data-ui-design="editorial"] {
    --radius: 0;
    --radius-lg: 0;
    --font-body: Georgia, "Times New Roman", serif;
}

.dash-logo,
.brand,
.login-logo-text {
    color: var(--primary);
}

.btn-primary:hover,
.dash-logout:hover,
.inline-btn:hover,
.nav a:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.panel:hover,
.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.theme-swatch-facebook { --swatch: linear-gradient(135deg, #1877f2, #42a5f5); }
.theme-swatch-instagram { --swatch: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.theme-swatch-whatsapp { --swatch: linear-gradient(135deg, #25d366, #128c7e); }
.theme-swatch-youtube { --swatch: linear-gradient(135deg, #ff0000, #282828); }
.theme-swatch-spotify { --swatch: linear-gradient(135deg, #1db954, #191414); }
.theme-swatch-netflix { --swatch: linear-gradient(135deg, #e50914, #221f1f); }
.theme-swatch-slack { --swatch: linear-gradient(135deg, #4a154b, #36c5f0, #ecb22e); }
.theme-swatch-discord { --swatch: linear-gradient(135deg, #5865f2, #57f287); }
.theme-swatch-tiktok { --swatch: linear-gradient(135deg, #00f2ea, #ff0050, #010101); }
.theme-swatch-linkedin { --swatch: linear-gradient(135deg, #0a66c2, #004182); }