/* ============================================================
   أسعار الكفرات — v6
   مهني ومصقول: خط IBM Plex Sans Arabic، عمق خفيف، لون واحد
   ============================================================ */
:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #e3e5e9;
    --border-strong: #cbcfd6;
    --ink: #16191d;
    --ink-2: #596069;
    --ink-3: #989ea8;
    --accent: #1c4d8f;
    --accent-hover: #163d72;
    --accent-soft: #eef3fa;
    --green: #157f3d;
    --green-soft: #eefaf2;
    --red: #b42318;
    --strike: #a6aab2;
    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(22, 25, 29, .05), 0 2px 8px rgba(22, 25, 29, .04);
}

* { box-sizing: border-box; }

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

body {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14.5px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    line-height: 1.7;
}

body.wide { max-width: 1300px; }

/* ---------- الترويسة ---------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1.3rem 0 1.1rem;
    margin-bottom: 1.5rem;
}

.site-header .logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.site-header .logo::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 6px solid var(--accent);
    background: radial-gradient(circle, var(--accent) 25%, transparent 30%);
    flex-shrink: 0;
}

.site-header nav {
    display: flex;
    gap: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .25rem;
    box-shadow: var(--shadow);
}

.site-header nav a {
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    padding: .32rem 1.1rem;
    border-radius: 999px;
}

.site-header nav a:hover { color: var(--ink); }
.site-header nav a.active { background: var(--accent); color: #fff; font-weight: 600; }

h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; font-weight: 700; margin: 2.25rem 0 .75rem; }
h3 { font-size: .95rem; font-weight: 700; margin: 0; }

/* ---------- الكروت ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.1rem;
}

.card-title {
    font-weight: 700;
    font-size: .98rem;
    margin: 0 0 .9rem;
}

/* ---------- النماذج ---------- */
form.row { display: flex; gap: .6rem; }

input[type="text"], input[type="password"], input[type="number"],
input[type="file"], select {
    padding: .55rem .8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .92rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

input[type="text"] { flex: 1; }

input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(28, 77, 143, .12);
}

/* Buttons and links had no keyboard-visible focus at all, which the
   action-dense admin screens depend on. :focus-visible only, so a mouse
   click does not leave a ring behind. */
button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::placeholder { color: var(--ink-3); }

button {
    padding: .55rem 1.4rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:disabled { opacity: .55; cursor: default; }

button.secondary {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--border-strong);
}

button.secondary:hover { background: var(--accent-soft); border-color: var(--accent); }

button.ghost {
    background: none;
    border: none;
    color: var(--ink-2);
    padding: .3rem .5rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.ghost:hover { color: var(--ink); background: none; }

/* ---------- الجداول ---------- */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.table-wrap.tall { max-height: 70vh; overflow-y: auto; }
.table-wrap.tall thead th { position: sticky; top: 0; z-index: 2; }

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
}

th {
    background: #f7f8f9;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .01em;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-strong);
}

th, td {
    padding: .55rem .85rem;
    text-align: right;
    vertical-align: middle;
}

td {
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td, table tr:hover td { background: var(--accent-soft); }

td a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: .84rem; }
td a:hover { text-decoration: underline; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); background: #eff1f3; }
th.sortable .arrow { font-size: .7em; margin-inline-start: .3rem; color: var(--ink-3); }
th.sortable.active { color: var(--accent); }
th.sortable.active .arrow { color: var(--accent); }

/* ---------- الأسعار والحالات ---------- */
.price { font-weight: 700; white-space: nowrap; }
.price del { color: var(--strike); font-weight: 400; font-size: .84em; margin-inline-start: .45rem; }
.price .new { color: var(--green); }

