/* ==========================================================================
   Ejazat — visual language
   Deep emerald + muted gold on warm ivory; restrained Islamic geometry.
   Built on Bootstrap 5 (RTL build); everything here is same-origin (strict CSP).
   ========================================================================== */

@font-face {
    font-family: "Vazirmatn FD";
    src: url("../fonts/Vazirmatn-FD-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn FD";
    src: url("../fonts/Vazirmatn-FD-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn FD";
    src: url("../fonts/Vazirmatn-FD-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn FD";
    src: url("../fonts/Vazirmatn-FD-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Same typeface with Latin digits: used for technical values (phone numbers, codes, e-mail, URLs)
   that must be shown exactly as stored. Prose uses the "FD" cut above, which draws digits in Persian. */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Amiri";
    src: url("../fonts/Amiri-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Amiri";
    src: url("../fonts/Amiri-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ejz-green-950: #072a20;
    --ejz-green-900: #0b3b2e;
    --ejz-green-800: #0f4c3a;
    --ejz-green-700: #14614a;
    --ejz-green-600: #1b7a5d;
    --ejz-green-200: #c5ddd2;
    --ejz-green-100: #e2efe9;
    --ejz-green-50: #f1f7f4;
    --ejz-gold-700: #8a6a2c;
    --ejz-gold-600: #a8823a;
    --ejz-gold-500: #bf9d58;
    --ejz-gold-300: #dcc693;
    --ejz-gold-100: #f4ead3;
    --ejz-ivory: #f8f5ee;
    --ejz-paper: #fffdf9;
    --ejz-ink: #1c2823;
    --ejz-muted: #5c6b64;
    --ejz-line: #e5dfd1;
    --ejz-danger: #a4322b;
    --ejz-danger-bg: #fbeceb;
    --ejz-warning: #8a5a00;
    --ejz-warning-bg: #fdf3dc;
    --ejz-info: #1f5d86;
    --ejz-info-bg: #e8f1f8;
    --ejz-radius: .75rem;
    --ejz-shadow: 0 1px 2px rgba(11, 59, 46, .05), 0 8px 24px -12px rgba(11, 59, 46, .18);

    --bs-body-font-family: "Vazirmatn FD", Tahoma, "Segoe UI", sans-serif;
    --bs-body-color: var(--ejz-ink);
    --bs-body-bg: var(--ejz-ivory);
    --bs-body-line-height: 1.9;
    --bs-primary: var(--ejz-green-800);
    --bs-primary-rgb: 15, 76, 58;
    --bs-link-color: var(--ejz-green-700);
    --bs-link-color-rgb: 20, 97, 74;
    --bs-link-hover-color: var(--ejz-green-900);
    --bs-link-hover-color-rgb: 11, 59, 46;
    --bs-border-color: var(--ejz-line);
    --bs-border-radius: .5rem;
    --bs-secondary-color: var(--ejz-muted);
    --bs-danger: var(--ejz-danger);
    --bs-danger-rgb: 164, 50, 43;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.6;
    color: var(--ejz-green-900);
}

h1, .h1 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); }
h2, .h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h3, .h3 { font-size: 1.1rem; }

a { text-underline-offset: .25em; }

::selection {
    background: var(--ejz-gold-300);
    color: var(--ejz-green-950);
}

/* Visible, consistent keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--ejz-gold-500);
    outline-offset: 2px;
    border-radius: .25rem;
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--ejz-paper);
    color: var(--ejz-green-900);
    border-radius: .5rem;
    box-shadow: var(--ejz-shadow);
    transition: top .15s ease;
}

.skip-link:focus { top: 1rem; }

.font-display { font-family: "Amiri", "Vazirmatn FD", serif; }

/* Latin codes (tracking numbers, phone numbers, e-mail) keep Latin digits and LTR order */
.code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    direction: ltr;
    unicode-bidi: isolate;
    letter-spacing: .04em;
    font-size: .95em;
    white-space: nowrap;
}

.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
}

.latin-digits { font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; }

.text-muted-2 { color: var(--ejz-muted) !important; }
.text-gold { color: var(--ejz-gold-600) !important; }
.text-green { color: var(--ejz-green-800) !important; }
.pre-line { white-space: pre-line; }
.mw-prose { max-width: 46rem; }
.mw-form { max-width: 26rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    background-color: var(--ejz-green-900);
    background-image: url("../img/pattern-light.svg"), linear-gradient(180deg, var(--ejz-green-950), var(--ejz-green-800));
    background-size: 72px 72px, cover;
    color: #fff;
    border-bottom: 3px solid var(--ejz-gold-500);
}

.site-header .navbar { --bs-navbar-padding-y: .65rem; }

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}

.brand:hover, .brand:focus { color: #fff; }

.brand-emblem {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
}

@media (max-width: 575.98px) {
    .brand-emblem { width: 3rem; height: 3rem; }
}

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.brand-title { font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.brand-subtitle { font-size: .74rem; color: var(--ejz-gold-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-header .nav-link {
    color: rgba(255, 255, 255, .86);
    font-weight: 500;
    padding-inline: .9rem !important;
    border-radius: .5rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
.site-header .nav-link.active { color: #fff; background: rgba(255, 255, 255, .12); }

.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    padding: .35rem .6rem;
}

.site-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(191, 157, 88, .5); }

/* ── Main / footer ──────────────────────────────────────────────────────── */
.site-main { flex: 1 0 auto; padding-block: 2rem 3.5rem; }

.site-footer {
    background: var(--ejz-green-950);
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    padding-block: 1.75rem;
    border-top: 3px solid var(--ejz-gold-500);
}

.site-footer a { color: var(--ejz-gold-300); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* ── Ornament ───────────────────────────────────────────────────────────── */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    color: var(--ejz-gold-500);
    margin-block: 1.25rem;
}

.ornament::before,
.ornament::after {
    content: "";
    height: 1px;
    flex: 1 1 0;
    max-width: 9rem;
    background: linear-gradient(to left, transparent, currentColor);
}

.ornament::after { background: linear-gradient(to right, transparent, currentColor); }
.ornament svg { width: 1.6rem; height: 1.6rem; flex: none; }
.ornament-start { justify-content: flex-start; }
.ornament-start::before { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    background-color: var(--ejz-green-900);
    background-image: url("../img/pattern-light.svg"), radial-gradient(120% 140% at 50% 0%, var(--ejz-green-700) 0%, var(--ejz-green-950) 70%);
    background-size: 72px 72px, cover;
    color: #fff;
    text-align: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    margin-top: -2rem;
    margin-bottom: 2.5rem;
}

.hero-bismillah { font-family: "Amiri", serif; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); color: var(--ejz-gold-300); line-height: 1.7; }
.hero h1 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.5rem); margin-block: .5rem; }
.hero-office { color: var(--ejz-gold-300); font-weight: 500; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); }
.hero-lead { color: rgba(255, 255, 255, .82); max-width: 40rem; margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-border-radius: .6rem;
    min-height: 2.75rem; /* comfortable touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-sm { min-height: 2.25rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .8rem; }
.btn-lg { min-height: 3.25rem; --bs-btn-padding-x: 1.75rem; }

.btn-primary {
    --bs-btn-bg: var(--ejz-green-800);
    --bs-btn-border-color: var(--ejz-green-800);
    --bs-btn-hover-bg: var(--ejz-green-900);
    --bs-btn-hover-border-color: var(--ejz-green-900);
    --bs-btn-active-bg: var(--ejz-green-950);
    --bs-btn-active-border-color: var(--ejz-green-950);
    --bs-btn-disabled-bg: var(--ejz-green-700);
    --bs-btn-disabled-border-color: var(--ejz-green-700);
    --bs-btn-focus-shadow-rgb: 191, 157, 88;
}

.btn-outline-primary {
    --bs-btn-color: var(--ejz-green-800);
    --bs-btn-border-color: var(--ejz-green-800);
    --bs-btn-hover-bg: var(--ejz-green-800);
    --bs-btn-hover-border-color: var(--ejz-green-800);
    --bs-btn-active-bg: var(--ejz-green-900);
    --bs-btn-active-border-color: var(--ejz-green-900);
    --bs-btn-focus-shadow-rgb: 191, 157, 88;
}

.btn-gold {
    --bs-btn-color: var(--ejz-green-950);
    --bs-btn-bg: var(--ejz-gold-500);
    --bs-btn-border-color: var(--ejz-gold-500);
    --bs-btn-hover-color: var(--ejz-green-950);
    --bs-btn-hover-bg: var(--ejz-gold-300);
    --bs-btn-hover-border-color: var(--ejz-gold-300);
    --bs-btn-active-color: var(--ejz-green-950);
    --bs-btn-active-bg: var(--ejz-gold-300);
    --bs-btn-active-border-color: var(--ejz-gold-300);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.btn-ghost-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: var(--ejz-green-950);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--ejz-green-950);
    --bs-btn-active-bg: #fff;
}

.btn-link { --bs-btn-font-weight: 500; text-decoration: none; }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.panel {
    background: var(--ejz-paper);
    border: 1px solid var(--ejz-line);
    border-radius: var(--ejz-radius);
    box-shadow: var(--ejz-shadow);
}

.panel-body { padding: clamp(1rem, .8rem + 1.2vw, 1.75rem); }

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .9rem clamp(1rem, .8rem + 1.2vw, 1.75rem);
    border-bottom: 1px solid var(--ejz-line);
}

.panel-header h2, .panel-header h3 { margin: 0; font-size: 1.05rem; }
.panel-accent { border-top: 3px solid var(--ejz-gold-500); }

.panel-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-inline-end: .5rem;
    border-radius: 50%;
    background: var(--ejz-green-50);
    color: var(--ejz-green-700);
    font-size: 1rem;
}

.page-head { margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .25rem; }
.page-head p { color: var(--ejz-muted); margin: 0; }

.feature {
    height: 100%;
    padding: 1.5rem;
    text-align: center;
}

.feature-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    border: 1px solid var(--ejz-gold-300);
    background: var(--ejz-gold-100);
    color: var(--ejz-gold-700);
    font-weight: 700;
    font-size: 1.15rem;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    --bs-alert-border-radius: .65rem;
    --bs-alert-padding-y: .85rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border-width: 1px;
    border-inline-start-width: 4px;
}

.alert > .bi { font-size: 1.2rem; line-height: 1.6; flex: none; }
.alert-success { --bs-alert-color: #134e3a; --bs-alert-bg: var(--ejz-green-50); --bs-alert-border-color: var(--ejz-green-600); }
.alert-danger { --bs-alert-color: #7a211c; --bs-alert-bg: var(--ejz-danger-bg); --bs-alert-border-color: var(--ejz-danger); }
.alert-warning { --bs-alert-color: #6b4600; --bs-alert-bg: var(--ejz-warning-bg); --bs-alert-border-color: #c98a11; }
.alert-info { --bs-alert-color: #164a6b; --bs-alert-bg: var(--ejz-info-bg); --bs-alert-border-color: var(--ejz-info); }
.alert .btn-close { margin-inline-start: auto; }
.alert ul { margin: .25rem 0 0; padding-inline-start: 1.1rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-label { font-weight: 600; margin-bottom: .35rem; color: var(--ejz-green-900); }
.form-label .req { color: var(--ejz-danger); margin-inline-start: .15rem; }
legend.form-label { float: none; width: auto; font-size: 1rem; line-height: inherit; }
.form-text { color: var(--ejz-muted); font-size: .82rem; }

.form-control, .form-select {
    min-height: 2.9rem;
    border-color: #cfc8b7;
    background-color: #fff;
    border-radius: .55rem;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ejz-green-600);
    box-shadow: 0 0 0 .2rem rgba(27, 122, 93, .2);
}

.form-check-input { border-color: #b9b19c; width: 1.2em; height: 1.2em; margin-top: .35em; }
.form-check-input:checked { background-color: var(--ejz-green-800); border-color: var(--ejz-green-800); }
.form-check-label { padding-inline-start: .15rem; }

textarea.form-control { min-height: 7rem; line-height: 1.9; }

.input-ltr { direction: ltr; text-align: left; font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; }
.input-ltr::placeholder { text-align: right; direction: rtl; }

.field-error, .field-validation-error {
    display: block;
    margin-top: .3rem;
    color: var(--ejz-danger);
    font-size: .85rem;
    font-weight: 500;
}

.field-validation-valid { display: none; }
.input-validation-error { border-color: var(--ejz-danger) !important; background-color: #fffafa; }
.validation-summary-valid { display: none; }

/* A typed value repeated inside the confirmation dialog (data-confirm-echo). */
.confirm-echo {
    margin: .9rem 0 0;
    padding: .55rem .8rem;
    border: 1px solid var(--ejz-gold-300);
    border-radius: .5rem;
    background-color: var(--ejz-gold-100);
    overflow-wrap: anywhere;
}

.otp-input {
    direction: ltr;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .55em;
    padding-inline-start: .55em; /* optically centre the tracked digits */
    min-height: 3.5rem;
}

.choice-group { display: flex; flex-wrap: wrap; gap: .5rem; }

.choice {
    position: relative;
    flex: 1 1 8rem;
}

.choice input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.9rem;
    padding: .4rem .9rem;
    border: 1px solid #cfc8b7;
    border-radius: .55rem;
    background: #fff;
    font-weight: 500;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.choice input:checked + span {
    background: var(--ejz-green-800);
    border-color: var(--ejz-green-800);
    color: #fff;
}

.choice input:focus-visible + span { outline: 3px solid var(--ejz-gold-500); outline-offset: 2px; }

.date-fields { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: .5rem; }
/* Compact variant (filters): proportional columns that always fit the available width, and a tighter
   chevron gutter so day / month / year stay readable at ~17rem. */
.date-fields.compact { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 5fr); gap: .4rem; }

.date-fields.compact .form-select {
    min-height: 2.4rem;
    padding: .25rem .6rem .25rem 1.6rem;
    background-position: left .45rem center;
    font-size: .9rem;
}

.repeat-item {
    position: relative;
    padding: 1.1rem 1.1rem .4rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ejz-line);
    border-inline-start: 3px solid var(--ejz-gold-500);
    border-radius: .65rem;
    background: #fff;
}

