/*
 * بوابة الخدمات التنموية — الوحدة التنموية.
 *
 * Its own stylesheet rather than an extension of vo.css, for the reason that file gives for not
 * extending theme.css: a different palette, a different public face, and screens neither of the
 * others needs — the registration journey's steps and the decision card. Sharing would mean every
 * volunteering page downloading decision-card rules and every page here carrying certificate rules.
 *
 * **Fonts are a system Arabic stack.** `font-src 'self'` in the CSP blocks Google Fonts outright, so
 * a link element would be refused and the page would fall back to this anyway. Self-hosting the
 * association's face is a job of its own; this is what every Arabic-capable OS already has.
 *
 * **No inline styles except data-driven ones.** Two exist: the width of a progress bar and the
 * `--pct` on a ring, both per-row values a stylesheet cannot know. `script-src 'self'` also means no
 * inline handlers anywhere — this area has none, like everything since P6.
 *
 * Teal rather than التطوع's clay orange, because a member of staff often has both open and the two
 * areas hold different people's data. Telling them apart at a glance is a safety property.
 */

:root {
    --sd-primary: #146B6B;
    --sd-primary-hover: #0E4F4F;
    --sd-accent: #C98A2E;
    --sd-bg: #F5F8F8;
    --sd-card: #FFFFFF;
    --sd-border: #DCE7E7;
    --sd-text: #1F2A2A;
    --sd-muted: #5F7070;
    --sd-ok: #1E7A4B;
    --sd-warn: #B4761A;
    --sd-hold: #8A5A2B;
    --sd-bad: #A63A2A;
    --sd-radius: 14px;
    --sd-radius-lg: 22px;
    --sd-shadow: 0 6px 18px -12px rgba(20, 45, 45, .45);
    --sd-font: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Traditional Arabic", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body.sd {
    margin: 0;
    font-family: var(--sd-font);
    background: var(--sd-bg);
    color: var(--sd-text);
    line-height: 1.85;
    font-size: 16px;
}

.sd-wrap { width: min(1120px, 92vw); margin-inline: auto; }

.sd-skip {
    position: absolute;
    inset-inline-start: -9999px;
}
.sd-skip:focus {
    inset-inline-start: 1rem;
    top: 1rem;
    z-index: 50;
    background: var(--sd-card);
    padding: .6rem 1rem;
    border-radius: 8px;
}

/* ---- header / footer ---- */

.sd-header {
    background: var(--sd-card);
    border-bottom: 1px solid var(--sd-border);
}
.sd-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .9rem;
}
.sd-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
}
.sd-brand img { width: 40px; height: 40px; }
.sd-brand strong { display: block; font-weight: 600; font-size: 1.02rem; }
.sd-brand small { display: block; color: var(--sd-muted); font-size: .8rem; }

.sd-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--sd-border);
    background: var(--sd-card);
}
.sd-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    justify-content: space-between;
    padding-block: 1.2rem;
    color: var(--sd-muted);
    font-size: .86rem;
}
.sd-footer a { color: var(--sd-primary); }

/* ---- type ---- */

.sd-h1 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 600; margin: 0 0 .4rem; line-height: 1.4; }
.sd-h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; margin: 2.2rem 0 .9rem; }
.sd-h3 { font-size: 1.03rem; font-weight: 600; margin: 0 0 .5rem; }
.sd-lead { color: var(--sd-muted); margin: 0 0 1.4rem; max-width: 62ch; }
.sd-muted { color: var(--sd-muted); }
.sd-small { font-size: .85rem; }

/* Numbers inside Arabic text flip when a bare percent or a parenthesis sits beside them. `bdi`
 * isolates the run; this keeps it from inheriting a stray direction. */
bdi { unicode-bidi: isolate; }

/* ---- cards ---- */

.sd-card {
    background: var(--sd-card);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--sd-shadow);
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
}
.sd-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.sd-hero { padding-block: clamp(2rem, 5vw, 3.4rem); }

/* ---- buttons ---- */

.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .62rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--sd-primary);
    color: #fff;
    font: inherit;
    font-size: .93rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}
