: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);
}

/* ══════════════════════════════════════════════════════
   NEWS-1B — Admin rich preview and image contract
   يعرض تنسيق محرر المحتوى داخل معاينة الأدمن بوضوح
   ══════════════════════════════════════════════════════ */
.quill-preview h1{font-size:1.35rem;font-weight:900;margin:18px 0 10px;line-height:1.5;color:var(--text)}
.quill-preview h2{font-size:1.18rem;font-weight:900;margin:16px 0 8px;line-height:1.55;color:var(--text)}
.quill-preview h3{font-size:1.05rem;font-weight:850;margin:14px 0 7px;line-height:1.6;color:var(--text)}
.quill-preview p{margin:0 0 10px;line-height:1.9}
.quill-preview ul,.quill-preview ol{margin:0 0 12px;padding-inline-end:24px}
.quill-preview li{margin:0 0 6px;line-height:1.9}
.quill-preview blockquote{margin:12px 0;padding:10px 14px;border-inline-start:4px solid var(--primary);background:rgba(96,165,250,.08);border-radius:10px}
.quill-preview strong{font-weight:900;color:var(--text)}
.quill-preview em{font-style:italic}
.quill-preview u{text-underline-offset:4px}
.quill-preview .ql-align-center{text-align:center}
.quill-preview .ql-align-right{text-align:right}
.quill-preview .ql-align-left{text-align:left}
.quill-preview .ql-align-justify{text-align:justify}
.item-thumb-wrap{display:flex;align-items:center;justify-content:center}
.item-thumb--empty::after{content:'بدون صورة';font-size:.68rem;color:var(--muted);opacity:.75}

/* ══════════════════════════════════════════════════
   U1 — Upload Guard: prevent saving content before image upload completes
   Applies to all content sections using the shared content editor.
   ══════════════════════════════════════════════════ */
.ce-upload-progress--success .ce-upload-progress-fill {
  width: 100%;
  animation: none;
  background: var(--success);
}
.ce-upload-progress--error .ce-upload-progress-fill {
  width: 100%;
  animation: none;
  background: var(--danger);
}
.ce-upload-progress--loading .ce-upload-status {
  color: var(--warning);
  font-weight: 700;
}
.ce-upload-progress--success .ce-upload-status {
  color: var(--success);
  font-weight: 700;
}
.ce-upload-progress--error .ce-upload-status {
  color: var(--danger);
  font-weight: 700;
}
.ce-image-url-input:disabled,
.ce-image-state-bar button:disabled,
#dialog-cancel:disabled,
#dialog-close:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════
   ADMIN-THEME-1A — Modern theme foundation
   هدف المرحلة: توحيد Light / Dark بطريقة حديثة وآمنة بدون لمس منطق الأدمن.
   التقنية: CSS custom properties + data-theme + color-scheme + system preference.
   ══════════════════════════════════════════════════════ */
:root,
html[data-theme="light"],
body[data-theme="light"]{
  color-scheme: light;
  --bg:#f7f9f4;
  --surface:#fffefb;
  --surface-2:#f1f6ec;
  --surface-3:#e8f1df;
  --text:#172116;
  --muted:#66745f;
  --border:rgba(45,90,39,.15);
  --primary:#2d5a27;
  --primary-2:#5d6f27;
  --success:#17834a;
  --danger:#c0392b;
  --warning:#c58a16;
  --accent:#c9932a;
  --focus-ring:rgba(201,147,42,.38);
  --shadow:0 18px 48px rgba(45,90,39,.10);
  --shadow-soft:0 10px 30px rgba(45,90,39,.08);
  --radius:22px;
  accent-color:var(--primary);
}
html[data-theme="dark"],
body[data-theme="dark"],
body.dark{
  color-scheme: dark;
  --bg:#0f1712;
  --surface:#162018;
  --surface-2:#101a13;
  --surface-3:#1d2a20;
  --text:#edf6e8;
  --muted:#b8c7b1;
  --border:rgba(232,245,227,.12);
  --primary:#9fbd64;
  --primary-2:#7ea24e;
  --success:#4ade80;
  --danger:#f87171;
  --warning:#f4bf55;
  --accent:#d6aa4a;
  --focus-ring:rgba(214,170,74,.35);
  --shadow:0 22px 60px rgba(0,0,0,.34);
  --shadow-soft:0 14px 36px rgba(0,0,0,.26);
  accent-color:var(--primary);
}

html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 20% -10%, rgba(201,147,42,.16), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(45,90,39,.12), transparent 30%),
    linear-gradient(180deg,var(--bg) 0%,#eef4e7 52%,var(--bg) 100%);
  color:var(--text);
  transition:background-color .18s ease,color .18s ease;
}
body.dark,
body[data-theme="dark"]{
  background:
    radial-gradient(circle at 20% -10%, rgba(214,170,74,.10), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(159,189,100,.10), transparent 30%),
    linear-gradient(180deg,#0c130f 0%,var(--bg) 50%,#0b110d 100%);
}

.login-shell{
  background:
    radial-gradient(circle at 50% -20%, rgba(201,147,42,.18), transparent 38%),
    linear-gradient(135deg,var(--bg),var(--surface-2));
}
.login-card,.card,.sidebar,.dialog{
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border-color:var(--border);
  box-shadow:var(--shadow);
}
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))){
  .topbar,.login-card,.card,.sidebar,.dialog{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
}

.topbar{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 32px rgba(45,90,39,.08);
}
body.dark .topbar,
body[data-theme="dark"] .topbar{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
}
.topbar-title img,.brand img{
  background:#fff;
  border-color:rgba(201,147,42,.32);
  box-shadow:0 8px 22px rgba(45,90,39,.13);
}
.topbar-title h2,.brand h1,.card h3{color:var(--text)}
.topbar-title p,.brand p,.card-head p,.meta-date{color:var(--muted)}

.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 92%,transparent));
}
.slabel{
  color:var(--muted);
  letter-spacing:.5px;
}
.nav-btn{
  color:color-mix(in srgb,var(--text) 62%,var(--muted));
}
.nav-btn:hover{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--border);
}
.nav-btn.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 15%,var(--surface)),color-mix(in srgb,var(--accent) 12%,var(--surface-2)));
  border-color:color-mix(in srgb,var(--primary) 32%,var(--border));
  color:var(--primary);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 8%,transparent);
}