.pct {
    display: inline-block;
    color: var(--green);
    background: var(--green-soft);
    border-radius: 5px;
    padding: 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.tag {
    display: inline-block;
    font-size: .76rem;
    color: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0 .5rem;
    background: var(--bg);
    white-space: nowrap;
}

.tag.best { color: #fff; border-color: var(--green); background: var(--green); font-weight: 600; }

tr.cheapest-row td { background: var(--green-soft); }
tr.cheapest-row:hover td { background: #e2f5e9; }

/* ---------- رأس كل موقع بالنتائج ---------- */
.site-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 0 1rem;
    overflow: hidden;
}

.site-block .source-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: #fbfbfc;
}

.site-block .source-head::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.site-block .table-wrap { border: none; border-radius: 0; box-shadow: none; }
.site-block .empty { padding: .8rem 1.1rem; }
.site-block .skeleton-row { margin: .5rem 1.1rem; }

.source-head .count { color: var(--ink-3); font-size: .84rem; margin-inline-start: auto; }

.error {
    color: var(--red);
    background: #fdf3f2;
    border: 1px solid #ecc8c5;
    border-radius: var(--radius-sm);
    padding: .55rem .8rem;
    font-size: .9rem;
}

.muted { color: var(--ink-2); }
.small { font-size: .82rem; }

.empty { color: var(--ink-3); font-size: .88rem; }

/* ---------- التحميل ---------- */
.spinner {
    display: inline-block;
    width: .9em;
    height: .9em;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -.1em;
    margin-inline-end: .4rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton-row {
    height: 2.2rem;
    border-radius: 6px;
    background: linear-gradient(90deg, #ecedef 25%, #f6f7f8 50%, #ecedef 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    margin-bottom: .4rem;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- ملخص البحث ---------- */
.summary-bar {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--green);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .8rem 1.2rem;
    margin-bottom: 1.1rem;
}

.summary-bar .cheapest { font-weight: 700; font-size: 1rem; }
.summary-bar .cheapest .num { color: var(--green); font-size: 1.15em; }
.summary-bar .meta { color: var(--ink-2); font-size: .86rem; }
.summary-bar a { color: var(--accent); font-weight: 500; }

/* ---------- شيبس الأبحاث السابقة ---------- */
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; align-items: center; }

.chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .12rem .75rem;
    font-size: .82rem;
    color: var(--ink-2);
    cursor: pointer;
    background: var(--bg);
    font-variant-numeric: tabular-nums;
    transition: all .12s;
}

.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- بلاطات الإحصائيات ---------- */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem;
    margin-bottom: .9rem;
}

.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .75rem 1.1rem;
}

.stat-tile .value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.stat-tile .label { font-size: .8rem; color: var(--ink-2); }

/* ---------- الفلاتر ---------- */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: .55rem;
}

.filters select, .filters input { width: 100%; }

.filters label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .86rem;
    color: var(--ink-2);
    white-space: nowrap;
}

.toolbar {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin: .85rem 0 0;
}

.result-count { color: var(--ink-2); font-size: .85rem; font-variant-numeric: tabular-nums; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 920px) { .stats-grid { grid-template-columns: 1fr; } }

details.card summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--ink-2); }
details.card summary:hover { color: var(--ink); }
details.card[open] summary { margin-bottom: .9rem; color: var(--ink); }

/* ---------- شريط التقدم ---------- */
.progress {
    height: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin: .7rem 0 .3rem;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .6s ease;
}

.fade-in { animation: fadein .2s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- نافذة تفاصيل المنتج (v7) ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 25, 29, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    z-index: 50;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(22, 25, 29, .25);
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.3rem 1.5rem;
}

.modal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

.modal-head h3 { font-size: 1.05rem; }
.modal-close {
    background: none; border: none; color: var(--ink-3);
    font-size: 1.4rem; cursor: pointer; padding: 0 .3rem; line-height: 1;
}
.modal-close:hover { color: var(--ink); background: none; }

#results tbody tr, #results table tr { cursor: pointer; }

.brand-cell .editable {
    border-bottom: 1px dashed var(--border-strong);
    cursor: text;
    padding-bottom: 1px;
}
.brand-cell .editable:hover { border-bottom-color: var(--accent); color: var(--accent); }
.brand-cell input {
    width: 110px;
    padding: .15rem .4rem;
    font-size: .85rem;
}

.chart-wrap { direction: ltr; margin-top: .3rem; }
.chart-wrap svg { width: 100%; height: auto; display: block; }

/* ---------- لوحة التشارتات (v8) ---------- */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 920px) { .charts-grid { grid-template-columns: 1fr; } }

.chart-card .chart-wrap { direction: ltr; }
.chart-card svg { width: 100%; height: auto; display: block; }

.viz-bar { transition: opacity .12s; cursor: default; }
.viz-bar:hover { opacity: .78; }

/* ============================================================
   الحسابات والصلاحيات (v9)
   صفحات الدخول/التسجيل/الحساب + إدارة المستخدمين.
   كانت أنماط صندوق الدخول مكررة داخل كل صفحة، فصارت هنا مرة واحدة.
   ============================================================ */