.repeat-item-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.repeat-item-title { font-weight: 700; color: var(--ejz-green-900); }

/* ── Wizard stepper ─────────────────────────────────────────────────────── */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .4rem;
    counter-reset: step;
}

.steps li { flex: none; scroll-snap-align: center; counter-increment: step; }

/* position: relative keeps absolutely-positioned children (.visually-hidden labels) inside the scroller;
   otherwise they escape its clipping and widen the whole page on small screens. */
.steps, .step { position: relative; }

.step {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .8rem .45rem .95rem;
    border-radius: 2rem;
    border: 1px solid var(--ejz-line);
    background: var(--ejz-paper);
    color: var(--ejz-muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
}

.step::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--ejz-green-50);
    color: var(--ejz-green-700);
    font-weight: 700;
    font-size: .85rem;
    flex: none;
}

.step:hover { border-color: var(--ejz-green-200); color: var(--ejz-green-900); }
.step.is-done { color: var(--ejz-green-800); border-color: var(--ejz-green-200); }
.step.is-done::before { content: "✓"; background: var(--ejz-green-600); color: #fff; }

.step.is-current {
    background: var(--ejz-green-800);
    border-color: var(--ejz-green-800);
    color: #fff;
    font-weight: 600;
}

.step.is-current::before { background: var(--ejz-gold-500); color: var(--ejz-green-950); }

@media (min-width: 992px) {
    .steps { flex-direction: column; overflow: visible; gap: .35rem; }
    .step { border-radius: .6rem; white-space: normal; }
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ejz-line);
}