.field input,.field textarea,.field select,
.search-input,.filter-select{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.field input:focus,.field textarea:focus,.field select:focus,
.search-input:focus,.filter-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--focus-ring);
}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent)}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 24%,transparent);
}
.btn-primary:hover:not(:disabled){
  box-shadow:0 16px 36px color-mix(in srgb,var(--primary) 32%,transparent);
}
.btn-secondary{
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 22%,var(--border));
}
.btn-secondary:hover:not(:disabled){
  background:color-mix(in srgb,var(--primary) 16%,var(--surface-2));
}
.btn-danger{
  background:color-mix(in srgb,var(--danger) 10%,var(--surface));
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
}
.btn-theme{
  min-inline-size:92px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 90%,var(--primary)),var(--surface-2));
  border-color:var(--border);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}
.btn-theme:hover{
  color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 36%,var(--border));
}

.content-item,.urgent-item,.result-item,.stat-card,.switch-row,.qr-item,.visitor-card,.pv-row,
.trash-item,.ce-preview-panel,.ce-advanced-fields > .stack,.qr-templates-block,.qr-meta-card,.qr-preview-box{
  background:var(--surface-2);
  border-color:var(--border);
}
.content-item:hover,.urgent-item:hover,.result-item:hover,.stat-card:hover,.qr-item:hover,.pv-row:hover,.trash-item:hover{
  background:color-mix(in srgb,var(--surface-2) 82%,var(--primary));
  border-color:color-mix(in srgb,var(--primary) 32%,var(--border));
}
.badge-success{background:color-mix(in srgb,var(--success) 15%,var(--surface));color:var(--success)}
.badge-muted{background:color-mix(in srgb,var(--muted) 16%,var(--surface));color:var(--muted)}
.badge-priority{background:color-mix(in srgb,var(--accent) 18%,var(--surface));color:var(--warning)}

.ce-quill-wrap,.ce-quill-wrap .ql-toolbar,.ce-quill-wrap .ql-editor{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
.ce-quill-wrap .ql-editor{background:var(--surface-2)}
.ce-quill-wrap .ql-toolbar .ql-picker-label{color:var(--text)}
.ce-quill-wrap .ql-toolbar .ql-stroke{stroke:var(--text)}
.ce-quill-wrap .ql-toolbar .ql-fill{fill:var(--text)}

.dialog-backdrop{background:rgba(8,14,10,.48)}
.toast{box-shadow:var(--shadow)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:999px;border:2px solid var(--surface-2)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--primary) 55%,var(--muted))}
*{scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) var(--surface-2);scrollbar-width:thin}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

@media (max-width:720px){
  .topbar-inner{align-items:flex-start}
  .inline-actions{width:100%;justify-content:flex-start}
  .btn-theme{min-inline-size:86px}
}

/* ══════════════════════════════════════════════════════
   ADMIN-THEME-1B — Responsive + Visual Polish + Light Contrast
   نطاق المرحلة: تحسين قابلية القراءة والتوافق البصري للأدمن فقط.
   لا يلمس هذا القسم منطق الحفظ، Supabase، الباركود، أو أي JavaScript.
   ══════════════════════════════════════════════════════ */

/* 1B.1 — Light mode contrast hardening */
:root,
html[data-theme="light"],
body[data-theme="light"]{
  --bg:#f6f8f1;
  --surface:#ffffff;
  --surface-2:#eef5e8;
  --surface-3:#e2ecd9;
  --text:#10210f;
  --muted:#4f6149;
  --border:rgba(45,90,39,.22);
  --primary:#24531f;
  --primary-2:#5d6f27;
  --success:#137b43;
  --danger:#b83228;
  --warning:#a96d05;
  --accent:#b77d18;
  --focus-ring:rgba(183,125,24,.34);
  --shadow:0 18px 46px rgba(35,70,30,.12);
  --shadow-soft:0 10px 28px rgba(35,70,30,.10);
}

body:not(.dark),
body[data-theme="light"]{
  background:
    radial-gradient(circle at 18% -12%, rgba(183,125,24,.13), transparent 32%),
    radial-gradient(circle at 84% 4%, rgba(36,83,31,.12), transparent 29%),
    linear-gradient(180deg,#f8faf4 0%,#eef5e8 52%,#f8faf4 100%);
}

body:not(.dark) .topbar,
body[data-theme="light"] .topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(36,83,31,.18);
  box-shadow:0 12px 34px rgba(36,83,31,.10);
}

body:not(.dark) .login-card,
body:not(.dark) .card,
body:not(.dark) .sidebar,
body:not(.dark) .dialog,
body[data-theme="light"] .login-card,
body[data-theme="light"] .card,
body[data-theme="light"] .sidebar,
body[data-theme="light"] .dialog{
  background:rgba(255,255,255,.96);
  border-color:var(--border);
}

body:not(.dark) .card h3,
body:not(.dark) .topbar-title h2,
body:not(.dark) .brand h1,
body:not(.dark) .field label,
body[data-theme="light"] .card h3,
body[data-theme="light"] .topbar-title h2,
body[data-theme="light"] .brand h1,
body[data-theme="light"] .field label{
  color:var(--text);
}

body:not(.dark) .card-head p,
body:not(.dark) .topbar-title p,
body:not(.dark) .brand p,
body:not(.dark) .item-excerpt,
body:not(.dark) .meta-date,
body:not(.dark) .result-meta,
body:not(.dark) .visitor-label,
body:not(.dark) .qr-type-hint,
body:not(.dark) .qr-field-note,
body:not(.dark) .char-counter,
body[data-theme="light"] .card-head p,
body[data-theme="light"] .topbar-title p,
body[data-theme="light"] .brand p,
body[data-theme="light"] .item-excerpt,
body[data-theme="light"] .meta-date,
body[data-theme="light"] .result-meta,
body[data-theme="light"] .visitor-label,
body[data-theme="light"] .qr-type-hint,
body[data-theme="light"] .qr-field-note,
body[data-theme="light"] .char-counter{
  color:var(--muted);
}

body:not(.dark) .field input,
body:not(.dark) .field textarea,
body:not(.dark) .field select,
body:not(.dark) .search-input,
body:not(.dark) .filter-select,
body[data-theme="light"] .field input,
body[data-theme="light"] .field textarea,
body[data-theme="light"] .field select,
body[data-theme="light"] .search-input,
body[data-theme="light"] .filter-select{
  background:#fff;
  border-color:rgba(45,90,39,.24);
  color:#10210f;
}

body:not(.dark) .field input::placeholder,
body:not(.dark) .field textarea::placeholder,
body[data-theme="light"] .field input::placeholder,
body[data-theme="light"] .field textarea::placeholder{
  color:#73806e;
}

