/* ============================================================
   Zayed Platform – Site Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Base ─────────────────────────────────────── */
:root {
    --zp-navy:      #0E2A47;
    --zp-blue:      #1D5A8E;
    --zp-gold:      #E6A817;
    --zp-gold-light:#FEF3C7;
    --zp-surface:   #F8FAFC;
    --zp-border:    #E2E8F0;
    --zp-text:      #1E293B;
    --zp-muted:     #64748B;
    --zp-radius:    12px;
    --zp-shadow:    0 4px 20px rgba(14,42,71,.08);
    --zp-shadow-md: 0 8px 32px rgba(14,42,71,.12);
}

[lang="ar"] body { font-family: 'Cairo', system-ui, sans-serif; }
[lang="en"] body { font-family: 'Inter', system-ui, sans-serif; }
body { color: var(--zp-text); background: #fff; }

/* ── Remap Bootstrap "primary" → brand blue ───── */
:root {
    --bs-primary: #1D5A8E;
    --bs-primary-rgb: 29, 90, 142;
    --bs-link-color: #1D5A8E;
    --bs-link-color-rgb: 29, 90, 142;
    --bs-link-hover-color: #0E2A47;
}
.btn-primary {
    --bs-btn-bg: #1D5A8E;            --bs-btn-border-color: #1D5A8E;
    --bs-btn-hover-bg: #0E2A47;      --bs-btn-hover-border-color: #0E2A47;
    --bs-btn-active-bg: #0E2A47;     --bs-btn-active-border-color: #0E2A47;
    --bs-btn-disabled-bg: #1D5A8E;   --bs-btn-disabled-border-color: #1D5A8E;
}
.btn-outline-primary {
    --bs-btn-color: #1D5A8E;         --bs-btn-border-color: #1D5A8E;
    --bs-btn-hover-bg: #1D5A8E;      --bs-btn-hover-border-color: #1D5A8E;
    --bs-btn-active-bg: #1D5A8E;     --bs-btn-active-border-color: #1D5A8E;
}
.progress-bar { background-color: #1D5A8E; }
.page-link { color: #1D5A8E; }
.page-item.active .page-link { background-color: #1D5A8E; border-color: #1D5A8E; }

/* ── Bootstrap overrides ─────────────────────── */
.btn { border-radius: 8px; font-weight: 600; }
.card { border-radius: var(--zp-radius); }
.form-control, .form-select {
    border-color: var(--zp-border);
    border-radius: 8px;
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--zp-blue);
    box-shadow: 0 0 0 3px rgba(29,90,142,.12);
}

/* ── Custom buttons ───────────────────────────── */
.btn-navy  { background: var(--zp-navy); border-color: var(--zp-navy); color: #fff; }
.btn-navy:hover { background: var(--zp-blue); border-color: var(--zp-blue); color: #fff; }
.btn-gold  { background: var(--zp-gold); border-color: var(--zp-gold); color: #fff; }
.btn-gold:hover { background: #D4960F; border-color: #D4960F; color: #fff; }
.btn-outline-navy { border-color: var(--zp-navy); color: var(--zp-navy); background: transparent; }
.btn-outline-navy:hover { background: var(--zp-navy); color: #fff; }

/* ── Color utilities ──────────────────────────── */
.text-navy  { color: var(--zp-navy) !important; }
.text-gold  { color: var(--zp-gold) !important; }
.bg-navy    { background: var(--zp-navy) !important; }
.bg-surface { background: var(--zp-surface) !important; }

/* ── ZP Card ──────────────────────────────────── */
.zp-card {
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius);
    box-shadow: var(--zp-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
}
.zp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zp-shadow-md);
}

/* ── Section helpers ──────────────────────────── */
.section-tag {
    display: inline-block;
    background: var(--zp-gold-light);
    color: #92400E;
    border-radius: 20px;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: .6rem;
}
.section-title { font-size: 1.75rem; font-weight: 800; color: var(--zp-navy); line-height: 1.2; }
.section-sub   { color: var(--zp-muted); font-size: .95rem; }

/* ── Chips ────────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--zp-surface);
    border: 1px solid var(--zp-border);
    border-radius: 20px;
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--zp-muted);
    white-space: nowrap;
}
.chip-navy  { background: rgba(14,42,71,.08);  color: var(--zp-navy); border-color: transparent; }
.chip-gold  { background: var(--zp-gold-light); color: #92400E;       border-color: transparent; }
.chip-green { background: #DCFCE7;             color: #166534;        border-color: transparent; }
.chip-red   { background: #FEE2E2;             color: #991B1B;        border-color: transparent; }

/* ── Inner page hero (listing/detail headers) ─── */
.zp-page-head {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(160deg, var(--zp-navy) 0%, var(--zp-blue) 100%);
    padding: 56px 0 44px;
}
.zp-page-head::before {
    content: ""; position: absolute; inset: 0; opacity: .05;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 26px 26px;
}
.zp-page-head > .container { position: relative; z-index: 1; }
.zp-page-head h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.25; margin-bottom: .5rem; }
.zp-page-head p { color: rgba(255,255,255,.78); margin-bottom: 0; }
.zp-page-tag {
    display: inline-block; background: rgba(230,168,23,.18); color: var(--zp-gold);
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .9rem; border-radius: 20px; margin-bottom: .85rem;
}
.zp-page-head .breadcrumb { margin-bottom: 0; }
.zp-page-head .breadcrumb-item,
.zp-page-head .breadcrumb-item a { color: rgba(255,255,255,.7); text-decoration: none; }
.zp-page-head .breadcrumb-item a:hover { color: #fff; }
.zp-page-head .breadcrumb-item.active { color: #fff; }
.zp-page-head .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }

/* ── Event card ──────────────────────────────── */
.zp-event-header {
    background: linear-gradient(135deg, var(--zp-navy) 0%, var(--zp-blue) 100%);
    padding: 1rem 1.25rem;
    display: flex; justify-content: space-between; align-items: center;
}
.zp-event-date-box { display: flex; flex-direction: column; line-height: 1; }
.zp-event-day   { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
.zp-event-month { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.7); text-transform: uppercase; }

/* ── Card media / icons ──────────────────────── */
.zp-thumb { height: 180px; overflow: hidden; }
.zp-thumb-placeholder {
    height: 180px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--zp-navy), var(--zp-blue));
}
.zp-field-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, var(--zp-navy), var(--zp-blue));
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.zp-researcher-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--zp-navy), var(--zp-blue));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 900; color: #fff;
}