.sd-btn:hover { background: var(--sd-primary-hover); }
.sd-btn--ghost {
    background: transparent;
    color: var(--sd-primary);
    border-color: var(--sd-border);
}
.sd-btn--ghost:hover { background: #EFF5F5; }
.sd-btn--danger { background: var(--sd-bad); }
.sd-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- forms ---- */

.sd-field { margin-bottom: 1.15rem; }
.sd-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.sd-hint { display: block; color: var(--sd-muted); font-size: .84rem; margin-bottom: .4rem; }
.sd-input, .sd-select, .sd-textarea {
    width: 100%;
    padding: .62rem .8rem;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: inherit;
}
.sd-input:focus, .sd-select:focus, .sd-textarea:focus {
    outline: 2px solid var(--sd-primary);
    outline-offset: 1px;
}
.sd-textarea { min-height: 6rem; resize: vertical; }
.sd-error { color: var(--sd-bad); font-size: .86rem; margin-top: .3rem; }

/* Two-button toggles, for the questions that used to be free text: nationality and city. */
.sd-choices { display: flex; flex-wrap: wrap; gap: .55rem; }
.sd-choice {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border: 1px solid var(--sd-border);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: .92rem;
}
.sd-choice input { accent-color: var(--sd-primary); }
.sd-choice:has(input:checked) {
    border-color: var(--sd-primary);
    background: #EEF6F6;
}

.sd-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .93rem;
}
.sd-check input { margin-top: .45rem; accent-color: var(--sd-primary); }

.sd-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* ---- journey steps ---- */

.sd-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    font-size: .88rem;
    color: var(--sd-muted);
}
.sd-steps li { display: inline-flex; align-items: center; gap: .45rem; }
.sd-steps li::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sd-border);
}
.sd-steps li[aria-current="step"] { color: var(--sd-primary); font-weight: 600; }
.sd-steps li[aria-current="step"]::before { background: var(--sd-primary); }
.sd-steps li[data-done="1"]::before { background: var(--sd-ok); }

/* ---- messages ---- */

.sd-message {
    border: 1px solid var(--sd-border);
    border-inline-start-width: 4px;
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1.2rem;
    background: #fff;
    font-size: .93rem;
}
.sd-message[data-type="success"] { border-inline-start-color: var(--sd-ok); }
.sd-message[data-type="warn"] { border-inline-start-color: var(--sd-warn); }
.sd-message[data-type="hold"] { border-inline-start-color: var(--sd-hold); }
.sd-message[data-type="error"] { border-inline-start-color: var(--sd-bad); }
.sd-message[data-type="info"] { border-inline-start-color: var(--sd-primary); }

/* ---- badges ---- */