/* ---------- المتصفح نفسه: التحديد، المؤشر، شريط التمرير ---------- */
::selection { background: rgba(28, 77, 143, .16); color: var(--ink); }
input, textarea { caret-color: var(--accent); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 2px solid var(--bg);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ---------- تخطيط صفحات الدخول ---------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    padding: 2.5rem 0 4rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.auth-brand::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 6px solid var(--accent);
    background: radial-gradient(circle, var(--accent) 25%, transparent 30%);
    flex-shrink: 0;
}

.auth-card {
    width: 100%;
    max-width: 384px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.6rem 1.6rem;
}

.auth-card h1 { font-size: 1.08rem; margin: 0 0 .25rem; }
.auth-card .sub { color: var(--ink-2); font-size: .88rem; margin: 0 0 1.15rem; }
.auth-foot {
    margin: 1.15rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .88rem;
    color: var(--ink-2);
}
.auth-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- الحقول المُسمّاة ---------- */
/* نص التلميح داخل الحقل ليس بديلاً عن اسم الحقل: يختفي عند الكتابة
   ولا تقرأه بعض قارئات الشاشة. */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.field > label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.field > input { width: 100%; }
.field .hint { font-size: .78rem; color: var(--ink-3); }
.field-actions { margin-top: 1.15rem; }
.field-actions button { width: 100%; }

/* ---------- تنبيه محايد (يقابل .error) ---------- */
.notice {
    background: var(--accent-soft);
    border: 1px solid #cddcef;
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    font-size: .9rem;
}
.notice .notice-title { font-weight: 700; margin: 0 0 .35rem; font-size: .92rem; }

.notice-ok {
    background: var(--green-soft);
    border: 1px solid #bfe4cd;
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    font-size: .9rem;
}

/* كلمة مرور تُعرض مرة واحدة: تُنسخ بالعين وباللمس، فلازم تكون واضحة
   ومنفصلة عن النص حولها. */
code.secret {
    display: inline-block;
    /* Monospace here is for character disambiguation in a credential the user
       must retype, not decoration. Only Plex Sans Arabic is loaded, so this
       stays on the system mono stack rather than naming a face we never ship. */
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .28rem .7rem;
    color: var(--ink);
    user-select: all;
    direction: ltr;
}

/* ---------- أزرار مصغّرة وأزرار الإجراءات الخطرة ---------- */
button.sm { padding: .3rem .8rem; font-size: .84rem; }

button.danger {
    background: var(--surface);
    color: var(--red);
    border-color: #e3bdb9;
}
button.danger:hover { background: #fdf3f2; border-color: var(--red); }

/* صفوف الجدول فيها أكثر من نموذج، وكل نموذج عنصر block افتراضياً. */
.actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.actions form { display: contents; }

/* ---------- شارات الحالة ---------- */
.tag.admin { color: var(--accent); border-color: #cddcef; background: var(--accent-soft); font-weight: 600; }
.tag.off { color: var(--red); border-color: #e3bdb9; background: #fdf3f2; }

/* ---------- عدّاد بجانب العنوان ---------- */
.count-pill {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 .45rem;
    margin-inline-start: .45rem;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.count-pill.hot { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---------- الوقت في سجل النشاط ---------- */
td.when { color: var(--ink-2); font-size: .82rem; white-space: nowrap; direction: ltr; text-align: right; }

@media (max-width: 560px) {
    .auth-shell { padding: 1.5rem 0 3rem; }
    .auth-card { padding: 1.25rem 1.15rem 1.35rem; }
    .actions { justify-content: flex-start; }
}

/* ---------- شريط تقدم التنقل (v9) ---------- */
/* الصفحات تُبنى على السيرفر، فبين الضغط ووصول أول بايت ما فيه شيء يتحرك
   بالمتصفح إطلاقاً. هذا الشريط يظهر من لحظة الضغط عشان يبان إن فيه شي
   يصير. يختفي لحاله لأن الصفحة الجديدة تستبدل الوثيقة كلها.
   transform بدل width: أسرع، وما يحتاج إعادة تخطيط للصفحة. */
.nav-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 100;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right center;   /* الصفحة RTL: يبدأ من جهة القراءة */
    transition: transform 8s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}

.nav-progress.go { transform: scaleX(.92); }

@media (prefers-reduced-motion: reduce) {
    .nav-progress { transition: none; }
    .nav-progress.go { transform: scaleX(1); opacity: .6; }
}

/* ---------- هياكل التحميل داخل جدول الكتالوج ---------- */
.skeleton-stack { padding: .9rem 1.1rem; }
.skeleton-stack .skeleton-row:nth-child(even) { opacity: .72; }