/* ══════════════════════════════════════════════════════
   Landing Page — منظومة بيانات التعليم
   moe.gov.ly official design language
   Font: IBM Plex Sans Arabic | Navy #003366 + Gold #b87e02
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    --lp-navy: #003366;
    --lp-navy-light: #004080;
    --lp-navy-dark: #001a33;
    --lp-gold: #b87e02;
    --lp-gold-light: #d4a03c;
    --lp-gold-hover: #9f6d02;
    --lp-cream: #faf3e5;
    --lp-cream-dark: #f5f0e4;
    --lp-border: #e8e0d0;
    --lp-border-gold: #d2bd91;
    --lp-text: #1a1a2e;
    --lp-text-muted: #666;
    --lp-text-light: #999;
    --lp-font: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
    --lp-radius: 10px;
    --lp-radius-pill: 500px;
}

.lp { min-height:100vh; background:#fff; font-family:var(--lp-font); color:var(--lp-text); line-height:1.75; direction:rtl; }
.lp *, .lp *::before, .lp *::after { font-family:var(--lp-font); box-sizing:border-box; }
.lp-container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Top Bar ── */
.lp-topbar { background:var(--lp-navy-dark); padding:7px 0; }
.lp-topbar__inner { display:flex; align-items:center; justify-content:space-between; }
.lp-topbar__text { font-size:.7rem; color:rgba(255,255,255,.55); font-weight:400; }
.lp-topbar__link { font-size:.7rem; color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s; display:inline-flex; align-items:center; gap:4px; }
.lp-topbar__link:hover { color:var(--lp-gold-light); }

