/**
 * ==============================================================================
 * منصة صيانة أونلاين — High-Contrast Royal Blue Theme
 * Completely removes green focus rings, outlines, and green brand accents.
 * ==============================================================================
 */
:root {
    /* Primary Color System - Custom Swatch (#0066cc) */
    --color-primary: #167ee6;
    --color-primary-hover: #0052a3;
    --color-primary-dark: #003d7a;
    --color-primary-light: #e6f0fa;
    --color-primary-border: #99c2ff;

    /* Accent */
    --color-accent: #f59e0b;
    --color-accent-hover: #d97706;

    /* Footer (dark slate/charcoal) */
    --color-footer-bg: #0f172a;
    --color-footer-border: rgba(255, 255, 255, 0.1);
    --color-footer-card-bg: rgba(255, 255, 255, 0.05);
    --color-footer-card-border: rgba(255, 255, 255, 0.08);
    --color-footer-text: #94a3b8;
    --color-footer-title: #ffffff;

    /* Sync legacy variables */
    --color-brand: var(--color-primary);
    --color-brand-hover: var(--color-primary-hover);
    --color-brand-light: var(--color-primary-light);
    --color-brand-border: var(--color-primary-border);
}

/* ==============================================================================
   GLOBAL BASE
   ============================================================================== */
body,
html {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    accent-color: #0066cc !important;
}

/* Hide scrollbar for Chrome, Safari, Edge, Firefox */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
input,
select,
textarea,
label {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0f172a;
}

.text-white,
h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
p.text-white,
span.text-white,
a.text-white,
button.text-white {
    color: #ffffff !important;
}

/* Transform header logo green icon to primary blue */
img[src*="logo.png"] {
    filter: hue-rotate(97deg) brightness(0.95) saturate(1.1) !important;
}

/* ==============================================================================
   Text Contrast & Legibility
   ============================================================================== */
.text-slate-300 {
    color: #64748b !important;
}

.text-slate-400 {
    color: #475569 !important;
}

.text-slate-500 {
    color: #334155 !important;
}

.text-slate-600 {
    color: #1e293b !important;
}

.text-slate-700 {
    color: #0f172a !important;
}

.text-slate-800 {
    color: #0f172a !important;
}

.text-slate-900 {
    color: #020617 !important;
}

/* ==============================================================================
   PRIMARY BLUE OVERRIDES (#0066cc)
   ============================================================================== */
