:root {
  --night-canvas: #040608; --night-depth: rgba(8, 12, 18, 0.88); --night-surface: rgba(14, 20, 30, 0.92);
  --night-border: rgba(184, 144, 71, 0.22); --aged-gold: #b89047; --aged-gold-bright: #d8af65;
  --aged-gold-deep: #7e5f29; --aged-gold-glow: rgba(184, 144, 71, 0.16);
  --wool-paper: #f0ebe1; --wool-subtle: #a6b3c2; --wool-muted: #6c7c8f;
  --danger-deep: #8b2627; --security-green: #2a9d8f;
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --backdrop-dim-opacity: 0.82; --reader-font-size: 1.35rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background-color: var(--night-canvas); color: var(--wool-paper); direction: rtl; line-height: 1.85; overflow-x: hidden; min-height: 100vh; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

#editorialProgressBar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--aged-gold-deep), var(--aged-gold-bright)); z-index: 100000; box-shadow: 0 0 12px var(--aged-gold-glow); transition: width 0.1s ease-out; }
#siteBackdropLayer { position: fixed; inset: 0; background-image: url('profile.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -3; transform: scale(1.02); transition: background-image 0.6s ease; }
#siteBackdropOverlay { position: fixed; inset: 0; background-color: rgba(4, 6, 8, var(--backdrop-dim-opacity)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: -2; transition: background-color 0.3s ease; }

.editorial-toast { position: fixed; bottom: 24px; left: 24px; background: var(--night-surface); color: var(--wool-paper); border: 1px solid var(--aged-gold); border-radius: 12px; padding: 14px 20px; font-size: 0.9rem; z-index: 99999; box-shadow: 0 15px 35px rgba(0,0,0,0.8); display: flex; align-items: center; gap: 12px; transform: translateY(100px); opacity: 0; transition: all 0.35s var(--ease-editorial); pointer-events: none; }
.editorial-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

.sanctuary-nav { position: sticky; top: 0; z-index: 1000; background: rgba(4, 6, 8, 0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--night-border); transition: all 0.3s var(--ease-smooth); }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 14px 5%; display: flex; justify-content: space-between; align-items: center; }
.nav-brand { display: flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--aged-gold); display: flex; align-items: center; justify-content: center; color: var(--aged-gold-bright); background: radial-gradient(circle at center, rgba(184, 144, 71, 0.18) 0%, transparent 80%); box-shadow: 0 0 18px var(--aged-gold-glow); }
.brand-text h1 { font-family: 'Reem Kufi', sans-serif !important; font-size: 2.1rem; font-weight: 700; color: var(--wool-paper); line-height: 1; }
.brand-text span { display: block; font-size: 0.72rem; color: var(--aged-gold); letter-spacing: 0.5px; margin-top: 3px; }
.nav-editorial-links { display: flex; list-style: none; gap: 22px; align-items: center; }
.nav-editorial-links a { font-size: 0.94rem; font-weight: 500; color: var(--wool-subtle); padding: 6px 0; transition: color 0.3s; }
.nav-editorial-links a:hover { color: var(--aged-gold-bright); }
.admin-indicator-link { color: #83dcd0 !important; display: none; align-items: center; gap: 8px; font-weight: 700 !important; border: 1px solid rgba(42, 157, 143, 0.45); padding: 5px 14px !important; border-radius: 20px; background: rgba(42, 157, 143, 0.12); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--night-border); color: var(--aged-gold-bright); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all 0.3s; }
.nav-icon-btn:hover { border-color: var(--aged-gold); background: rgba(184, 144, 71, 0.1); }
.mobile-trigger { display: none; border: 1px solid var(--night-border); color: var(--aged-gold-bright); width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; font-size: 1.2rem; }

.editorial-drawer { position: fixed; top: 0; right: -330px; width: 310px; height: 100vh; background: #06090e; border-left: 1px solid var(--night-border); z-index: 10001; padding: 30px 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: -15px 0 45px rgba(0, 0, 0, 0.95); transition: right 0.4s var(--ease-editorial); }
.editorial-drawer.active { right: 0; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); z-index: 10000; display: none; }
.drawer-backdrop.active { display: block; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--night-border); padding-bottom: 16px; }
.drawer-brand-title { font-family: 'Reem Kufi', sans-serif; font-size: 1.5rem; color: var(--aged-gold-bright); }
.drawer-close { color: var(--aged-gold); font-size: 1.6rem; }
.drawer-menu { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.drawer-menu a { color: var(--wool-paper); font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; }
.drawer-menu a:hover { background: rgba(184, 144, 71, 0.12); color: var(--aged-gold-bright); }
.drawer-divider { height: 1px; background: var(--night-border); margin: 6px 0; }
.drawer-admin-pill { color: #83dcd0 !important; background: rgba(42, 157, 143, 0.12); display: none; }

.btn-quiet-luxury { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--aged-gold-bright); border: 1px solid var(--aged-gold); padding: 8px 20px; border-radius: 30px; font-size: 0.88rem; font-weight: 600; transition: all 0.35s var(--ease-editorial); }
.btn-quiet-luxury:hover { background: var(--aged-gold); color: #040608; box-shadow: 0 0 25px var(--aged-gold-glow); transform: translateY(-2px); }
.btn-danger-tone { border-color: var(--danger-deep) !important; color: #e76f51 !important; }
.btn-danger-tone:hover { background: var(--danger-deep) !important; color: #fff !important; }
.btn-block { width: 100%; }

.lead-sanctuary { max-width: 1400px; margin: 0 auto; padding: 50px 5% 40px; }
.hero-editorial-grid { display: grid; grid-template-columns: 340px 1fr; gap: 50px; align-items: start; }
.author-monolith { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 20px; padding: 35px 26px; position: relative; backdrop-filter: blur(12px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7); text-align: center; }
.author-avatar-wrap { width: 140px; height: 140px; margin: 0 auto 22px; position: relative; }
.author-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--aged-gold); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px var(--aged-gold-glow); }
.change-hero-img-btn { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: var(--aged-gold); color: #000; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; display: none; white-space: nowrap; }
.author-quote { font-family: 'Amiri', serif; font-size: 1.45rem; line-height: 1.6; color: var(--wool-paper); margin-bottom: 16px; font-style: italic; }
.author-quote span { color: var(--aged-gold-bright); display: block; font-weight: 700; font-style: normal; margin-top: 4px; }
.author-bio-snippet { font-size: 0.92rem; color: var(--wool-subtle); line-height: 1.8; margin-bottom: 24px; }

.section-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--aged-gold); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.section-eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--night-border)); }

.lead-hero-card { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; display: grid; grid-template-columns: 1.15fr 1fr; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); transition: all 0.4s var(--ease-editorial); }
.lead-hero-card:hover { border-color: var(--aged-gold); transform: translateY(-4px); }
.lead-media { position: relative; min-height: 380px; overflow: hidden; }
.lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-editorial); }
.lead-hero-card:hover .lead-media img { transform: scale(1.04); }
.lead-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 18, 0.96) 0%, rgba(8, 12, 18, 0.3) 50%, transparent 100%); }
.lead-content { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; }
.editorial-badge { background: rgba(184, 144, 71, 0.12); border: 1px solid rgba(184, 144, 71, 0.35); color: var(--aged-gold-bright); padding: 3px 12px; border-radius: 4px; font-size: 0.74rem; font-weight: 700; display: inline-block; width: fit-content; }
.lead-title { font-family: 'Amiri', serif; font-size: 2.2rem; font-weight: 700; line-height: 1.35; color: var(--wool-paper); margin: 14px 0 10px; }
.lead-excerpt { font-size: 0.98rem; color: var(--wool-subtle); line-height: 1.85; margin-bottom: 22px; }
.lead-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid rgba(184, 144, 71, 0.15); color: var(--wool-muted); font-size: 0.85rem; }
.lead-action-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--aged-gold-bright); font-weight: 600; }

