:root{
  --bg:#f0f4fb;--surface:#ffffff;--surface-2:#f6f9ff;
  --text:#0f172a;--muted:#64748b;--border:#dbe5f0;
  --primary:#1d4ed8;--primary-2:#0f3ea8;
  --success:#16a34a;--danger:#dc2626;--warning:#d97706;
  --shadow:0 18px 50px rgba(15,23,42,.08);--radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Tajawal",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.hidden{display:none !important}

/* ── Login ─────────────────────────────── */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(100%,460px);background:var(--surface);border:1px solid var(--border);border-radius:32px;box-shadow:var(--shadow);padding:34px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.brand img{width:64px;height:64px;object-fit:contain;border-radius:16px;border:1px solid var(--border);padding:8px}
.brand h1{margin:0;font-size:1.35rem}
.brand p{margin:4px 0 0;color:var(--muted);font-size:.93rem}

/* ── Form elements ──────────────────────── */
.field{display:grid;gap:7px}
.field label{font-weight:700;font-size:.93rem;color:var(--text)}
.field input,.field textarea,.field select{width:100%;min-height:46px;border:1px solid var(--border);background:#fff;border-radius:14px;padding:11px 13px;color:var(--text);transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary)}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.search-input{width:100%;min-height:42px;border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 13px;color:var(--text)}
.filter-select{min-height:42px;border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 12px;color:var(--text);cursor:pointer}

/* ── Buttons ────────────────────────────── */
.btn{border:none;border-radius:14px;min-height:44px;padding:10px 18px;font-weight:800;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.93rem}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 10px 24px rgba(29,78,216,.22)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 30px rgba(29,78,216,.3)}
.btn-secondary{background:#eff6ff;color:var(--primary);border:1px solid #c9dbff}
.btn-secondary:hover:not(:disabled){background:#dbeafe}
.btn-danger{background:#fef2f2;color:var(--danger);border:1px solid #fecaca}
.btn-danger:hover:not(:disabled){background:#fee2e2}
.btn-sm{min-height:36px;padding:7px 13px;font-size:.85rem;border-radius:11px}

/* ── App shell ──────────────────────────── */
.app-shell{min-height:100vh}
.topbar{position:sticky;top:0;z-index:20;background:rgba(240,244,251,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1300px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px}
.topbar-title{display:flex;align-items:center;gap:12px}
.topbar-title img{width:46px;height:46px;object-fit:contain;border-radius:13px;border:1px solid var(--border);padding:5px}
.topbar-title h2{margin:0;font-size:1.05rem}
.topbar-title p{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Layout ─────────────────────────────── */
.layout{max-width:1300px;margin:auto;padding:22px 18px 48px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}
.content-area{display:grid;gap:18px}

/* ── Sidebar ────────────────────────────── */
.sidebar{background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);padding:16px;position:sticky;top:82px;height:fit-content;max-height:calc(100vh - 100px);overflow-y:auto}
.slabel{font-size:.73rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin:14px 4px 6px;opacity:.75}
.slabel:first-child{margin-top:4px}
.nav-btn{width:100%;text-align:right;background:none;border:1px solid transparent;border-radius:14px;padding:11px 14px;font-weight:700;color:var(--muted);margin-bottom:4px;cursor:pointer;display:flex;align-items:center;gap:9px;transition:.15s;font-size:.9rem}
.nav-btn .ic{font-size:1.05rem;flex-shrink:0}
.nav-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.nav-btn.active{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#bfdbfe;color:var(--primary);font-weight:800}

/* ── Cards ──────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);padding:22px}
.card h3{margin:0 0 6px;font-size:1.1rem}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.card-head p{margin:0;color:var(--muted);line-height:1.8;font-size:.9rem}
.section-divider{font-size:.8rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:14px 0 4px;border-top:1px solid var(--border);margin-top:8px}

/* ── Grid ───────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grades-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stack{display:grid;gap:13px}

/* ── Stats Dashboard ─────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.stat-card{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:18px;text-align:center;transition:.2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon{font-size:1.6rem;margin-bottom:6px}
.stat-num{font-size:2rem;font-weight:900;color:var(--primary)}
.stat-label{font-size:.85rem;font-weight:700;color:var(--text);margin:2px 0}
.stat-total{font-size:.78rem;color:var(--muted)}

/* ── Content list ───────────────────────── */
.search-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.search-bar .search-input{flex:1;min-width:180px}
.content-list{display:grid;gap:12px}
.content-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);align-items:start;transition:.2s}
.content-item:hover{border-color:#c0d0f0;background:#f5f8ff}
.content-item-img{width:80px;height:64px;border-radius:10px;overflow:hidden;flex-shrink:0}
.content-item-img img{width:100%;height:100%;object-fit:cover}
.content-item-body{min-width:0}
.content-item-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:6px}
.content-item-body h4{margin:0 0 4px;font-size:.96rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.content-item-body p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.7;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.content-item-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.meta-date{font-size:.8rem;color:var(--muted)}

/* ── Urgent list ───────────────────────── */
.urgent-list{display:grid;gap:12px}
.urgent-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);align-items:start}
.urgent-item h4{margin:0 0 4px;font-size:.96rem}
.urgent-item p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.8}
.urgent-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;flex-direction:column}

/* ── Badges ─────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:800}
.badge-success{background:#dcfce7;color:#166534}
.badge-muted{background:#e2e8f0;color:#475569}
.badge-priority{background:#fef3c7;color:#92400e}

/* ── Switch ─────────────────────────────── */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.switch-row strong{display:block;margin-bottom:3px;font-size:.93rem}
.switch-row span{display:block;color:var(--muted);font-size:.85rem;line-height:1.7}
.switch{position:relative;display:inline-flex;width:52px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;transition:.2s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;width:22px;height:22px;top:3px;right:3px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.switch input:checked + .slider{background:var(--success)}
.switch input:checked + .slider::before{transform:translateX(-24px)}

/* ── Option check ───────────────────────── */
.option-check{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;cursor:pointer;padding:8px 4px}
.option-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}

/* ── Banner / notice ────────────────────── */
.banner{padding:13px 15px;border-radius:14px;border:1px solid #dbeafe;background:#eff6ff;color:#1e40af;line-height:1.9;font-size:.88rem}

/* ── Save row ───────────────────────────── */
.save-row{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ── Dialog ─────────────────────────────── */
.dialog-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:60}
.dialog-backdrop.open{display:flex}
.dialog{width:min(100%,560px);background:#fff;border-radius:26px;box-shadow:0 30px 80px rgba(15,23,42,.28);padding:26px;border:1px solid rgba(255,255,255,.4);max-height:92vh;overflow-y:auto}

/* ── Toasts ─────────────────────────────── */
.toast-wrap{position:fixed;left:20px;bottom:20px;z-index:80;display:grid;gap:10px}
.toast{min-width:240px;max-width:360px;padding:13px 16px;border-radius:16px;color:#fff;box-shadow:0 14px 28px rgba(15,23,42,.2);display:flex;align-items:flex-start;gap:10px;line-height:1.7;transition:opacity .4s}
.toast.success{background:#15803d}
.toast.error{background:#b91c1c}
.toast.info{background:#1d4ed8}

/* ── Loading ────────────────────────────── */
.loading-inline{display:flex;align-items:center;gap:10px;padding:20px;color:var(--muted);font-size:.9rem}
.spinner-sm{width:22px;height:22px;border:2.5px solid #dbeafe;border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:26px;border:1.5px dashed var(--border);border-radius:18px;text-align:center;color:var(--muted);line-height:1.9;font-size:.9rem}

/* ── Responsive ─────────────────────────── */
@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;top:auto;max-height:none;overflow-y:visible}
  .grades-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .content-item{grid-template-columns:minmax(0,1fr)}
  .content-item-img{display:none}
  .content-item-actions{flex-direction:row;flex-wrap:wrap}
  .urgent-item{grid-template-columns:1fr}
  .actions{flex-direction:row}
}

/* ── Results data list ─────────────────── */
.results-list { display:grid; gap:10px; margin-top:6px }
.result-item { display:block; border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; transition:.15s; margin-bottom:14px }
.result-item:hover { border-color:#c0d0f0 }
.result-item strong { font-size:.96rem; display:block; margin-bottom:4px }
.result-item table tr:nth-child(even) { background:rgba(0,0,0,.02) }
.result-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--muted); }

/* ══════════════════════════════════════════
   DARK MODE — body.dark
══════════════════════════════════════════ */
body.dark{
  --bg:#0f1117;--surface:#1a1d27;--surface-2:#22263a;
  --text:#e8eaf6;--muted:#8b92b8;--border:#2e3350;
  --primary:#4f7cff;--primary-2:#7c5cfc;
  --success:#22c55e;--danger:#ef4444;--warning:#f59e0b;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
body.dark .topbar{background:rgba(26,29,39,.94)}
body.dark .login-card,body.dark .login-shell{background:radial-gradient(ellipse at 60% 40%,#1a2a5e,#0f1117)}
body.dark .login-card{background:var(--surface);box-shadow:0 20px 60px rgba(0,0,0,.5)}
body.dark .field input,body.dark .field textarea,body.dark .field select,
body.dark .search-input,body.dark .filter-select{background:var(--surface-2);border-color:var(--border);color:var(--text)}
body.dark .field input::placeholder,body.dark .field textarea::placeholder{color:var(--muted)}
body.dark .btn-secondary{background:#1e2535;color:var(--primary);border-color:var(--border)}
body.dark .btn-secondary:hover:not(:disabled){background:#252d42}
body.dark .btn-danger{background:rgba(239,68,68,.12);color:var(--danger);border-color:rgba(239,68,68,.25)}
body.dark .content-item,body.dark .urgent-item,body.dark .result-item,
body.dark .stat-card,body.dark .switch-row{background:var(--surface-2);border-color:var(--border)}
body.dark .content-item:hover,body.dark .result-item:hover{background:#252d42;border-color:rgba(79,124,255,.3)}
body.dark .card{background:var(--surface);border-color:var(--border)}
body.dark .sidebar{background:var(--surface);border-color:var(--border)}
body.dark .nav-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
body.dark .nav-btn.active{background:rgba(79,124,255,.15);border-color:rgba(79,124,255,.3);color:var(--primary)}
body.dark .dialog{background:var(--surface);border-color:var(--border)}
body.dark .banner{background:rgba(79,124,255,.1);border-color:rgba(79,124,255,.25);color:#8db4ff}
body.dark .badge-muted{background:#1e2535;color:var(--muted)}
body.dark .badge-success{background:rgba(34,197,94,.12);color:var(--success)}
body.dark .badge-priority{background:rgba(245,158,11,.12);color:var(--warning)}
body.dark .empty{border-color:var(--border);color:var(--muted)}
body.dark .loading-inline{color:var(--muted)}
body.dark .spinner-sm{border-color:var(--border);border-top-color:var(--primary)}
body.dark [style*="background:#f8fbff"],[data-dark-surface]{background:var(--surface-2) !important}
body.dark .card[style*="background:#f8fbff"]{background:var(--surface-2) !important}
body.dark .grades-grid .option-check{color:var(--text)}
body.dark .slabel{color:var(--muted)}
body.dark .topbar-title p,body.dark .card-head p{color:var(--muted)}
body.dark .toast.info{background:#1a2a5e}

/* ── Theme Toggle Button ─────────────────── */
.btn-theme{min-height:40px;padding:8px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:1rem;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700}
.btn-theme:hover{border-color:var(--primary);color:var(--primary)}
body.dark .btn-theme{background:var(--surface-2)}

/* ══════════════════════════════════════════
   VISITORS PAGE
══════════════════════════════════════════ */
.visitors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.visitor-card{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:16px;text-align:center;transition:.2s}
.visitor-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.visitor-icon{font-size:1.6rem;margin-bottom:6px}
.visitor-num{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--primary-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.visitor-label{font-size:.82rem;font-weight:700;color:var(--muted);margin-top:4px}
.pv-list{display:grid;gap:6px;margin-top:10px}
.pv-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);font-size:.85rem;transition:.15s}
.pv-row:hover{border-color:#c0d0f0}
body.dark .pv-row:hover{border-color:rgba(79,124,255,.3)}
.pv-page{flex:1;color:var(--text)}
.pv-bar-wrap{flex:1;height:5px;background:var(--border);border-radius:999px;overflow:hidden;max-width:120px}
.pv-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px}
.pv-count{font-weight:800;color:var(--primary);min-width:36px;text-align:left}
.daily-chart{display:flex;align-items:flex-end;gap:5px;height:100px;padding:4px 2px;margin-top:10px}
.daily-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.daily-bar-val{font-size:.65rem;color:var(--muted);min-height:12px}
.daily-bar{width:100%;border-radius:4px 4px 0 0;min-height:3px;background:var(--primary);opacity:.4;transition:.2s}
.daily-bar.today{opacity:1}
.daily-bar-label{font-size:.6rem;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);max-height:28px;overflow:hidden}

/* ══════════════════════════════════════════
   QR CODE PAGE
══════════════════════════════════════════ */
.qr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.qr-templates-block{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:14px}
.qr-templates-head{font-size:.9rem;font-weight:800;color:var(--text);margin-bottom:6px}
.qr-templates-wrap{display:flex;flex-wrap:wrap;gap:8px}
.qr-type-hint,.qr-field-note{font-size:.82rem;color:var(--muted);line-height:1.8;margin-top:6px}
.qr-field-note{font-size:.78rem}
.qr-helper-note{padding:10px 12px;border-radius:12px;font-size:.83rem;font-weight:700;line-height:1.9;margin-top:12px}
.qr-helper-note.info{background:rgba(79,124,255,.08);border:1px solid rgba(79,124,255,.18);color:var(--primary)}
.qr-helper-note.success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18);color:var(--success)}
.qr-scope-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qr-scope-chip{padding:6px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.76rem;font-weight:700;color:var(--muted)}

.qr-preview-area{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:16px;align-items:start;margin-top:16px}
.qr-preview-box{background:var(--surface-2);border:1px solid var(--border);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:center;min-height:250px}
body.dark .qr-preview-box{background:var(--surface-2)}
.qr-preview-box canvas,.qr-preview-box img{display:block;max-width:100%;height:auto;border-radius:10px;background:#fff;padding:8px}
.qr-preview-empty{font-size:.9rem;color:var(--muted);text-align:center;line-height:1.9}
.qr-meta-card{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:14px;display:grid;gap:0}
.qr-meta-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.qr-meta-row:last-child{border-bottom:none}
.qr-meta-label{color:var(--muted)}
.qr-meta-val{font-weight:700;color:var(--text);word-break:break-word;text-align:left;max-width:160px}
.qr-actions-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qr-list{display:grid;gap:12px;margin-top:16px}
.qr-item{display:grid;grid-template-columns:28px 88px 1fr auto;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.qr-item:hover{border-color:#a8bfee;box-shadow:0 2px 12px rgba(79,124,255,.08)}
body.dark .qr-item:hover{border-color:rgba(91,141,238,.35);box-shadow:0 2px 12px rgba(91,141,238,.1)}
.qr-item-check{display:flex;align-items:center;justify-content:center}
.qr-item-canvas{width:88px;height:88px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:5px;overflow:hidden;flex-shrink:0;border:1px solid rgba(0,0,0,.06)}
.qr-item-canvas canvas{max-width:100%;max-height:100%}
.qr-item-info{min-width:0}
.qr-item-title{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-item-text{font-size:.81rem;color:var(--muted);line-height:1.6;word-break:break-all;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.qr-item-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qr-item-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex-shrink:0;width:160px}
.qr-status-msg{padding:10px 14px;border-radius:12px;font-size:.85rem;font-weight:700;margin-top:12px;display:none}
.qr-status-msg.show{display:block}
.qr-status-msg.info{background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.2);color:var(--primary)}
.qr-status-msg.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:var(--success)}
.qr-status-msg.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:var(--danger)}
.qr-edit-banner{display:none;align-items:center;justify-content:space-between;gap:12px;background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.25);color:var(--primary);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:.9rem;font-weight:700}
.qr-edit-banner.show{display:flex}
.char-counter{font-size:.75rem;color:var(--muted);text-align:left;margin-top:4px}
@media(max-width:700px){
  .qr-preview-area{grid-template-columns:1fr}
  .qr-item{grid-template-columns:28px 72px 1fr;gap:8px}
  .qr-item-actions{grid-column:1/-1;grid-template-columns:repeat(3,1fr);width:100%}
  .qr-grid-2{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════
   Quill Editor — A1.3
   ══════════════════════════════════════════════════ */

/* حاوية المحرر داخل نافذة الحوار */
.ce-quill-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  min-height: 220px;
}

/* شريط أدوات Quill */
.ce-quill-wrap .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  padding: 6px 8px;
  direction: ltr;   /* شريط الأدوات يبقى LTR دائماً */
}

/* منطقة الكتابة */
.ce-quill-wrap .ql-container {
  border: none;
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  min-height: 180px;
}

/* النص نفسه — RTL */
.ce-quill-wrap .ql-editor {
  direction: rtl;
  text-align: right;
  padding: 14px 16px;
  min-height: 180px;
  color: var(--text);
}

.ce-quill-wrap .ql-editor.ql-blank::before {
  right: 16px;
  left: auto;
  font-style: normal;
  color: var(--muted);
}

/* الوضع الداكن */
body.dark .ce-quill-wrap {
  border-color: rgba(255,255,255,.12);
}
body.dark .ce-quill-wrap .ql-toolbar {
  border-bottom-color: rgba(255,255,255,.10);
}
body.dark .ce-quill-wrap .ql-toolbar .ql-stroke {
  stroke: var(--muted);
}
body.dark .ce-quill-wrap .ql-toolbar .ql-fill {
  fill: var(--muted);
}
body.dark .ce-quill-wrap .ql-toolbar button:hover .ql-stroke,
body.dark .ce-quill-wrap .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--primary);
}
body.dark .ce-quill-wrap .ql-toolbar button:hover .ql-fill,
body.dark .ce-quill-wrap .ql-toolbar button.ql-active .ql-fill {
  fill: var(--primary);
}
body.dark .ce-quill-wrap .ql-toolbar .ql-picker-label {
  color: var(--muted);
}
body.dark .ce-quill-wrap .ql-toolbar .ql-picker-options {
  background: var(--surface-2);
  border-color: rgba(255,255,255,.12);
}
body.dark .ce-quill-wrap .ql-toolbar .ql-picker-item {
  color: var(--text);
}

/* معاينة محتوى Quill في نافذة المعاينة */
.quill-preview h1, .quill-preview h2, .quill-preview h3 {
  margin: 12px 0 6px;
  font-weight: 800;
}
.quill-preview p { margin: 0 0 8px; }
.quill-preview ul, .quill-preview ol {
  padding-right: 24px;
  margin: 8px 0;
}
.quill-preview a { color: var(--primary); }
.quill-preview strong { font-weight: 800; }

/* اتساع نافذة الحوار مع Quill */

/* ── تحسينات المحرر في وضع النهار ── */
.ce-quill-wrap .ql-toolbar .ql-stroke { stroke: #334155; }
.ce-quill-wrap .ql-toolbar .ql-fill  { fill:   #334155; }
.ce-quill-wrap .ql-toolbar button:hover .ql-stroke,
.ce-quill-wrap .ql-toolbar button.ql-active .ql-stroke { stroke: var(--primary); }
.ce-quill-wrap .ql-toolbar button:hover .ql-fill,
.ce-quill-wrap .ql-toolbar button.ql-active .ql-fill   { fill:   var(--primary); }
.ce-quill-wrap .ql-toolbar .ql-picker-label { color: #334155; }
.ce-quill-wrap .ql-toolbar .ql-picker-options {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.1);
}
.ce-quill-wrap .ql-toolbar .ql-picker-item { color: var(--text); }
.ce-quill-wrap .ql-toolbar .ql-picker-item:hover { color: var(--primary); }

/* ── إحصائيات النتائج ── */
.results-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.results-stats-grid .stat-card { padding: 16px; }
.results-stats-grid .stat-num  { font-size: 1.6rem; font-weight: 900; margin-bottom: 4px; }
.results-stats-grid .stat-lbl  { font-size: .8rem; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .results-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── تحسينات التباين العام في اللايت ── */
:not(body.dark) .nav-btn { color: #475569; }
:not(body.dark) .slabel  { opacity: .85; }
:not(body.dark) .stat-card { box-shadow: 0 2px 12px rgba(15,23,42,.06); }
:not(body.dark) .card-head p { color: #64748b; }

/* تحسين dialog في اللايت */
:not(body.dark) .dialog {
  box-shadow: 0 24px 64px rgba(15,23,42,.14);
}
:not(body.dark) .dialog-backdrop {
  background: rgba(15,23,42,.35);
}

/* sidebar footer CodeKenz في اللايت */
:not(body.dark) .sidebar a[href="https://codekenz.com"] {
  color: var(--primary);
  opacity: .7;
}
:not(body.dark) .sidebar a[href="https://codekenz.com"]:hover {
  opacity: 1;
}
.dialog { max-width: 680px; width: 95%; }

/* ══════════════════════════════════════════════════
   Image Upload UI — A1.4
   ══════════════════════════════════════════════════ */

/* wrapper: button + divider + url-input on one row */
.ce-image-upload-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ce-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px dashed var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ce-upload-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.ce-upload-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ce-upload-icon { font-size: 16px; line-height: 1; }
.ce-upload-divider {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.ce-image-url-input {
  flex: 1;
  min-width: 0;
}

/* progress bar */
.ce-upload-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ce-upload-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.ce-upload-progress-fill {
  height: 100%;
  width: 60%;
  background: var(--primary);
  border-radius: 4px;
  animation: upload-pulse 1.2s ease-in-out infinite;
}
@keyframes upload-pulse {
  0%   { width: 10%; opacity: .7; }
  50%  { width: 80%; opacity: 1;  }
  100% { width: 10%; opacity: .7; }
}
.ce-upload-status {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* success preview */
.ce-upload-success {
  position: relative;
  display: inline-block;
}
.ce-upload-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #22c55e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}

/* dark mode adjustments */
body.dark .ce-upload-btn {
  border-color: var(--border);
  background: var(--surface);
}
body.dark .ce-upload-btn:hover:not(:disabled) {
  border-color: var(--primary);
}

/* ═══════════════════════════════════════════════
   A2 — سلة المهملات
   ═══════════════════════════════════════════════ */

/* تبويبات السلة */
.trash-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
  margin-bottom: 12px;
}
.trash-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: transparent;
  color: var(--text, #ccc);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.trash-tab:hover {
  background: var(--surface, rgba(255,255,255,.05));
}
.trash-tab.active {
  background: var(--primary, #6366f1);
  color: #fff;
  border-color: var(--primary, #6366f1);
  font-weight: 600;
}

/* شريط إجراءات السلة */
.trash-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 8px;
}

/* بطاقة عنصر السلة */
.trash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  opacity: .85;
}
.trash-item:hover {
  opacity: 1;
  border-color: var(--border-hover, rgba(255,255,255,.18));
}
.trash-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface, #222);
  flex-shrink: 0;
}
.trash-item-main {
  flex: 1;
  min-width: 0;
}
.trash-item-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trash-item-meta {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.trash-deleted-at {
  font-size: .73rem;
  color: var(--text-muted, #888);
}
.trash-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* تلوين زر الاستعادة */
.btn-restore {
  background: transparent;
  border: 1px solid var(--primary, #6366f1);
  color: var(--primary, #6366f1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-restore:hover {
  background: var(--primary, #6366f1);
  color: #fff;
}

/* حالة السلة الفارغة */
.trash-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #888);
  font-size: .9rem;
}
.trash-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* stat card تحذير (السلة غير فارغة) */
.stat-card--warn {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
}
.stat-card--warn .stat-num {
  color: #ef4444;
}

/* ══════════════════════════════════════════════════
   A3 — تثبيت واجهات المحتوى
   ══════════════════════════════════════════════════ */

/* ── Sidebar trash badge ─────────────────────────── */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  margin-inline-start: auto;
  line-height: 1;
}

/* ── Preview dialog ──────────────────────────────── */
.preview-dialog-inner {
  direction: rtl;
  max-height: 60vh;
  overflow-y: auto;
  padding-inline-end: 4px;
}
.preview-image-wrap {
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  max-height: 220px;
  background: var(--surface-2);
}
.preview-image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
.preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.preview-content {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text);
}
.preview-body {
  font-size: 14px;
  line-height: 1.85;
}
.preview-video-hint {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .82rem;
  color: var(--muted);
  word-break: break-all;
}

/* ── Advanced fields (details/summary) ──────────── */
.ce-advanced-fields {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.ce-advanced-toggle {
  list-style: none;
  padding: 10px 14px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  transition: background .15s;
}
.ce-advanced-toggle:hover { background: var(--bg); }
.ce-advanced-fields[open] .ce-advanced-toggle {
  border-bottom: 1px solid var(--border);
}
.ce-advanced-fields > .stack {
  padding: 14px;
}

/* ── Item updated-at label ───────────────────────── */
.item-updated-at {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Content item hidden state ───────────────────── */
.content-item--hidden {
  opacity: .72;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-2),
    var(--surface-2) 8px,
    var(--bg) 8px,
    var(--bg) 16px
  );
}

/* ════════════════════════════════════════════════════
   P4 — بطاقات المحتوى الموحدة
   بنية flex ثابتة: check | thumb | main | actions
   تعمل مع وجود صورة أو بدونها بلا كسر بصري
   ════════════════════════════════════════════════════ */

/* إعادة تعريف content-item بـ flexbox بدل grid */
.content-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  transition: border-color .2s, background .2s;
}
.content-item:hover {
  border-color: #c0d0f0;
  background: #f5f8ff;
}
body.dark .content-item:hover { background: #252d42; border-color: rgba(79,124,255,.3); }

/* مربع الـ checkbox */
.item-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: 2px;
}

/* حاوية الصورة المصغرة — ثابتة الحجم دائماً (P4: تمنع الكسر) */
.item-thumb-wrap {
  flex-shrink: 0;
  width: 64px;
}
.item-thumb {
  width: 64px;
  height: 56px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
}
/* حالة بدون صورة — مستطيل شفاف خفي يحافظ على المحاذاة */
.item-thumb--empty {
  background-color: transparent;
  border: 1.5px dashed var(--border);
  opacity: .35;
}

/* المنطقة الرئيسية — تأخذ كل المساحة المتبقية */
.item-main {
  flex: 1;
  min-width: 0;
}
.item-title {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}
.item-excerpt {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}
.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* أزرار الإجراءات — عمود ثابت على اليسار (RTL) */
.item-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
}
.item-actions .btn {
  white-space: nowrap;
  text-align: center;
}

/* موبايل: أزرار أفقية */
@media (max-width: 600px) {
  .content-item { flex-wrap: wrap; }
  .item-thumb-wrap { width: 48px; }
  .item-thumb { width: 48px; height: 42px; }
  .item-main { width: calc(100% - 48px - 42px); }
  .item-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

/* ════════════════════════════════════════════════════
   P1 — حالات الصورة داخل المحرر
   ════════════════════════════════════════════════════ */

.ce-image-state-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ce-img-state-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.ce-img-state-saved {
  background: color-mix(in srgb, var(--success,#15803d) 15%, transparent);
  color: var(--success, #15803d);
  border: 1px solid color-mix(in srgb, var(--success,#15803d) 30%, transparent);
}
.ce-img-state-new {
  background: color-mix(in srgb, #2563eb 15%, transparent);
  color: #2563eb;
  border: 1px solid color-mix(in srgb, #2563eb 30%, transparent);
}
.ce-img-state-delete {
  background: color-mix(in srgb, var(--danger,#b91c1c) 12%, transparent);
  color: var(--danger, #b91c1c);
  border: 1px solid color-mix(in srgb, var(--danger,#b91c1c) 30%, transparent);
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════
   P2 — معاينة داخلية في المحرر
   ════════════════════════════════════════════════════ */

.ce-preview-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}
.ce-inline-preview {
  padding: 16px 18px;
  direction: rtl;
  max-height: 320px;
  overflow-y: auto;
}
.ce-inline-preview-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Dark mode — ce states */
body.dark .ce-img-state-saved { color: #4ade80; }
body.dark .ce-img-state-new   { color: #60a5fa; }
body.dark .ce-img-state-delete{ color: #f87171; }

/* ════════════════════════════════════════════════════
   P6 — Toast — عرض أقصى وتفاف النصوص العربية الطويلة
   ════════════════════════════════════════════════════ */

.toast {
  max-width: 380px;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-line;
}


/* ════════════════════════════════════════════════════
   P5 — سلة المهملات — تحسينات المرحلة الخامسة
   ════════════════════════════════════════════════════ */

/* عدّاد التبويب */
.trash-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-inline-start: 6px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--danger, #b91c1c);
  color: #fff;
  vertical-align: middle;
  line-height: 1;
}

/* شريط الإجراءات الجماعية */
.trash-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
  margin-bottom: 12px;
}

/* حالة التحديد في بطاقة السلة */
.trash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  margin-bottom: 8px;
  transition: background .15s, border-color .15s;
}
.trash-item--selected {
  background: color-mix(in srgb, var(--primary, #2563eb) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary, #2563eb) 40%, transparent);
}
.trash-item-check {
  flex-shrink: 0;
  cursor: pointer;
}
.trash-item-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* صورة مصغرة فارغة في السلة */
.trash-item-thumb--empty {
  background: var(--surface2, rgba(100,100,100,.12));
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* حالة فارغة محسّنة */
.trash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
}
.trash-empty-icon { font-size: 2.8rem; margin-bottom: 12px; opacity: .5; }
.trash-empty-msg  { font-size: 1rem; font-weight: 600; }

/* حالة الخطأ */
.trash-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

/* منطقة الخطر العالمي */
.trash-danger-zone {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px dashed color-mix(in srgb, var(--danger, #b91c1c) 40%, transparent);
}
.trash-danger-zone-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--danger, #b91c1c) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #b91c1c) 25%, transparent);
  border-radius: 10px;
}
.trash-danger-zone-label {
  font-weight: 700;
  font-size: .82rem;
  color: var(--danger, #b91c1c);
  flex-shrink: 0;
}
.trash-danger-zone-desc {
  font-size: .8rem;
  color: var(--muted);
  flex: 1;
  min-width: 160px;
}

/* Dark mode adjustments */
body.dark .trash-item--selected {
  background: color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent);
}

/* ══════════════════════════════════════════════════
   P7 — تحديث دارك مود الإدارة
   مواءمة بصرية محسّنة — 3 طبقات مرجعية:
   الخلفية / سطح الكارت-المودال / النص الأساسي
   ══════════════════════════════════════════════════ */

/* P7.1 — تحديث متغيرات الألوان الأساسية للداكن
   خلفية أهدأ وأعمق، سطوح أكثر تمييزًا، نص أوضح */
body.dark {
  --bg:       #0c1018;
  --surface:  #141922;
  --surface-2:#1c2235;
  --text:     #e4e9f5;
  --muted:    #8892b3;
  --border:   #2b3352;
  --primary:  #5b8dee;
  --primary-2:#7c5cf6;
  --shadow:   0 20px 60px rgba(0,0,0,.55);
}

/* P7.1 — Topbar محسّن في الداكن */
body.dark .topbar {
  background: rgba(20, 25, 34, 0.97);
  border-bottom: 1px solid rgba(91,141,238,.12);
  box-shadow: 0 1px 12px rgba(0,0,0,.4);
}

/* P7.1 — Sidebar محسّن في الداكن */
body.dark .sidebar {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* P7.1 — Nav button active — gradient محسّن */
body.dark .nav-btn.active {
  background: linear-gradient(135deg,
    rgba(91,141,238,.2) 0%,
    rgba(124,92,246,.12) 100%);
  border-color: rgba(91,141,238,.4);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(91,141,238,.1);
}

/* P7.1 — section-divider في الداكن */
body.dark .section-divider {
  border-top-color: var(--border);
  color: var(--muted);
}

/* P7.1 — card shadow في الداكن */
body.dark .card {
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}


/* ── P7.2 — عناصر الإدخال والتفاعل ─────────────────── */

/* حقول الإدخال */
body.dark .field input,
body.dark .field textarea,
body.dark .field select {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
body.dark .field input:focus,
body.dark .field textarea:focus,
body.dark .field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,141,238,.14);
  outline: none;
}
body.dark .field input::placeholder,
body.dark .field textarea::placeholder {
  color: rgba(136,146,179,.55);
}

/* شريط البحث والفلتر */
body.dark .search-input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
body.dark .search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,141,238,.14);
}
body.dark .filter-select {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
body.dark .filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* أزرار ثانوية وخطر */
body.dark .btn-secondary {
  background: rgba(91,141,238,.1);
  color: var(--primary);
  border-color: rgba(91,141,238,.25);
}
body.dark .btn-secondary:hover:not(:disabled) {
  background: rgba(91,141,238,.18);
  border-color: rgba(91,141,238,.4);
}

/* Dialog محسّن */
body.dark .dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
body.dark .dialog-backdrop {
  background: rgba(8,12,20,.72);
}

/* Switch row */
body.dark .switch-row {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark .switch .slider {
  background: #2b3352;
}
body.dark .switch input:checked + .slider {
  background: var(--success);
}

/* Scrollbar في الداكن */
body.dark ::-webkit-scrollbar        { width: 6px; height: 6px; }
body.dark ::-webkit-scrollbar-track  { background: var(--surface); }
body.dark ::-webkit-scrollbar-thumb  {
  background: var(--border);
  border-radius: 3px;
}
body.dark ::-webkit-scrollbar-thumb:hover { background: var(--muted); }


/* ── P7.3 — مكوّنات P4 / P5 / P6 غير مغطاة سابقًا ─── */

/* صورة مصغرة فارغة داخل قائمة المحتوى */
body.dark .item-thumb--empty {
  border-color: rgba(255,255,255,.1);
  opacity: .2;
}

/* ── معاينة المحرر الداخلية (P2) ─────── */
body.dark .ce-preview-panel {
  border-color: var(--border);
  background: var(--bg);
}
body.dark .ce-inline-preview-title {
  border-bottom-color: var(--border);
  color: var(--muted);
}

/* ── حقل تحميل الصورة (P1) ──────────── */
body.dark .ce-upload-btn {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text);
}
body.dark .ce-upload-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: rgba(91,141,238,.1);
}
body.dark .ce-upload-progress-bar {
  background: var(--border);
}

/* ── Quill editor (محسّن) ─────────────── */
body.dark .ce-quill-wrap {
  border-color: var(--border);
  background: var(--surface-2);
}
body.dark .ce-quill-wrap .ql-toolbar {
  background: var(--surface);
  border-bottom-color: var(--border);
}
body.dark .ce-quill-wrap .ql-editor {
  background: var(--surface-2);
  color: var(--text);
}

/* ── الحقول المتقدمة (P3) ────────────── */
body.dark .ce-advanced-fields {
  border-color: var(--border);
}
body.dark .ce-advanced-toggle {
  background: var(--surface-2);
  color: var(--muted);
}
body.dark .ce-advanced-toggle:hover {
  background: rgba(255,255,255,.03);
}
body.dark .ce-advanced-fields[open] .ce-advanced-toggle {
  border-bottom-color: var(--border);
}
body.dark .ce-advanced-fields > .stack {
  background: var(--surface-2);
}

/* معاينة التفاصيل */
body.dark .preview-video-hint {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}
body.dark .preview-image-wrap {
  background: var(--surface-2);
}

/* ── سلة المهملات (P5) — غطاء كامل ─── */
body.dark .trash-tabs {
  border-bottom-color: var(--border);
}
body.dark .trash-tab {
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}
body.dark .trash-tab:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
body.dark .trash-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
body.dark .trash-tab-badge {
  background: var(--danger);
}
body.dark .trash-action-bar {
  border-bottom-color: var(--border);
}
body.dark .trash-item {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark .trash-item:hover {
  border-color: rgba(91,141,238,.3);
  background: rgba(91,141,238,.06);
}
body.dark .trash-item--selected {
  background: rgba(91,141,238,.12);
  border-color: rgba(91,141,238,.4);
}
body.dark .trash-item-thumb--empty {
  border-color: var(--border);
  background: rgba(255,255,255,.04);
}
body.dark .trash-item-title  { color: var(--text); }
body.dark .trash-deleted-at  { color: var(--muted); }
body.dark .btn-restore {
  border-color: var(--primary);
  color: var(--primary);
}
body.dark .btn-restore:hover {
  background: var(--primary);
  color: #fff;
}
body.dark .trash-empty      { color: var(--muted); }
body.dark .trash-error      { color: var(--muted); }

/* منطقة الخطر العالمي في السلة */
body.dark .trash-danger-zone {
  border-top-color: rgba(239,68,68,.3);
}
body.dark .trash-danger-zone-inner {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.22);
}
body.dark .trash-danger-zone-label { color: var(--danger); }
body.dark .trash-danger-zone-desc  { color: var(--muted);  }

/* stat-card تحذير في الداكن */
body.dark .stat-card--warn {
  border-color: rgba(239,68,68,.3);
  background: rgba(239,68,68,.08);
}
body.dark .stat-card--warn .stat-num { color: #f87171; }

/* ── Toast محسّن في الداكن ────────────── */
body.dark .toast.success { background: #14532d; }
body.dark .toast.error   { background: #7f1d1d; }
body.dark .toast.info    { background: #162040; }

/* ── QR page في الداكن ────────────────── */
body.dark .qr-templates-block,
body.dark .qr-meta-card,
body.dark .qr-preview-box {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark .qr-meta-row {
  border-bottom-color: var(--border);
}
body.dark .qr-meta-label { color: var(--muted); }
body.dark .qr-meta-val   { color: var(--text);  }
body.dark .qr-scope-chip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}
body.dark .qr-item {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark .qr-item:hover {
  border-color: rgba(91,141,238,.3);
}
body.dark .qr-edit-banner {
  background: rgba(91,141,238,.1);
  border-color: rgba(91,141,238,.25);
  color: var(--primary);
}

/* ── Visitors page في الداكن ─────────── */
body.dark .visitor-card {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark .pv-row {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark .pv-row:hover {
  border-color: rgba(91,141,238,.3);
}
body.dark .pv-bar-wrap { background: var(--border); }
body.dark .pv-page     { color: var(--text);  }
body.dark .pv-count    { color: var(--primary); }

/* ── Banner في الداكن ────────────────── */
body.dark .banner {
  background: rgba(91,141,238,.1);
  border-color: rgba(91,141,238,.22);
  color: #93b4f5;
}

/* ── Result items في الداكن ──────────── */
body.dark .result-item:hover {
  background: rgba(91,141,238,.07);
  border-color: rgba(91,141,238,.28);
}
body.dark .result-item table thead tr { background: var(--surface-2); }
body.dark .result-item table tfoot tr { background: var(--surface-2); }
body.dark .result-item table tr:nth-child(even) { background: rgba(255,255,255,.03); }
/* تصحيح ألوان chips في الداكن */
body.dark .result-item span[style*="background:#dbeafe"] { background:#1e3a5f !important; color:#60a5fa !important; }
body.dark .result-item span[style*="background:#cffafe"] { background:#164e63 !important; color:#22d3ee !important; }
body.dark .result-item span[style*="background:#dcfce7"] { background:#14532d !important; color:#4ade80 !important; }
body.dark .result-item span[style*="background:#fef3c7"] { background:#451a03 !important; color:#fbbf24 !important; }
body.dark .result-item span[style*="background:#fee2e2"] { background:#450a0a !important; color:#f87171 !important; }
body.dark .result-item span[style*="background:#f1f5f9"] { background:#1e293b !important; color:#94a3b8 !important; }

/* ── Char counter hint ────────────────── */
body.dark .char-counter { color: var(--muted); }

/* ── QR status messages ───────────────── */
body.dark .qr-status-msg.info    {
  background: rgba(91,141,238,.12);
  border-color: rgba(91,141,238,.25);
  color: var(--primary);
}
body.dark .qr-status-msg.success {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.2);
  color: var(--success);
}
body.dark .qr-status-msg.error   {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.2);
  color: var(--danger);
}

/* ── Item hidden state ────────────────── */
body.dark .content-item--hidden {
  background: repeating-linear-gradient(
    135deg,
    var(--surface-2),
    var(--surface-2) 8px,
    rgba(255,255,255,.015) 8px,
    rgba(255,255,255,.015) 16px
  );
}

/* ── RF-B: Import Target Banner ───────────────────────── */
.imp-target-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(91,141,238,.10);
  border: 1px solid rgba(91,141,238,.25);
  margin-bottom: 16px;
}
.imp-target-label {
  font-size: .88rem;
  color: var(--muted);
  font-weight: 600;
}
.imp-grade-badge,
.imp-term-badge {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
}
.imp-change-link {
  font-size: .82rem;
  color: var(--muted);
  cursor: default;
  margin-right: auto;
}
body.dark .imp-target-banner {
  background: rgba(91,141,238,.08);
  border-color: rgba(91,141,238,.20);
}