/* ===== الألوان والخط ===== */
:root {
  --ink: #1c2a33;
  --teal: #0e5e5b;
  --teal-dark: #0a4744;
  --teal-soft: #e4efed;
  --paper: #f4f6f5;
  --line: #d8e1df;
  --ochre: #a8741a;
  --ochre-soft: #f7eedc;

  --bs-body-font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-primary: var(--teal);
  --bs-primary-rgb: 14, 94, 91;
  --bs-link-color: var(--teal);
  --bs-link-color-rgb: 14, 94, 91;
  --bs-link-hover-color: var(--teal-dark);
  --bs-border-color: var(--line);
}
body { font-size: .95rem; line-height: 1.7; }

.btn-primary { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal-dark); --bs-btn-hover-border-color: var(--teal-dark); --bs-btn-active-bg: var(--teal-dark); --bs-btn-disabled-bg: var(--teal); --bs-btn-disabled-border-color: var(--teal); }
.btn-outline-primary { --bs-btn-color: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal); --bs-btn-active-bg: var(--teal-dark); }
.progress-bar { background-color: var(--teal); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(14, 94, 91, .18); }
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.form-label { font-weight: 500; margin-bottom: .3rem; }
.req { color: var(--ochre); font-weight: 700; }

/* ===== الشريط العلوي ===== */
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }

