/* ==========================================================================
   DGA "Platforms Code" (كود المنصات) layer for Filament panels
   Brand: SA-flag green #1b8354 · IBM Plex Sans Arabic · 4px grid · RTL-first
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
    --dga-green: #1b8354;
    --dga-green-hover: #166a45;
    --dga-green-active: #14573a;
    --dga-green-50: #f3fcf6;
    --dga-green-100: #dff6e7;
    --dga-gold: #dba102;
    --dga-lavender: #80519f;
    --dga-info: #156fee;
    --dga-radius-sm: 4px;
    --dga-radius-md: 8px;
    --dga-radius-lg: 16px;
    --dga-shadow-sm: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    --dga-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --dga-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
    --dga-border: #e5e7eb;
    --dga-text: #1f2a37;
    --dga-text-muted: #4d5761;
}

/* Typeface across the panel (Arabic + Latin share one font) */
.fi-body,
.fi-body .fi-sidebar,
.fi-simple-layout {
    font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Visible focus ring (WCAG 2.1 AA) */
.fi-body *:focus-visible {
    outline: 2px solid var(--dga-green);
    outline-offset: 2px;
    border-radius: var(--dga-radius-sm);
}

/* ---- Language switcher (top bar) --------------------------------------- */
.dga-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    margin-inline-start: .5rem;
    background: var(--dga-green-50);
    border: 1px solid var(--dga-green-100);
    border-radius: 999px;
}
.dga-lang__btn {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--dga-green-active);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.dga-lang__btn:hover { background: var(--dga-green-100); }
.dga-lang__btn.is-active { background: var(--dga-green); color: #fff; }
.dark .dga-lang { background: rgba(27, 131, 84, .12); border-color: rgba(27, 131, 84, .3); }
.dark .dga-lang__btn { color: #88d8ad; }

/* ---- Top nav row: breadcrumbs + hub link ------------------------------ */
.dga-topnav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dga-topnav .dga-back { margin-bottom: 0; margin-inline-start: auto; }

.dga-crumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; }
.dga-crumbs a { color: var(--dga-green); font-weight: 600; text-decoration: none; }
.dga-crumbs a:hover { text-decoration: underline; }
.dga-crumbs span { color: var(--dga-text-muted); }
.dga-crumbs__sep { color: var(--dga-border); }
.dga-crumbs__current { color: var(--dga-text); font-weight: 700; }
.dark .dga-crumbs a { color: #88d8ad; }
.dark .dga-crumbs__current { color: #f9fafb; }
.dga-backbtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; font-size: .875rem; font-weight: 600; font-family: inherit;
    color: var(--dga-text); background: #fff; border: 1px solid var(--dga-border);
    border-radius: var(--dga-radius-md); cursor: pointer; transition: border-color .15s, color .15s;
}
.dga-backbtn:hover { border-color: var(--dga-green); color: var(--dga-green); }
.dga-backbtn__arrow { width: 18px; height: 18px; }
html[dir="rtl"] .dga-backbtn__arrow { transform: scaleX(-1); }
.dark .dga-backbtn { background: #1f2a37; border-color: #384250; color: #f9fafb; }

/* ---- Back-to-hub banner (product panels) ------------------------------- */
.dga-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.25rem;
    padding: 10px 16px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--dga-green-active);
    background: var(--dga-green-50);
    border: 1px solid var(--dga-green-100);
    border-radius: var(--dga-radius-md);
    text-decoration: none;
    transition: background .15s;
}
.dga-back:hover { background: var(--dga-green-100); }
.dga-back__arrow { width: 18px; height: 18px; }
html[dir="rtl"] .dga-back__arrow { transform: scaleX(-1); }
.dark .dga-back { background: rgba(27, 131, 84, .12); border-color: rgba(27, 131, 84, .3); color: #88d8ad; }

/* ---- Hub product grid -------------------------------------------------- */
.dga-hub__head { margin-bottom: 1.25rem; }
.dga-hub__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dga-text);
    margin: 0 0 .25rem;
}
.dga-hub__sub { color: var(--dga-text-muted); font-size: .95rem; margin: 0; }
.dark .dga-hub__title { color: #f9fafb; }
.dark .dga-hub__sub { color: #9da4ae; }

.dga-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.dga-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--dga-border);
    border-radius: var(--dga-radius-lg);
    box-shadow: var(--dga-shadow-sm);
    text-decoration: none;
    transition: box-shadow .18s, transform .18s, border-color .18s;
    overflow: hidden;
}
.dga-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: var(--dga-green);
}
.dga-card:hover {
    box-shadow: var(--dga-shadow-lg);
    transform: translateY(-3px);
    border-color: #b8eacb;
}
.dga-card--soon { opacity: .96; }
.dga-card--soon::before { background: var(--dga-gold); }
.dark .dga-card { background: #1f2a37; border-color: #384250; }

.dga-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.dga-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--dga-radius-md);
    background: var(--dga-green-50);
    color: var(--dga-green);
}
.dark .dga-card__icon { background: rgba(27, 131, 84, .15); color: #88d8ad; }
.dga-prod-ico { width: 26px; height: 26px; }

.dga-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dga-text);
    margin: 0 0 .4rem;
}
.dga-card__desc {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--dga-text-muted);
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}
.dark .dga-card__title { color: #f9fafb; }
.dark .dga-card__desc { color: #9da4ae; }

.dga-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--dga-green);
}
.dark .dga-card__cta { color: #88d8ad; }
.dga-card__arrow { width: 18px; height: 18px; transition: transform .18s; }
html[dir="rtl"] .dga-card__arrow { transform: scaleX(-1); }
html[dir="rtl"] .dga-card:hover .dga-card__arrow { transform: scaleX(-1) translateX(4px); }
html[dir="ltr"] .dga-card:hover .dga-card__arrow { transform: translateX(4px); }

/* زر الإجراء الموحد داخل بطاقة الخدمة (كود المنصات §6):
   إجراء أساسي واحد لكل بطاقة، بعنوان يصف الفعل لا «انتقال». */
.dga-card__cta--btn {
    margin-top: auto;
    align-self: flex-start;
    background: var(--dga-green);
    color: #fff;
    border-radius: 4px;              /* radius-sm */
    padding: 10px 20px;              /* spacing-lg / xl */
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s;
}
.dga-card:hover .dga-card__cta--btn { background: #166a45; }   /* hover */
.dga-card:active .dga-card__cta--btn { background: #14573a; }  /* pressed */
.dga-card:focus-visible .dga-card__cta--btn { outline: 2px solid #101828; outline-offset: 2px; }
.dark .dga-card__cta--btn { color: #fff; }


/* ---- Badges ------------------------------------------------------------ */
.dga-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}
.dga-badge--active { background: var(--dga-green-100); color: var(--dga-green-active); }
.dga-badge--soon { background: #fdf3d3; color: #8a6100; }

/* ---- Demo accounts quick-login (login page) --------------------------- */
.dga-demo {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1.5px dashed #88d8ad;
    border-radius: var(--dga-radius-lg);
    background: var(--dga-green-50);
}
.dga-demo__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}
.dga-demo__title { font-size: 1rem; font-weight: 700; color: var(--dga-green-active); }
.dga-demo__hint { font-size: .8125rem; color: var(--dga-text-muted); }
.dga-demo__list { display: flex; flex-direction: column; gap: .5rem; }
.dga-demo__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--dga-green-100);
    border-radius: var(--dga-radius-md);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dga-demo__row:hover {
    border-color: var(--dga-green);
    box-shadow: var(--dga-shadow-sm);
    transform: translateY(-1px);
}
.dga-demo__user { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .875rem; color: var(--dga-text); font-weight: 600; }
.dga-demo__role { font-size: .8125rem; color: var(--dga-text-muted); }
.dark .dga-demo { background: rgba(27, 131, 84, .1); border-color: rgba(27, 131, 84, .4); }
.dark .dga-demo__row { background: #1f2a37; border-color: #384250; }
.dark .dga-demo__user { color: #f9fafb; }

/* ---- Student eligibility status banner (coop dashboard) ---------------- */
.coop-status {
    background: var(--sc-bg);
    color: var(--sc-fg);
    border: 1px solid color-mix(in srgb, var(--sc-fg) 18%, transparent);
    border-radius: var(--dga-radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.coop-status__main { display: flex; align-items: center; gap: .9rem; }
.coop-status__badge {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    background: color-mix(in srgb, var(--sc-fg) 12%, transparent);
    font-size: 1.15rem; font-weight: 700;
}
.coop-status__name { font-weight: 700; font-size: 1.05rem; }
.coop-status__dep { font-weight: 500; opacity: .8; }
.coop-status__label { font-size: .9rem; margin-top: 2px; }
.coop-status__reasons { margin: .75rem 0 0; padding-inline-start: 1.25rem; font-size: .85rem; opacity: .9; line-height: 1.9; }

/* ---- «ملفي» profile page ---------------------------------------------- */
.coop-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem 1.5rem;
}
.coop-facts > div { display: flex; flex-direction: column; gap: 3px; padding-bottom: .6rem; border-bottom: 1px solid var(--dga-border); text-align: right; }
.coop-facts span { font-size: .8rem; color: var(--dga-text-muted); text-align: right; }
.coop-facts b { font-size: .95rem; color: var(--dga-text); text-align: right; }
.dark .coop-facts > div { border-color: #384250; }
.dark .coop-facts b { color: #f9fafb; }

.coop-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 0; border-bottom: 1px solid var(--dga-border);
}
.coop-row:last-child { border-bottom: 0; }
.coop-row__sub { font-size: .82rem; color: var(--dga-text-muted); margin-top: 3px; }
.dark .coop-row { border-color: #384250; }
.coop-empty { color: var(--dga-text-muted); font-size: .9rem; margin: 0; }

.coop-journey { padding: .4rem 0; }
.coop-journey__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .6rem; font-size: .85rem; color: var(--dga-text-muted); }
.coop-journey__meta b { color: var(--dga-green); }

/* ---- Opportunity browse cards ----------------------------------------- */
.coop-opp__meta { display: flex; flex-direction: column; gap: .4rem; margin: .25rem 0 1rem; font-size: .84rem; color: var(--dga-text-muted); }
.coop-opp__meta span { display: inline-flex; align-items: center; gap: 6px; }
.coop-opp__ico { width: 16px; height: 16px; flex: none; color: var(--dga-green); }

/* ---- Training-mail view modal ----------------------------------------- */
.coop-mailview__row { display: flex; gap: .75rem; padding: .35rem 0; font-size: .9rem; border-bottom: 1px solid var(--dga-border); }
.coop-mailview__row span { color: var(--dga-text-muted); min-width: 110px; }
.dark .coop-mailview__row { border-color: #384250; }
.coop-mailview__body { white-space: pre-wrap; line-height: 1.9; margin: 1rem 0; padding: 1rem; background: var(--dga-green-50); border-radius: var(--dga-radius-md); font-size: .92rem; }
.dark .coop-mailview__body { background: rgba(27,131,84,.1); }
.coop-mailview__atts-title { font-weight: 700; margin-bottom: .5rem; }
.coop-mailview__att { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--dga-border); border-radius: var(--dga-radius-md); margin-bottom: .4rem; font-size: .875rem; }
.dark .coop-mailview__att { border-color: #384250; }
.coop-mailview__att-name { font-weight: 600; }
.coop-mailview__att-size { color: var(--dga-text-muted); font-size: .8rem; }
.coop-mailview__att-dl { margin-inline-start: auto; color: var(--dga-green); font-weight: 600; }
.coop-mailview__att-na { margin-inline-start: auto; color: var(--dga-text-muted); }

/* ---- Mail auto-refresh banner ----------------------------------------- */
.coop-mailpoll {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .6rem 1rem; font-size: .85rem;
    background: var(--dga-green-50); border: 1px solid var(--dga-green-100);
    border-radius: var(--dga-radius-md); color: var(--dga-green-active);
}
.coop-mailpoll__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dga-green); animation: coop-pulse 2s infinite; }
@keyframes coop-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.coop-mailpoll__label { font-weight: 600; }
.coop-mailpoll__count { margin-inline-start: auto; color: var(--dga-text-muted); }
.coop-mailpoll__count b { color: var(--dga-green); font-variant-numeric: tabular-nums; }
.coop-mailpoll__new { background: var(--dga-green); color: #fff; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.dark .coop-mailpoll { background: rgba(27,131,84,.1); border-color: rgba(27,131,84,.3); color: #88d8ad; }

/* ---- Testing area ------------------------------------------------------ */
.coop-demoarea { display: flex; flex-direction: column; gap: .6rem; }
.coop-demoarea__row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem; border: 1px solid var(--dga-border); border-radius: var(--dga-radius-md);
}
.dark .coop-demoarea__row { border-color: #384250; }
.coop-demoarea__info { display: flex; flex-direction: column; gap: 2px; }
.coop-demoarea__role { font-weight: 700; color: var(--dga-text); }
.dark .coop-demoarea__role { color: #f9fafb; }
.coop-demoarea__email { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--dga-text-muted); }
.coop-demoarea__login { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dga-green); text-decoration: none; }
.coop-demoarea__login:hover { text-decoration: underline; }
.coop-demoarea__pw { margin-top: 1rem; font-size: .875rem; color: var(--dga-text-muted); }
.coop-demoarea__pw code { background: var(--dga-green-50); color: var(--dga-green-active); padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.dark .coop-demoarea__pw code { background: rgba(27,131,84,.15); color: #88d8ad; }