.sd-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .16rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid var(--sd-border);
    background: #fff;
    white-space: nowrap;
}
.sd-badge[data-tone="ok"] { color: var(--sd-ok); border-color: #BFE3CD; background: #F1FAF4; }
.sd-badge[data-tone="warn"] { color: var(--sd-warn); border-color: #EBD8B4; background: #FDF7EC; }
.sd-badge[data-tone="hold"] { color: var(--sd-hold); border-color: #E4D2BC; background: #FBF5EE; }
.sd-badge[data-tone="wait"] { color: var(--sd-muted); }
.sd-badge[data-tone="muted"] { color: var(--sd-muted); }

/* ---- the verdict line on the decision card ---- */

.sd-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    border-radius: var(--sd-radius);
    padding: .95rem 1.15rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}
.sd-verdict[data-tone="ok"] { background: #EBF7F0; color: #14603A; }
.sd-verdict[data-tone="warn"] { background: #FDF4E6; color: #8A5A12; }
.sd-verdict[data-tone="hold"] { background: #F7F1E9; color: #6F4720; }

/* The unverified-claims block. Sits ABOVE the detail on purpose — see ApplicationController. */
.sd-claims {
    border: 1px solid #EBD8B4;
    background: #FDF7EC;
    border-radius: var(--sd-radius);
    padding: .9rem 1.15rem;
    margin-bottom: 1.3rem;
}
.sd-claims h3 { margin: 0 0 .45rem; font-size: .96rem; color: #8A5A12; }
.sd-claims ul { margin: 0; padding-inline-start: 1.2rem; font-size: .92rem; }
.sd-claims li + li { margin-top: .3rem; }

/* ---- condition list ---- */

.sd-conditions { list-style: none; margin: 0; padding: 0; }
.sd-conditions li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .6rem 0;
    border-bottom: 1px solid var(--sd-border);
}
.sd-conditions li:last-child { border-bottom: 0; }
.sd-conditions [data-mark] {
    flex: none;
    width: 1.5rem;
    text-align: center;
    font-weight: 700;
}
.sd-conditions [data-mark="ok"] { color: var(--sd-ok); }
.sd-conditions [data-mark="warn"] { color: var(--sd-warn); }
.sd-conditions [data-mark="hold"] { color: var(--sd-hold); }

/* ---- tables ---- */

.sd-table-scroll { overflow-x: auto; }
.sd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.sd-table th, .sd-table td {
    text-align: start;
    padding: .65rem .7rem;
    border-bottom: 1px solid var(--sd-border);
    vertical-align: top;
}
.sd-table th { font-weight: 600; color: var(--sd-muted); font-size: .85rem; white-space: nowrap; }
.sd-table tbody tr:hover { background: #F7FAFA; }
.sd-table a { color: var(--sd-primary); }

.sd-empty {
    text-align: center;
    color: var(--sd-muted);
    padding: 2.4rem 1rem;
}

/* ---- dashboard cards ---- */

.sd-stat { display: flex; align-items: center; gap: 1rem; }
.sd-stat__figure { font-size: 1.9rem; font-weight: 600; line-height: 1.2; }
.sd-stat__label { color: var(--sd-muted); font-size: .88rem; }

/*
 * The progress ring. `--pct` is set inline per card because it is per-row data.
 *
 * conic-gradient rather than an SVG arc: it needs no script, and a ring that only reaches the right
 * size once JavaScript has run draws wrong when it has not.
 */
.sd-ring {
    --pct: 0;
    --ring: var(--sd-border);
    flex: none;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--sd-border) 0);
    display: grid;
    place-items: center;
    position: relative;
}
.sd-ring::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--sd-card);
}
.sd-ring span { position: relative; font-size: .86rem; font-weight: 600; }
.sd-ring[data-tone="low"] { --ring: var(--sd-bad); }
.sd-ring[data-tone="mid"] { --ring: var(--sd-warn); }
.sd-ring[data-tone="good"] { --ring: var(--sd-ok); }
.sd-ring[data-tone="over"] { --ring: var(--sd-accent); }

/* ---- management nav ---- */

.sd-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sd-side {
    background: var(--sd-card);
    border-inline-end: 1px solid var(--sd-border);
    padding: 1.2rem 1rem;
}
.sd-side nav { display: flex; flex-direction: column; gap: .2rem; margin-top: 1.2rem; }
.sd-side a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-size: .93rem;
}
.sd-side a:hover { background: #F1F7F7; }
.sd-side a[aria-current="page"] { background: #EAF4F4; color: var(--sd-primary); font-weight: 600; }
.sd-side .sd-count {
    background: var(--sd-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .78rem;
    min-width: 1.4rem;
    text-align: center;
}
.sd-main { padding: clamp(1.1rem, 2.4vw, 2rem); }

@media (max-width: 860px) {
    .sd-shell { grid-template-columns: 1fr; }
    .sd-side { border-inline-end: 0; border-bottom: 1px solid var(--sd-border); }
    .sd-side nav { flex-direction: row; flex-wrap: wrap; margin-top: .8rem; }
}

/* ---- definition lists, used on both the card and the profile ---- */

.sd-dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; font-size: .93rem; }
.sd-dl dt { color: var(--sd-muted); }
.sd-dl dd { margin: 0; }

@media (max-width: 560px) {
    .sd-dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .sd-dl dd { margin-bottom: .5rem; }
}

/* ---- action bar on the decision card ---- */

.sd-actions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.sd-actions form { display: flex; flex-direction: column; gap: .5rem; }
.sd-actions fieldset {
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: .9rem 1rem;
    margin: 0;
}
.sd-actions legend { font-weight: 600; font-size: .92rem; padding-inline: .35rem; }

.sd-timeline { list-style: none; margin: 0; padding: 0; font-size: .89rem; }
.sd-timeline li { padding: .5rem 0; border-bottom: 1px dashed var(--sd-border); }
.sd-timeline li:last-child { border-bottom: 0; }
.sd-timeline time { color: var(--sd-muted); }