.wizard-actions .btn-group-end { display: flex; flex-wrap: wrap; gap: .6rem; margin-inline-start: auto; }

@media (max-width: 575.98px) {
    .wizard-actions, .wizard-actions .btn-group-end { flex-direction: column-reverse; align-items: stretch; width: 100%; }
    .wizard-actions .btn { width: 100%; }
}

/* ── Status badges ──────────────────────────────────────────────────────── */
.status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .75rem;
    border-radius: 2rem;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-draft { background: #efece4; color: #57534a; border-color: #dcd6c6; }
.status-submitted { background: var(--ejz-info-bg); color: var(--ejz-info); border-color: #bcd6e8; }
.status-review { background: var(--ejz-warning-bg); color: var(--ejz-warning); border-color: #f0d9a1; }
.status-rejected { background: var(--ejz-danger-bg); color: var(--ejz-danger); border-color: #efc5c1; }
.status-resubmitted { background: #efe9f8; color: #5a3b8c; border-color: #d9cbee; }
.status-approved, .status-active { background: var(--ejz-green-100); color: var(--ejz-green-800); border-color: var(--ejz-green-200); }
.status-inactive { background: #efece4; color: #6b4a45; border-color: #dccbc6; }
.status-lg { font-size: 1rem; padding: .4rem 1.1rem; }

/* ── Definition list (label / value) ────────────────────────────────────── */
.fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .15rem 1.5rem;
    margin: 0;
}

.fields > div { padding-block: .55rem; border-bottom: 1px dashed var(--ejz-line); min-width: 0; }
.fields > div.wide { grid-column: 1 / -1; }
.fields dt { font-size: .8rem; font-weight: 500; color: var(--ejz-muted); margin-bottom: .1rem; }
.fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fields dd.is-empty { color: #a39f94; font-weight: 400; }

.key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; margin: 0; }
.key-facts dt { font-size: .78rem; color: var(--ejz-muted); font-weight: 500; }
.key-facts dd { margin: 0; font-weight: 700; color: var(--ejz-green-900); }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
    position: relative;
    padding: 0 1.6rem 1.25rem 0;
    border-inline-start: 0;
}

.timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: .28rem;
    top: 1.1rem;
    bottom: -.2rem;
    width: 2px;
    background: var(--ejz-line);
}

.timeline li:last-child::before { display: none; }

.timeline li::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .55rem;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--ejz-paper);
    border: 2px solid var(--ejz-gold-500);
}

.timeline .tl-title { font-weight: 600; }
.timeline .tl-meta { font-size: .8rem; color: var(--ejz-muted); }

.timeline .tl-reason {
    margin-top: .4rem;
    padding: .6rem .8rem;
    background: var(--ejz-danger-bg);
    border-radius: .5rem;
    color: #7a211c;
    font-size: .9rem;
    white-space: pre-line;
}

/* ── Documents ──────────────────────────────────────────────────────────── */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1rem; }

