/* Al-Hadath Organizers — Design System (2026-09-23 refresh) */

:root {
  /* الألوان مأخوذة من الموقع الفعلي مباشرة (وليس من ملف الهوية فقط) — تحقّقنا
     منها عبر getComputedStyle على العناصر الحقيقية بالصفحة الرئيسية:
     #0A2A4A للعناوين، #06B6D4 لأزرار الدعوة الأساسية (CTA). */
  --aho-navy: #0A2A4A;
  --aho-navy-2: #0E3A5C;
  --aho-teal: #06B6D4;
  --aho-teal-2: #2DD4BF;
  --aho-grad: linear-gradient(120deg, var(--aho-teal), var(--aho-navy) 85%);
  --aho-bg: #F3F5F9;
  --aho-surface: #FFFFFF;
  --aho-border: #E7EAF0;
  --aho-text: #16233A;
  --aho-text-muted: #6B7686;
  --aho-text-faint: #9AA5B4;
  --aho-success: #0FA968;
  --aho-success-bg: #E5F7EE;
  --aho-danger: #E1493F;
  --aho-danger-bg: #FCEAE8;
  --aho-warning: #E19A1F;
  --aho-warning-bg: #FCF1DE;
  --aho-info: #3B7EE0;
  --aho-info-bg: #E9F0FC;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,35,58,.05);
  --shadow-md: 0 6px 18px rgba(16,35,58,.08);
  --shadow-lg: 0 20px 48px rgba(16,35,58,.16);
  --shadow-glow: 0 10px 26px rgba(6,182,212,.28);
  --ease: cubic-bezier(.4,0,.2,1);
}