/* ── Nav ── */
.lp-nav { background:#fff; position:sticky; top:0; z-index:200; border-bottom:1px solid var(--lp-border); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.lp-nav__inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.lp-nav__brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--lp-navy); }
.lp-nav__logo { height:50px; width:auto; }
.lp-nav__text { line-height:1.3; }
.lp-nav__ministry { font-size:.7rem; color:var(--lp-text-muted); font-weight:400; }
.lp-nav__system { font-size:1rem; font-weight:700; color:var(--lp-navy); }

/* ── Hero ── */
.lp-hero { position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; }
.lp-hero__bg { position:absolute; inset:0; background-image:url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1920&q=80&auto=format');
  background-size:cover; background-position:center 35%; }
.lp-hero__overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,26,51,.92) 0%, rgba(0,51,102,.88) 50%, rgba(0,64,128,.85) 100%); }
.lp-hero__accent { position:absolute; bottom:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--lp-gold), var(--lp-gold-light), var(--lp-gold)); }
.lp-hero__body { position:relative; z-index:1; color:#fff; padding:64px 0 60px; width:100%; }
.lp-hero__content { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.lp-hero__right { flex:1; min-width:0; }
.lp-hero__left { flex:0 0 auto; display:flex; flex-direction:column; gap:14px; }
.lp-hero__badge { display:inline-flex; align-items:center; gap:7px; padding:6px 20px; border-radius:var(--lp-radius-pill); background:rgba(184,126,2,.15); border:1px solid rgba(184,126,2,.35); font-size:.72rem; font-weight:500; color:var(--lp-gold-light); margin-bottom:18px; letter-spacing:.02em; width:fit-content; backdrop-filter:blur(4px); }
.lp-hero__badge svg { color:var(--lp-gold-light); }
.lp-hero__title { font-size:2.6rem; font-weight:700; margin:0 0 16px; letter-spacing:-.01em; color:#fff; line-height:1.3; }
.lp-hero__desc { font-size:.92rem; font-weight:400; max-width:580px; margin:0 0 28px; color:rgba(255,255,255,.72); line-height:2; }
.lp-hero__actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lp-hero__cta { display:inline-flex; align-items:center; gap:7px; padding:11px 32px; border-radius:var(--lp-radius-pill); background:var(--lp-gold); color:#fff; font-size:.85rem; font-weight:600; text-decoration:none; transition:all .25s; border:none; }
.lp-hero__cta:hover { background:var(--lp-gold-hover); color:#fff; box-shadow:0 4px 20px rgba(184,126,2,.35); transform:translateY(-1px); }

/* Hero quick stats (side) */
.lp-hero-mini { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--lp-radius); padding:20px 24px; backdrop-filter:blur(8px); min-width:200px; text-align:center; }
.lp-hero-mini__num { font-size:1.8rem; font-weight:700; color:#fff; line-height:1.2; }
.lp-hero-mini__lbl { font-size:.72rem; font-weight:500; color:rgba(255,255,255,.6); margin-top:4px; }
.lp-hero-mini__divider { height:1px; background:rgba(255,255,255,.1); margin:12px 0; }

/* ── Loader ── */
.lp-loader { display:flex; flex-direction:column; align-items:center; gap:14px; padding:80px 20px; color:#6b7280; font-size:.88rem; }
.lp-loader__ring { width:34px; height:34px; border:3px solid #e5e7eb; border-top-color:var(--lp-navy); border-radius:50%; animation:lp-spin .65s linear infinite; }
@keyframes lp-spin { to { transform:rotate(360deg); } }

/* ── Stats Counter Bar ── */
.lp-stats { background:var(--lp-cream); border-bottom:1px solid var(--lp-border); padding:40px 0; }
.lp-stats__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:0; text-align:center; }
.lp-stat { padding:14px 14px; position:relative; transition:background .2s; }
.lp-stat:hover { background:rgba(184,126,2,.04); }
.lp-stat::after { content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--lp-border-gold); }
.lp-stat:last-child::after { display:none; }
.lp-stat__icon { width:40px; height:40px; margin:0 auto 10px; border-radius:50%; background:rgba(184,126,2,.08); display:flex; align-items:center; justify-content:center; transition:all .25s; }
.lp-stat:hover .lp-stat__icon { background:rgba(184,126,2,.15); transform:scale(1.08); }
.lp-stat__icon svg { color:var(--lp-gold); }
.lp-stat__num { font-size:1.8rem; font-weight:700; color:var(--lp-navy); line-height:1.2; }
.lp-stat__lbl { font-size:.76rem; font-weight:500; color:var(--lp-text-muted); margin-top:4px; }
.lp-stat__sub { font-size:.66rem; color:var(--lp-text-light); margin-top:3px; }

/* ── Section Heads ── */
.lp-sec-head { margin-bottom:24px; display:flex; align-items:flex-start; gap:12px; }
.lp-sec-head__bar { width:4px; height:30px; background:var(--lp-gold); border-radius:2px; flex-shrink:0; margin-top:2px; }
.lp-sec-head__title { font-size:1.1rem; font-weight:700; color:var(--lp-navy); }
.lp-sec-head__desc { font-size:.78rem; color:#888; margin-top:3px; }

/* ── Detail Sections (Students / Employees / Institutions) ── */
.lp-detail-section { padding:44px 0; background:#fff; }
.lp-detail-section--alt { background:var(--lp-cream); }
.lp-detail-grid { display:grid; gap:18px; }
.lp-detail-grid--3 { grid-template-columns:repeat(3,1fr); }
.lp-detail-grid--4 { grid-template-columns:repeat(4,1fr); }
.lp-detail-grid--6 { grid-template-columns:repeat(6,1fr); }

.lp-detail-card { background:#fff; border:1px solid var(--lp-border); border-radius:var(--lp-radius); padding:22px 20px; transition:all .25s; }
.lp-detail-section--alt .lp-detail-card { background:#fff; }
.lp-detail-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.06); transform:translateY(-2px); }
.lp-detail-card__head { display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--lp-navy); margin-bottom:12px; }
.lp-detail-card__head svg { color:var(--lp-gold); flex-shrink:0; }
.lp-detail-card__num { font-size:1.8rem; font-weight:700; color:var(--lp-navy); line-height:1.2; margin-bottom:8px; }
.lp-detail-card__row { display:flex; align-items:center; justify-content:space-between; font-size:.76rem; color:var(--lp-text-muted); padding:4px 0; border-top:1px solid var(--lp-border); }
.lp-detail-card__row strong { color:var(--lp-text); font-weight:600; margin-right:4px; }
.lp-detail-card__sub-rows { display:flex; flex-direction:column; gap:0; }
.lp-detail-card__sub-rows .lp-detail-card__row { border-top:1px solid var(--lp-border); }
.lp-detail-card__sub-detail { font-size:.7rem; color:var(--lp-text-light); }

/* ── Institution Type Cards ── */
.lp-inst-card { background:#fff; border:1px solid var(--lp-border); border-radius:var(--lp-radius); padding:20px 12px; text-align:center; transition:all .25s; }
.lp-inst-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.06); transform:translateY(-2px); }
.lp-inst-card__icon { width:42px; height:42px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lp-inst-card__icon--pink { background:rgba(219,39,119,.08); color:#db2777; }
.lp-inst-card__icon--blue { background:rgba(59,130,246,.08); color:#3b82f6; }
.lp-inst-card__icon--green { background:rgba(22,163,74,.08); color:#16a34a; }
.lp-inst-card__icon--purple { background:rgba(124,58,237,.08); color:#7c3aed; }
.lp-inst-card__icon--teal { background:rgba(20,184,166,.08); color:#14b8a6; }
.lp-inst-card__icon--orange { background:rgba(234,88,12,.08); color:#ea580c; }
.lp-inst-card__num { font-size:1.5rem; font-weight:700; color:var(--lp-text); line-height:1.2; }
.lp-inst-card__lbl { font-size:.72rem; font-weight:500; color:var(--lp-text-muted); margin-top:4px; }

/* ── Infrastructure ── */
.lp-infra-section { padding:44px 0; background:var(--lp-cream); }
.lp-infra__row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lp-infra-card { background:#fff; border-radius:var(--lp-radius); padding:28px 18px; text-align:center; border:1px solid var(--lp-border); position:relative; overflow:hidden; transition:all .25s; }
.lp-infra-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.07); transform:translateY(-2px); }
.lp-infra-card__stripe { position:absolute; top:0; left:0; right:0; height:3px; }
.lp-infra-card--accent .lp-infra-card__stripe { background:var(--lp-navy); }
.lp-infra-card--green .lp-infra-card__stripe { background:#16a34a; }
.lp-infra-card--amber .lp-infra-card__stripe { background:#d97706; }
.lp-infra-card--red .lp-infra-card__stripe { background:#dc2626; }
.lp-infra-card__icon { width:44px; height:44px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lp-infra-card--accent .lp-infra-card__icon { background:rgba(0,51,102,.08); color:var(--lp-navy); }
.lp-infra-card--green .lp-infra-card__icon { background:rgba(22,163,74,.08); color:#16a34a; }
.lp-infra-card--amber .lp-infra-card__icon { background:rgba(217,119,6,.08); color:#d97706; }
.lp-infra-card--red .lp-infra-card__icon { background:rgba(220,38,38,.08); color:#dc2626; }
.lp-infra-card__num { font-size:1.6rem; font-weight:700; color:var(--lp-text); }
.lp-infra-card__lbl { font-size:.76rem; font-weight:500; color:var(--lp-text-muted); margin-top:4px; }

/* ── Table Section ── */
.lp-table-section { padding:44px 0 56px; background:var(--lp-cream); }
.lp-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.lp-search { position:relative; flex:0 1 320px; }
.lp-search__icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#999; pointer-events:none; }
.lp-search__input { width:100%; padding:10px 40px 10px 16px; border:1px solid var(--lp-border-gold); border-radius:var(--lp-radius-pill); font-size:.82rem; font-family:var(--lp-font); outline:none; transition:all .2s; background:#fff; }
.lp-search__input:focus { border-color:var(--lp-gold); box-shadow:0 0 0 3px rgba(184,126,2,.1); }
.lp-toolbar__info { font-size:.76rem; color:#888; font-weight:500; background:#fff; padding:6px 16px; border-radius:var(--lp-radius-pill); border:1px solid var(--lp-border); }

/* ── Table ── */
.lp-tbl-wrap { overflow-x:auto; border:1px solid var(--lp-border-gold); border-radius:var(--lp-radius); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.03); -webkit-overflow-scrolling:touch; }
.lp-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.lp-tbl th { background:var(--lp-navy); color:#fff; font-weight:600; padding:12px 14px; text-align:right; white-space:nowrap; font-size:.74rem; user-select:none; }
.lp-tbl th:first-child { border-radius:0 var(--lp-radius) 0 0; }
.lp-tbl th:last-child { border-radius:var(--lp-radius) 0 0 0; }
.lp-tbl__sortable { cursor:pointer; transition:background .15s; }
.lp-tbl__sortable:hover { background:var(--lp-navy-light); }
.lp-tbl td { padding:10px 14px; border-bottom:1px solid #f0ebe0; text-align:right; white-space:nowrap; }
.lp-tbl tbody tr { transition:background .15s; }
.lp-tbl tbody tr:nth-child(even) { background:#fdfbf7; }
.lp-tbl tbody tr:hover { background:#f5eed9; }
.lp-tbl__name { font-weight:600; color:var(--lp-navy); }
.lp-tbl__warn { color:#dc2626; font-weight:700; }
.lp-tbl__dim { color:var(--lp-text-muted); font-size:.78rem; }
.lp-tbl tfoot td { background:var(--lp-cream-dark); font-weight:700; color:var(--lp-navy); border-bottom:none; font-size:.8rem; }
.lp-sort { font-size:.7rem; margin-right:3px; }
.lp-sort--idle { opacity:.3; }

/* Sticky first column for table horizontal scroll */
.lp-tbl__sticky { position:sticky; right:0; z-index:2; background:inherit; }
.lp-tbl thead .lp-tbl__sticky { background:var(--lp-navy); z-index:3; }
.lp-tbl tfoot .lp-tbl__sticky { background:var(--lp-cream-dark); }
.lp-tbl tbody tr:nth-child(even) .lp-tbl__sticky { background:#fdfbf7; }
.lp-tbl tbody tr:hover .lp-tbl__sticky { background:#f5eed9; }

/* ── Pager ── */
.lp-pager { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:20px; flex-wrap:wrap; }
.lp-pager__btn, .lp-pager__num { border:1px solid var(--lp-border-gold); background:#fff; border-radius:var(--lp-radius-pill); padding:7px 13px; font-size:.78rem; font-family:var(--lp-font); cursor:pointer; color:#374151; transition:all .2s; }
.lp-pager__btn:disabled { opacity:.25; cursor:default; }
.lp-pager__btn:not(:disabled):hover, .lp-pager__num:hover { background:var(--lp-cream); border-color:var(--lp-gold); color:var(--lp-gold); }
.lp-pager__num--active { background:var(--lp-navy); color:#fff; border-color:var(--lp-navy); }
.lp-pager__num--active:hover { background:var(--lp-navy-light); color:#fff; border-color:var(--lp-navy-light); }

/* ── Footer ── */
.lp-footer { background:var(--lp-navy); color:rgba(255,255,255,.7); }
.lp-footer__top { padding:36px 0 28px; }
.lp-footer__top-inner { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.lp-footer__right { display:flex; align-items:center; gap:14px; }
.lp-footer__logo { height:40px; opacity:.9; }
.lp-footer__text { line-height:1.4; }
.lp-footer__name { font-size:.88rem; font-weight:600; color:#fff; }
.lp-footer__org { font-size:.72rem; color:rgba(255,255,255,.5); margin-top:2px; }
.lp-footer__links { display:flex; gap:20px; align-items:center; }
.lp-footer__link { font-size:.78rem; color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s; }
.lp-footer__link:hover { color:var(--lp-gold-light); }
.lp-footer__bottom { border-top:1px solid rgba(255,255,255,.08); padding:16px 0; }
.lp-footer__copy { font-size:.7rem; color:rgba(255,255,255,.4); text-align:center; }

/* ── Maps Section ── */
.lp-maps-section { padding:44px 0; background:#fff; }
.lp-maps__row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.lp-map-card { background:#fff; border-radius:var(--lp-radius); border:1px solid var(--lp-border); overflow:hidden; }
.lp-map-card__header { display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--lp-border); font-size:.82rem; font-weight:600; color:var(--lp-navy); flex-wrap:wrap; }
.lp-map-card__legend { display:flex; gap:10px; margin-right:auto; font-size:.7rem; font-weight:400; color:#666; }
.lp-map-legend { display:flex; align-items:center; gap:4px; }
.lp-map-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.lp-map-card__count { margin-right:auto; font-size:.7rem; font-weight:400; color:#888; }
.lp-map-card__body { height:400px; width:100%; }
.lp-map-card__empty { height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#aaa; font-size:.8rem; }

/* ══════════════════════════════════════════════════════
   Responsive Design
   ══════════════════════════════════════════════════════ */

/* ── Large tablets / small desktops ── */
@media (max-width:1024px) {
    .lp-stats__grid { grid-template-columns:repeat(3,1fr); }
    .lp-stat { border-bottom:1px solid var(--lp-border); }
    .lp-detail-grid--6 { grid-template-columns:repeat(3,1fr); }
    .lp-hero__content { flex-direction:column; text-align:center; }
    .lp-hero__right { text-align:center; }
    .lp-hero__badge { margin-left:auto; margin-right:auto; }
    .lp-hero__desc { margin-left:auto; margin-right:auto; }
    .lp-hero__actions { justify-content:center; }
    .lp-hero__left { flex-direction:row; flex-wrap:wrap; justify-content:center; }
    .lp-hero-mini { min-width:140px; }
}

/* ── Tablets ── */
@media (max-width:768px) {
    .lp-container { padding:0 16px; }
    .lp-stats__grid { grid-template-columns:repeat(2,1fr); }
    .lp-stat__num { font-size:1.4rem; }
    .lp-detail-grid--3 { grid-template-columns:1fr; }
    .lp-detail-grid--4 { grid-template-columns:repeat(2,1fr); }
    .lp-detail-grid--6 { grid-template-columns:repeat(3,1fr); }
    .lp-detail-card__num { font-size:1.5rem; }
    .lp-infra__row { grid-template-columns:repeat(2,1fr); }
    .lp-maps__row { grid-template-columns:1fr; }
    .lp-map-card__body { height:300px; }
    .lp-hero__title { font-size:1.7rem; }
    .lp-hero { min-height:auto; }
    .lp-hero__body { padding:44px 0 40px; }
    .lp-nav__inner { height:60px; }
    .lp-nav__logo { height:40px; }
    .lp-nav__ministry { display:none; }
    .lp-footer__top-inner { flex-direction:column; align-items:center; text-align:center; }
    .lp-footer__right { flex-direction:column; }
    .lp-topbar { display:none; }
    .lp-hero__left { display:none; }
    .lp-detail-section, .lp-detail-section--alt, .lp-infra-section, .lp-maps-section, .lp-table-section { padding:32px 0; }
    .lp-sec-head__title { font-size:1rem; }
}

/* ── Mobile ── */
@media (max-width:480px) {
    .lp-container { padding:0 12px; }
    .lp-stats__grid { grid-template-columns:1fr 1fr; }
    .lp-stat { padding:10px 8px; }
    .lp-stat__num { font-size:1.2rem; }
    .lp-stat__icon { width:32px; height:32px; }
    .lp-stat__icon svg { width:14px; height:14px; }
    .lp-detail-grid--3 { grid-template-columns:1fr; }
    .lp-detail-grid--4 { grid-template-columns:1fr 1fr; }
    .lp-detail-grid--6 { grid-template-columns:repeat(2,1fr); }
    .lp-detail-card { padding:16px 14px; }
    .lp-detail-card__num { font-size:1.3rem; }
    .lp-inst-card { padding:14px 8px; }
    .lp-inst-card__num { font-size:1.2rem; }
    .lp-inst-card__icon { width:36px; height:36px; }
    .lp-infra__row { grid-template-columns:1fr 1fr; gap:12px; }
    .lp-infra-card { padding:18px 12px; }
    .lp-infra-card__num { font-size:1.3rem; }
    .lp-search { flex:1 1 100%; }
    .lp-hero__title { font-size:1.4rem; }
    .lp-hero__desc { font-size:.82rem; }
    .lp-hero__body { padding:32px 0 28px; }
    .lp-hero__cta { padding:9px 24px; font-size:.8rem; }
    .lp-nav__inner { height:54px; }
    .lp-nav__logo { height:36px; }
    .lp-nav__system { font-size:.88rem; }
    .lp-map-card__body { height:240px; }
    .lp-map-card__header { padding:10px 12px; font-size:.76rem; }
    .lp-tbl { font-size:.74rem; }
    .lp-tbl th { padding:10px 10px; font-size:.68rem; }
    .lp-tbl td { padding:8px 10px; }
    .lp-pager__btn, .lp-pager__num { padding:5px 10px; font-size:.72rem; }
    .lp-footer__top { padding:24px 0 20px; }
    .lp-footer__logo { height:32px; }
}

/* ── Very small screens ── */
@media (max-width:360px) {
    .lp-stats__grid { grid-template-columns:1fr; }
    .lp-stat::after { display:none; }
    .lp-stat { border-bottom:1px solid var(--lp-border); }
    .lp-detail-grid--6 { grid-template-columns:1fr 1fr; }
    .lp-infra__row { grid-template-columns:1fr; }
    .lp-hero__title { font-size:1.2rem; }
    .lp-hero__desc { font-size:.78rem; }
}