/* ===== القائمة الجانبية ===== */
.side-nav { display: flex; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.side-nav a:hover { background: #fff; }
.side-nav a.active { background: #fff; color: var(--teal); font-weight: 600; box-shadow: inset -3px 0 0 var(--teal); }
.side-nav a i { color: var(--teal); width: 1.1rem; text-align: center; }
.side-sep { font-size: .75rem; color: #6b7b82; padding: .9rem .75rem .3rem; }
.dot { margin-inline-start: auto; min-width: 22px; height: 22px; border-radius: 11px; font-size: .72rem; display: grid; place-items: center; padding: 0 6px; }
.dot-filled { background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.dot-needed { border: 2px solid var(--ochre); width: 12px; min-width: 12px; height: 12px; padding: 0; }
.dot-empty { border: 1px dashed #b7c3c1; width: 12px; min-width: 12px; height: 12px; padding: 0; }
@media (min-width: 992px) { .offcanvas-lg .offcanvas-body { position: sticky; top: 1rem; } }

/* ===== الألواح ===== */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; }
.panel-title { font-size: 1rem; font-weight: 600; margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.panel-title i { color: var(--teal); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-head h1 i { color: var(--teal); }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(to top, var(--paper) 70%, transparent); padding: 1rem 0; display: flex; gap: .5rem; }
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table thead th { font-weight: 600; font-size: .82rem; color: #56666d; background: #fafbfb; }

/* ===== رأس الملف في لوحة المتابعة ===== */
.file-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.head-photo { width: 72px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.head-photo-empty { display: grid; place-items: center; font-size: 2rem; color: #9aa9ad; }
.progress-num { font-size: 1.6rem; font-weight: 700; color: var(--teal); line-height: 1; }
.missing-list { margin: 0; padding-inline-start: 1.2rem; columns: 2; column-gap: 2rem; font-size: .88rem; }
.missing-list a { color: var(--ochre); }
@media (max-width: 576px) { .missing-list { columns: 1; } }

.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.section-tile { display: flex; flex-direction: column; gap: .15rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.section-tile:hover { border-color: var(--teal); }
.section-tile i { font-size: 1.3rem; color: var(--teal); margin-bottom: .3rem; }
.section-tile .t { font-weight: 600; font-size: .92rem; }
.section-tile .c { font-size: .8rem; color: #6b7b82; }
.section-tile.is-needed { border-color: var(--ochre); background: var(--ochre-soft); }
.section-tile.is-needed .c { color: var(--ochre); }

.status-complete.text-bg-info { background: var(--teal-soft) !important; color: var(--teal) !important; }
.badge { font-weight: 500; padding: .45em .8em; }

.empty-state { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px dashed var(--line); border-radius: 10px; color: #56666d; }
.empty-state > i { font-size: 2.2rem; color: #b7c3c1; display: block; margin-bottom: .6rem; }

/* ===== المهارات ===== */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .2rem 1rem; max-height: 320px; overflow-y: auto; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 6px; }
.photo-preview { width: 84px; height: 104px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* ===== صفحات الدخول ===== */
.auth-wrap { min-height: calc(100vh - 140px); display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 10px; padding: 2rem; }
.otp-input { font-size: 1.8rem; letter-spacing: .6em; text-align: center; font-weight: 600; }

/* ===== السيرة الذاتية للطباعة ===== */
.cv-body { background: #e9edec; }
.cv-toolbar { max-width: 210mm; margin: 1rem auto 0; display: flex; justify-content: space-between; align-items: center; }
.cv-toolbar button { background: var(--teal); color: #fff; border: 0; border-radius: 6px; padding: .5rem 1rem; font-family: inherit; cursor: pointer; }
.cv-sheet { max-width: 210mm; margin: 1rem auto 2rem; background: #fff; padding: 16mm 15mm; box-shadow: 0 1px 3px rgba(28, 42, 51, .15); }
.cv-head { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 3px solid var(--teal); margin-bottom: 1.2rem; }
.cv-head h1 { font-size: 1.7rem; font-weight: 700; margin: 0; }
.cv-en { color: #56666d; font-size: .95rem; text-align: right; }
.cv-role { color: var(--teal); font-weight: 600; margin-top: .3rem; }
.cv-contact { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .85rem; }
.cv-contact i { color: var(--teal); }
.cv-photo { width: 32mm; height: 40mm; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.cv-sec { margin-bottom: 1.1rem; break-inside: avoid-page; }
.cv-sec h2 { font-size: 1rem; font-weight: 700; color: var(--teal); margin: 0 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--line); }
.cv-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem 1rem; margin: 0; font-size: .87rem; }
.cv-kv dt { font-weight: 500; color: #6b7b82; font-size: .78rem; }
.cv-kv dd { margin: 0; }
.cv-item { padding: .35rem 0; font-size: .87rem; break-inside: avoid; }
.cv-item + .cv-item { border-top: 1px dotted var(--line); }
.cv-item-head { display: flex; justify-content: space-between; gap: 1rem; }
.cv-date { color: #56666d; white-space: nowrap; font-size: .8rem; }
.cv-item-body span { margin-inline-end: 1rem; color: #3a4a52; }
.cv-item-body em { font-style: normal; color: #6b7b82; }
.cv-long { margin-top: .2rem; color: #3a4a52; }
.cv-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.cv-tags li { background: var(--teal-soft); color: var(--teal-dark); border-radius: 4px; padding: .15rem .55rem; font-size: .8rem; }
.cv-foot { margin-top: 1.5rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .75rem; color: #6b7b82; }
@media (max-width: 640px) { .cv-kv { grid-template-columns: 1fr 1fr; } .cv-head { flex-direction: column-reverse; } }

@media print {
  @page { size: A4; margin: 12mm; }
  .no-print { display: none !important; }
  .cv-body { background: #fff; }
  .cv-sheet { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== لوحة الإدارة ===== */
.status-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.status-tabs a { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); text-decoration: none; font-size: .87rem; }
.status-tabs a span { color: #6b7b82; margin-inline-start: .25rem; }
.status-tabs a.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.status-tabs a.active span { color: #d4e7e4; }
.status-tabs a.has-pending:not(.active) { border-color: var(--ochre); color: var(--ochre); }
.list-photo { width: 36px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex-shrink: 0; }
.list-photo-empty { display: grid; place-items: center; color: #9aa9ad; background: #fafbfb; }
.row-suspended td { opacity: .6; }
.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-list li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; }
.attach-list li + li { border-top: 1px solid var(--line); }
.attach-list li > i { font-size: 1.4rem; color: var(--teal); }
.cv-frame { width: 100%; height: 900px; border: 0; display: block; background: #e9edec; }
@media (min-width: 992px) { .review-box { position: sticky; top: 1rem; } }