.bg-\[\#101828\],
.bg-\[\#0f172a\] {
    background-color: #0f172a !important;
}

.bg-\[\#14a800\],
.bg-\[\#1d4ed8\],
.bg-\[\#0066cc\] {
    background-color: #0066cc !important;
}

.bg-\[\#108a00\],
.bg-\[\#1e40af\],
.bg-\[\#0052a3\] {
    background-color: #0052a3 !important;
}

.bg-\[\#e4f8dd\],
.bg-\[\#eff6ff\],
.bg-\[\#e6f0fa\],
.bg-\[\#f0fff0\] {
    background-color: #e6f0fa !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.hover\:bg-black:hover {
    background-color: #000000 !important;
}

.hover\:bg-\[\#108a00\]:hover,
.hover\:bg-\[\#1e40af\]:hover,
.hover\:bg-\[\#0052a3\]:hover {
    background-color: #0052a3 !important;
}

.hover\:bg-\[\#14a800\]:hover,
.hover\:bg-\[\#1d4ed8\]:hover,
.hover\:bg-\[\#0066cc\]:hover {
    background-color: #0066cc !important;
}

.hover\:bg-\[\#f0fff0\]:hover,
.hover\:bg-blue-50:hover {
    background-color: #e6f0fa !important;
}

.text-\[\#14a800\],
.text-\[\#1d4ed8\],
.text-\[\#0066cc\] {
    color: #0066cc !important;
}

.hover\:text-\[\#14a800\]:hover,
.hover\:text-\[\#1d4ed8\]:hover,
.hover\:text-\[\#0066cc\]:hover {
    color: #0066cc !important;
}

.group:hover .group-hover\:text-\[\#14a800\],
.group:hover .group-hover\:text-\[\#1d4ed8\],
.group:hover .group-hover\:text-\[\#0066cc\] {
    color: #0066cc !important;
}

.border-\[\#14a800\],
.border-\[\#1d4ed8\],
.border-\[\#0066cc\] {
    border-color: #0066cc !important;
}

.hover\:border-\[\#14a800\]:hover,
.hover\:border-\[\#1d4ed8\]:hover,
.hover\:border-\[\#0066cc\]:hover {
    border-color: #0066cc !important;
}

/* ==============================================================================
   FORM INPUTS & FOCUS OUTLINE — STRICT NO-GREEN RULE
   ============================================================================== */
*:focus,
*:focus-visible,
*:focus-within {
    outline: none !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    border-color: #cbd5e1 !important;
    border-radius: 12px !important;
    outline: none !important;
    accent-color: #0066cc !important;
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    border-color: #0066cc !important;
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: 0 0 0 3.5px rgba(0, 102, 204, 0.25) !important;
}

select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Legacy Focus States Override */
.focus\:border-primary:focus,
.focus\:border-brand:focus,
.focus\:border-\[\#1d4ed8\]:focus,
.focus\:border-\[\#0066cc\]:focus,
.focus\:border-\[\#14a800\]:focus,
.focus-within\:border-primary:focus-within,
.focus-within\:border-brand:focus-within,
.focus-within\:border-\[\#1d4ed8\]:focus-within,
.focus-within\:border-\[\#0066cc\]:focus-within,
.focus-within\:border-\[\#14a800\]:focus-within {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3.5px rgba(0, 102, 204, 0.25) !important;
}

/* ==============================================================================
   HEADER
   ============================================================================== */
header {
    background-color: #0066cc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

header nav a {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    transition: all 0.15s ease;
}

header nav a:hover {
    color: #ffffff !important;
    opacity: 0.9;
}

/* ==============================================================================
   BUTTONS & CARDS
   ============================================================================== */
.so-btn-primary,
a.so-btn-primary,
button.so-btn-primary {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    border: 2px solid var(--color-primary) !important;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.so-btn-primary:hover,
a.so-btn-primary:hover,
button.so-btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

article {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    transition: box-shadow 0.2s, border-color 0.2s;
}

article:hover {
    border-color: #99c2ff !important;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.08) !important;
}

::selection {
    background: #e6f0fa;
    color: #0066cc;
}

/* ==============================================================================
   FOOTER STYLING & HIGH CONTRAST OVERRIDES
   ============================================================================== */
.siyanah-footer-root {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

.siyanah-footer-root a {
    color: #cbd5e1 !important;
}

.siyanah-footer-root a:hover {
    color: #ffffff !important;
}

.siyanah-footer-root a.text-emerald-400 {
    color: #34d399 !important;
}

.siyanah-footer-root a.text-emerald-400:hover {
    color: #6ee7b7 !important;
}

/* ==============================================================================
   ADMIN SUBMIT BUTTONS, TABS & ACTION BUTTON CONTRAST FIXES
   ============================================================================== */

/* Admin Active Tabs & Submit Buttons (Primary Royal Blue) */
.bg-\[\#1a68aa\],
a.bg-\[\#1a68aa\],
button.bg-\[\#1a68aa\],
span.bg-\[\#1a68aa\],
.bg-\[\#000094\],
a.bg-\[\#000094\],
button.bg-\[\#000094\] {
    background-color: #000094 !important;
    color: #ffffff !important;
}

/* Hover States for Primary Admin Action Buttons */
.hover\:bg-\[\#155388\]:hover,
button.hover\:bg-\[\#155388\]:hover,
a.hover\:bg-\[\#155388\]:hover,
.hover\:bg-\[\#145389\]:hover,
button.hover\:bg-\[\#145389\]:hover,
a.hover\:bg-\[\#145389\]:hover {
    background-color: #00006b !important;
    color: #ffffff !important;
}

/* Active Tab Hover State */
.hover\:bg-\[\#1a68aa\]:hover,
a.hover\:bg-\[\#1a68aa\]:hover,
button.hover\:bg-\[\#1a68aa\]:hover {
    background-color: #000094 !important;
    color: #ffffff !important;
}

/* Primary Text & Border Utility */
.text-\[\#1a68aa\],
a.text-\[\#1a68aa\],
span.text-\[\#1a68aa\],
.text-\[\#000094\] {
    color: #000094 !important;
}

.border-\[\#1a68aa\],
.border-\[\#000094\] {
    border-color: #000094 !important;
}

.focus\:border-\[\#1a68aa\]:focus,
.focus\:border-\[\#000094\]:focus {
    border-color: #000094 !important;
}

.focus\:ring-\[\#1a68aa\]:focus,
.focus\:ring-\[\#000094\]:focus {
    --tw-ring-color: #000094 !important;
    border-color: #000094 !important;
}

/* Shadows */
.shadow-2xs,
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05) !important;
}

/* ==============================================================================
   MAIN PUBLIC FOOTER STYLING
   ============================================================================== */
.siyanah-footer-root {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}