/* ── Detail stat box ─────────────────────────── */
.zp-stat-box {
    border: 1px solid var(--zp-border); border-radius: var(--zp-radius);
    padding: 1rem; text-align: center; background: #fff;
}
.zp-stat-box .zp-stat-ico {
    width: 40px; height: 40px; border-radius: 10px; margin: 0 auto .5rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--zp-surface); color: var(--zp-blue);
}

/* ── Empty state ─────────────────────────────── */
.zp-empty { text-align: center; padding: 3.5rem 1rem; }
.zp-empty-ico {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 1.25rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(14,42,71,.06); color: var(--zp-navy); font-size: 1.75rem; opacity: .55;
}

/* ── Sidebar list link (related items, lists) ── */
.zp-list-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem; text-decoration: none; color: var(--zp-text);
    border-bottom: 1px solid var(--zp-border); transition: background .15s;
}
.zp-list-link:last-child { border-bottom: 0; }
.zp-list-link:hover { background: var(--zp-surface); color: var(--zp-navy); }

/* ── Logo hex ─────────────────────────────────── */
.zp-logo-hex {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--zp-navy) 0%, var(--zp-blue) 100%);
    clip-path: polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Language toggle ──────────────────────────── */
.lang-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--zp-surface);
    border: 1px solid var(--zp-border);
    border-radius: 24px;
    padding: .3rem .75rem;
    font-size: .8rem; font-weight: 700;
    color: var(--zp-navy);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.lang-toggle:hover { background: var(--zp-navy); border-color: var(--zp-navy); color: #fff; }
.lang-toggle .lang-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--zp-navy); color: #fff;
    font-size: .6rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lang-toggle:hover .lang-dot { background: rgba(255,255,255,.2); }

/* ── Footer ───────────────────────────────────── */
.zp-footer { background: var(--zp-navy); color: rgba(255,255,255,.75); }
.zp-footer a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; }
.zp-footer a:hover { color: var(--zp-gold); }
.zp-footer .footer-title {
    color: var(--zp-gold); font-weight: 700;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 1rem;
}
.zp-footer .social-btn {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.65); text-decoration: none; transition: all .2s;
}
.zp-footer .social-btn:hover { background: var(--zp-gold); border-color: var(--zp-gold); color: #fff; }

/* ── Tables ───────────────────────────────────── */
.table { font-size: .875rem; }
.table thead th {
    background: var(--zp-surface); color: var(--zp-muted);
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--zp-border);
    padding: .75rem 1rem;
}
.table tbody td { padding: .75rem 1rem; vertical-align: middle; border-color: var(--zp-border); }
.table-hover tbody tr:hover { background: var(--zp-surface); }

/* ── Form labels ──────────────────────────────── */
.form-label { font-weight: 600; font-size: .875rem; color: var(--zp-text); margin-bottom: .4rem; }

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--zp-surface); }
::-webkit-scrollbar-thumb { background: var(--zp-blue); border-radius: 3px; }

/* ── Partners ─────────────────────────────────── */
.partner-logo { transition: filter .3s, opacity .3s; }
.partner-logo:hover { filter: none !important; opacity: 1 !important; }

/* ── Alert bar ────────────────────────────────── */
.site-alert { border-radius: 0; border: none; margin: 0; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 768px) {
    .section-title { font-size: 1.4rem; }
}

/* ── Admin-area table (legacy support) ────────── */
.admin-table thead th {
    background: var(--zp-surface);
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--zp-muted); border-color: var(--zp-border);
}