/* ==========================================================================
   Page: Certificate/Verification (public "verification request status" inquiry)
   --------------------------------------------------------------------------
   Page-specific adjustments only. The card is the shared
   .ms-form-card--sectioned variant (mosadaqa-forms.css). Result panels
   (.degrees-report, Angular ng-if) keep their legacy look; only their mobile
   column hacks are re-scoped here. Scoped to .ms-page-verification.
   Depends on: mosadaqa-tokens.css, mosadaqa-forms.css.
   ========================================================================== */

/* Canvas: no illustration, content centred */
.ms-page-verification .musadqa-container {
    background-image: none !important; /* legacy sets the illustration with !important */
    background-color: transparent;
    box-shadow: none;
    padding: 0 !important;
    justify-content: center;
    align-items: flex-start;
    gap: var(--mosadaqa-space-5);
}

/* Legacy .panel wrapper around the form (direct child only — result panels nest their own .panel) */
.ms-page-verification .musadqa-container > .panel.panel-default {
    flex: 0 1 560px;
    width: 100%;
    max-width: 560px;
    margin: 0;
}

.ms-page-verification .login-box {
    max-width: none;
}

/* Required markers (both fields are ng-required) */
.ms-page-verification .ms-field label::after {
    content: " *";
    color: var(--mosadaqa-danger);
    font-weight: 700;
}

.ms-page-verification .ms-field .MB25 {
    margin-bottom: 0;
}

/* Spacer <br> / .PV10 in the legacy markup add uneven gaps */
.ms-page-verification .ms-form-card br,
.ms-page-verification .ms-form-card .PV10 {
    display: none;
}

/* Result panels (.degrees-report — Angular ng-if): full-width cards below the form.
   The legacy bilingual layout (direction: rtl, EN/AR label columns) is kept; only the frame changes. */
.ms-page-verification .musadqa-container {
    flex-direction: column;
    align-items: center;
}

.ms-page-verification .musadqa-container > .panel.panel-default {
    order: -1; /* inquiry form stays first; results render beneath it */
}

.ms-page-verification .degrees-report {
    width: 100%;
    max-width: 1040px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Bilingual report: EN label | EN value | AR value | AR label (Arabic pinned right) in BOTH locales.
       Legacy bundles flip this per locale (rtl file: ltr, ltr file: rtl) — pin it here. */
    direction: ltr;
    background: var(--mosadaqa-white);
    border: 1px solid var(--mosadaqa-line);
    border-radius: 20px;
    box-shadow: var(--mosadaqa-shadow-md);
}

.ms-page-verification .degrees-report::before {
    display: none; /* legacy diploma badge overlapping the corner */
}

/* Physical alignment inside the report: bs4-compat flips .text-left/right on dir="ltr" pages */
.ms-page-verification .degrees-report .text-left {
    text-align: left !important;
}

.ms-page-verification .degrees-report .text-right {
    text-align: right !important;
}

.ms-page-verification .degrees-report > .panel {
    width: 100%;
    max-width: none;
    flex: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* bilingual head: "Request Info" / "بيانات الطلب" */
.ms-page-verification .degrees-report .panel-heading {
    margin: 0;
    padding: var(--mosadaqa-space-5) var(--mosadaqa-space-6);
    background: var(--mosadaqa-white);
    border-bottom: 1px solid var(--mosadaqa-line);
    font-size: 20px;
    font-weight: 700;
    color: var(--mosadaqa-dark);
}

.ms-page-verification .degrees-report .panel-heading hr {
    display: none;
}

.ms-page-verification .degrees-report .panel-body {
    padding: var(--mosadaqa-space-5) var(--mosadaqa-space-6) var(--mosadaqa-space-6);
    background: var(--mosadaqa-bg);
}

/* status banner */
.ms-page-verification .degrees-report .alert {
    margin: 0 0 var(--mosadaqa-space-5);
    padding: var(--mosadaqa-space-4) var(--mosadaqa-space-5);
    font-size: var(--mosadaqa-text-md);
    line-height: 2;
    border-radius: 14px;
    border: 1px solid transparent;
}

.ms-page-verification .degrees-report .alert-success {
    color: #1f6b45;
    background: #eaf7ef;
    border-color: #c5e6d2;
}

.ms-page-verification .degrees-report .alert-warning {
    color: #7a5a12;
    background: #fff7e6;
    border-color: #f3dfae;
}

.ms-page-verification .degrees-report .alert-danger {
    color: #8f2d26;
    background: #fdf1f0;
    border-color: #f5d5d2;
}

.ms-page-verification .degrees-report .alert b {
    font-weight: 700;
}

.ms-page-verification .degrees-report .alert .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--mosadaqa-space-2);
    padding: 8px 16px;
    font-size: var(--mosadaqa-text-sm);
    font-weight: 700;
    color: var(--mosadaqa-blue-dark);
    background: var(--mosadaqa-white);
    border: 1px solid var(--mosadaqa-line);
    border-radius: 999px;
    text-decoration: none;
}

.ms-page-verification .degrees-report .alert .link:hover {
    background: var(--mosadaqa-soft);
    border-color: var(--mosadaqa-blue);
}

/* data rows: EN label | EN value | AR value | AR label */
.ms-page-verification .degrees-report .panel-body > .row {
    margin: 0;
    padding: 12px 0;
    align-items: baseline;
    font-size: var(--mosadaqa-text-md);
    color: var(--mosadaqa-ink);
    border-bottom: 1px solid var(--mosadaqa-line);
}

.ms-page-verification .degrees-report .panel-body > .row:last-child {
    border-bottom: 0;
}

.ms-page-verification .degrees-report .panel-body > .row > [class*="col-"] {
    padding-block: 2px;
}

.ms-page-verification .degrees-report .panel-body > .row b {
    font-size: var(--mosadaqa-text-sm);
    font-weight: 700;
    color: var(--mosadaqa-blue-dark);
    letter-spacing: 0.01em;
}

/* Bilingual 4-column result rows on narrow screens (moved from the view's inline style) */
@media (max-width: 480px) {
    .ms-page-verification .degrees-report {
        font-size: 0.8rem;
    }

    .ms-page-verification .degrees-report .col-md-2 {
        flex: 0 0 20.666667%;
        max-width: 20.666667%;
        padding: 0 !important;
    }

    .ms-page-verification .degrees-report .col-md-4 {
        flex: 0 0 26.333333%;
        max-width: 26.333333%;
        padding: 0 !important;
    }

    .ms-page-verification .degrees-report .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 !important;
    }

    .ms-page-verification .degrees-report .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 !important;
    }
}