/* ============================================================
   ScanMyLinks — نظام الثيم والتحكم
   يُحمَّل قبل main.css / dashboard.css ويُعيد تعريف نفس أسماء
   المتغيرات القديمة، لذلك تعمل كل التنسيقات الحالية تلقائياً
   في الوضعين الليلي والنهاري دون تعديلها.
   ============================================================ */

/* ---------- 1) الوضع الليلي (الافتراضي) ---------- */
:root,
html[data-theme="dark"] {
    color-scheme: dark;

    --dark-bg:      #0D1117;
    --darker-bg:    #161B22;
    --surface-2:    #1C2128;
    --surface-3:    #21262D;
    --text-color:   #F0F6FC;
    --text-muted:   #9BA6B2;
    --border-color: #30363D;

    --safe-color:    #22C55E;
    --warning-color: #F59E0B;
    --unsafe-color:  #EF4444;
    --info-color:    #3B82F6;
    --pending-color:   var(--warning-color);
    --blacklist-color: var(--unsafe-color);
    --approved-color:  var(--safe-color);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
    --glass:     rgba(255,255,255,.04);
    --overlay:   rgba(1,4,9,.72);

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

/* ---------- 2) الوضع النهاري ---------- */
html[data-theme="light"] {
    color-scheme: light;

    --dark-bg:      #F4F7FB;
    --darker-bg:    #FFFFFF;
    --surface-2:    #F0F4F9;
    --surface-3:    #E6EDF5;
    --text-color:   #14202E;
    --text-muted:   #5A6B7D;
    --border-color: #D7E0EA;

    --safe-color:    #15803D;
    --warning-color: #B45309;
    --unsafe-color:  #DC2626;
    --info-color:    #1D4ED8;

    --shadow-sm: 0 1px 2px rgba(16,32,52,.06);
    --shadow-md: 0 8px 24px rgba(16,32,52,.10);
    --shadow-lg: 0 18px 48px rgba(16,32,52,.14);
    --glass:     rgba(16,32,52,.03);
    --overlay:   rgba(20,32,46,.45);
}

/* ---------- 3) ألوان التمييز (قابلة للتبديل من لوحة الإعدادات) ---------- */
html[data-accent="green"]  { --accent-color:#238636; --primary-color:#2EA043; --accent-soft:#2EA04322; }
html[data-accent="blue"]   { --accent-color:#0969DA; --primary-color:#3B82F6; --accent-soft:#3B82F622; }
html[data-accent="purple"] { --accent-color:#7C3AED; --primary-color:#8B5CF6; --accent-soft:#8B5CF622; }
html[data-accent="orange"] { --accent-color:#EA580C; --primary-color:#F97316; --accent-soft:#F9731622; }
html[data-accent="cyan"]   { --accent-color:#0E7490; --primary-color:#06B6D4; --accent-soft:#06B6D422; }

/* ---------- 4) أساسيات ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background-color: var(--dark-bg) !important;
    color: var(--text-color);
    transition: background-color .28s ease, color .28s ease;
    /* مسافة أعلى للشريط الثابت */
    padding-top: 68px !important;
    justify-content: flex-start !important;
}

/* حجم خط قابل للتحكم */
html[data-font="sm"] { font-size: 93.75%; }
html[data-font="md"] { font-size: 100%; }
html[data-font="lg"] { font-size: 112.5%; }

/* تقليل الحركة */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* وضوح التركيز للوحة المفاتيح */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   5) الشريط العلوي
   ============================================================ */
.app-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 64px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 clamp(.75rem, 3vw, 2rem);
    background: color-mix(in srgb, var(--darker-bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-block-end: 1px solid var(--border-color);
}

.app-bar__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    margin-inline-end: auto;
}
.app-bar__brand img { width: 36px; height: 36px; object-fit: contain; border-radius: 9px; }
.app-bar__brand span { font-size: 1.05rem; letter-spacing: -.2px; }
.app-bar__brand small {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: var(--text-muted);
}

.app-nav { display: flex; align-items: center; gap: .25rem; }

.app-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem .8rem;
    border-radius: 10px;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.app-nav a:hover { color: var(--text-color); background: var(--glass); }
.app-nav a.is-active { color: var(--primary-color); background: var(--accent-soft); }

.icon-btn {
    inline-size: 40px;
    block-size: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    color: var(--text-color);
    cursor: pointer;
    font-size: 1rem;
    transition: transform .18s, border-color .2s, background .2s;
}
.icon-btn:hover { border-color: var(--primary-color); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.96); }

/* أيقونة الثيم — تتبدل حسب الوضع */
html[data-theme="dark"]  .icon-btn__sun  { display: none; }
html[data-theme="light"] .icon-btn__moon { display: none; }

.app-bar__burger { display: none; }

/* ============================================================
   6) لوحة الإعدادات الجانبية
   ============================================================ */
.settings-scrim {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    z-index: 950;
}
.settings-scrim.is-open { opacity: 1; visibility: visible; }

.settings-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(340px, 88vw);
    background: var(--darker-bg);
    border-inline-end: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    z-index: 960;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
[dir="rtl"] .settings-panel { transform: translateX(102%); }
.settings-panel.is-open { transform: translateX(0) !important; }

.settings-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-block-end: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--darker-bg);
    z-index: 2;
}
.settings-panel__head h2 { margin: 0; font-size: 1.05rem; color: var(--text-color); }

.settings-group { padding: 1.1rem 1.25rem; border-block-end: 1px solid var(--border-color); }
.settings-group > label,
.settings-group__title {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: .75rem;
}

/* أزرار الاختيار (سيجمنت) */
.seg { display: flex; gap: .4rem; background: var(--surface-2); padding: .3rem; border-radius: 12px; }
.seg button {
    flex: 1;
    padding: .5rem .4rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.seg button[aria-pressed="true"] {
    background: var(--darker-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* نقاط الألوان */
.swatches { display: flex; gap: .55rem; flex-wrap: wrap; }
.swatch {
    inline-size: 34px; block-size: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform .18s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--text-color); }
.swatch[aria-pressed="true"]::after {
    content: "✓"; position: absolute; inset: 0;
    display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 700;
}
.swatch[data-value="green"]  { background: #2EA043; }
.swatch[data-value="blue"]   { background: #3B82F6; }
.swatch[data-value="purple"] { background: #8B5CF6; }
.swatch[data-value="orange"] { background: #F97316; }
.swatch[data-value="cyan"]   { background: #06B6D4; }

/* مفتاح تشغيل/إيقاف */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
}
.switch-row p { margin: 0; font-size: .92rem; color: var(--text-color); }
.switch-row small { display: block; color: var(--text-muted); font-size: .76rem; margin-top: .15rem; }

.switch {
    position: relative;
    inline-size: 46px; block-size: 26px;
    flex: none;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background .22s;
}
.switch::after {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 20px; block-size: 20px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform .22s, background .22s;
}
.switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--primary-color); }
.switch[aria-checked="true"]::after { background: var(--primary-color); transform: translateX(20px); }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-20px); }

.settings-panel__foot { padding: 1.1rem 1.25rem; margin-top: auto; }
.btn-ghost {
    inline-size: 100%;
    padding: .65rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}
.btn-ghost:hover { color: var(--unsafe-color); border-color: var(--unsafe-color); }

/* ============================================================
   7) التذييل
   ============================================================ */
.site-footer {
    inline-size: 100%;
    margin-block-start: 3rem;
    padding: 2rem clamp(1rem, 4vw, 3rem) 1.25rem;
    background: var(--darker-bg);
    border-block-start: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .88rem;
}
.site-footer__grid {
    max-inline-size: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.75rem;
    text-align: start;
}
.site-footer h4 { color: var(--text-color); font-size: .95rem; margin: 0 0 .7rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--primary-color); }
.site-footer__bottom {
    max-inline-size: 1100px;
    margin: 1.75rem auto 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    font-size: .82rem;
}

/* ============================================================
   8) إشعارات (Toast)
   ============================================================ */
.toast-stack {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline: 1rem auto;
    display: grid;
    gap: .5rem;
    z-index: 1200;
}
.toast {
    background: var(--darker-bg);
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--primary-color);
    color: var(--text-color);
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: .9rem;
    animation: toastIn .28s ease;
    max-inline-size: min(340px, 90vw);
}
.toast.is-error { border-inline-start-color: var(--unsafe-color); }
.toast.is-ok    { border-inline-start-color: var(--safe-color); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* زر العودة للأعلى */
#backToTop {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    transform: translateY(8px);
}
#backToTop.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ============================================================
   9) تصحيحات الوضع النهاري للتنسيقات القديمة
   ============================================================ */
