@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
	--font-bricolage: "Bricolage Grotesque", sans-serif;
	--font-ibm-plex-arabic: "IBM Plex Sans Arabic", sans-serif;
	--font-sans: var(--font-bricolage);
	--font-arabic: var(--font-ibm-plex-arabic);

	--color-border: oklch(0.928 0.006 264.531);
	--color-input: oklch(0.928 0.006 264.531);
	--color-ring: oklch(0.707 0.022 261.325);
	--color-background: oklch(1 0 0);
	--color-foreground: oklch(0.13 0.028 261.692);

	--color-primary: oklch(0.60 0.13 163);
	--color-primary-foreground: oklch(0.98 0.02 166);

	--color-secondary: oklch(0.967 0.001 286.375);
	--color-secondary-foreground: oklch(0.21 0.006 285.885);

	--color-muted: oklch(0.967 0.003 264.542);
	--color-muted-foreground: oklch(0.551 0.027 264.364);

	--color-accent: oklch(0.967 0.003 264.542);
	--color-accent-foreground: oklch(0.21 0.034 264.665);

	--color-destructive: oklch(0.577 0.245 27.325);
	--color-destructive-foreground: oklch(0.21 0.034 264.665);

	--color-popover: oklch(1 0 0);
	--color-popover-foreground: oklch(0.13 0.028 261.692);

	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.625rem;
	--radius-xl: 0.875rem;
	--radius: 0.625rem;
}

@layer base {

	/* Scope styles only to the dashboard root to avoid WP admin leakage */
	/* Theme container for portals and the main root */
	.wawp-dashboard-theme,
	#wawp-dashboard-root {
	font-family: var(--font-bricolage);
	color: oklch(0.13 0.028 261.692);
	}

	[dir="rtl"] .wawp-dashboard-theme,
	[dir="rtl"] #wawp-dashboard-root {
	font-family: var(--font-ibm-plex-arabic), sans-serif;
	}

	#wawp-dashboard-root {
	background: oklch(1 0 0);
	margin-inline-start: -20px;
	}


	/* Reset some WP-specific overrides */
	#wawp-dashboard-root * {
	border-color: var(--color-border);
	}

	/* Fix WordPress Admin Bar icon wrapping when Tailwind is active */
	#wpadminbar .wawp-toolbar-node img {
	display: inline-block !important;
	margin-top: -2px; /* Slight adjustment for alignment */
	}

	/* Fix Sidebar Icon in Wawp Pages where Tailwind is active */
	#adminmenu #toplevel_page_wawp .wp-menu-image:before {
	margin-top: 7px !important;
	}
}



/* Intl-Tel-Input Fit */
.iti {
	width: 100%;
	display: block;
}

.iti__country-list {
	z-index: 100;
	border-radius: 8px;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	border: 1px solid #e2e8f0;
}

/* Ensure padding is preserved */
.iti input {
	padding-left: 52px !important;
}

[dir="rtl"] .iti input {
	padding-left: 12px !important;
	padding-right: 52px !important;
}

/* Hide the technical container */
#recaptcha-container {
	display: none;
}

:root {
	--sidebar: hsl(180 100% 12%);
	--sidebar-foreground: hsl(180 10% 90%);
	--sidebar-primary: hsl(180 100% 10%);
	--sidebar-primary-foreground: hsl(0 0% 100%);
	--sidebar-accent: hsl(180 100% 15%);
	--sidebar-accent-foreground: hsl(0 0% 100%);
	--sidebar-border: hsl(180 100% 15%);
	--sidebar-ring: hsl(180 100% 25%);
}

.dark {
	--sidebar: hsl(240 5.9% 10%);
	--sidebar-foreground: hsl(240 4.8% 95.9%);
	--sidebar-primary: hsl(224.3 76.3% 48%);
	--sidebar-primary-foreground: hsl(0 0% 100%);
	--sidebar-accent: hsl(240 3.7% 15.9%);
	--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
	--sidebar-border: hsl(240 3.7% 15.9%);
	--sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@theme inline {
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);
}

/* Prism Editor Styles */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #94a3b8;
}

.token.punctuation {
	color: #94a3b8;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #fb7185;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #4ade80;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #38bdf8;
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #818cf8;
}

.token.function,
.token.class-name {
	color: #fbbf24;
}

.token.regex,
.token.important,
.token.variable {
	color: #e879f9;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}