.doc-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ejz-line);
    border-radius: .65rem;
    background: #fff;
    overflow: hidden;
}

.doc-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--ejz-green-50);
    overflow: hidden;
}

.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-meta { padding: .6rem .75rem; font-size: .84rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.doc-meta strong { font-size: .92rem; color: var(--ejz-green-900); }
.doc-actions { display: flex; gap: .4rem; padding: 0 .75rem .75rem; }
.doc-actions > * { flex: 1; }

.upload-box {
    border: 1.5px dashed var(--ejz-gold-500);
    border-radius: .75rem;
    background: var(--ejz-gold-100);
    padding: 1.1rem;
}

.upload-preview { max-width: 12rem; border-radius: .5rem; border: 1px solid var(--ejz-line); }

/* ── Tables that turn into cards on small screens ───────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(15, 76, 58, .025);
    --bs-table-hover-bg: rgba(191, 157, 88, .09);
    margin: 0;
    vertical-align: middle;
}

.table > thead th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ejz-muted);
    background: var(--ejz-green-50);
    border-bottom: 1px solid var(--ejz-line);
    white-space: nowrap;
    padding-block: .7rem;
}

.table > tbody td { padding-block: .7rem; border-color: var(--ejz-line); }
.table .cell-actions { text-align: end; white-space: nowrap; }

@media (max-width: 767.98px) {
    .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }

    .table-cards tr {
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--ejz-line);
    }

    .table-cards tr:last-child { border-bottom: 0; }

    .table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .3rem 0 !important;
        border: 0;
        text-align: end;
    }

    .table-cards td::before {
        content: attr(data-label);
        flex: none;
        font-size: .78rem;
        font-weight: 500;
        color: var(--ejz-muted);
        text-align: start;
    }

    .table-cards td.cell-actions { justify-content: flex-end; padding-top: .6rem !important; }
    .table-cards td.cell-actions::before { display: none; }
    .table-cards td.cell-main { font-weight: 700; font-size: 1rem; }
}

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ejz-muted); }
.empty-state .bi { font-size: 2.2rem; color: var(--ejz-gold-500); display: block; margin-bottom: .5rem; }

.pagination {
    --bs-pagination-color: var(--ejz-green-800);
    --bs-pagination-hover-color: var(--ejz-green-900);
    --bs-pagination-hover-bg: var(--ejz-green-50);
    --bs-pagination-focus-color: var(--ejz-green-900);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(191, 157, 88, .4);
    --bs-pagination-active-bg: var(--ejz-green-800);
    --bs-pagination-active-border-color: var(--ejz-green-800);
    --bs-pagination-border-color: var(--ejz-line);
    --bs-pagination-bg: var(--ejz-paper);
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
}

.pagination .page-link { border-radius: .5rem !important; min-width: 2.5rem; text-align: center; }

/* ── Filters ────────────────────────────────────────────────────────────── */
/* Flex-wrap rather than an auto-fit grid: every field keeps at least the width it really needs and moves
   to the next line when the row is full. (A three-part date needs ~17.5rem; in equal 11rem grid columns it
   spilled over its neighbours.) */
.filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.filters > * { flex: 1 1 11rem; min-width: 0; max-width: 18rem; margin: 0; }
.filters > .filter-wide { flex: 2 1 18rem; max-width: 34rem; }
.filters > fieldset { flex: 0 1 17.5rem; min-width: min(17.5rem, 100%); max-width: none; }
.filters > .filter-actions { flex: 0 0 auto; max-width: none; display: flex; gap: .5rem; }
.filters .filter-actions .btn { white-space: nowrap; }
.filters .form-label { font-size: .8rem; margin-bottom: .2rem; }
.filters .form-control, .filters .form-select { min-height: 2.4rem; padding-block: .3rem; font-size: .92rem; }

@media (max-width: 575.98px) {
    .filters > *, .filters > .filter-wide, .filters > fieldset { flex: 1 1 100%; max-width: none; }
    .filters > .filter-actions { flex: 1 1 100%; }
    .filters .filter-actions .btn { flex: 1 1 0; }
}

/* ── Auth card ──────────────────────────────────────────────────────────── */
.auth-wrap { max-width: 27rem; margin-inline: auto; }
.auth-card { padding: clamp(1.5rem, 1rem + 3vw, 2.5rem); text-align: center; }
.auth-card form { text-align: start; }
.auth-emblem { width: 7.5rem; height: 7.5rem; margin-bottom: .5rem; }

/* ── Certificate preview on the public verification page ───────────────── */
.verify-card { max-width: 40rem; margin-inline: auto; text-align: center; }

.verify-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-size: 2.4rem;
    margin-bottom: .75rem;
}