html[data-theme="light"] body {
    background-image: radial-gradient(circle at 50% -10%, #FFFFFF 0%, var(--dark-bg) 60%) !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .container h1 { color: var(--text-color) !important; }

html[data-theme="light"] .container,
html[data-theme="light"] .card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .stat-card {
    background-color: var(--darker-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #FFFFFF !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="light"] input::placeholder { color: #93A2B4 !important; }

/* عناصر كانت تعتمد على شفافية بيضاء */
html[data-theme="light"] [style*="rgba(255, 255, 255"],
html[data-theme="light"] [style*="rgba(255,255,255"] { background-color: var(--surface-2) !important; }

/* شاشة البداية */
#splashScreen { background: var(--dark-bg); }
html[data-theme="light"] #splashScreen .splash-title,
html[data-theme="light"] #splashScreen .splash-subtitle,
html[data-theme="light"] #splashScreen .splash-loader { color: var(--text-color) !important; }
html[data-theme="light"] #splashScreen .loader-spinner {
    border-color: var(--surface-3); border-top-color: var(--primary-color);
}

/* ============================================================
   10) الاستجابة لكل الأجهزة
   ============================================================ */
.container { inline-size: min(100% - 2rem, 720px) !important; }

@media (max-width: 900px) {
    .app-nav {
        position: fixed;
        inset-block-start: 64px;
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--darker-bg);
        border-block-end: 1px solid var(--border-color);
        padding: .5rem;
        transform: translateY(-140%);
        transition: transform .28s cubic-bezier(.32,.72,0,1);
        box-shadow: var(--shadow-md);
    }
    .app-nav.is-open { transform: translateY(0); }
    .app-nav a { padding: .85rem 1rem; border-radius: 10px; }
    .app-bar__burger { display: inline-grid; }
}

@media (max-width: 640px) {
    body { padding-top: 60px !important; }
    .app-bar { height: 56px; }
    .app-bar__brand small { display: none; }
    .app-bar__brand img { width: 30px; height: 30px; }
    .app-nav { inset-block-start: 56px; }
    .container { padding: 1.25rem !important; border-radius: 16px !important; }
    .icon-btn { inline-size: 38px; block-size: 38px; }
    .site-footer__grid { gap: 1.25rem; }
    /* أهداف لمس مريحة */
    button, .action-btn, .tab-btn { min-block-size: 44px; }
}

@media (max-width: 380px) {
    .app-bar { gap: .4rem; padding-inline: .6rem; }
    .app-bar__brand span { font-size: .95rem; }
}

/* الطباعة */
@media print {
    .app-bar, .settings-panel, .settings-scrim, .site-footer, #backToTop { display: none !important; }
    body { padding-top: 0 !important; background: #fff !important; color: #000 !important; }
}

/* ============================================================
   11) سجل الفحوصات الأخيرة (الصفحة الرئيسية)
   ============================================================ */
.recent {
    margin-block: 1.25rem;
    padding: .9rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: start;
}
.recent__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    color: var(--text-muted);
    margin-block-end: .7rem;
}
.recent__clear {
    background: none; border: 0; color: var(--text-muted);
    font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline;
}
.recent__clear:hover { color: var(--unsafe-color); }
.recent__chips { display: flex; flex-wrap: wrap; gap: .45rem; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--darker-bg);
    color: var(--text-color);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .2s, transform .15s;
}
.chip:hover { transform: translateY(-1px); }
.chip.is-ok   { border-color: color-mix(in srgb, var(--safe-color) 50%, transparent); }
.chip.is-ok i   { color: var(--safe-color); }
.chip.is-warn { border-color: color-mix(in srgb, var(--warning-color) 50%, transparent); }
.chip.is-warn i { color: var(--warning-color); }
.chip.is-bad  { border-color: color-mix(in srgb, var(--unsafe-color) 50%, transparent); }
.chip.is-bad i  { color: var(--unsafe-color); }

/* ============================================================
   12) الصفحات النصية (كيف يعمل / الخصوصية / الشروط)
   ============================================================ */
.page-doc {
    inline-size: min(100% - 2rem, 820px);
    margin: 2rem auto 0;
    background: var(--darker-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-md);
    text-align: start;
    line-height: 1.95;
}
.page-doc h1 { margin-block: 0 .35rem; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--text-color); }
.page-doc .lede { color: var(--text-muted); margin-block-end: 2rem; }
.page-doc h2 {
    font-size: 1.15rem;
    margin-block: 2rem .6rem;
    padding-inline-start: .7rem;
    border-inline-start: 3px solid var(--primary-color);
    color: var(--text-color);
}
.page-doc p, .page-doc li { color: var(--text-color); opacity: .92; }
.page-doc ul, .page-doc ol { padding-inline-start: 1.4rem; }
.page-doc code {
    background: var(--surface-2);
    padding: .12em .45em;
    border-radius: 6px;
    font-size: .9em;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-block: 1.5rem;
}
.step-card {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.1rem;
}
.step-card__num {
    display: inline-grid;
    place-items: center;
    inline-size: 30px; block-size: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--primary-color);
    font-weight: 800;
    margin-block-end: .6rem;
}
.step-card h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--text-color); }
.step-card p  { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.7; }

.form-field { margin-block-end: 1rem; text-align: start; }
.form-field label { display: block; margin-block-end: .4rem; font-size: .88rem; color: var(--text-muted); }
.form-field input, .form-field select, .form-field textarea {
    inline-size: 100%;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    color: var(--text-color);
    font: inherit;
}
.form-field textarea { min-block-size: 130px; resize: vertical; }
.btn-primary {
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-color);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .2s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.notice {
    padding: .9rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--info-color);
    background: var(--surface-2);
    margin-block: 1rem;
    font-size: .9rem;
}
.notice.is-ok  { border-inline-start-color: var(--safe-color); }
.notice.is-bad { border-inline-start-color: var(--unsafe-color); }