body:not(.dark) .content-item,
body:not(.dark) .urgent-item,
body:not(.dark) .result-item,
body:not(.dark) .stat-card,
body:not(.dark) .switch-row,
body:not(.dark) .qr-item,
body:not(.dark) .visitor-card,
body:not(.dark) .pv-row,
body:not(.dark) .trash-item,
body:not(.dark) .qr-templates-block,
body:not(.dark) .qr-meta-card,
body:not(.dark) .qr-preview-box,
body[data-theme="light"] .content-item,
body[data-theme="light"] .urgent-item,
body[data-theme="light"] .result-item,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .switch-row,
body[data-theme="light"] .qr-item,
body[data-theme="light"] .visitor-card,
body[data-theme="light"] .pv-row,
body[data-theme="light"] .trash-item,
body[data-theme="light"] .qr-templates-block,
body[data-theme="light"] .qr-meta-card,
body[data-theme="light"] .qr-preview-box{
  background:#f3f8ee;
  border-color:rgba(45,90,39,.18);
}

body:not(.dark) .content-item:hover,
body:not(.dark) .urgent-item:hover,
body:not(.dark) .result-item:hover,
body:not(.dark) .stat-card:hover,
body:not(.dark) .qr-item:hover,
body:not(.dark) .pv-row:hover,
body:not(.dark) .trash-item:hover,
body[data-theme="light"] .content-item:hover,
body[data-theme="light"] .urgent-item:hover,
body[data-theme="light"] .result-item:hover,
body[data-theme="light"] .stat-card:hover,
body[data-theme="light"] .qr-item:hover,
body[data-theme="light"] .pv-row:hover,
body[data-theme="light"] .trash-item:hover{
  background:#edf5e6;
  border-color:rgba(36,83,31,.34);
}

body:not(.dark) .btn-secondary,
body[data-theme="light"] .btn-secondary{
  background:#eef6e8;
  color:#24531f;
  border-color:rgba(36,83,31,.28);
}
body:not(.dark) .btn-secondary:hover:not(:disabled),
body[data-theme="light"] .btn-secondary:hover:not(:disabled){
  background:#e2eed9;
}
body:not(.dark) .btn-danger,
body[data-theme="light"] .btn-danger{
  background:#fff1ef;
  color:#a72820;
  border-color:rgba(184,50,40,.26);
}
body:not(.dark) .banner,
body[data-theme="light"] .banner{
  background:#edf5e6;
  border-color:rgba(36,83,31,.24);
  color:#24531f;
}
body:not(.dark) .badge-muted,
body[data-theme="light"] .badge-muted{
  background:#e5ecde;
  color:#42523d;
}
body:not(.dark) .badge-success,
body[data-theme="light"] .badge-success{
  background:#e3f5e9;
  color:#0f6b39;
}
body:not(.dark) .badge-priority,
body[data-theme="light"] .badge-priority{
  background:#fff2cd;
  color:#7a4c00;
}

/* 1B.2 — Desktop polish */
.topbar-inner{
  min-height:72px;
}
.inline-actions{
  align-items:center;
  justify-content:flex-end;
}
.inline-actions > a[title*="CodeKenz"]{
  background:var(--surface-2) !important;
  color:var(--primary) !important;
  border-color:var(--border) !important;
}
.layout{
  align-items:start;
}
.sidebar{
  scrollbar-gutter:stable;
}
.nav-btn{
  min-height:43px;
}
.nav-btn .ic{
  width:1.35em;
  display:inline-flex;
  justify-content:center;
}
.card{
  overflow:hidden;
}
.card-head{
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
}
.card-head:has(+ .stats-grid),
.card-head:has(+ .stack),
.card-head:has(+ .search-bar),
.card-head:has(+ .grid-2){
  margin-bottom:18px;
}
.search-bar{
  align-items:center;
}
.save-row .btn,
.card-head .btn,
.search-bar .btn{
  flex-shrink:0;
}
.result-item{
  background:var(--surface-2);
}
.result-item > div,
.result-item table{
  min-width:0;
}
.result-item table{
  width:100%;
  border-collapse:collapse;
}
.result-item table th,
.result-item table td{
  padding:8px 10px;
  border-color:var(--border) !important;
}

/* 1B.3 — Better dialogs and editor on small screens */
.dialog-backdrop{
  align-items:flex-start;
  overflow:auto;
}
.dialog{
  margin-block:20px;
  width:min(100%,720px);
}
.ce-quill-wrap .ql-toolbar{
  overflow-x:auto;
  scrollbar-width:thin;
}
.ce-inline-preview,
.preview-dialog-inner{
  overscroll-behavior:contain;
}

/* 1B.4 — Tablet layout */
@media (max-width:1100px){
  .layout{
    grid-template-columns:1fr;
    max-width:980px;
    gap:16px;
  }
  .sidebar{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
    gap:8px;
    padding:14px;
  }
  .slabel{
    grid-column:1/-1;
    margin:8px 4px 2px;
  }
  .slabel:first-child{margin-top:0}
  .nav-btn{
    margin:0;
    justify-content:flex-start;
    padding:10px 12px;
  }
}