.verify-seal.ok { background: var(--ejz-green-100); color: var(--ejz-green-700); }
.verify-seal.off { background: var(--ejz-danger-bg); color: var(--ejz-danger); }
.verify-seal.none { background: #efece4; color: #7a7466; }

/* ── Admin shell ────────────────────────────────────────────────────────── */
.admin-body { background: #f4f1e9; }
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
    --bs-offcanvas-width: 17rem;
    --bs-offcanvas-bg: var(--ejz-green-950);
    --bs-offcanvas-color: #fff;
    background-color: var(--ejz-green-950);
    background-image: url("../img/pattern-light.svg");
    background-size: 72px 72px;
    color: #fff;
}

@media (min-width: 992px) {
    /* Bootstrap forces a transparent background on responsive off-canvas panels from this breakpoint up;
       the two-class selector restores the sidebar colour. */
    .admin-sidebar.offcanvas-lg {
        position: sticky;
        top: 0;
        width: 17rem;
        height: 100vh;
        flex: none;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        background-color: var(--ejz-green-950) !important;
    }
}

.admin-brand { padding: 1.1rem 1.1rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.admin-brand .brand-title { font-size: .98rem; }

.admin-nav { list-style: none; margin: 0; padding: .9rem .7rem; display: flex; flex-direction: column; gap: .2rem; }
.admin-nav-title { padding: .9rem .7rem .3rem; font-size: .72rem; color: var(--ejz-gold-300); font-weight: 600; letter-spacing: .02em; }

.admin-nav a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    border-radius: .55rem;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-weight: 500;
    font-size: .93rem;
}

.admin-nav a:hover, .admin-nav a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav a.active { background: var(--ejz-gold-500); color: var(--ejz-green-950); font-weight: 700; }
.admin-nav a .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }

