/* ================= نظام الثيمات الموحّد — متغيرات عميقة ================= */
:root {
    --bg-main: #0a192f;
    --bg-surface: #112240;
    --bg-card: #112240;
    --card-surface-opacity: 1;
    --bg-input: #152a4a;
    --bg-modal: #112240;
    --bg-table-head: #0a192f;
    --bg-tab: transparent;
    --bg-tab-active: #3b82f6;

    --text-main: #e6f1ff;
    --text-muted: #8892b0;
    --text-link: #64ffda;
    --text-input: #e6f1ff;
    --text-on-accent: #0a192f;

    --accent-color: #64ffda;
    --accent-secondary: #3b82f6;
    --navbar-bg: rgba(10, 25, 47, 0.95);
    --border-color: rgba(100, 255, 218, 0.1);
    --border-strong: rgba(100, 255, 218, 0.35);

    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --text-success: #86efac;
    --text-danger: #fecaca;
    --text-warning: #fde68a;

    --theme-bg-gradient: none;
    --theme-radius: 12px;
    --theme-shape: 12px;

    /* توافق */
    --bg-dark: var(--bg-main);
    --text-white: var(--text-main);
    --text-gray: var(--text-muted);
    --primary-neon: var(--accent-color);
    --border: var(--border-color);
    --theme-accent: var(--accent-secondary);
}

html { color-scheme: dark; }
html.theme-light { color-scheme: light; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.theme-gradient-bg {
    background: var(--theme-bg-gradient) fixed center / cover no-repeat;
    background-color: var(--bg-main);
}

body.theme-fill-bg-dark {
    background: var(--fill-bg-dark, var(--bg-main)) fixed center / cover no-repeat;
    background-color: var(--fill-bg-dark-color, var(--bg-main));
}

body.theme-fill-bg-dark-image {
    background-image: var(--fill-bg-dark-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ================= عناصر مشتركة ================= */
a.ts-link, .ts-link { color: var(--text-link); text-decoration: none; }
a.ts-link:hover, .ts-link:hover { text-decoration: underline; }

.ts-bg-main { background-color: var(--bg-main); }
.ts-bg-surface { background-color: var(--bg-surface); }
.ts-bg-card { background-color: var(--bg-card); }
.ts-bg-input { background-color: var(--bg-input); }
.ts-bg-modal { background-color: var(--bg-modal); }

.ts-text-main { color: var(--text-main); }
.ts-text-muted { color: var(--text-muted); }
.ts-text-link { color: var(--text-link); }
.ts-text-success { color: var(--text-success); }
.ts-text-danger { color: var(--text-danger); }

.ts-border { border-color: var(--border-color); }
.ts-accent { color: var(--accent-color); }

/* حقول الإدخال */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea,
.ts-input {
    background-color: var(--bg-input);
    color: var(--text-input);
    border: 1px solid var(--border-color);
    border-radius: var(--theme-radius);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.85; }

/* جداول */
.ts-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.ts-table th {
    background: var(--bg-table-head);
    color: var(--accent-secondary);
    border-bottom: 1px solid var(--border-color);
}
.ts-table td {
    background: color-mix(in srgb, var(--bg-card) 88%, var(--text-main) 12%);
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
}

/* Tabs */
.ts-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
}
.ts-tabs__link {
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--bg-tab);
    transition: background 0.15s, color 0.15s;
}
.ts-tabs__link:hover { color: var(--text-main); }
.ts-tabs__link.is-active {
    background: var(--bg-tab-active);
    color: var(--text-on-accent);
}

/* Modals / panels */
.ts-modal, .ts-panel {
    background: var(--bg-modal);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--theme-radius);
}

/* ================= حماية IMPORTANT ================= */
.theme-important {
    isolation: isolate;
    --bg-main: var(--locked-bg-main, #0a192f);
    --bg-surface: var(--locked-bg-surface, #112240);
    --bg-card: var(--locked-bg-card, #112240);
    --bg-input: var(--locked-bg-input, #152a4a);
    --bg-modal: var(--locked-bg-modal, #112240);
    --bg-table-head: var(--locked-bg-table-head, #0a192f);
    --text-main: var(--locked-text-main, #e6f1ff);
    --text-muted: var(--locked-text-muted, #8892b0);
    --text-link: var(--locked-text-link, #64ffda);
    --text-input: var(--locked-text-input, #e6f1ff);
    --accent-color: var(--locked-accent-color, #64ffda);
    --accent-secondary: var(--locked-accent-secondary, #3b82f6);
    --primary-neon: var(--locked-primary-neon, #64ffda);
    --text-white: var(--locked-text-white, #e6f1ff);
    --text-gray: var(--locked-text-muted, #8892b0);
    --border: var(--locked-border, rgba(100, 255, 218, 0.1));
    --border-color: var(--locked-border-color, rgba(100, 255, 218, 0.1));
    color: var(--text-main);
}

.theme-important .section-title,
.theme-important h1, .theme-important h2, .theme-important h3 { color: var(--accent-color); }
.theme-important p, .theme-important .experience-text, .theme-important .case-details-text { color: var(--text-muted); }
.theme-important .service-card, .theme-important .q-item, .theme-important .case-card {
    color: var(--text-main);
}

/* بطاقات شفافة — الخلفية تظهر من خلالها */
.service-card, .q-item, .case-card {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.service-card::before, .q-item::before, .case-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: var(--fill-bg-card-gradient, var(--fill-bg-card, var(--bg-card)));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--card-surface-opacity, 1);
}

.service-card > *, .q-item > *, .case-card > * {
    position: relative;
    z-index: 1;
}

.case-card .case-content {
    background: transparent;
}

.theme-important .service-card::before,
.theme-important .q-item::before,
.theme-important .case-card::before {
    background: var(--bg-card);
    opacity: var(--card-surface-opacity, 1);
}

/* ================= مكوّنات الموقع العام ================= */
.navbar {
    background: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.navbar .logo, .nav-links a:not(.lang-switch__btn):not(.btn-login) { color: var(--text-main); }
.navbar .logo span, .nav-links a:not(.lang-switch__btn):hover, .menu-icon { color: var(--accent-color); }

.about { background-color: var(--bg-main); }
.service-card:hover { border-color: var(--accent-color); }
.service-card i, .q-item i, .badge, .section-title, .hero h1 span { color: var(--accent-color); }
.hero p, .experience-text { color: var(--text-muted); }
.bio-intro { color: var(--text-main); }
.primary-btn {
    background: var(--fill-primary-gradient, var(--accent-color));
    color: var(--text-on-accent);
}
.secondary-btn { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.secondary-btn:hover { background: color-mix(in srgb, var(--accent-secondary) 12%, transparent); }
.btn-login { border-radius: var(--theme-shape); }
.service-overlay { background: color-mix(in srgb, var(--bg-main) 92%, transparent); }
.overlay-container { background: var(--bg-card); border-color: var(--accent-color); }
.close-overlay { color: var(--accent-color); }