.aho-page { font-family:'Tajawal',sans-serif; padding:1.75rem 1.5rem 3rem; background:var(--aho-bg); color:var(--aho-text); }
.aho-page * { box-sizing:border-box; }
.aho-page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.75rem; flex-wrap:wrap; gap:1rem; }
.aho-page-header h1 { margin:0 0 .3rem; font-size:1.55rem; font-weight:800; color:var(--aho-navy); letter-spacing:-.01em; }
.aho-sub { color:var(--aho-text-muted); font-size:.9rem; margin:0; line-height:1.6; }
.aho-notice { background:var(--aho-warning-bg); border:1px solid #f5dfae; color:#8a6412; border-radius:var(--r-md); padding:.9rem 1.1rem; margin-bottom:1.4rem; font-size:.9rem; line-height:1.7; }
.aho-notice a { color:var(--aho-navy); font-weight:700; text-decoration:underline; }

.aho-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.aho-stat-sm { background:var(--aho-surface); border:1px solid var(--aho-border); border-radius:var(--r-lg); padding:1.15rem 1rem; text-align:center; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.aho-stat-sm:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.aho-stat-sm-icon { font-size:1.3rem; margin-bottom:.5rem; }
.aho-stat-sm-num { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; }
.aho-stat-sm-lbl { font-size:.8rem; color:var(--aho-text-muted); margin-top:.15rem; }

.aho-toolbar { display:flex; gap:.75rem; align-items:center; margin-bottom:1.1rem; flex-wrap:wrap; }
.aho-search-wrap { position:relative; flex:1; min-width:220px; }
.aho-search-wrap i { position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--aho-text-faint); font-size:.85rem; }
.aho-search { width:100%; padding:.7rem 2.5rem .7rem 1.1rem; border:1.5px solid var(--aho-border); border-radius:var(--r-md); font-family:inherit; font-size:.88rem; background:var(--aho-surface); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.aho-search:focus, .aho-fsel:focus { outline:none; border-color:var(--aho-teal); box-shadow:0 0 0 3px rgba(0,166,180,.14); }
.aho-fsel { padding:.65rem 1rem; border:1.5px solid var(--aho-border); border-radius:var(--r-md); font-family:inherit; font-size:.85rem; background:var(--aho-surface); color:var(--aho-text); transition:border-color .15s var(--ease); }

.aho-table-wrap { background:var(--aho-surface); border:1px solid var(--aho-border); border-radius:var(--r-lg); overflow:auto; box-shadow:var(--shadow-sm); }
.aho-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.aho-table th { text-align:right; padding:.9rem 1.1rem; background:#FAFBFD; color:var(--aho-text-muted); font-weight:700; font-size:.74rem; letter-spacing:.02em; text-transform:uppercase; border-bottom:1px solid var(--aho-border); }
.aho-table td { padding:.85rem 1.1rem; border-bottom:1px solid #F0F2F6; vertical-align:middle; }
.aho-table tbody tr { transition:background .12s var(--ease); }
.aho-table tbody tr:hover { background:#FAFBFE; }
.aho-table tbody tr:last-child td { border-bottom:none; }
.aho-loading, .aho-empty { text-align:center; padding:3rem 1.5rem; color:var(--aho-text-faint); font-size:.88rem; }
.aho-empty i { font-size:1.6rem; opacity:.5; display:block; margin-bottom:.6rem; }

.aho-btn { display:inline-flex; align-items:center; gap:.4rem; border:1.5px solid var(--aho-border); background:var(--aho-surface); color:#374151; border-radius:var(--r-sm); padding:.6rem 1.05rem; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; text-decoration:none; transition:transform .12s var(--ease), box-shadow .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.aho-btn:hover { background:#FAFBFD; border-color:#d8dce4; transform:translateY(-1px); }
.aho-btn:active { transform:translateY(0); }
.aho-btn-sm { padding:.42rem .8rem; font-size:.78rem; }
.aho-btn-primary { background:var(--aho-grad); color:#fff; border:none; border-radius:var(--r-pill); padding:.65rem 1.4rem; box-shadow:var(--shadow-glow); }
.aho-btn-primary:hover { opacity:.94; transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,166,180,.34); }
.aho-btn-danger { background:var(--aho-danger-bg); color:#a3271e; border:1.5px solid #f6cfcb; }
.aho-btn-danger:hover { background:#fbdddb; border-color:#f0b8b2; }

.aho-badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:20px; padding:.3rem .85rem; font-size:.76rem; font-weight:700; }
.aho-badge-conf { background:var(--aho-navy); color:#fff; border-radius:var(--r-sm); padding:.35rem .9rem; font-size:.82rem; font-weight:700; }

.aho-modal { display:none; position:fixed; inset:0; background:rgba(10,26,42,.55); backdrop-filter:blur(2px); z-index:9999; align-items:center; justify-content:center; animation:aho-fade .15s var(--ease); }
@keyframes aho-fade { from{ opacity:0; } to{ opacity:1; } }
.aho-modal-box { background:var(--aho-surface); border-radius:var(--r-xl); width:92%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:aho-pop .18s var(--ease); }
@keyframes aho-pop { from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.aho-modal-head { display:flex; justify-content:space-between; align-items:center; padding:1.3rem 1.6rem; border-bottom:1px solid var(--aho-border); }
.aho-modal-head h2 { margin:0; font-size:1.08rem; color:var(--aho-navy); font-weight:800; }
.aho-modal-close { cursor:pointer; font-size:1.5rem; color:var(--aho-text-faint); line-height:1; transition:color .12s; }
.aho-modal-close:hover { color:var(--aho-text); }
.aho-modal-body { padding:1.6rem; overflow-y:auto; flex:1; }
.aho-modal-foot { display:flex; gap:.5rem; padding:1.1rem 1.6rem; border-top:1px solid var(--aho-border); flex-wrap:wrap; }
.aho-field input, .aho-field select { width:100%; padding:.6rem .85rem; border:1.5px solid var(--aho-border); border-radius:var(--r-sm); font-family:inherit; font-size:.85rem; transition:border-color .15s var(--ease); }
.aho-field input:focus, .aho-field select:focus { outline:none; border-color:var(--aho-teal); box-shadow:0 0 0 3px rgba(0,166,180,.14); }

.aho-ai-name { font-size:1.3rem; font-weight:800; color:var(--aho-navy); }
.aho-ai-meta { display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.5rem; font-size:.85rem; color:var(--aho-text-muted); }
.aho-ai-meta span { display:flex; align-items:center; gap:.35rem; }

/* محرر الشهادة */
.aho-editor-page { padding:0; }
.aho-editor-header { display:flex; justify-content:space-between; align-items:center; background:var(--aho-surface); padding:1rem 1.5rem; border-bottom:1px solid var(--aho-border); flex-wrap:wrap; gap:1rem; }
.aho-editor-header-right, .aho-editor-header-left { display:flex; align-items:center; gap:.75rem; }
.aho-editor-header h1 { font-size:1.1rem; margin:0; color:var(--aho-navy); font-weight:800; }
.aho-empty-state { text-align:center; padding:5rem 2rem; color:var(--aho-text-faint); }
.aho-empty-icon { font-size:3rem; margin-bottom:.5rem; }

.aho-editor-layout { display:flex; gap:0; min-height:80vh; background:var(--aho-bg); }
.aho-editor-sidebar { width:300px; background:var(--aho-surface); border-left:1px solid var(--aho-border); padding:1.25rem; overflow-y:auto; }
.aho-editor-section { margin-bottom:1.5rem; }
.aho-editor-section h3 { font-size:.82rem; color:var(--aho-navy); margin:0 0 .75rem; display:flex; align-items:center; gap:.4rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.aho-editor-tools { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.aho-tool-btn { background:#FAFBFD; border:1.5px solid var(--aho-border); border-radius:var(--r-sm); padding:.65rem .4rem; font-family:inherit; font-size:.75rem; cursor:pointer; text-align:center; transition:all .12s var(--ease); }
.aho-tool-btn:hover { background:#EFFAFB; border-color:var(--aho-teal); color:var(--aho-teal); }
.aho-prop-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; font-size:.8rem; }
.aho-prop-row label { width:70px; color:var(--aho-text-muted); flex-shrink:0; }
.aho-prop-row input, .aho-prop-row select { flex:1; }

.aho-editor-canvas-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; background:var(--aho-bg); overflow:auto; }
.aho-canvas-container { box-shadow:var(--shadow-lg); border-radius:4px; }
.aho-canvas-help { margin-top:1rem; font-size:.78rem; color:var(--aho-text-faint); }

.aho-layer-item { padding:.5rem .6rem; border-radius:8px; font-size:.78rem; cursor:pointer; color:#374151; transition:background .12s; }
.aho-layer-item:hover, .aho-layer-item.active { background:#EFFAFB; color:var(--aho-teal); }

/* ══════════════════════════════════════════
   منصة HR الأمامية — شاشة الدخول والقشرة الملاحية
   ══════════════════════════════════════════ */
.aho-hr-login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; position:relative; overflow:hidden; background:var(--aho-navy); }
.aho-hr-blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; }
.aho-hr-blob-1 { width:420px; height:420px; background:var(--aho-teal); top:-140px; right:-120px; }
.aho-hr-blob-2 { width:360px; height:360px; background:#1a4a7a; bottom:-160px; left:-100px; }
.aho-hr-login-card { position:relative; z-index:1; width:100%; max-width:420px; background:var(--aho-surface); border-radius:var(--r-xl); padding:2.75rem 2.25rem; box-shadow:var(--shadow-lg); animation:aho-pop .35s var(--ease); }
.aho-hr-login-logo-img { display:block; max-width:180px; height:auto; margin:0 auto 1.5rem; }
.aho-hr-login-card h2 { color:var(--aho-navy); text-align:center; margin:0 0 .3rem; font-size:1.35rem; font-weight:800; }
.aho-hr-login-card .aho-hr-sub { color:var(--aho-text-muted); text-align:center; font-size:.85rem; margin-bottom:1.75rem; }
.aho-hr-input-wrap { position:relative; margin-bottom:1rem; }
.aho-hr-input-wrap i { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--aho-text-faint); font-size:.9rem; }
.aho-hr-input-wrap input { width:100%; padding:13px 44px 13px 16px; border:1.5px solid var(--aho-border); border-radius:var(--r-md); font-size:.95rem; font-family:inherit; box-sizing:border-box; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); background:#FAFBFD; }
.aho-hr-input-wrap input:focus { outline:none; border-color:var(--aho-teal); box-shadow:0 0 0 3px rgba(0,166,180,.14); background:#fff; }
.aho-hr-submit { width:100%; background:var(--aho-grad); color:#fff; border:none; padding:15px; border-radius:var(--r-pill); font-size:1rem; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:var(--shadow-glow); transition:transform .12s var(--ease), box-shadow .12s var(--ease); }
.aho-hr-submit:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,166,180,.34); }
.aho-hr-error { background:var(--aho-danger-bg); color:#a3271e; border-radius:var(--r-sm); padding:.85rem 1rem; margin-bottom:1.1rem; font-size:.86rem; display:flex; align-items:center; gap:.5rem; }

.aho-hr-shell { display:flex; min-height:100vh; background:var(--aho-bg); }
.aho-hr-sidebar { width:236px; background:linear-gradient(180deg, var(--aho-navy), #071b30); color:#fff; flex-shrink:0; padding:1.5rem 0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.aho-hr-brand { padding:0 1.4rem 1.4rem; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:1.1rem; display:flex; align-items:center; gap:.7rem; }
.aho-hr-brand-icon-img { width:34px; height:34px; border-radius:8px; flex-shrink:0; object-fit:cover; }
.aho-hr-brand-text { font-weight:800; font-size:.95rem; line-height:1.3; }
.aho-hr-nav { flex:1; padding:0 .7rem; }
.aho-hr-nav a { display:flex; align-items:center; gap:.65rem; padding:.7rem 1.1rem; color:rgba(255,255,255,.72); text-decoration:none; font-size:.87rem; font-weight:600; border-radius:var(--r-pill); margin-bottom:.25rem; transition:background .15s var(--ease), color .15s var(--ease); }
.aho-hr-nav a i { width:16px; text-align:center; font-size:.85rem; }
.aho-hr-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.aho-hr-nav a.active { background:var(--aho-teal); color:#fff; box-shadow:var(--shadow-glow); }
.aho-hr-user { padding:1rem 1.4rem; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:.65rem; }
.aho-hr-avatar { width:34px; height:34px; border-radius:50%; background:var(--aho-grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0; }
.aho-hr-user-name { font-size:.82rem; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aho-hr-logout-form { padding:0 1.4rem 1.4rem; }
.aho-hr-logout-btn { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.85); padding:.6rem; border-radius:var(--r-pill); font-family:inherit; cursor:pointer; font-size:.8rem; font-weight:700; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.aho-hr-logout-btn:hover { background:rgba(255,255,255,.14); }
.aho-hr-content { flex:1; overflow-x:auto; min-width:0; }

/* ══════════════════════════════════════════
   ملف المنظم داخل النافذة المنبثقة
   ══════════════════════════════════════════ */
.aho-profile-head { margin-bottom:1rem; display:flex; gap:1.25rem; align-items:flex-start; }
.aho-info-row { display:flex; gap:.75rem; padding:.55rem 0; border-bottom:1px dashed #e5e7eb; font-size:.86rem; }
.aho-info-lbl { flex:0 0 170px; color:var(--aho-text-muted); }
.aho-info-val { flex:1; font-weight:600; white-space:pre-line; line-height:1.6; min-width:0; overflow-wrap:anywhere; }
.aho-mobile-only { display:none; }

/* ══════════════════════════════════════════
   الهاتف والأجهزة اللوحية
   ══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* القائمة الجانبية ← شريط علوي ثابت مع تبويبات أفقية قابلة للتمرير */
  .aho-hr-shell { flex-direction:column; }
  .aho-hr-sidebar { width:auto; height:auto; position:sticky; top:0; z-index:1000; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.7rem .9rem .6rem; box-shadow:0 6px 18px rgba(7,27,48,.25); }
  .aho-hr-brand { flex:1; min-width:0; padding:0; margin:0; border:none; }
  .aho-hr-brand-text br { display:none; }
  .aho-hr-brand-text { font-size:.9rem; white-space:nowrap; }
  .aho-hr-user { padding:0; border:none; }
  .aho-hr-user-name { display:none; }
  .aho-hr-logout-form { padding:0; }
  .aho-hr-logout-btn { width:38px; height:38px; padding:0; border-radius:50%; }
  .aho-hr-logout-txt { display:none; }
  .aho-hr-nav { order:10; flex:0 0 100%; display:flex; gap:.4rem; padding:.1rem 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .aho-hr-nav::-webkit-scrollbar { display:none; }
  .aho-hr-nav a { flex-shrink:0; white-space:nowrap; margin:0; padding:.55rem 1rem; font-size:.84rem; }
  .aho-hr-content { overflow-x:visible; }

  /* محرر الشهادة: الأدوات فوق مساحة التصميم */
  .aho-editor-layout { flex-direction:column; min-height:0; }
  .aho-editor-sidebar { width:auto; border-left:none; border-bottom:1px solid var(--aho-border); }
  .aho-editor-tools { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  .aho-editor-canvas-wrap { padding:1rem .5rem; justify-content:flex-start; align-items:flex-start; }
  .aho-editor-header { padding:.85rem 1rem; }
  .aho-editor-header-center, .aho-editor-header-center select { width:100%; }
}

@media (max-width: 760px) {
  .aho-page { padding:1.1rem .8rem 2.5rem; }
  .aho-page-header { margin-bottom:1.1rem; }
  .aho-page-header h1 { font-size:1.3rem; }
  .aho-page-header .aho-btn { width:100%; justify-content:center; }

  .aho-stats-row { grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:1.1rem; }
  .aho-stat-sm { padding:.8rem .4rem; border-radius:var(--r-md); }
  .aho-stat-sm-icon { font-size:1rem; margin-bottom:.25rem; }
  .aho-stat-sm-num { font-size:1.4rem; }
  .aho-stat-sm-lbl { font-size:.72rem; }

  .aho-toolbar { gap:.5rem; }
  .aho-search-wrap { flex:1 1 100%; min-width:0; }
  .aho-toolbar .aho-fsel { flex:1; }

  /* منع تكبير iOS التلقائي عند التركيز على الحقول (يحدث تحت 16px) */
  .aho-page input, .aho-page select, .aho-page textarea, .aho-hr-input-wrap input { font-size:16px !important; }

  /* الجداول ← بطاقات */
  .aho-table-cards, .aho-table-cards tbody { display:block; }
  .aho-table-cards thead { display:none; }
  .aho-table-wrap:has(.aho-table-cards) { background:none; border:none; box-shadow:none; overflow:visible; }
  .aho-table-cards tr { display:block; background:var(--aho-surface); border:1px solid var(--aho-border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:.85rem 1rem; margin-bottom:.75rem; }
  .aho-table-cards tbody tr:hover { background:var(--aho-surface); }
  .aho-table-cards td { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.45rem 0; border-bottom:1px dashed #EEF1F5; text-align:left; }
  .aho-table-cards td::before { content:attr(data-label); color:var(--aho-text-muted); font-size:.76rem; font-weight:700; text-align:right; flex-shrink:0; }
  .aho-table-cards td:not([data-label])::before { display:none; }
  .aho-table-cards td > div { text-align:left; }
  .aho-table-cards td.aho-td-id { display:none; }
  .aho-table-cards td.aho-td-main { justify-content:flex-start; padding-top:0; padding-bottom:.65rem; font-size:1rem; }
  .aho-table-cards td.aho-td-main > div { text-align:right; }
  .aho-table-cards td.aho-td-actions { border-bottom:none; padding:.65rem 0 0; }
  .aho-table-cards td.aho-td-actions .aho-btn { width:100%; justify-content:center; padding:.65rem; }
  .aho-table-cards td.aho-loading, .aho-table-cards td.aho-empty { display:block; background:var(--aho-surface); border:none; }
  .aho-table-cards tr:has(td.aho-loading), .aho-table-cards tr:has(td.aho-empty) { padding:0; }
  .aho-mobile-only { display:inline; }

  /* النافذة المنبثقة ← صفحة كاملة من الأسفل */
  .aho-modal { align-items:flex-end; }
  .aho-modal-box { width:100% !important; max-width:100% !important; max-height:94vh; max-height:94dvh; border-radius:var(--r-xl) var(--r-xl) 0 0; }
  .aho-modal-head { padding:1rem 1.1rem; }
  .aho-modal-close { font-size:1.9rem; padding:0 .25rem; }
  .aho-modal-body { padding:1.1rem; }
  .aho-modal-foot { padding:.85rem 1.1rem calc(.85rem + env(safe-area-inset-bottom)); }
  .aho-modal-foot > * { flex:1 1 100% !important; }
  .aho-modal-foot .aho-btn { justify-content:center; }
  .aho-profile-head img { width:68px !important; height:68px !important; }
  .aho-ai-name { font-size:1.12rem; }
  .aho-ai-meta { gap:.4rem .9rem; font-size:.8rem; }
  .aho-ai-meta span { overflow-wrap:anywhere; }
  .aho-info-row { flex-direction:column; gap:.15rem; }
  .aho-info-lbl { flex:none; font-size:.76rem; }
  .aho-modal-body input, .aho-modal-body select, .aho-modal-body textarea { min-width:0 !important; }

  .aho-hr-login-card { padding:2.1rem 1.4rem; }
}
.aho-cell-ltr { text-align:right; }
@media (max-width: 760px) {
  .aho-table-cards td > div { min-width:0; }
  .aho-table-cards td:not(.aho-td-main) > div, .aho-table-cards td:not(.aho-td-main) > div .aho-cell-ltr { text-align:left; }
}