.admin-nav .count {
    margin-inline-start: auto;
    min-width: 1.6rem;
    padding: 0 .45rem;
    border-radius: 1rem;
    background: var(--ejz-gold-500);
    color: var(--ejz-green-950);
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}

.admin-nav a.active .count { background: var(--ejz-green-950); color: #fff; }

.admin-sidebar-foot { margin-top: auto; padding: .9rem 1.1rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }
.admin-sidebar-foot .who { font-weight: 600; }
.admin-sidebar-foot .role { color: var(--ejz-gold-300); font-size: .78rem; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: var(--ejz-green-900);
    color: #fff;
    border-bottom: 3px solid var(--ejz-gold-500);
}

.admin-content { padding: clamp(1rem, .6rem + 1.6vw, 2rem); flex: 1; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }

.stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.1rem;
    background: var(--ejz-paper);
    border: 1px solid var(--ejz-line);
    border-radius: var(--ejz-radius);
    border-top: 3px solid var(--stat-color, var(--ejz-green-600));
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ejz-shadow);
    transition: transform .12s ease, box-shadow .12s ease;
}

a.stat:hover { transform: translateY(-2px); color: inherit; box-shadow: 0 2px 4px rgba(11, 59, 46, .06), 0 14px 28px -14px rgba(11, 59, 46, .3); }
.stat-icon { font-size: 1.25rem; color: var(--stat-color, var(--ejz-green-600)); }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.3; color: var(--ejz-green-950); }
.stat-label { font-size: .84rem; color: var(--ejz-muted); font-weight: 500; }
.stat-info { --stat-color: var(--ejz-info); }
.stat-warning { --stat-color: #c98a11; }
.stat-danger { --stat-color: var(--ejz-danger); }
.stat-purple { --stat-color: #6b4aa8; }
.stat-gold { --stat-color: var(--ejz-gold-600); }
.stat-muted { --stat-color: #8d8778; }

.change-list { list-style: none; margin: 0; padding: 0; }
.change-list li { padding: .55rem 0; border-bottom: 1px dashed var(--ejz-line); }
.change-list li:last-child { border-bottom: 0; }
.change-old { color: var(--ejz-danger); text-decoration: line-through; text-decoration-color: rgba(164, 50, 43, .45); }
.change-new { color: var(--ejz-green-800); font-weight: 600; }

.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: rgba(255, 253, 249, .96); backdrop-filter: blur(6px); border-top: 1px solid var(--ejz-line); }

.meta-json {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .76rem;
    direction: ltr;
    text-align: left;
    color: var(--ejz-muted);
    overflow-wrap: anywhere;
}

.modal-content { border: 0; border-radius: var(--ejz-radius); box-shadow: 0 24px 60px -20px rgba(7, 42, 32, .5); }
.modal-header { border-bottom-color: var(--ejz-line); }
.modal-footer { border-top-color: var(--ejz-line); }

.dropdown-menu { --bs-dropdown-border-color: var(--ejz-line); --bs-dropdown-link-active-bg: var(--ejz-green-800); box-shadow: var(--ejz-shadow); border-radius: .65rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .site-header, .site-footer, .admin-sidebar, .admin-topbar, .no-print { display: none !important; }
    body { background: #fff; }
    .panel { box-shadow: none; border-color: #ccc; }
}