@media (max-width:900px){
  .topbar-inner{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .topbar-title{
    min-width:0;
  }
  .topbar-title h2{
    font-size:1rem;
  }
  .topbar-title p{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .inline-actions{
    width:100%;
    justify-content:flex-start;
  }
  .grid-2,
  .qr-grid-2{
    grid-template-columns:1fr;
  }
  .qr-preview-area{
    grid-template-columns:1fr;
  }
  .qr-item{
    grid-template-columns:28px 72px minmax(0,1fr);
  }
  .qr-item-actions{
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
}

/* 1B.5 — Mobile layout */
@media (max-width:640px){
  html,body{
    font-size:15px;
  }
  .login-shell{
    padding:14px;
  }
  .login-card{
    padding:22px;
    border-radius:24px;
  }
  .brand img{
    width:56px;
    height:56px;
  }
  .topbar-inner{
    padding:12px 14px;
  }
  .topbar-title img{
    width:42px;
    height:42px;
  }
  .inline-actions{
    gap:8px;
  }
  .inline-actions .btn,
  .inline-actions .btn-theme,
  .inline-actions > a[title*="CodeKenz"]{
    min-height:38px;
    padding:7px 10px !important;
    font-size:.78rem !important;
  }
  .layout{
    padding:14px 10px 34px;
  }
  .sidebar{
    border-radius:20px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding:12px;
  }
  .nav-btn{
    min-height:42px;
    padding:9px 10px;
    border-radius:12px;
    font-size:.82rem;
  }
  .nav-btn .ic{
    font-size:1rem;
    width:1.1em;
  }
  .card{
    border-radius:20px;
    padding:16px;
  }
  .card-head{
    gap:10px;
  }
  .card h3{
    font-size:1rem;
  }
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .stat-card{
    padding:14px 10px;
  }
  .stat-num{
    font-size:1.55rem;
  }
  .grades-grid{
    grid-template-columns:1fr;
  }
  .search-bar{
    display:grid;
    grid-template-columns:1fr;
  }
  .search-bar .search-input,
  .filter-select,
  .search-bar .btn{
    width:100%;
  }
  .content-item{
    display:grid;
    grid-template-columns:auto 52px minmax(0,1fr);
    gap:8px;
    padding:12px;
    border-radius:14px;
  }
  .item-check{grid-column:1;grid-row:1;align-self:start}
  .item-thumb-wrap{grid-column:2;grid-row:1;width:52px}
  .item-thumb{width:52px;height:46px;border-radius:9px}
  .item-main{grid-column:3;grid-row:1;width:auto;min-width:0}
  .item-actions{
    grid-column:1/-1;
    grid-row:2;
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;
  }
  .item-actions .btn{
    flex:1 1 88px;
    min-height:36px;
    padding:7px 9px;
    font-size:.8rem;
  }
  .urgent-item{
    grid-template-columns:1fr;
    padding:13px;
  }
  .actions,
  .save-row{
    flex-direction:row;
    justify-content:stretch;
  }
  .save-row .btn,
  .actions .btn{
    flex:1 1 130px;
  }
  .switch-row{
    align-items:flex-start;
  }
  .dialog-backdrop{
    padding:8px;
  }
  .dialog{
    margin-block:8px;
    max-height:calc(100vh - 16px);
    border-radius:20px;
    padding:18px;
  }
  .toast-wrap{
    right:10px;
    left:10px;
    bottom:12px;
  }
  .toast{
    width:100%;
    max-width:none;
    min-width:0;
  }
  .qr-item{
    grid-template-columns:24px 58px minmax(0,1fr);
    gap:8px;
    padding:10px;
  }
  .qr-item-canvas{
    width:58px;
    height:58px;
  }
  .qr-item-actions{
    grid-template-columns:1fr;
  }
  .qr-meta-row{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
  }
  .qr-meta-val{
    max-width:none;
    text-align:right;
  }
  .result-item{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .result-item table{
    min-width:560px;
  }
}

@media (max-width:420px){
  .stats-grid{
    grid-template-columns:1fr;
  }
  .sidebar{
    grid-template-columns:1fr;
  }
  .topbar-title h2{
    font-size:.94rem;
  }
  .topbar-title p{
    font-size:.78rem;
  }
  .inline-actions .btn,
  .inline-actions .btn-theme,
  .inline-actions > a[title*="CodeKenz"]{
    flex:1 1 calc(50% - 6px);
    justify-content:center;
  }
  .content-item{
    grid-template-columns:48px minmax(0,1fr);
  }
  .item-check{
    grid-column:1/-1;
    grid-row:auto;
  }
  .item-thumb-wrap{grid-column:1;grid-row:auto;width:48px}
  .item-thumb{width:48px;height:42px}
  .item-main{grid-column:2;grid-row:auto}
}



/* ════════════════════════════════════════════════════════════════
   ADMIN-THEME-1C — Dark Mode Contrast Fix
   هدف المرحلة: رفع تباين الوضع الداكن بدون لمس وظائف الأدمن.
   يعتمد على data-theme الحديث مع إبقاء body.dark للتوافق.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  color-scheme:dark;
  background:#07110c;
}
html[data-theme="dark"] body,
body[data-theme="dark"],
body.dark{
  --bg:#07110c;
  --surface:#0f1d14;
  --surface-2:#15271b;
  --surface-3:#1c3223;
  --text:#f4f8f1;
  --muted:#c4d1bd;
  --muted-2:#9fb096;
  --border:#365242;
  --border-strong:#52705b;
  --primary:#91d875;
  --primary-2:#d7b64c;
  --accent:#d7b64c;
  --success:#7ee29c;
  --danger:#ff8a80;
  --warning:#ffd166;
  --focus-ring:rgba(145,216,117,.26);
  --shadow:0 22px 64px rgba(0,0,0,.62);
  --shadow-soft:0 12px 34px rgba(0,0,0,.38);
  background:
    radial-gradient(circle at top right, rgba(145,216,117,.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(215,182,76,.08), transparent 36%),
    var(--bg);
  color:var(--text);
}

/* Shell surfaces */
body.dark .topbar,
body[data-theme="dark"] .topbar,
html[data-theme="dark"] body .topbar{
  background:rgba(12,27,17,.96);
  border-bottom-color:rgba(145,216,117,.24);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
body.dark .sidebar,
body[data-theme="dark"] .sidebar,
html[data-theme="dark"] body .sidebar,
body.dark .card,
body[data-theme="dark"] .card,
html[data-theme="dark"] body .card,
body.dark .login-card,
body[data-theme="dark"] .login-card,
html[data-theme="dark"] body .login-card,
body.dark .dialog,
body[data-theme="dark"] .dialog,
html[data-theme="dark"] body .dialog{
  background:linear-gradient(180deg, rgba(15,29,20,.98), rgba(13,24,17,.98));
  border-color:var(--border);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}
body.dark .card,
body[data-theme="dark"] .card,
html[data-theme="dark"] body .card{
  border-color:rgba(145,216,117,.20);
}

/* Text contrast */
body.dark h1, body.dark h2, body.dark h3, body.dark h4,
body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4,
html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3, html[data-theme="dark"] body h4{
  color:var(--text);
}
body.dark .topbar-title p,
body.dark .brand p,
body.dark .card-head p,
body.dark .content-item-body p,
body.dark .item-excerpt,
body.dark .meta-date,
body.dark .result-meta,
body.dark .visitor-label,
body.dark .qr-type-hint,
body.dark .qr-field-note,
body.dark .char-counter,
body.dark .trash-deleted-at,
body.dark .trash-danger-zone-desc,
body.dark .stat-total,
body[data-theme="dark"] .topbar-title p,
body[data-theme="dark"] .brand p,
body[data-theme="dark"] .card-head p,
body[data-theme="dark"] .content-item-body p,
body[data-theme="dark"] .item-excerpt,
body[data-theme="dark"] .meta-date,
body[data-theme="dark"] .result-meta,
body[data-theme="dark"] .visitor-label,
body[data-theme="dark"] .qr-type-hint,
body[data-theme="dark"] .qr-field-note,
body[data-theme="dark"] .char-counter,
body[data-theme="dark"] .trash-deleted-at,
body[data-theme="dark"] .trash-danger-zone-desc,
body[data-theme="dark"] .stat-total,
html[data-theme="dark"] body .topbar-title p,
html[data-theme="dark"] body .brand p,
html[data-theme="dark"] body .card-head p,
html[data-theme="dark"] body .content-item-body p,
html[data-theme="dark"] body .item-excerpt,
html[data-theme="dark"] body .meta-date,
html[data-theme="dark"] body .result-meta,
html[data-theme="dark"] body .visitor-label,
html[data-theme="dark"] body .qr-type-hint,
html[data-theme="dark"] body .qr-field-note,
html[data-theme="dark"] body .char-counter,
html[data-theme="dark"] body .trash-deleted-at,
html[data-theme="dark"] body .trash-danger-zone-desc,
html[data-theme="dark"] body .stat-total{
  color:var(--muted);
}
body.dark .slabel,
body[data-theme="dark"] .slabel,
html[data-theme="dark"] body .slabel{
  color:#d3dec9;
  opacity:.92;
}

/* Navigation */
body.dark .nav-btn,
body[data-theme="dark"] .nav-btn,
html[data-theme="dark"] body .nav-btn{
  color:#d5e2cf;
  border-color:transparent;
}
body.dark .nav-btn:hover,
body[data-theme="dark"] .nav-btn:hover,
html[data-theme="dark"] body .nav-btn:hover{
  background:rgba(145,216,117,.10);
  color:var(--text);
  border-color:rgba(145,216,117,.24);
}
body.dark .nav-btn.active,
body[data-theme="dark"] .nav-btn.active,
html[data-theme="dark"] body .nav-btn.active{
  background:linear-gradient(135deg, rgba(145,216,117,.22), rgba(215,182,76,.16));
  border-color:rgba(145,216,117,.45);
  color:#f3ffe9;
  box-shadow:inset 0 0 0 1px rgba(215,182,76,.13), 0 10px 24px rgba(0,0,0,.20);
}

/* Inputs and editor */
body.dark .field label,
body[data-theme="dark"] .field label,
html[data-theme="dark"] body .field label{
  color:#edf6e8;
}
body.dark .field input,
body.dark .field textarea,
body.dark .field select,
body.dark .search-input,
body.dark .filter-select,
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field textarea,
body[data-theme="dark"] .field select,
body[data-theme="dark"] .search-input,
body[data-theme="dark"] .filter-select,
html[data-theme="dark"] body .field input,
html[data-theme="dark"] body .field textarea,
html[data-theme="dark"] body .field select,
html[data-theme="dark"] body .search-input,
html[data-theme="dark"] body .filter-select{
  background:#0b1710;
  border-color:var(--border-strong);
  color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
body.dark .field input:focus,
body.dark .field textarea:focus,
body.dark .field select:focus,
body.dark .search-input:focus,
body.dark .filter-select:focus,
body[data-theme="dark"] .field input:focus,
body[data-theme="dark"] .field textarea:focus,
body[data-theme="dark"] .field select:focus,
body[data-theme="dark"] .search-input:focus,
body[data-theme="dark"] .filter-select:focus,
html[data-theme="dark"] body .field input:focus,
html[data-theme="dark"] body .field textarea:focus,
html[data-theme="dark"] body .field select:focus,
html[data-theme="dark"] body .search-input:focus,
html[data-theme="dark"] body .filter-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--focus-ring);
  outline:none;
}
body.dark .field input::placeholder,
body.dark .field textarea::placeholder,
body.dark .search-input::placeholder,
body[data-theme="dark"] .field input::placeholder,
body[data-theme="dark"] .field textarea::placeholder,
body[data-theme="dark"] .search-input::placeholder,
html[data-theme="dark"] body .field input::placeholder,
html[data-theme="dark"] body .field textarea::placeholder,
html[data-theme="dark"] body .search-input::placeholder{
  color:#9caf94;
}
body.dark .ce-quill-wrap,
body.dark .ce-quill-wrap .ql-toolbar,
body.dark .ce-quill-wrap .ql-editor,
body[data-theme="dark"] .ce-quill-wrap,
body[data-theme="dark"] .ce-quill-wrap .ql-toolbar,
body[data-theme="dark"] .ce-quill-wrap .ql-editor,
html[data-theme="dark"] body .ce-quill-wrap,
html[data-theme="dark"] body .ce-quill-wrap .ql-toolbar,
html[data-theme="dark"] body .ce-quill-wrap .ql-editor{
  background:#0b1710;
  border-color:var(--border-strong);
  color:var(--text);
}
body.dark .ce-quill-wrap .ql-toolbar,
body[data-theme="dark"] .ce-quill-wrap .ql-toolbar,
html[data-theme="dark"] body .ce-quill-wrap .ql-toolbar{
  background:#102017;
}
body.dark .ce-quill-wrap .ql-editor,
body[data-theme="dark"] .ce-quill-wrap .ql-editor,
html[data-theme="dark"] body .ce-quill-wrap .ql-editor{
  background:#0d1b13;
  color:#f5faef;
}
body.dark .ce-quill-wrap .ql-picker-label,
body.dark .ce-quill-wrap .ql-picker-item,
body[data-theme="dark"] .ce-quill-wrap .ql-picker-label,
body[data-theme="dark"] .ce-quill-wrap .ql-picker-item,
html[data-theme="dark"] body .ce-quill-wrap .ql-picker-label,
html[data-theme="dark"] body .ce-quill-wrap .ql-picker-item{
  color:var(--text);
}
body.dark .ce-quill-wrap .ql-stroke,
body[data-theme="dark"] .ce-quill-wrap .ql-stroke,
html[data-theme="dark"] body .ce-quill-wrap .ql-stroke{
  stroke:var(--text);
}
body.dark .ce-quill-wrap .ql-fill,
body[data-theme="dark"] .ce-quill-wrap .ql-fill,
html[data-theme="dark"] body .ce-quill-wrap .ql-fill{
  fill:var(--text);
}

/* Cards, lists, QR, trash, results */
body.dark .content-item,
body.dark .urgent-item,
body.dark .result-item,
body.dark .stat-card,
body.dark .switch-row,
body.dark .visitor-card,
body.dark .pv-row,
body.dark .qr-item,
body.dark .trash-item,
body.dark .ce-preview-panel,
body.dark .ce-advanced-fields,
body.dark .ce-advanced-fields > .stack,
body.dark .qr-templates-block,
body.dark .qr-meta-card,
body.dark .qr-preview-box,
body[data-theme="dark"] .content-item,
body[data-theme="dark"] .urgent-item,
body[data-theme="dark"] .result-item,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .switch-row,
body[data-theme="dark"] .visitor-card,
body[data-theme="dark"] .pv-row,
body[data-theme="dark"] .qr-item,
body[data-theme="dark"] .trash-item,
body[data-theme="dark"] .ce-preview-panel,
body[data-theme="dark"] .ce-advanced-fields,
body[data-theme="dark"] .ce-advanced-fields > .stack,
body[data-theme="dark"] .qr-templates-block,
body[data-theme="dark"] .qr-meta-card,
body[data-theme="dark"] .qr-preview-box,
html[data-theme="dark"] body .content-item,
html[data-theme="dark"] body .urgent-item,
html[data-theme="dark"] body .result-item,
html[data-theme="dark"] body .stat-card,
html[data-theme="dark"] body .switch-row,
html[data-theme="dark"] body .visitor-card,
html[data-theme="dark"] body .pv-row,
html[data-theme="dark"] body .qr-item,
html[data-theme="dark"] body .trash-item,
html[data-theme="dark"] body .ce-preview-panel,
html[data-theme="dark"] body .ce-advanced-fields,
html[data-theme="dark"] body .ce-advanced-fields > .stack,
html[data-theme="dark"] body .qr-templates-block,
html[data-theme="dark"] body .qr-meta-card,
html[data-theme="dark"] body .qr-preview-box{
  background:#14271b;
  border-color:#3b5947;
  color:var(--text);
}
body.dark .content-item:hover,
body.dark .urgent-item:hover,
body.dark .result-item:hover,
body.dark .stat-card:hover,
body.dark .qr-item:hover,
body.dark .pv-row:hover,
body.dark .trash-item:hover,
body[data-theme="dark"] .content-item:hover,
body[data-theme="dark"] .urgent-item:hover,
body[data-theme="dark"] .result-item:hover,
body[data-theme="dark"] .stat-card:hover,
body[data-theme="dark"] .qr-item:hover,
body[data-theme="dark"] .pv-row:hover,
body[data-theme="dark"] .trash-item:hover,
html[data-theme="dark"] body .content-item:hover,
html[data-theme="dark"] body .urgent-item:hover,
html[data-theme="dark"] body .result-item:hover,
html[data-theme="dark"] body .stat-card:hover,
html[data-theme="dark"] body .qr-item:hover,
html[data-theme="dark"] body .pv-row:hover,
html[data-theme="dark"] body .trash-item:hover{
  background:#1a3323;
  border-color:rgba(145,216,117,.48);
}
body.dark .item-thumb--empty,
body.dark .trash-item-thumb--empty,
body[data-theme="dark"] .item-thumb--empty,
body[data-theme="dark"] .trash-item-thumb--empty,
html[data-theme="dark"] body .item-thumb--empty,
html[data-theme="dark"] body .trash-item-thumb--empty{
  background:#0c1a12;
  border-color:#466550;
  color:#cfe0c5;
  opacity:1;
}
body.dark .empty,
body.dark .loading-inline,
body.dark .trash-empty,
body.dark .trash-error,
body[data-theme="dark"] .empty,
body[data-theme="dark"] .loading-inline,
body[data-theme="dark"] .trash-empty,
body[data-theme="dark"] .trash-error,
html[data-theme="dark"] body .empty,
html[data-theme="dark"] body .loading-inline,
html[data-theme="dark"] body .trash-empty,
html[data-theme="dark"] body .trash-error{
  color:var(--muted);
  border-color:var(--border-strong);
}

/* Buttons and badges */
body.dark .btn-secondary,
body[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] body .btn-secondary{
  background:#1b3423;
  color:#e9f8e2;
  border-color:rgba(145,216,117,.44);
}
body.dark .btn-secondary:hover:not(:disabled),
body[data-theme="dark"] .btn-secondary:hover:not(:disabled),
html[data-theme="dark"] body .btn-secondary:hover:not(:disabled){
  background:#24422d;
  border-color:rgba(145,216,117,.64);
}
body.dark .btn-primary,
body[data-theme="dark"] .btn-primary,
html[data-theme="dark"] body .btn-primary{
  background:linear-gradient(135deg,#2f7d3d,#d7b64c);
  color:#06110a;
  box-shadow:0 14px 30px rgba(0,0,0,.34);
}
body.dark .btn-danger,
body[data-theme="dark"] .btn-danger,
html[data-theme="dark"] body .btn-danger{
  background:#3b1715;
  color:#ffc5bd;
  border-color:rgba(255,138,128,.42);
}
body.dark .btn-theme,
body[data-theme="dark"] .btn-theme,
html[data-theme="dark"] body .btn-theme{
  background:linear-gradient(135deg,#172c1e,#213923);
  color:#f4f8f1;
  border-color:rgba(145,216,117,.36);
}
body.dark .badge-muted,
body[data-theme="dark"] .badge-muted,
html[data-theme="dark"] body .badge-muted{
  background:#233327;
  color:#d5e3ce;
}
body.dark .badge-success,
body[data-theme="dark"] .badge-success,
html[data-theme="dark"] body .badge-success{
  background:#10351f;
  color:#99f0b0;
}
body.dark .badge-priority,
body[data-theme="dark"] .badge-priority,
html[data-theme="dark"] body .badge-priority{
  background:#3b2d0e;
  color:#ffe08a;
}
body.dark .banner,
body[data-theme="dark"] .banner,
html[data-theme="dark"] body .banner{
  background:#18311f;
  border-color:rgba(145,216,117,.34);
  color:#e4f6dd;
}

/* Tables and inline colored chips */
body.dark .result-item table,
body[data-theme="dark"] .result-item table,
html[data-theme="dark"] body .result-item table{
  color:var(--text);
}
body.dark .result-item table th,
body.dark .result-item table td,
body[data-theme="dark"] .result-item table th,
body[data-theme="dark"] .result-item table td,
html[data-theme="dark"] body .result-item table th,
html[data-theme="dark"] body .result-item table td{
  border-color:var(--border);
}
body.dark .result-item table thead tr,
body.dark .result-item table tfoot tr,
body[data-theme="dark"] .result-item table thead tr,
body[data-theme="dark"] .result-item table tfoot tr,
html[data-theme="dark"] body .result-item table thead tr,
html[data-theme="dark"] body .result-item table tfoot tr{
  background:#18311f;
}
body.dark .result-item table tr:nth-child(even),
body[data-theme="dark"] .result-item table tr:nth-child(even),
html[data-theme="dark"] body .result-item table tr:nth-child(even){
  background:rgba(255,255,255,.045);
}
body.dark span[style*="background:#dbeafe"], body[data-theme="dark"] span[style*="background:#dbeafe"], html[data-theme="dark"] body span[style*="background:#dbeafe"]{background:#153c57 !important;color:#b7e4ff !important}
body.dark span[style*="background:#cffafe"], body[data-theme="dark"] span[style*="background:#cffafe"], html[data-theme="dark"] body span[style*="background:#cffafe"]{background:#164454 !important;color:#a5f3fc !important}
body.dark span[style*="background:#dcfce7"], body[data-theme="dark"] span[style*="background:#dcfce7"], html[data-theme="dark"] body span[style*="background:#dcfce7"]{background:#10351f !important;color:#99f0b0 !important}
body.dark span[style*="background:#fef3c7"], body[data-theme="dark"] span[style*="background:#fef3c7"], html[data-theme="dark"] body span[style*="background:#fef3c7"]{background:#3b2d0e !important;color:#ffe08a !important}
body.dark span[style*="background:#fee2e2"], body[data-theme="dark"] span[style*="background:#fee2e2"], html[data-theme="dark"] body span[style*="background:#fee2e2"]{background:#3b1715 !important;color:#ffc5bd !important}
body.dark span[style*="background:#f1f5f9"], body[data-theme="dark"] span[style*="background:#f1f5f9"], html[data-theme="dark"] body span[style*="background:#f1f5f9"]{background:#243327 !important;color:#d5e3ce !important}

/* Upload progress and status */
body.dark .ce-upload-btn,
body[data-theme="dark"] .ce-upload-btn,
html[data-theme="dark"] body .ce-upload-btn{
  background:#112218;
  border-color:var(--border-strong);
  color:var(--text);
}
body.dark .ce-upload-progress,
body[data-theme="dark"] .ce-upload-progress,
html[data-theme="dark"] body .ce-upload-progress{
  background:#112218;
  border-color:var(--border-strong);
  color:var(--text);
}
body.dark .ce-upload-progress-bar,
body[data-theme="dark"] .ce-upload-progress-bar,
html[data-theme="dark"] body .ce-upload-progress-bar{
  background:#304b3a;
}
body.dark .ce-upload-status,
body[data-theme="dark"] .ce-upload-status,
html[data-theme="dark"] body .ce-upload-status{
  color:var(--muted);
}

/* Dialog, backdrop, toasts */
body.dark .dialog-backdrop,
body[data-theme="dark"] .dialog-backdrop,
html[data-theme="dark"] body .dialog-backdrop{
  background:rgba(2,8,4,.78);
}
body.dark .toast.success, body[data-theme="dark"] .toast.success, html[data-theme="dark"] body .toast.success{background:#0f5b2b;color:#fff}
body.dark .toast.error, body[data-theme="dark"] .toast.error, html[data-theme="dark"] body .toast.error{background:#7c201b;color:#fff}
body.dark .toast.info, body[data-theme="dark"] .toast.info, html[data-theme="dark"] body .toast.info{background:#18311f;color:#eefae8}

/* Scrollbars */
body.dark ::-webkit-scrollbar-track,
body[data-theme="dark"] ::-webkit-scrollbar-track,
html[data-theme="dark"] body ::-webkit-scrollbar-track{
  background:#0b1710;
}
body.dark ::-webkit-scrollbar-thumb,
body[data-theme="dark"] ::-webkit-scrollbar-thumb,
html[data-theme="dark"] body ::-webkit-scrollbar-thumb{
  background:#4d6a56;
  border-color:#0b1710;
}
body.dark ::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] body ::-webkit-scrollbar-thumb:hover{
  background:#6f8f78;
}

/* ════════════════════════════════════════════════════════
   BARCODE-1A — QR module stability + theme polish
   تثبيت بصري لمولد الباركود بدون تغيير الوظائف الأساسية
   ════════════════════════════════════════════════════════ */
.qr-library-state{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(135deg,var(--surface),var(--surface-2));
  color:var(--text);
  box-shadow:var(--shadow-sm,0 8px 24px rgba(15,23,42,.06));
}
.qr-library-state.error{
  border-color:rgba(239,68,68,.32);
  background:linear-gradient(135deg,rgba(239,68,68,.08),var(--surface));
}
.qr-library-state-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:14px;
  background:rgba(45,90,39,.12);
  border:1px solid rgba(45,90,39,.18);
  font-size:1.15rem;
}
.qr-library-state.error .qr-library-state-icon{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.24);
}
.qr-library-state-body strong{
  display:block;
  margin-bottom:4px;
  font-size:.95rem;
  color:var(--text);
}
.qr-library-state-body p{
  margin:0 0 6px;
  line-height:1.8;
  color:var(--text);
  font-size:.88rem;
  font-weight:700;
}
.qr-library-state-body small{
  display:block;
  color:var(--muted);
  line-height:1.7;
}
.qr-preview-box{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
}
.qr-preview-box canvas,
.qr-preview-box img,
.qr-item-canvas canvas{
  image-rendering:auto;
}
.qr-actions-bar .btn:disabled,
.qr-item-actions .btn:disabled,
#qr-batch-bar .btn:disabled{
  opacity:.58;
  cursor:not-allowed;
}
.qr-status-msg.info,
.qr-helper-note.info{
  color:var(--primary);
}
.qr-status-msg.error,
.qr-helper-note.error{
  color:var(--danger);
}
.qr-item-actions .btn-sm{
  min-height:34px;
}
body.dark .qr-library-state,
body[data-theme="dark"] .qr-library-state,
html[data-theme="dark"] body .qr-library-state{
  background:linear-gradient(135deg,rgba(17,24,39,.96),rgba(30,41,59,.92));
  border-color:rgba(148,163,184,.28);
}
body.dark .qr-library-state.error,
body[data-theme="dark"] .qr-library-state.error,
html[data-theme="dark"] body .qr-library-state.error{
  background:linear-gradient(135deg,rgba(127,29,29,.34),rgba(17,24,39,.95));
  border-color:rgba(248,113,113,.38);
}
body.dark .qr-library-state-icon,
body[data-theme="dark"] .qr-library-state-icon,
html[data-theme="dark"] body .qr-library-state-icon{
  background:rgba(74,222,128,.12);
  border-color:rgba(74,222,128,.24);
}
body.dark .qr-library-state.error .qr-library-state-icon,
body[data-theme="dark"] .qr-library-state.error .qr-library-state-icon,
html[data-theme="dark"] body .qr-library-state.error .qr-library-state-icon{
  background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.28);
}
body.dark .qr-preview-box,
body[data-theme="dark"] .qr-preview-box,
html[data-theme="dark"] body .qr-preview-box{
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(30,41,59,.9));
}
@media (max-width:640px){
  .qr-library-state{
    flex-direction:column;
    padding:14px;
  }
  .qr-actions-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .qr-actions-bar .btn-primary{
    grid-column:1/-1;
  }
}


/* ══════════════════════════════════════════
   ADMIN-THEME-1D — Login outer shell alignment
   Scope: visual-only background outside the login card.
══════════════════════════════════════════ */
.login-shell{
  min-height:100svh;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(214,170,74,.20), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(126,162,78,.20), transparent 34%),
    radial-gradient(circle at 50% 105%, rgba(45,90,39,.13), transparent 38%),
    linear-gradient(135deg,#f8faf4 0%,#eef6e8 52%,#fffaf0 100%) !important;
}
.login-shell::before,
.login-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:999px;
}
.login-shell::before{
  width:min(52vw,720px);
  height:min(52vw,720px);
  inset:auto auto -24% -10%;
  background:radial-gradient(circle, rgba(126,162,78,.18), transparent 66%);
  filter:blur(2px);
}
.login-shell::after{
  width:min(46vw,620px);
  height:min(46vw,620px);
  inset:-22% -12% auto auto;
  background:radial-gradient(circle, rgba(214,170,74,.16), transparent 68%);
  filter:blur(2px);
}
.login-shell .login-card{
  position:relative;
  z-index:1;
}
body.dark .login-shell,
body[data-theme="dark"] .login-shell,
html[data-theme="dark"] body .login-shell{
  background:
    radial-gradient(circle at 18% 12%, rgba(214,170,74,.13), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(145,216,117,.14), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(45,90,39,.20), transparent 40%),
    linear-gradient(135deg,#07120c 0%,#0d1f14 48%,#142615 100%) !important;
}
body.dark .login-shell::before,
body[data-theme="dark"] .login-shell::before,
html[data-theme="dark"] body .login-shell::before{
  background:radial-gradient(circle, rgba(145,216,117,.12), transparent 68%);
}
body.dark .login-shell::after,
body[data-theme="dark"] .login-shell::after,
html[data-theme="dark"] body .login-shell::after{
  background:radial-gradient(circle, rgba(214,170,74,.12), transparent 68%);
}
@media (max-width:640px){
  .login-shell{
    background:
      radial-gradient(circle at 50% -12%, rgba(214,170,74,.18), transparent 34%),
      linear-gradient(180deg,#f8faf4 0%,#eef6e8 100%) !important;
  }
  body.dark .login-shell,
  body[data-theme="dark"] .login-shell,
  html[data-theme="dark"] body .login-shell{
    background:
      radial-gradient(circle at 50% -12%, rgba(145,216,117,.14), transparent 34%),
      linear-gradient(180deg,#07120c 0%,#102116 100%) !important;
  }
}

/* ══════════════════════════════════════════
   ADMIN PAGE VIEWS 1E — Official labels + theme polish
   تحسين قائمة مشاهدات الصفحات بدون تغيير منطق الإحصائيات
══════════════════════════════════════════ */
.admin-page-views-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(116,176,91,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,250,241,.95));
  border-color:rgba(70,111,59,.22);
  box-shadow:0 18px 44px rgba(21,46,30,.08);
}
.admin-page-views-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#17311f;
  letter-spacing:-.01em;
}
.admin-page-views-title::after{
  content:'إحصاء الصفحات';
  font-size:.72rem;
  font-weight:900;
  color:#315d3a;
  background:rgba(116,176,91,.16);
  border:1px solid rgba(116,176,91,.26);
  border-radius:999px;
  padding:5px 10px;
}
.admin-page-views-card .pv-list{
  gap:8px;
  margin-top:12px;
}
.admin-page-views-card .pv-row{
  min-height:48px;
  padding:11px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border-color:rgba(70,111,59,.18);
  box-shadow:0 8px 24px rgba(17,43,25,.045);
}
.admin-page-views-card .pv-row:hover{
  background:rgba(244,250,241,.95);
  border-color:rgba(116,176,91,.38);
  transform:translateY(-1px);
}
.admin-page-views-card .pv-page{
  color:#17311f;
  font-weight:900;
  line-height:1.5;
}
.admin-page-views-card .pv-bar-wrap{
  height:8px;
  max-width:180px;
  background:rgba(49,93,58,.15);
  border:1px solid rgba(49,93,58,.10);
}
.admin-page-views-card .pv-bar{
  background:linear-gradient(90deg,#4f8f45,#9ccc65,#d7bd45);
  box-shadow:0 0 10px rgba(156,204,101,.32);
}
.admin-page-views-card .pv-count{
  min-width:52px;
  text-align:center;
  color:#2f6d34;
  background:rgba(116,176,91,.13);
  border:1px solid rgba(116,176,91,.2);
  border-radius:999px;
  padding:4px 8px;
}
body.dark .admin-page-views-card,
body[data-theme="dark"] .admin-page-views-card,
html[data-theme="dark"] body .admin-page-views-card{
  background:
    radial-gradient(circle at top right, rgba(145,216,117,.14), transparent 36%),
    linear-gradient(135deg,#0c1b12,#122519);
  border-color:#3b5947;
  box-shadow:0 18px 44px rgba(0,0,0,.2);
}
body.dark .admin-page-views-title,
body[data-theme="dark"] .admin-page-views-title,
html[data-theme="dark"] body .admin-page-views-title{
  color:#f7fff0;
}
body.dark .admin-page-views-title::after,
body[data-theme="dark"] .admin-page-views-title::after,
html[data-theme="dark"] body .admin-page-views-title::after{
  color:#dcffd0;
  background:rgba(145,216,117,.14);
  border-color:rgba(145,216,117,.28);
}
body.dark .admin-page-views-card .pv-row,
body[data-theme="dark"] .admin-page-views-card .pv-row,
html[data-theme="dark"] body .admin-page-views-card .pv-row{
  background:rgba(20,39,27,.82);
  border-color:#41644f;
  box-shadow:none;
}
body.dark .admin-page-views-card .pv-row:hover,
body[data-theme="dark"] .admin-page-views-card .pv-row:hover,
html[data-theme="dark"] body .admin-page-views-card .pv-row:hover{
  background:#1a3323;
  border-color:rgba(145,216,117,.48);
}
body.dark .admin-page-views-card .pv-page,
body[data-theme="dark"] .admin-page-views-card .pv-page,
html[data-theme="dark"] body .admin-page-views-card .pv-page{
  color:#f7fff0;
}
body.dark .admin-page-views-card .pv-bar-wrap,
body[data-theme="dark"] .admin-page-views-card .pv-bar-wrap,
html[data-theme="dark"] body .admin-page-views-card .pv-bar-wrap{
  background:rgba(180,221,168,.16);
  border-color:rgba(180,221,168,.14);
}
body.dark .admin-page-views-card .pv-count,
body[data-theme="dark"] .admin-page-views-card .pv-count,
html[data-theme="dark"] body .admin-page-views-card .pv-count{
  color:#c9ffb7;
  background:rgba(145,216,117,.13);
  border-color:rgba(145,216,117,.22);
}
@media (max-width: 640px){
  .admin-page-views-card .pv-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px 10px;
  }
  .admin-page-views-card .pv-bar-wrap{
    grid-column:1 / -1;
    max-width:none;
    width:100%;
  }
}