.editorial-grid-sanctuary { max-width: 1400px; margin: 0 auto; padding: 40px 5% 80px; }
.section-head-flex { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 25px; }
.filter-pills-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--night-border); color: var(--wool-subtle); font-size: 0.82rem; background: rgba(8, 12, 18, 0.6); transition: all 0.25s; }
.filter-pill:hover, .filter-pill.active { border-color: var(--aged-gold); color: var(--aged-gold-bright); background: rgba(184, 144, 71, 0.12); }
.editorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 32px; }
.editorial-card { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; position: relative; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); transition: all 0.4s var(--ease-editorial); }
.editorial-card:hover { border-color: var(--aged-gold); transform: translateY(-4px); }
.card-cover { width: 100%; height: 220px; position: relative; overflow: hidden; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-editorial); }
.editorial-card:hover .card-cover img { transform: scale(1.05); }
.card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 12, 18, 0.96) 100%); }
.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-heading { font-family: 'Amiri', serif; font-size: 1.45rem; font-weight: 700; color: var(--wool-paper); line-height: 1.4; margin: 10px 0 12px; }
.card-text { color: var(--wool-subtle); font-size: 0.92rem; line-height: 1.8; margin-bottom: 20px; }
.card-meta-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(184, 144, 71, 0.1); color: var(--wool-muted); font-size: 0.8rem; }
.admin-card-actions { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; z-index: 10; }
.admin-action-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(8px); }
.admin-action-btn.edit { background: rgba(184, 144, 71, 0.9); color: #000; }
.admin-action-btn.delete { background: rgba(139, 38, 39, 0.9); }

.dashboard-panel-view { max-width: 1440px; margin: 30px auto 80px; padding: 0 4%; }
.dash-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 20px 24px; background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 18px; backdrop-filter: blur(14px); flex-wrap: wrap; gap: 16px; }
.dash-status-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.system-health-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 30px; background: rgba(42, 157, 143, 0.12); border: 1px solid rgba(42, 157, 143, 0.35); color: #83dcd0; font-size: 0.84rem; font-weight: 600; }
.pulse-dot { width: 8px; height: 8px; background: #2a9d8f; border-radius: 50%; box-shadow: 0 0 10px #2a9d8f; animation: pulseHealth 1.8s infinite; }
@keyframes pulseHealth { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } }
.dash-timestamp { font-size: 0.84rem; color: var(--wool-muted); }
.dash-actions-cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; }
.kpi-card { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 18px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; backdrop-filter: blur(12px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
.kpi-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; background: rgba(184, 144, 71, 0.12); border: 1px solid rgba(184, 144, 71, 0.3); color: var(--aged-gold-bright); flex-shrink: 0; }
.kpi-info h4 { font-size: 0.82rem; color: var(--wool-muted); font-weight: 500; margin-bottom: 2px; }
.kpi-number { font-size: 1.95rem; font-weight: 800; color: var(--wool-paper); font-family: 'JetBrains Mono', monospace; line-height: 1.2; }
.kpi-subtext { font-size: 0.74rem; color: var(--wool-subtle); margin-top: 4px; display: block; }
.kpi-top-title { font-size: 1rem; font-weight: 700; color: var(--aged-gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.dash-analytics-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 30px; }
.analytics-panel { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 18px; padding: 24px; backdrop-filter: blur(14px); }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(184, 144, 71, 0.15); }
.panel-head h3 { font-family: 'Reem Kufi', sans-serif; font-size: 1.15rem; color: var(--aged-gold-bright); display: flex; align-items: center; gap: 10px; }
.panel-tag { font-size: 0.75rem; color: var(--wool-muted); font-family: 'JetBrains Mono'; }
.chart-container-wrap { position: relative; height: 260px; width: 100%; }

.dimmer-control-box { background: var(--night-depth); border: 1px solid var(--aged-gold); border-radius: 16px; padding: 18px 24px; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dimmer-title { font-size: 0.92rem; font-weight: 600; color: var(--aged-gold-bright); display: flex; align-items: center; gap: 10px; }
.dimmer-slider-wrap { display: flex; align-items: center; gap: 14px; flex: 1; max-width: 480px; }
.dimmer-label { font-size: 0.8rem; color: var(--wool-muted); }
.dimmer-val { font-weight: 700; color: var(--aged-gold-bright); font-family: 'JetBrains Mono'; min-width: 40px; }
.dimmer-slider { flex: 1; -webkit-appearance: none; height: 6px; border-radius: 5px; background: #172433; outline: none; cursor: pointer; }
.dimmer-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--aged-gold-bright); cursor: pointer; box-shadow: 0 0 10px var(--aged-gold-glow); }

.dash-table-wrap { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 18px; padding: 26px; backdrop-filter: blur(12px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7); margin-bottom: 35px; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; flex-wrap: wrap; }
.table-toolbar-title { font-family: 'Reem Kufi', sans-serif; font-size: 1.35rem; color: var(--aged-gold-bright); }
.table-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-search-box, .dash-select-box { background: #080c12; border: 1px solid var(--night-border); padding: 9px 14px; border-radius: 8px; color: var(--wool-paper); font-size: 0.88rem; outline: none; }
.dash-search-box:focus, .dash-select-box:focus { border-color: var(--aged-gold); }
.responsive-table-container { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; text-align: right; }
.dash-table th { padding: 14px 16px; color: var(--aged-gold-bright); font-size: 0.86rem; font-weight: 600; border-bottom: 1px solid var(--night-border); background: rgba(184, 144, 71, 0.05); }
    .dash-table td { padding: 15px 16px; font-size: 0.92rem; border-bottom: 1px solid rgba(184, 144, 71, 0.1); }
    .table-empty-cell { text-align: center; color: var(--wool-muted); padding: 30px !important; }
    .views-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(184, 144, 71, 0.12); border: 1px solid rgba(184, 144, 71, 0.3); border-radius: 20px; color: var(--aged-gold-bright); font-size: 0.82rem; font-family: 'JetBrains Mono'; }

    .subview-editorial-header { background: rgba(4, 6, 8, 0.75); padding: 60px 5% 45px; text-align: center; border-bottom: 1px solid var(--night-border); backdrop-filter: blur(10px); }
    .subview-top-nav { max-width: 1400px; margin: 0 auto 16px; display: flex; }
    .back-quiet-link { display: inline-flex; align-items: center; gap: 8px; color: var(--aged-gold-bright); font-size: 0.88rem; font-weight: 600; }
    .subview-title { font-family: 'Reem Kufi', sans-serif; font-size: 2.8rem; font-weight: 700; color: var(--wool-paper); margin-bottom: 10px; }
    .subview-sub { color: var(--wool-subtle); font-size: 1rem; max-width: 700px; margin: 0 auto; line-height: 1.8; }

    .dafatir-tome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; padding: 60px 5%; }
    .tome-item { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 18px; padding: 34px 28px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(12px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); transition: all 0.35s; }
    .tome-item::before { content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--aged-gold), transparent); }
    .tome-item:hover { border-color: var(--aged-gold); transform: translateY(-4px); }
    .tome-title-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
    .tome-icon-box { width: 50px; height: 50px; border-radius: 12px; background: rgba(184, 144, 71, 0.1); border: 1px solid rgba(184, 144, 71, 0.25); color: var(--aged-gold-bright); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
    .tome-title-wrap h3 { font-family: 'Amiri', serif; font-size: 1.65rem; font-weight: 700; }
    .tome-desc-text { color: var(--wool-subtle); font-size: 0.94rem; line-height: 1.8; margin-bottom: 24px; }
    .tome-action-row { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid rgba(184, 144, 71, 0.1); color: var(--aged-gold-bright); font-size: 0.88rem; font-weight: 600; }

    .about-editorial-sanctuary { max-width: 980px; margin: 0 auto; padding: 50px 5% 80px; }
    .about-paper-card { background: var(--night-depth); border: 1px solid var(--night-border); border-radius: 22px; padding: 48px; position: relative; backdrop-filter: blur(14px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7); }
    .about-visual-presentation { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
    .about-portrait-frame { width: 190px; height: 190px; margin-bottom: 12px; }
    .about-portrait-img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; border: 2px solid var(--aged-gold); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px var(--aged-gold-glow); }
    .about-img-change-btn { background: var(--aged-gold); color: #000; padding: 5px 14px; border-radius: 20px; font-size: 0.76rem; font-weight: 700; display: none; }
    .about-lead-name { font-family: 'Reem Kufi', sans-serif; font-size: 2.2rem; color: var(--aged-gold-bright); margin-bottom: 22px; border-bottom: 1px solid rgba(184, 144, 71, 0.15); padding-bottom: 14px; text-align: center; }
    .about-prose { font-family: 'Amiri', serif; font-size: 1.3rem; line-height: 2.2; color: var(--wool-paper); white-space: pre-line; }
    .about-signature-block { margin-top: 40px; font-family: 'Amiri', serif; font-size: 1.6rem; font-style: italic; color: var(--aged-gold); text-align: left; }

    .reader-modal { position: fixed; inset: 0; background: rgba(4, 6, 8, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 15000; display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
    .reader-manuscript { width: 100%; max-width: 860px; background: #070b10; border: 1px solid var(--aged-gold); border-radius: 22px; padding: 45px 50px; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 30px var(--aged-gold-glow); }
    .reader-close-btn { position: absolute; top: 18px; left: 18px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--night-border); background: rgba(255, 255, 255, 0.04); color: var(--wool-subtle); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
    .reader-article-title { font-family: 'Amiri', serif; font-size: 2.4rem; font-weight: 700; color: var(--aged-gold-bright); line-height: 1.35; margin: 14px 0; }
    .reader-meta-row { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(184, 144, 71, 0.15); color: var(--wool-muted); font-size: 0.86rem; flex-wrap: wrap; }
    .reader-tools-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; margin-bottom: 24px; border-bottom: 1px dashed rgba(184, 144, 71, 0.15); }
    .reader-font-controls { display: flex; align-items: center; gap: 10px; }
    .reader-tool-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--night-border); color: var(--aged-gold-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; }
    .reader-tool-btn:hover { border-color: var(--aged-gold); }
    .reader-text-flow { font-family: 'Amiri', serif; font-size: var(--reader-font-size); line-height: 2.25; color: var(--wool-paper); white-space: pre-line; letter-spacing: 0.15px; }
    .reader-footer-signature { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(184, 144, 71, 0.15); font-size: 0.95rem; color: var(--wool-subtle); font-family: 'Amiri', serif; }
    .reader-share-actions { display: flex; align-items: center; gap: 10px; margin-top: 25px; flex-wrap: wrap; }
    .share-label { font-size: 0.85rem; color: var(--wool-muted); margin-left: 6px; }
    .reader-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; border: 1px solid rgba(184, 144, 71, 0.25); background: rgba(255, 255, 255, 0.03); color: var(--aged-gold-bright); }
    .reader-share-btn.fb:hover { background: #1877f2; color: #fff; }
    .reader-share-btn.wa:hover { background: #25d366; color: #fff; }
    .reader-share-btn.x:hover { background: #000; color: #fff; }

    .search-overlay-box { width: 100%; max-width: 720px; background: #080d14; border: 1px solid var(--aged-gold); border-radius: 20px; padding: 35px 30px; position: relative; box-shadow: 0 25px 70px rgba(0,0,0,0.9); }
    .search-input-wrap { position: relative; display: flex; align-items: center; margin-bottom: 20px; }
    .search-leading-icon { position: absolute; right: 16px; color: var(--aged-gold-bright); font-size: 1.1rem; }
    .search-main-input { width: 100%; padding: 14px 48px 14px 16px; background: #05080c; border: 1px solid var(--night-border); border-radius: 12px; color: var(--wool-paper); font-size: 1.05rem; outline: none; }
    .search-main-input:focus { border-color: var(--aged-gold); }
    .search-summary-text { font-size: 0.82rem; color: var(--wool-muted); margin-bottom: 15px; }
    .search-results-flow { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
    .search-result-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(184, 144, 71, 0.12); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: all 0.25s; }
    .search-result-item:hover { border-color: var(--aged-gold); background: rgba(184, 144, 71, 0.06); }
    .search-result-item h4 { font-family: 'Amiri', serif; font-size: 1.25rem; color: var(--aged-gold-bright); margin-bottom: 4px; }
    .search-result-item p { font-size: 0.86rem; color: var(--wool-subtle); line-height: 1.6; }

    .manager-creator-zone { background: var(--night-depth); border: 1px dashed var(--aged-gold); border-radius: 18px; padding: 30px; margin-bottom: 40px; backdrop-filter: blur(12px); }
    .admin-zone-title { font-family: 'Amiri', serif; font-size: 1.6rem; color: var(--aged-gold-bright); margin-bottom: 16px; }
    .form-label { font-size: 0.86rem; color: var(--aged-gold-bright); margin: 10px 0 6px; display: block; }
    .form-control-editorial { width: 100%; padding: 12px 16px; background: #06090d; border: 1px solid var(--night-border); border-radius: 10px; color: var(--wool-paper); font-size: 0.95rem; outline: none; }
    .form-control-editorial:focus { border-color: var(--aged-gold); box-shadow: 0 0 12px var(--aged-gold-glow); }
    .editor-title { font-family: 'Amiri', serif; font-size: 1.8rem; color: var(--aged-gold-bright); margin-bottom: 20px; }
    .editor-grid-fields { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 14px; }
    .editor-buttons-row { display: flex; gap: 12px; margin-top: 20px; }

    .vault-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(12px); z-index: 20000; display: none; align-items: center; justify-content: center; padding: 20px; }
    .vault-box { background: #080c13; border: 1px solid var(--aged-gold); border-radius: 20px; padding: 35px 30px; max-width: 420px; width: 100%; text-align: center; position: relative; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9); }
    .vault-box h3 { font-family: 'Reem Kufi', sans-serif; font-size: 1.7rem; color: var(--aged-gold-bright); margin-bottom: 6px; }
    .vault-desc { font-size: 0.85rem; color: var(--wool-subtle); margin-bottom: 20px; }
    .vault-input-wrap { margin-bottom: 14px; }

    .editorial-footer { background: rgba(4, 6, 8, 0.95); border-top: 1px solid var(--night-border); padding: 45px 5% 45px; text-align: center; backdrop-filter: blur(10px); }
    .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .footer-brand { display: flex; align-items: center; gap: 10px; }
    .footer-brand h3 { font-family: 'Reem Kufi', sans-serif; font-size: 1.5rem; color: var(--wool-paper); }
    .footer-copyright { color: var(--wool-muted); font-size: 0.85rem; }

    @media (max-width: 1024px) {
      .hero-editorial-grid, .lead-hero-card, .dash-analytics-row, .editor-grid-fields { grid-template-columns: 1fr; }
      .nav-editorial-links { display: none; }
      .mobile-trigger { display: flex; }
      .lead-media { min-height: 260px; }
      .lead-media::after { background: linear-gradient(180deg, transparent 40%, rgba(8, 12, 18, 0.96) 100%); }
      .reader-manuscript { padding: 30px 24px; }
      .reader-article-title { font-size: 1.95rem; }
    }

    @media (max-width: 640px) {
      .editorial-grid { grid-template-columns: 1fr; }
      .subview-title { font-size: 2.1rem; }
      .about-paper-card { padding: 30px 20px; }
      .dash-kpi-grid { grid-template-columns: 1fr; }
      .dimmer-control-box { flex-direction: column; align-items: stretch; }
      .dimmer-slider-wrap { max-width: 100%; }
    }
  </style>
</head>
<body>

  <div id="editorialProgressBar" aria-hidden="true"></div>
  <div id="siteBackdropLayer" aria-hidden="true"></div>
  <div id="siteBackdropOverlay" aria-hidden="true"></div>
  <div id="editorialToast" class="editorial-toast" role="alert" aria-live="polite"></div>

  <!-- القائمة الجانبية (الهاتف) -->
  <div class="drawer-backdrop" id="drawerBackdrop" onclick="appRouter.toggleDrawer(false)" aria-hidden="true"></div>
  <nav class="editorial-drawer" id="editorialDrawer" aria-label="القائمة الجانبية">
    <div class="drawer-header">
      <div class="brand-text">
        <h2 class="drawer-brand-title">دفتري</h2>
        <span>فهرس المسارات التحريرية</span>
      </div>
      <button class="drawer-close" onclick="appRouter.toggleDrawer(false)" aria-label="إغلاق القائمة">&times;</button>
    </div>
    <ul class="drawer-menu">
      <li><a id="drawerDashLink" class="drawer-admin-pill" onclick="appRouter.navigate('dashboard')"><i class="fa-solid fa-gauge-high"></i> غرفة التحكم الاستراتيجية</a></li>
      <li><a onclick="appRouter.navigate('about')"><i class="fa-solid fa-feather-pointed"></i> سيرة صاحب الدفتر</a></li>
      <li><a onclick="appRouter.navigate('dafatir')"><i class="fa-solid fa-compass"></i> فهرس الدفاتر الخمسة</a></li>
      <li class="drawer-divider"></li>
      <li><a onclick="appRouter.navigate('daftar/دفتر شؤون العباد')">شؤون العباد</a></li>
      <li><a onclick="appRouter.navigate('daftar/دفتر شؤون الأحوال')">شؤون الأحوال</a></li>
      <li><a onclick="appRouter.navigate('daftar/دفتر شؤون الداخل')">شؤون الداخل</a></li>
      <li><a onclick="appRouter.navigate('daftar/دفتر شؤون الخارج')">شؤون الخارج</a></li>
      <li><a onclick="appRouter.navigate('daftar/أوراق')">أوراق</a></li>
    </ul>
  </nav>

  <!-- الشريط العلوي -->
  <header class="sanctuary-nav">
    <div class="nav-container">
      <div class="nav-brand" onclick="appRouter.navigate('')" role="button" tabindex="0" aria-label="العودة للصفحة الرئيسية">
        <div class="brand-mark" aria-hidden="true"><i class="fa-solid fa-feather-pointed"></i></div>
        <div class="brand-text">
          <h1>دفتري</h1>
          <span>فضاء الفكر والتأمل</span>
        </div>
      </div>

      <nav class="nav-editorial-links" aria-label="التصفح التحريري">
        <a id="navDashLink" class="admin-indicator-link" onclick="appRouter.navigate('dashboard')">
          <i class="fa-solid fa-shield-halved"></i> غرفة التحكم
        </a>
        <a onclick="appRouter.navigate('about')">من أنا</a>
        <a onclick="appRouter.navigate('dafatir')">دفاتر الموقع</a>
        <a onclick="appRouter.navigate('daftar/دفتر شؤون العباد')">شؤون العباد</a>
        <a onclick="appRouter.navigate('daftar/دفتر شؤون الأحوال')">شؤون الأحوال</a>
        <a onclick="appRouter.navigate('daftar/دفتر شؤون الداخل')">شؤون الداخل</a>
        <a onclick="appRouter.navigate('daftar/دفتر شؤون الخارج')">شؤون الخارج</a>
        <a onclick="appRouter.navigate('daftar/أوراق')">أوراق</a>
      </nav>

      <div class="nav-actions">
        <button class="nav-icon-btn" id="navSearchTrigger" onclick="appUI.openModal('searchModal'); document.getElementById('globalSearchInput').focus();" aria-label="البحث في المنصة">
          <i class="fa-solid fa-magnifying-glass"></i>
        </button>
        <button class="mobile-trigger" onclick="appRouter.toggleDrawer(true)" aria-label="فتح القائمة الرئيسية">
          <i class="fa-solid fa-bars"></i>
        </button>
      </div>
    </div>
  </header>

  <div id="viewsAppMount">

    <!-- 1. الرئيسية (تعرض فقط مقالات الأسبوع الأخير) -->
    <main id="homeView" class="view-panel active">
      <section class="lead-sanctuary">
        <div class="hero-editorial-grid">
          <aside class="author-monolith">
            <div class="author-avatar-wrap">
              <img src="profile.jpg" alt="مروان عبيدلي" id="mainHeroImg" class="author-avatar" onerror="this.src='https://via.placeholder.com/150/101520/d8af65?text=مروان'">
              <button class="change-hero-img-btn" id="changeHeroImgBtn" onclick="document.getElementById('heroImgFileInput').click()">
                <i class="fa-solid fa-camera"></i> صورة البروفايل
              </button>
              <input type="file" id="heroImgFileInput" accept="image/*" class="sr-only" onchange="appAdmin.handleProfileImageUpload(event)">
            </div>

            <blockquote class="author-quote">
              الكلمة سرّ الوجود،
              <span>ومن الحرف تُفتح أبواب المعنى.</span>
            </blockquote>

            <p class="author-bio-snippet">
              مساحة تحريرية هادئة تعتني بقراءة متأنية في شؤون الإنسان والواقع ومسارات الدولة وما يتجاوز الحدود.
            </p>

            <button class="btn-quiet-luxury" onclick="appRouter.navigate('about')">
              <i class="fa-solid fa-user"></i> سيرة صاحب الدفتر
            </button>
          </aside>

          <div class="lead-story-monolith">
            <div class="section-eyebrow">
              <i class="fa-solid fa-diamond" aria-hidden="true"></i> مقال الصدارة (الأكثر قراءة هذا الأسبوع)
            </div>
            <div id="leadStoryContainer" class="lead-card-slot">
              <!-- يملأ برمجيا -->
            </div>
          </div>
        </div>
      </section>

      <section class="editorial-grid-sanctuary">
        <div class="section-head-flex">
          <div class="section-eyebrow">
            <i class="fa-solid fa-feather-pointed" aria-hidden="true"></i> أحدث المقالات (الأسبوع الأخير)
          </div>
          <div class="filter-pills-row" id="homeFilterPills">
            <button class="filter-pill active" onclick="appArticles.filterFeed('')">الكل</button>
            <button class="filter-pill" onclick="appArticles.filterFeed('دفتر شؤون العباد')">شؤون العباد</button>
            <button class="filter-pill" onclick="appArticles.filterFeed('دفتر شؤون الأحوال')">شؤون الأحوال</button>
            <button class="filter-pill" onclick="appArticles.filterFeed('دفتر شؤون الداخل')">شؤون الداخل</button>
            <button class="filter-pill" onclick="appArticles.filterFeed('دفتر شؤون الخارج')">شؤون الخارج</button>
            <button class="filter-pill" onclick="appArticles.filterFeed('أوراق')">أوراق</button>
          </div>
        </div>
        <div id="allArticlesFeed" class="editorial-grid"></div>
      </section>
    </main>

    <!-- 2. غرفة التحكم -->
    <main id="dashboardView" class="view-panel" style="display:none;">
      <div class="subview-editorial-header">
        <h2 class="subview-title">غرفة التحكّم والإشراف الاستراتيجي</h2>
        <p class="subview-sub">منظومة الرصد البياني، تحليلات التفاعل الحقيقية، وإدارة المحتوى السحابي الموثق لدفتري.</p>
      </div>

      <section class="dashboard-panel-view">
        <div class="dash-top-bar">
          <div class="dash-status-group">
            <div class="system-health-badge" id="supabaseStatusBadge">
              <span class="pulse-dot" aria-hidden="true"></span>
              <span id="supabaseStatusText">Supabase Auth Connected</span>
            </div>
            <span class="dash-timestamp" id="dashLastUpdateText"></span>
          </div>

          <div class="dash-actions-cluster">
            <button class="btn-quiet-luxury" onclick="appAdmin.openArticleCreator()"><i class="fa-solid fa-plus"></i> تدوين مقال جديد</button>
            <button class="btn-quiet-luxury" onclick="appAdmin.triggerLiveRefresh()"><i class="fa-solid fa-rotate"></i> تحديث الإحصائيات</button>
            <button class="btn-quiet-luxury" onclick="document.getElementById('siteBgFileInput').click()"><i class="fa-solid fa-image"></i> خلفية الموقع</button>
            <input type="file" id="siteBgFileInput" accept="image/*" class="sr-only" onchange="appAdmin.handleBackdropUpload(event)">
            <button class="btn-quiet-luxury" onclick="appAdmin.exportBackupJSON()"><i class="fa-solid fa-download"></i> تصدير نسخة احتياطية</button>
            <button class="btn-quiet-luxury btn-danger-tone" onclick="appAuth.logout()"><i class="fa-solid fa-arrow-right-from-bracket"></i> قفل اللوحة والخروج</button>
          </div>
        </div>

        <div class="dash-kpi-grid">
          <div class="kpi-card">
            <div class="kpi-icon"><i class="fa-solid fa-users-viewfinder"></i></div>
            <div class="kpi-info">
              <h4>إجمالي الزيارات الفعلية</h4>
              <div class="kpi-number" id="kpiTotalVisits">0</div>
              <span class="kpi-subtext" style="color:#2a9d8f;"><i class="fa-solid fa-circle-check"></i> مسجلة في السحابة</span>
            </div>
          </div>

          <div class="kpi-card">
            <div class="kpi-icon"><i class="fa-solid fa-book-open-reader"></i></div>
            <div class="kpi-info">
              <h4>إجمالي قراءات المقالات</h4>
              <div class="kpi-number" id="kpiTotalReads">0</div>
              <span class="kpi-subtext" style="color:var(--aged-gold-bright);"><i class="fa-solid fa-eye"></i> تفاعل القراء الموثق</span>
            </div>
          </div>

          <div class="kpi-card">
            <div class="kpi-icon"><i class="fa-solid fa-newspaper"></i></div>
            <div class="kpi-info">
              <h4>المقالات المنشورة</h4>
              <div class="kpi-number" id="kpiTotalPosts">0</div>
              <span class="kpi-subtext"><i class="fa-solid fa-folder-open"></i> عبر دفاتر المنصة الـ 5</span>
            </div>
          </div>

          <div class="kpi-card">
            <div class="kpi-icon" style="color:#e9c46a;"><i class="fa-solid fa-crown"></i></div>
            <div class="kpi-info">
              <h4>المقال الأكثر قراءة</h4>
              <div class="kpi-top-title" id="kpiTopArticleTitle">-</div>
              <span class="kpi-subtext" id="kpiTopArticleReads" style="color:var(--wool-paper);">0 قراءة</span>
            </div>
          </div>
        </div>

        <div class="dash-analytics-row">
          <div class="analytics-panel">
            <div class="panel-head">
              <h3><i class="fa-solid fa-chart-simple"></i> توزيع القراءات حسب المقالات</h3>
              <span class="panel-tag">Live Analytics</span>
            </div>
            <div class="chart-container-wrap">
              <canvas id="articlesBarChart"></canvas>
            </div>
          </div>

          <div class="analytics-panel">
            <div class="panel-head">
              <h3><i class="fa-solid fa-chart-pie"></i> نسبة المقالات حسب الدفاتر</h3>
              <span class="panel-tag">Categorical Split</span>
            </div>
            <div class="chart-container-wrap">
              <canvas id="categoriesDoughnutChart"></canvas>
            </div>
          </div>
        </div>

        <div class="dimmer-control-box">
          <div class="dimmer-title">
            <i class="fa-solid fa-circle-half-stroke"></i>
            <span>التحكم في سواد وإضاءة خلفية الموقع (Nuance de Noir):</span>
          </div>
          <div class="dimmer-slider-wrap">
            <span class="dimmer-label">أفتح</span>
            <input type="range" min="0.30" max="0.95" step="0.01" value="0.82" id="backdropDimSlider" class="dimmer-slider" oninput="appUI.adjustBackdropDim(this.value)">
            <span class="dimmer-label">أغمق</span>
            <span id="dimmerPercentText" class="dimmer-val">82%</span>
          </div>
        </div>

        <div class="dash-table-wrap">
          <div class="table-toolbar">
            <h3 class="table-toolbar-title"><i class="fa-solid fa-table-list"></i> إدارة وفهرسة المقالات</h3>
            <div class="table-toolbar-actions">
              <input type="text" id="dashSearchInput" class="dash-search-box" placeholder="بحث بالاسم أو الكلمة..." oninput="appAdmin.filterDashboardTable()">
              <select id="dashCategorySelect" class="dash-select-box" onchange="appAdmin.filterDashboardTable()">
                <option value="">جميع الدفاتر</option>
                <option value="دفتر شؤون العباد">شؤون العباد</option>
                <option value="دفتر شؤون الأحوال">شؤون الأحوال</option>
                <option value="دفتر شؤون الداخل">شؤون الداخل</option>
                <option value="دفتر شؤون الخارج">شؤون الخارج</option>
                <option value="أوراق">أوراق</option>
              </select>
            </div>
          </div>

          <div class="responsive-table-container">
            <table class="dash-table">
              <thead>
                <tr>
                  <th scope="col">عنوان المقال</th>
                  <th scope="col">الدفتر</th>
                  <th scope="col">تاريخ النشر</th>
                  <th scope="col">مرات القراءة</th>
                  <th scope="col">الإجراءات</th>
                </tr>
              </thead>
              <tbody id="dashArticlesTableBody">
                <tr><td colspan="5" class="table-empty-cell">جاري تحميل السجلات...</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </main>

    <!-- 3. من أنا -->
    <main id="aboutView" class="view-panel" style="display:none;">
      <div class="subview-editorial-header">
        <h2 class="subview-title">من أنا</h2>
        <p class="subview-sub">مدار السيرة الفكرية وخلفية التجربة الإدارية والإنسانية.</p>
      </div>

      <section class="about-editorial-sanctuary">
        <div id="aboutEditPanel" class="manager-creator-zone" style="display:none;">
          <h3 class="admin-zone-title"><i class="fa-solid fa-pen-to-square"></i> تحيين محتوى وصورة «من أنا»</h3>
          <label class="form-label" for="aboutImgPanelInput">اختر صورة مخصصة لصفحة السيرة:</label>
          <input type="file" id="aboutImgPanelInput" accept="image/*" class="form-control-editorial">

          <label class="form-label" for="aboutTextarea">نص السيرة التحريرية:</label>
          <textarea id="aboutTextarea" class="form-control-editorial" rows="10" placeholder="اكتب السيرة هنا..."></textarea>
          
          <button class="btn-quiet-luxury" onclick="appAdmin.saveAboutContent()">
            <i class="fa-solid fa-floppy-disk"></i> حفظ التحديث سحابياً
          </button>
        </div>

        <article class="about-paper-card">
          <button id="aboutEditBtn" class="btn-quiet-luxury" style="position:absolute; top:25px; left:25px; display:none; padding:6px 16px; font-size:0.8rem;" onclick="appAdmin.toggleAboutEditor()">
            <i class="fa-solid fa-pen"></i> تعديل السيرة
          </button>

          <div class="about-visual-presentation">
            <div class="about-portrait-frame">
              <img src="profile.jpg" alt="مروان عبيدلي" id="aboutPageImg" class="about-portrait-img" onerror="this.src='https://via.placeholder.com/200/101520/d8af65?text=مروان'">
            </div>
            <button class="about-img-change-btn" id="aboutImgDirectBtn" onclick="document.getElementById('aboutImgFileInput').click()">
              <i class="fa-solid fa-camera"></i> تحديث الصورة
            </button>
            <input type="file" id="aboutImgFileInput" accept="image/*" class="sr-only" onchange="appAdmin.handleAboutImageUpload(event)">
          </div>

          <h3 class="about-lead-name">مروان عبيدلي</h3>
          <div id="aboutDisplayBody" class="about-prose"></div>
          <div class="about-signature-block">مروان عبيدلي</div>
        </article>
      </section>
    </main>

    <!-- 4. دفاتر الموقع -->
    <main id="allDafatirView" class="view-panel" style="display:none;">
      <div class="subview-editorial-header">
        <h2 class="subview-title">دفاتر الموقع</h2>
        <p class="subview-sub">خمسة مسارات فكرية توثق قراءات الإنسان، تحولات المجتمع، ومسارات الدولة.</p>
      </div>

      <div class="dafatir-tome-grid">
        <div class="tome-item" onclick="appRouter.navigate('daftar/دفتر شؤون العباد')">
          <div>
            <div class="tome-title-wrap">
              <div class="tome-icon-box"><i class="fa-solid fa-people-roof"></i></div>
              <h3>دفتر شؤون العباد</h3>
            </div>
            <p class="tome-desc-text">الإنسان، المجتمع، السلوك، الثقافة، التعليم، القيم، وما يتصل بحياة الناس وقضاياهم الحية وتطلعاتهم اليومية.</p>
          </div>
          <div class="tome-action-row"><span>مطالعة الدفتر</span><i class="fa-solid fa-arrow-left"></i></div>
        </div>

        <div class="tome-item" onclick="appRouter.navigate('daftar/دفتر شؤون الأحوال')">
          <div>
            <div class="tome-title-wrap">
              <div class="tome-icon-box"><i class="fa-solid fa-arrow-trend-up"></i></div>
              <h3>دفتر شؤون الأحوال</h3>
            </div>
            <p class="tome-desc-text">الأوضاع والتحولات الاقتصادية والاجتماعية والظواهر التي تعيد تشكيل الواقع التونسي بعين الملاحظة والتحليل الهادئ.</p>
          </div>
          <div class="tome-action-row"><span>مطالعة الدفتر</span><i class="fa-solid fa-arrow-left"></i></div>
        </div>

        <div class="tome-item" onclick="appRouter.navigate('daftar/دفتر شؤون الداخل')">
          <div>
            <div class="tome-title-wrap">
              <div class="tome-icon-box"><i class="fa-solid fa-landmark-dome"></i></div>
              <h3>دفتر شؤون الداخل</h3>
            </div>
            <p class="tome-desc-text">الدولة، الإدارة، المؤسسات، السياسة الداخلية، الإصلاح، الحوكمة، ومسارات الشأن العام من واقع التجربة والخبرة.</p>
          </div>
          <div class="tome-action-row"><span>مطالعة الدفتر</span><i class="fa-solid fa-arrow-left"></i></div>
        </div>

        <div class="tome-item" onclick="appRouter.navigate('daftar/دفتر شؤون الخارج')">
          <div>
            <div class="tome-title-wrap">
              <div class="tome-icon-box"><i class="fa-solid fa-earth-africa"></i></div>
              <h3>دفتر شؤون الخارج</h3>
            </div>
            <p class="tome-desc-text">العلاقات الدولية، الجغرافيا السياسية، التحولات العالمية، الاقتصاد الدولي، وموقع تونس في خريطة العالم المتغير.</p>
          </div>
          <div class="tome-action-row"><span>مطالعة الدفتر</span><i class="fa-solid fa-arrow-left"></i></div>
        </div>

        <div class="tome-item" onclick="appRouter.navigate('daftar/أوراق')">
          <div>
            <div class="tome-title-wrap">
              <div class="tome-icon-box"><i class="fa-solid fa-feather"></i></div>
              <h3>أوراق</h3>
            </div>
            <p class="tome-desc-text">أفكار وملاحظات وتأملات قصيرة وخاطفة لا تحتاج إلى مقال طويل، مدوّنة كما فاضت بها اللحظة في مداراتها الأولى.</p>
          </div>
          <div class="tome-action-row"><span>مطالعة الدفتر</span><i class="fa-solid fa-arrow-left"></i></div>
        </div>
      </div>
    </main>

    <!-- 5. الدفتر المختار (يعرض جميع المقالات بدون فلتر الأسبوع) -->
    <main id="daftarView" class="view-panel" style="display:none;">
      <div class="subview-editorial-header">
        <div class="subview-top-nav">
          <button class="back-quiet-link" onclick="appRouter.navigate('dafatir')">
            <i class="fa-solid fa-arrow-right"></i> العودة لفهرس الدفاتر
          </button>
        </div>
        <h2 id="currentDaftarTitle" class="subview-title"></h2>
        <p id="currentDaftarDesc" class="subview-sub"></p>
      </div>

      <div class="editorial-grid-sanctuary">
        <div id="daftarArticlesFeed" class="editorial-grid"></div>
      </div>
    </main>

  </div>

  <!-- Modal: قارئ المقال -->
  <div class="reader-modal" id="articleModal" onclick="appArticles.closeReader(event)" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="reader-manuscript" onclick="event.stopPropagation()">
      <button class="reader-close-btn" onclick="appArticles.closeReader()" aria-label="إغلاق المقال">&times;</button>
      
      <div class="reader-header-area">
        <span id="modalCategory" class="editorial-badge"></span>
        <h1 id="modalTitle" class="reader-article-title"></h1>
        
        <div id="modalMeta" class="reader-meta-row">
          <span><i class="fa-regular fa-calendar"></i> <span id="modalDateVal"></span></span>
          <span><i class="fa-regular fa-clock"></i> <span id="modalReadingTime"></span></span>
          <span><i class="fa-regular fa-bookmark"></i> قراءة معمّقة</span>
        </div>

        <div class="reader-tools-bar">
          <div class="reader-font-controls">
            <button class="reader-tool-btn" onclick="appUI.changeReaderFontSize(-1)" title="تصغير الخط" aria-label="تصغير الخط">أ-</button>
            <span id="readerFontScaleText">100%</span>
            <button class="reader-tool-btn" onclick="appUI.changeReaderFontSize(1)" title="تكبير الخط" aria-label="تكبير الخط">أ+</button>
          </div>
          <div class="reader-tool-actions">
            <button class="reader-tool-btn" onclick="window.print()" title="طباعة المقال"><i class="fa-solid fa-print"></i></button>
            <button class="reader-tool-btn" id="modalCopyLinkBtn" title="نسخ رابط المقال"><i class="fa-solid fa-link"></i></button>
          </div>
        </div>
      </div>

      <div id="modalText" class="reader-text-flow"></div>

      <div class="reader-footer-signature">
        <span>حرّر في دفتري — بقلم: <strong>مروان عبيدلي</strong></span>
      </div>

      <div class="reader-share-actions">
        <span class="share-label">مشاركة هذا الفكر:</span>
        <button class="reader-share-btn fb" id="modalFbShareBtn"><i class="fa-brands fa-facebook-f"></i> فيسبوك</button>
        <button class="reader-share-btn wa" id="modalWaShareBtn"><i class="fa-brands fa-whatsapp"></i> واتساب</button>
        <button class="reader-share-btn x" id="modalXShareBtn"><i class="fa-brands fa-x-twitter"></i> منصة X</button>
      </div>
    </div>
  </div>

  <!-- Modal: البحث الشامل -->
  <div class="reader-modal" id="searchModal" onclick="appUI.closeModal('searchModal');" role="dialog" aria-modal="true">
    <div class="search-overlay-box" onclick="event.stopPropagation()">
      <button class="reader-close-btn" onclick="appUI.closeModal('searchModal');">&times;</button>
      <div class="search-input-wrap">
        <i class="fa-solid fa-magnifying-glass search-leading-icon"></i>
        <input type="search" id="globalSearchInput" class="search-main-input" placeholder="اكتب للبحث في عناوين ونصوص وأفكار دفتري..." oninput="appArticles.handleSearch(this.value)">
      </div>
      <div id="searchResultsSummary" class="search-summary-text"></div>
      <div id="searchResultsList" class="search-results-flow"></div>
    </div>
  </div>

  <!-- Modal: محرر المقالات -->
  <div class="reader-modal" id="editorModal" onclick="appUI.closeModal('editorModal');" role="dialog" aria-modal="true">
    <div class="reader-manuscript editor-manuscript" onclick="event.stopPropagation()">
      <button class="reader-close-btn" onclick="appUI.closeModal('editorModal');">&times;</button>

      <h2 id="editorFormHeader" class="editor-title"><i class="fa-solid fa-pen-nib"></i> تدوين مقال جديد</h2>
      <input type="hidden" id="editorPostId" value="">

      <div class="editor-grid-fields">
        <div>
          <label class="form-label" for="editorPostTitle">عنوان المقال:</label>
          <input type="text" id="editorPostTitle" class="form-control-editorial" placeholder="اكتب عنواناً رصيناً للمقال...">
        </div>
        <div>
          <label class="form-label" for="editorPostDaftar">الدفتر الفكري المستهدف:</label>
          <select id="editorPostDaftar" class="form-control-editorial">
            <option value="دفتر شؤون العباد">دفتر شؤون العباد</option>
            <option value="دفتر شؤون الأحوال">دفتر شؤون الأحوال</option>
            <option value="دفتر شؤون الداخل">دفتر شؤون الداخل</option>
            <option value="دفتر شؤون الخارج">دفتر شؤون الخارج</option>
            <option value="أوراق">أوراق</option>
          </select>
        </div>
      </div>

      <label class="form-label" for="editorPostImageFile">صورة المقال (اختياري - سيتم ضغطها تلقائياً):</label>
      <input type="file" id="editorPostImageFile" accept="image/*" class="form-control-editorial">

      <label class="form-label" for="editorPostText">نص وتأملات المقال:</label>
      <textarea id="editorPostText" class="form-control-editorial" rows="12" placeholder="اكتب هنا الفكرة والتحليل والتدوين..."></textarea>

      <div class="editor-buttons-row">
        <button class="btn-quiet-luxury" id="editorSaveBtn" onclick="appAdmin.submitArticle()">
          <i class="fa-solid fa-floppy-disk"></i> نشر وحفظ المقال
        </button>
        <button class="btn-quiet-luxury" style="background:#1b2330;" onclick="appUI.closeModal('editorModal');">
          إلغاء
        </button>
      </div>
    </div>
  </div>

  <!-- Modal: خزانة التوثيق -->
  <div id="loginModal" class="vault-modal" role="dialog" aria-modal="true" aria-labelledby="vaultTitle">
    <div class="vault-box">
      <div class="brand-mark" style="margin:0 auto 15px;" aria-hidden="true"><i class="fa-solid fa-shield-halved"></i></div>
      <h3 id="vaultTitle">خزانة صاحب الدفتر</h3>
      <p class="vault-desc">تسجيل الدخول الإداري مؤمن عبر بروتوكول Supabase Auth المشفر.</p>
      
      <form id="vaultLoginForm" onsubmit="appAuth.handleLogin(event)">
        <div class="vault-input-wrap">
          <label class="sr-only" for="authEmail">البريد الإلكتروني للإدارة</label>
          <input type="email" id="authEmail" class="form-control-editorial" placeholder="البريد الإلكتروني المعتمد" required autocomplete="username">
        </div>
        
        <div class="vault-input-wrap">
          <label class="sr-only" for="authPassword">كلمة المرور المشفرة</label>
          <input type="password" id="authPassword" class="form-control-editorial" placeholder="كلمة المرور" required autocomplete="current-password">
        </div>

        <button type="submit" class="btn-quiet-luxury btn-block" id="loginSubmitBtn">
          <i class="fa-solid fa-key"></i> التحقق وتفعيل لوحة الإدارة
        </button>
      </form>
    </div>
  </div>

  <footer class="editorial-footer">
    <div class="footer-inner">
      <div class="footer-brand">
        <div class="brand-mark" style="width:36px; height:36px;" aria-hidden="true"><i class="fa-solid fa-feather-pointed"></i></div>
        <h3>دفتري</h3>
      </div>
      <p class="footer-copyright">
        جميع الحقوق محفوظة &copy; دفتري 2026 — فضاء الفكر والتحرير والتأمل لمروان عبيدلي
      </p>
    </div>
  </footer>

  <script>
    const SUPABASE_CONFIG = {
      url: 'https://xejqbpjjjhxdycshaabp.supabase.co',
      anonKey: 'sb_publishable_xrpwB7NdEBB8wq-GK1C8WQ_XVg0D-25'
    };

    const dbClient = (function () {
      try {
        if (window.supabase) return window.supabase.createClient(SUPABASE_CONFIG.url, SUPABASE_CONFIG.anonKey);
      } catch (err) { console.warn('Supabase init failed:', err); }
      return null;
    })();

    const appAuth = {
      currentUser: null,

      async init() {
        if (!dbClient || !dbClient.auth) {
          this.setGuestState();
          return;
        }
        try {
          const { data: { session } } = await dbClient.auth.getSession();
          if (session) this.setAuthenticatedState(session.user);
          else this.setGuestState();

          dbClient.auth.onAuthStateChange((_event, session) => {
            if (session) this.setAuthenticatedState(session.user);
            else this.setGuestState();
          });
        } catch (e) {
          this.setGuestState();
        }
      },

      async handleLogin(event) {
        event.preventDefault();
        const email = document.getElementById('authEmail').value.trim();
        const password = document.getElementById('authPassword').value.trim();
        const submitBtn = document.getElementById('loginSubmitBtn');

        if (!email || !password) {
          appUI.toast('يرجى ملء البريد الإلكتروني وكلمة المرور');
          return;
        }

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> جاري التحقق المشفر...';

        if (dbClient && dbClient.auth) {
          try {
            const { error } = await dbClient.auth.signInWithPassword({ email, password });
            if (error) throw error;
            appUI.toast('تم تسجيل الدخول بنجاح وتفعيل لوحة الإدارة');
            appUI.closeModal('loginModal');
            appRouter.navigate('dashboard');
          } catch (err) {
            appUI.toast('فشل التوثيق: بيانات الدخول غير صحيحة.');
          } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fa-solid fa-key"></i> التحقق وتفعيل لوحة الإدارة';
          }
        } else {
          appUI.toast('خطأ: تعذر الاتصال بخادم التوثيق السحابي.');
          submitBtn.disabled = false;
          submitBtn.innerHTML = '<i class="fa-solid fa-key"></i> التحقق وتفعيل لوحة الإدارة';
        }
      },

      async logout() {
        if (confirm('هل أنت متأكد من رغبتك في قفل غرفة التحكم وتسجيل الخروج؟')) {
          if (dbClient && dbClient.auth) await dbClient.auth.signOut().catch(() => {});
          this.setGuestState();
          appUI.toast('تم تسجيل الخروج وقفل غرفة التحكم');
          appRouter.navigate('');
        }
      },

      setAuthenticatedState(user) {
        this.currentUser = user;
        document.getElementById('navDashLink').style.display = 'inline-flex';
        document.getElementById('drawerDashLink').style.display = 'flex';
        document.getElementById('changeHeroImgBtn').style.display = 'block';
        document.getElementById('aboutImgDirectBtn').style.display = 'inline-block';
        document.getElementById('aboutEditBtn').style.display = 'inline-flex';
        appArticles.renderFeedCards();
      },

      setGuestState() {
        this.currentUser = null;
        document.getElementById('navDashLink').style.display = 'none';
        document.getElementById('drawerDashLink').style.display = 'none';
        document.getElementById('changeHeroImgBtn').style.display = 'none';
        document.getElementById('aboutImgDirectBtn').style.display = 'none';
        document.getElementById('aboutEditBtn').style.display = 'none';
        if (window.location.hash === '#dashboard') appRouter.navigate('');
        appArticles.renderFeedCards();
      },

      isAuthenticated() { return !!this.currentUser; }
    };

    const appRouter = {
      init() {
        window.addEventListener('hashchange', () => this.handleRouting());
        this.handleRouting();
      },

      navigate(route) { 
        const current = window.location.hash.replace('#', '');
        if (current === route) {
            this.handleRouting();
        } else {
            window.location.hash = route; 
        }
      },

      handleRouting() {
        const rawHash = decodeURIComponent(window.location.hash.replace('#', '')).trim();
        this.toggleDrawer(false);

        if (rawHash.startsWith('article-')) {
          const artId = rawHash.replace('article-', '');
          this.showView('home');
          appArticles.openArticle(artId);
          return;
        }

        appArticles.closeReader();

        if (rawHash === 'dashboard') {
          if (!appAuth.isAuthenticated()) {
            appUI.toast('يجب توثيق الدخول أولاً للوصول إلى غرفة التحكم');
            appUI.openModal('loginModal');
            return;
          }
          this.showView('dashboard');
          appAdmin.renderDashboard();
        } else if (rawHash === 'about') {
          this.showView('about');
          appAdmin.loadAboutContent();
        } else if (rawHash === 'dafatir') {
          this.showView('dafatir');
        } else if (rawHash.startsWith('daftar/')) {
          const dName = rawHash.replace('daftar/', '');
          this.showView('daftar');
          appArticles.renderDaftarPage(dName);
        } else {
          this.showView('home');
          appArticles.renderHomePage();
        }
      },

      showView(viewName) {
        const views = {
          home: document.getElementById('homeView'),
          about: document.getElementById('aboutView'),
          dafatir: document.getElementById('allDafatirView'),
          daftar: document.getElementById('daftarView'),
          dashboard: document.getElementById('dashboardView')
        };
        Object.keys(views).forEach(k => {
          if (views[k]) views[k].style.display = (k === viewName) ? 'block' : 'none';
        });
        window.scrollTo({ top: 0, behavior: 'smooth' });
      },

      toggleDrawer(open) {
        document.getElementById('editorialDrawer').classList.toggle('active', open);
        document.getElementById('drawerBackdrop').classList.toggle('active', open);
      }
    };

    const appArticles = {
      cachedPosts: [],
      recentPostsForGrid: [],
      activeFilter: '',

      async fetchAll(force = false) {
        if (!force && this.cachedPosts.length > 0) return this.cachedPosts;
        const local = localStorage.getItem('daftari_v2_cache');
        if (local && !force) {
          try { this.cachedPosts = JSON.parse(local); } catch (e) {}
        }
        if (dbClient) {
          try {
            const { data, error } = await dbClient.from('articles').select('id, title, daftar, excerpt, text, image, date, views, created_at').order('id', { ascending: false });
            if (!error && data) {
              this.cachedPosts = data;
              try { localStorage.setItem('daftari_v2_cache', JSON.stringify(data)); } catch (e) {}
            }
          } catch (err) { console.warn('Fetch error:', err); }
        }
        return this.cachedPosts;
      },

      async renderHomePage() {
        const allPosts = await this.fetchAll();
        const leadContainer = document.getElementById('leadStoryContainer');
        const feed = document.getElementById('allArticlesFeed');
        
        if (!allPosts || !allPosts.length) {
          leadContainer.innerHTML = `
            <div class="lead-hero-card" style="padding:40px; grid-template-columns:1fr; text-align:center;">
              <p style="color:var(--wool-subtle);">مرحباً بك في دفتري. بانتظار نشر المقال الأول من غرفة التحكم.</p>
            </div>`;
          feed.innerHTML = '';
          return;
        }

        // استخراج مقالات الأسبوع الأخير (7 أيام)
        const now = new Date();
        const sevenDaysAgo = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));
        
        const recentPosts = allPosts.filter(p => {
            if (!p.created_at) return true; 
            return new Date(p.created_at) >= sevenDaysAgo;
        });

        if (!recentPosts.length) {
          leadContainer.innerHTML = `
            <div class="lead-hero-card" style="padding:40px; grid-template-columns:1fr; text-align:center;">
              <p style="color:var(--wool-subtle);">لا توجد مقالات منشورة خلال الأسبوع الأخير.</p>
            </div>`;
          this.recentPostsForGrid = [];
          this.renderFeedCards();
          return;
        }

        // المقال الأكثر قراءة في الأسبوع الأخير للصدارة
        let lead = recentPosts[0];
        let maxViews = -1;
        recentPosts.forEach(p => {
            const v = Number(p.views || 0);
            if (v > maxViews) { maxViews = v; lead = p; }
        });

        this.recentPostsForGrid = recentPosts.filter(p => String(p.id) !== String(lead.id));

        leadContainer.innerHTML = `
          <article class="lead-hero-card" onclick="appRouter.navigate('article-${lead.id}')">
            ${appAuth.isAuthenticated() ? `
              <div class="admin-card-actions" onclick="event.stopPropagation();">
                <button class="admin-action-btn edit" onclick="appAdmin.openArticleEditor('${lead.id}')" title="تعديل"><i class="fa-solid fa-pen"></i></button>
                <button class="admin-action-btn delete" onclick="appAdmin.deleteArticle('${lead.id}')" title="حذف"><i class="fa-solid fa-trash-can"></i></button>
              </div>` : ''}
            <div class="lead-content">
              <div>
                <span class="editorial-badge">${appUI.escapeHTML(lead.daftar || 'دفتر')}</span>
                <h2 class="lead-title">${appUI.escapeHTML(lead.title)}</h2>
                <p class="lead-excerpt">${appUI.escapeHTML(lead.excerpt || '')}</p>
              </div>
              <div class="lead-footer">
                <span><i class="fa-regular fa-calendar"></i> ${lead.date || ''}</span>
                <span class="lead-action-cta">قراءة المقال <i class="fa-solid fa-arrow-left"></i></span>
              </div>
            </div>
            <div class="lead-media">
              <img src="${lead.image || 'profile.jpg'}" alt="${appUI.escapeHTML(lead.title)}" onerror="this.src='profile.jpg'">
            </div>
          </article>`;

        this.renderFeedCards();
      },

      renderFeedCards() {
        const feed = document.getElementById('allArticlesFeed');
        if (!feed) return;
        
        let sourcePosts = [];
        const hash = window.location.hash.replace('#', '');
        if (hash === '' || hash === 'home') {
            sourcePosts = this.recentPostsForGrid || [];
        } else {
            sourcePosts = this.cachedPosts.slice(1);
        }

        const filtered = this.activeFilter ? sourcePosts.filter(p => p.daftar === this.activeFilter) : sourcePosts;

        feed.innerHTML = '';
        if (!filtered.length) {
          feed.innerHTML = `<p style="grid-column:1/-1; text-align:center; color:var(--wool-muted); padding:40px 0;">لا توجد مقالات أخرى لعرضها.</p>`;
          return;
        }
        filtered.forEach(p => feed.appendChild(this.createCardElement(p)));
      },

      filterFeed(category) {
        this.activeFilter = category;
        document.querySelectorAll('#homeFilterPills .filter-pill').forEach(btn => {
          btn.classList.toggle('active', btn.textContent.trim() === (category || 'الكل'));
        });
        this.renderFeedCards();
      },

      async renderDaftarPage(notebookName) {
        document.getElementById('currentDaftarTitle').innerText = notebookName;
        const descMap = {
          'دفتر شؤون العباد': 'الإنسان والمجتمع والثقافة والسلوك والقيم وما يتصل بحياة الناس وقضاياهم.',
          'دفتر شؤون الأحوال': 'قراءة في التحولات الاقتصادية والاجتماعية والظواهر المعاصرة بعين الملاحظة والتحليل.',
          'دفتر شؤون الداخل': 'الدولة، الإدارة، المؤسسات، السياسة الداخلية، ومسارات الشأن الوطني التونسي.',
          'دفتر شؤون الخارج': 'العالم، الجغرافيا السياسية، العلاقات الدولية، وموقع تونس في خريطة العالم.',
          'أوراق': 'أفكار قصيرة وتأملات وملاحظات خاطفة لا تحتاج إلى مقال طويل.'
        };
        document.getElementById('currentDaftarDesc').innerText = descMap[notebookName] || '';

        // جميع المقالات للدفتر المختار
        const posts = (await this.fetchAll()).filter(p => p.daftar === notebookName);
        const container = document.getElementById('daftarArticlesFeed');
        container.innerHTML = '';

        if (!posts.length) {
          container.innerHTML = `<p style="grid-column:1/-1; text-align:center; color:var(--wool-muted); padding:50px 0;">لم تُكتب صفحات هذا الدفتر بعد.</p>`;
          return;
        }
        posts.forEach(p => container.appendChild(this.createCardElement(p)));
      },

      createCardElement(post) {
        const card = document.createElement('article');
        card.className = 'editorial-card';
        card.onclick = () => appRouter.navigate('article-' + post.id);

        card.innerHTML = `
          ${appAuth.isAuthenticated() ? `
            <div class="admin-card-actions" onclick="event.stopPropagation();">
              <button class="admin-action-btn edit" onclick="appAdmin.openArticleEditor('${post.id}')" title="تعديل"><i class="fa-solid fa-pen"></i></button>
              <button class="admin-action-btn delete" onclick="appAdmin.deleteArticle('${post.id}')" title="حذف"><i class="fa-solid fa-trash-can"></i></button>
            </div>` : ''}
          <div class="card-cover">
            <img src="${post.image || 'profile.jpg'}" alt="${appUI.escapeHTML(post.title)}" onerror="this.src='profile.jpg'">
          </div>
          <div class="card-body">
            <div>
              <span class="editorial-badge">${appUI.escapeHTML(post.daftar || 'دفتر')}</span>
              <h3 class="card-heading">${appUI.escapeHTML(post.title)}</h3>
              <p class="card-text">${appUI.escapeHTML(post.excerpt || '')}</p>
            </div>
            <div class="card-meta-bottom">
              <span><i class="fa-regular fa-calendar"></i> ${post.date || ''}</span>
              <span style="color:var(--aged-gold-bright); font-weight:600;">قراءة المقال <i class="fa-solid fa-arrow-left"></i></span>
            </div>
          </div>`;
        return card;
      },

      async openArticle(id) {
        let post = this.cachedPosts.find(p => String(p.id) === String(id));
        if (!post) {
          await this.fetchAll(true);
          post = this.cachedPosts.find(p => String(p.id) === String(id));
        }
        if (!post) {
            appUI.toast("المقال غير موجود أو تم حذفه.");
            appRouter.navigate('');
            return;
        }

        if (dbClient) {
          dbClient.rpc('increment_article_view', { article_id: post.id }).catch(() => {});
          post.views = (Number(post.views) || 0) + 1;
        }

        document.getElementById('modalCategory').innerText = post.daftar || 'دفتر';
        document.getElementById('modalTitle').innerText = post.title;
        document.getElementById('modalDateVal').innerText = post.date || '';
        
        const words = (post.text || '').trim().split(/\s+/).length;
        const readMinutes = Math.max(1, Math.round(words / 180));
        document.getElementById('modalReadingTime').innerText = `${readMinutes} دقائق قراءة`;

        document.getElementById('modalText').innerText = post.text || post.excerpt || '';

        const fullUrl = window.location.origin + window.location.pathname + '#article-' + post.id;
        document.getElementById('modalFbShareBtn').onclick = () => window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(fullUrl), '_blank');
        document.getElementById('modalWaShareBtn').onclick = () => window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(post.title + ' ' + fullUrl), '_blank');
        document.getElementById('modalXShareBtn').onclick = () => window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(post.title) + '&url=' + encodeURIComponent(fullUrl), '_blank');
        document.getElementById('modalCopyLinkBtn').onclick = () => {
          navigator.clipboard.writeText(fullUrl).then(() => appUI.toast('تم نسخ رابط المقال بنجاح'));
        };

        appUI.openModal('articleModal');
      },

      closeReader(e) {
        if (e && e.target !== document.getElementById('articleModal')) return;
        appUI.closeModal('articleModal');
        if (window.location.hash.startsWith('#article-')) {
          history.pushState('', document.title, window.location.pathname + window.location.search);
        }
      },

      handleSearch(query) {
        const q = query.toLowerCase().trim();
        const summary = document.getElementById('searchResultsSummary');
        const container = document.getElementById('searchResultsList');

        if (!q) {
          summary.innerText = '';
          container.innerHTML = '';
          return;
        }

        const matches = this.cachedPosts.filter(p => 
          (p.title || '').toLowerCase().includes(q) || 
          (p.text || '').toLowerCase().includes(q) ||
          (p.daftar || '').toLowerCase().includes(q)
        );

        summary.innerText = `تم العثور على ${matches.length} مقال/أوراق فكرية:`;
        container.innerHTML = '';

        if (!matches.length) {
          container.innerHTML = `<p style="text-align:center; color:var(--wool-muted); padding:20px;">لا توجد نتائج مطابقة لبحثك.</p>`;
          return;
        }

        matches.forEach(p => {
          const item = document.createElement('div');
          item.className = 'search-result-item';
          item.onclick = () => {
            appUI.closeModal('searchModal');
            appRouter.navigate('article-' + p.id);
          };
          item.innerHTML = `
            <span class="editorial-badge" style="font-size:0.68rem;">${appUI.escapeHTML(p.daftar)}</span>
            <h4>${appUI.escapeHTML(p.title)}</h4>
            <p>${appUI.escapeHTML((p.excerpt || p.text || '').slice(0, 140))}...</p>`;
          container.appendChild(item);
        });
      }
    };

    const appAdmin = {
      barChart: null,
      doughnutChart: null,

      async renderDashboard() {
        document.getElementById('dashLastUpdateText').innerText = 'تحيين: ' + new Date().toLocaleTimeString('ar-TN');
        
        if (dbClient) {
          try {
            const { data: stats } = await dbClient.from('site_stats').select('total_visits').eq('id', 'global').single();
            if (stats) document.getElementById('kpiTotalVisits').innerText = Number(stats.total_visits || 0).toLocaleString('ar-TN');
          } catch (e) {}
        }

        const posts = await appArticles.fetchAll(true);
        document.getElementById('kpiTotalPosts').innerText = posts.length.toLocaleString('ar-TN');

        let totalReads = 0, topPost = null, maxViews = -1;
        posts.forEach(p => {
          const v = Number(p.views || 0);
          totalReads += v;
          if (v > maxViews) { maxViews = v; topPost = p; }
        });

        document.getElementById('kpiTotalReads').innerText = totalReads.toLocaleString('ar-TN');
        if (topPost && maxViews > 0) {
          document.getElementById('kpiTopArticleTitle').innerText = topPost.title;
          document.getElementById('kpiTopArticleReads').innerText = maxViews.toLocaleString('ar-TN') + ' قراءة';
        } else {
          document.getElementById('kpiTopArticleTitle').innerText = posts[0] ? posts[0].title : '-';
          document.getElementById('kpiTopArticleReads').innerText = 'بانتظار القراءات الأولى';
        }

        this.renderTable(posts);
        this.renderCharts(posts);
      },

      renderTable(posts) {
        const tbody = document.getElementById('dashArticlesTableBody');
        tbody.innerHTML = '';
        if (!posts.length) {
          tbody.innerHTML = `<tr><td colspan="5" class="table-empty-cell">لا توجد مقالات منشورة بعد.</td></tr>`;
          return;
        }

        posts.forEach(p => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td style="font-weight:600; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${appUI.escapeHTML(p.title)}</td>
            <td><span class="editorial-badge">${appUI.escapeHTML(p.daftar)}</span></td>
            <td style="color:var(--wool-muted); font-size:0.85rem;">${p.date || '-'}</td>
            <td><span class="views-badge"><i class="fa-regular fa-eye"></i> ${(p.views || 0).toLocaleString('ar-TN')}</span></td>
            <td>
              <div style="display:flex; gap:8px;">
                <button class="admin-action-btn edit" onclick="appAdmin.openArticleEditor('${p.id}')" title="تعديل"><i class="fa-solid fa-pen"></i></button>
                <button class="admin-action-btn delete" onclick="appAdmin.deleteArticle('${p.id}')" title="حذف"><i class="fa-solid fa-trash-can"></i></button>
              </div>
            </td>`;
          tbody.appendChild(tr);
        });
      },

      filterDashboardTable() {
        const q = document.getElementById('dashSearchInput').value.toLowerCase().trim();
        const cat = document.getElementById('dashCategorySelect').value;
        const filtered = appArticles.cachedPosts.filter(p => {
          const matchTitle = (p.title || '').toLowerCase().includes(q);
          const matchCat = cat ? p.daftar === cat : true;
          return matchTitle && matchCat;
        });
        this.renderTable(filtered);
      },

      renderCharts(posts) {
        if (!window.Chart || !posts.length) return;

        const barCtx = document.getElementById('articlesBarChart');
        if (barCtx) {
          if (this.barChart) this.barChart.destroy();
          const topFive = posts.slice(0, 6);
          this.barChart = new Chart(barCtx, {
            type: 'bar',
            data: {
              labels: topFive.map(p => p.title.length > 18 ? p.title.slice(0, 18) + '...' : p.title),
              datasets: [{
                label: 'مرات القراءة',
                data: topFive.map(p => Number(p.views || 0)),
                backgroundColor: 'rgba(216, 175, 101, 0.75)',
                borderColor: '#b89047',
                borderWidth: 1.5,
                borderRadius: 6
              }]
            },
            options: {
              responsive: true, maintainAspectRatio: false,
              plugins: { legend: { display: false } },
              scales: {
                x: { ticks: { color: '#a6b3c2', font: { family: 'Cairo', size: 10 } }, grid: { color: 'rgba(184, 144, 71, 0.08)' } },
                y: { beginAtZero: true, ticks: { color: '#a6b3c2', font: { family: 'JetBrains Mono' } }, grid: { color: 'rgba(184, 144, 71, 0.08)' } }
              }
            }
          });
        }

        const doughnutCtx = document.getElementById('categoriesDoughnutChart');
        if (doughnutCtx) {
          if (this.doughnutChart) this.doughnutChart.destroy();
          const counts = { 'شؤون العباد': 0, 'شؤون الأحوال': 0, 'شؤون الداخل': 0, 'شؤون الخارج': 0, 'أوراق': 0 };
          posts.forEach(p => {
            if (p.daftar && counts[p.daftar] !== undefined) counts[p.daftar]++;
            else counts['أوراق']++;
          });

          this.doughnutChart = new Chart(doughnutCtx, {
            type: 'doughnut',
            data: {
              labels: Object.keys(counts),
              datasets: [{
                data: Object.values(counts),
                backgroundColor: ['#b89047', '#2a9d8f', '#3a86ff', '#e76f51', '#8338ec'],
                borderColor: '#070b10',
                borderWidth: 2
              }]
            },
            options: {
              responsive: true, maintainAspectRatio: false,
              plugins: { legend: { position: 'bottom', labels: { color: '#a6b3c2', font: { family: 'Cairo', size: 11 } } } }
            }
          });
        }
      },

      openArticleCreator() {
        document.getElementById('editorPostId').value = '';
        document.getElementById('editorPostTitle').value = '';
        document.getElementById('editorPostText').value = '';
        document.getElementById('editorPostImageFile').value = '';
        document.getElementById('editorFormHeader').innerHTML = '<i class="fa-solid fa-pen-nib"></i> تدوين مقال جديد';
        document.getElementById('editorSaveBtn').innerHTML = '<i class="fa-solid fa-floppy-disk"></i> نشر وحفظ المقال';
        appUI.openModal('editorModal');
      },

      openArticleEditor(id) {
        const post = appArticles.cachedPosts.find(p => String(p.id) === String(id));
        if (!post) return;

        document.getElementById('editorPostId').value = post.id;
        document.getElementById('editorPostTitle').value = post.title;
        document.getElementById('editorPostDaftar').value = post.daftar;
        document.getElementById('editorPostText').value = post.text || post.excerpt;
        document.getElementById('editorFormHeader').innerHTML = `<i class="fa-solid fa-pen-to-square"></i> تعديل: ${appUI.escapeHTML(post.title)}`;
        document.getElementById('editorSaveBtn').innerHTML = '<i class="fa-solid fa-rotate"></i> حفظ التعديل';
        appUI.openModal('editorModal');
      },

      async submitArticle() {
        if (!appAuth.isAuthenticated()) { appUI.toast('يجب تسجيل الدخول كمدير'); return; }

        if (dbClient && dbClient.auth) {
          const { data: { session } } = await dbClient.auth.getSession();
          if (!session) {
             appUI.toast('انتهت صلاحية الجلسة. يرجى تسجيل الدخول مجدداً.');
             appAuth.setGuestState();
             return; 
          }
        }

        const editId = document.getElementById('editorPostId').value;
        const title = document.getElementById('editorPostTitle').value.trim();
        const daftar = document.getElementById('editorPostDaftar').value;
        const text = document.getElementById('editorPostText').value.trim();
        const fileInp = document.getElementById('editorPostImageFile');
        const saveBtn = document.getElementById('editorSaveBtn');

        if (!title || !text) { appUI.toast('يرجى ملء العنوان ونص المقال'); return; }

        saveBtn.disabled = true;
        saveBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> جاري الحفظ السحابي...';

        try {
          let imageUrl = null;
          if (fileInp.files && fileInp.files[0]) {
             try {
               imageUrl = await appUI.compressImage(fileInp.files[0], 1200, 0.75);
             } catch(e) { console.warn("Failed to compress image", e); }
          }

          if (editId) {
            const payload = { title, daftar, text, excerpt: text.length > 220 ? text.substring(0, 220) + '...' : text };
            if (imageUrl) payload.image = imageUrl;
            const { error } = await dbClient.from('articles').update(payload).eq('id', editId);
            if (error) throw error;
            appUI.toast('تم تحديث المقال بنجاح');
          } else {
            const newPost = {
              title, daftar, text,
              excerpt: text.length > 220 ? text.substring(0, 220) + '...' : text,
              image: imageUrl || 'profile.jpg', views: 0,
              date: new Date().toLocaleDateString('ar-TN', { year: 'numeric', month: 'long', day: 'numeric' })
            };
            const { error } = await dbClient.from('articles').insert([newPost]);
            if (error) throw error;
            appUI.toast('تم نشر المقال في السحابة بنجاح');
          }

          appUI.closeModal('editorModal');
          await appArticles.fetchAll(true);
          if (window.location.hash === '#dashboard') this.renderDashboard();
          else appArticles.renderHomePage();
        } catch (err) {
          appUI.toast('خطأ أثناء الحفظ: ' + err.message);
        } finally {
          saveBtn.disabled = false;
          saveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> نشر وحفظ المقال';
        }
      },

      async deleteArticle(id) {
        if (!appAuth.isAuthenticated()) return;
        if (!confirm('هل أنت متأكد من رغبتك في تفسيخ هذا المقال نهائياً من السحابة؟')) return;

        try {
          const { error } = await dbClient.from('articles').delete().eq('id', id);
          if (error) throw error;

          appUI.toast('تم حذف المقال بنجاح');
          await appArticles.fetchAll(true);
          if (window.location.hash === '#dashboard') this.renderDashboard();
          else appArticles.renderHomePage();
        } catch (err) {
          appUI.toast('تعذر حذف المقال: ' + err.message);
        }
      },

      triggerLiveRefresh() {
        this.renderDashboard();
        appUI.toast('تم تحديث الإحصائيات من السحابة مباشرة');
      },

      exportBackupJSON() {
        const backup = { exportedAt: new Date().toISOString(), author: 'مروان عبيدلي', platform: 'دفتري V2', articles: appArticles.cachedPosts };
        const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `daftari_v2_backup_${new Date().toISOString().slice(0, 10)}.json`;
        a.click();
        URL.revokeObjectURL(url);
        appUI.toast('تم تحميل ملف النسخة الاحتياطية بنجاح');
      },

      loadAboutContent() {
        const defaultAbout = `أكتب من موقع رجل عاش الإدارة لا باعتبارها مفهومًا نظريًا فقط، بل باعتبارها واقعًا يوميًا؛ حيث تتقاطع النصوص والإجراءات والمؤسسات مع الإنسان ومصالحه وأسئلته.

وفي الوقت نفسه، لم تكن التجربة المهنية وحدها كافية لصناعة هذا الدفتر. فبعض الأسئلة تأتي من الواقع، وبعضها يأتي من التأمل، وبعضها لا يعرف صاحبه من أين جاء.

لذلك جاءت «دفتري» مساحة تجمع بين التجربة والفكرة: الدولة والإنسان، الإدارة والمجتمع، الداخل والخارج، الواقع والحقيقة، وما يتركه كل ذلك في وعينا.

لا أكتب باعتبار ما أكتبه حقيقة نهائية، بل باعتباره موقفًا فكريًا قابلًا للسؤال والمراجعة والنقد.`;
        const saved = localStorage.getItem('daftari_about_v2') || defaultAbout;
        document.getElementById('aboutDisplayBody').innerText = saved;
        document.getElementById('aboutTextarea').value = saved;
      },

      toggleAboutEditor() {
        const p = document.getElementById('aboutEditPanel');
        p.style.display = p.style.display === 'none' ? 'block' : 'none';
      },

      saveAboutContent() {
        const val = document.getElementById('aboutTextarea').value.trim();
        if (!val) return;
        localStorage.setItem('daftari_about_v2', val);
        document.getElementById('aboutDisplayBody').innerText = val;
        this.toggleAboutEditor();
        appUI.toast('تم تحديث نص السيرة بنجاح');
      },

      async handleAboutImageUpload(event) {
        const file = event.target.files[0];
        if (!file) return;
        try {
            const compressed = await appUI.compressImage(file, 800, 0.8);
            document.getElementById('aboutPageImg').src = compressed;
            localStorage.setItem('daftari_about_img_v2', compressed);
            appUI.toast('تم تحديث صورة صفحة السيرة');
        } catch(e) { appUI.toast('فشل رفع الصورة.'); }
      },

      async handleProfileImageUpload(event) {
        const file = event.target.files[0];
        if (!file) return;
        try {
            const compressed = await appUI.compressImage(file, 600, 0.8);
            document.getElementById('mainHeroImg').src = compressed;
            localStorage.setItem('daftari_hero_img_v2', compressed);
            appUI.toast('تم تحديث صورة البروفايل بنجاح');
        } catch(e) { appUI.toast('فشل رفع الصورة.'); }
      },

      async handleBackdropUpload(event) {
        const file = event.target.files[0];
        if (!file) return;
        try {
            const compressed = await appUI.compressImage(file, 1600, 0.8);
            document.getElementById('siteBackdropLayer').style.backgroundImage = `url('${compressed}')`;
            localStorage.setItem('daftari_backdrop_img_v2', compressed);
            appUI.toast('تم تحديث خلفية المنصة بنجاح');
        } catch(e) { appUI.toast('فشل رفع الصورة.'); }
      }
    };

    const appUI = {
      toastTimer: null,
      currentFontScale: 100,

      toast(msg) {
        const el = document.getElementById('editorialToast');
        el.innerHTML = `<i class="fa-solid fa-circle-info" style="color:var(--aged-gold-bright)"></i> <span>${this.escapeHTML(msg)}</span>`;
        el.classList.add('show');
        clearTimeout(this.toastTimer);
        this.toastTimer = setTimeout(() => el.classList.remove('show'), 3500);
      },

      adjustBackdropDim(val) {
        document.documentElement.style.setProperty('--backdrop-dim-opacity', val);
        document.getElementById('dimmerPercentText').innerText = Math.round(val * 100) + '%';
        localStorage.setItem('daftari_dim_v2', val);
      },

      loadBackdropDim() {
        const saved = localStorage.getItem('daftari_dim_v2') || '0.82';
        document.documentElement.style.setProperty('--backdrop-dim-opacity', saved);
        const s = document.getElementById('backdropDimSlider');
        if (s) {
          s.value = saved;
          document.getElementById('dimmerPercentText').innerText = Math.round(saved * 100) + '%';
        }
      },

      changeReaderFontSize(delta) {
        this.currentFontScale = Math.min(140, Math.max(80, this.currentFontScale + (delta * 10)));
        document.documentElement.style.setProperty('--reader-font-size', (1.35 * (this.currentFontScale / 100)) + 'rem');
        document.getElementById('readerFontScaleText').innerText = this.currentFontScale + '%';
      },

      compressImage(file, maxWidth = 1200, quality = 0.75) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (e) => {
            const img = new Image();
            img.src = e.target.result;
            img.onload = () => {
              const canvas = document.createElement('canvas');
              let width = img.width, height = img.height;
              if (width > maxWidth) {
                height = Math.round((height * maxWidth) / width);
                width = maxWidth;
              }
              canvas.width = width; canvas.height = height;
              const ctx = canvas.getContext('2d');
              ctx.drawImage(img, 0, 0, width, height);
              resolve(canvas.toDataURL('image/jpeg', quality));
            };
            img.onerror = () => reject('Image Load Error');
          };
          reader.onerror = () => reject('File Read Error');
        });
      },

      escapeHTML(str) {
        if (!str) return '';
        return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
      },

      openModal(id) {
          document.getElementById(id).style.display = 'flex';
          document.body.style.overflow = 'hidden';
      },

      closeModal(id) {
          document.getElementById(id).style.display = 'none';
          document.body.style.overflow = '';
      },

      async trackSiteVisit() {
        if (sessionStorage.getItem('daftari_v2_session_visited')) return;
        sessionStorage.setItem('daftari_v2_session_visited', 'true');
        if (dbClient) {
          dbClient.rpc('increment_site_visit').catch(()=>{});
        }
      }
    };

    window.addEventListener('scroll', () => {
      const winScroll = document.documentElement.scrollTop || document.body.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrolled = height > 0 ? (winScroll / height) * 100 : 0;
      document.getElementById('editorialProgressBar').style.width = scrolled + '%';
    });

    window.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.shiftKey && (e.key === 'A' || e.key === 'a')) {
        if (appAuth.isAuthenticated()) appRouter.navigate('dashboard');
        else appUI.openModal('loginModal');
      }
      if (e.key === 'Escape') {
        appArticles.closeReader();
        appUI.closeModal('searchModal');
        appUI.closeModal('editorModal');
        appUI.closeModal('loginModal');
      }
    });

    window.addEventListener('DOMContentLoaded', async () => {
      appUI.loadBackdropDim();
      
      const bg = localStorage.getItem('daftari_backdrop_img_v2');
      if (bg) document.getElementById('siteBackdropLayer').style.backgroundImage = `url('${bg}')`;
      
      const avatar = localStorage.getItem('daftari_hero_img_v2');
      if (avatar) document.getElementById('mainHeroImg').src = avatar;

      const aboutImg = localStorage.getItem('daftari_about_img_v2');
      if (aboutImg) document.getElementById('aboutPageImg').src = aboutImg;

      await appAuth.init();
      await appArticles.fetchAll();
      appRouter.init();
      appUI.trackSiteVisit();
    });
  </script>
</body>
</html>